Main Content

앱에서 대화형 방식의 테이블 만들기

테이블은 테이블 형식 데이터를 저장하고 표시하는 데 유용합니다. 이 예제에서는 테이블 UI 컴포넌트를 사용하여 앱에 데이터를 표시하는 방법을 다룹니다. 앱 사용자가 데이터를 정렬하거나 편집하여 테이블과 상호 작용할 수 있도록 테이블을 구성할 수도 있습니다.

앱 개요

이 앱은 시작될 때 환자 데이터의 스프레드시트를 table형 배열로 불러옵니다. 그런 다음 table형 배열에서 데이터 일부를 표시하고 플로팅합니다. 실행 중에 앱 사용자가 테이블 UI 컴포넌트에서 값을 편집하거나 열을 정렬하면 플롯 중 하나가 업데이트됩니다. 이 앱은 비교를 위해 원래 데이터의 플롯을 제공합니다.

테이블이 있는 앱 만들기

테이블 UI 컴포넌트에서 환자 데이터를 표시하고 대화형 기능을 활성화합니다.

  1. 디자인 보기에서 앱 캔버스에 테이블을 추가하고 컴포넌트 브라우저에서 테이블을 구성합니다. 4개의 테이블 열 이름을 바꾸고 사용자가 테이블 UI 컴포넌트와 상호 작용할 때 열을 편집하고 정렬할 수 있는지 여부를 지정합니다. 앱 디자이너에서 테이블을 사용하는 방법과 테이블 동작을 구성하는 방법에 대한 자세한 내용은 앱 디자이너로 만든 앱에 테이블 추가하기 항목을 참조하십시오.

  2. startupFcn 콜백 함수 내에서 프로그래밍 방식으로 테이블 UI 컴포넌트를 채웁니다. 컴포넌트 브라우저에서 앱 노드를 마우스 오른쪽 버튼으로 클릭하고 콜백 > StartupFcn 콜백 추가를 선택하여 startupFcn 콜백을 만듭니다. 먼저, 스프레드시트에서 환자 데이터를 불러온 후 Data 속성을 사용하여 프로그래밍 방식으로 이 테이블 형식 데이터를 테이블 UI 컴포넌트에 할당합니다. 테이블 UI 컴포넌트에 테이블 데이터를 표시하는 방법에 대한 자세한 내용은 앱에서 테이블 형식 데이터의 형식 지정하기 항목을 참조하십시오.

function startupFcn(app)
    % Read table array from file
    t = readtable("patients.xls");
    % Configure table appearance
    % ...
    % Add data to the table UI component
    app.UITable.Data = t;
end

테이블 UI 컴포넌트를 추가하고 구성한 후 앱 사용자가 테이블 데이터를 수정할 때 플롯을 업데이트하도록 앱을 프로그래밍합니다. updatePlot이라는 헬퍼 함수 안에, 현재 테이블 데이터를 가져오고 수정된 데이터를 플로팅하는 코드를 추가합니다. 그런 다음 앱 사용자가 updatePlot 헬퍼 함수를 사용하여 테이블 데이터를 변경할 때 플롯을 업데이트하는 UITableDisplayDataChanged라는 콜백 함수를 만듭니다. 콜백에 대한 자세한 내용은 앱 디자이너에서 콜백 사용하기 항목을 참조하십시오.

function UITableDisplayDataChanged(app,event)
    % Update the plots when user sorts the columns of the table
    updatePlot(app);
end

완전하게 코딩된 앱을 보고 탐색하려면 앱 디자이너에서 이 예제를 실행하십시오. 앱을 실행하고 일부 테이블 필드를 편집하여 Updated Data 플롯의 변경 내용을 확인하십시오.

참고 항목

함수

속성

관련 항목