Main Content

App Designer アプリへのテーブルの追加

App Designer アプリで表形式データを表示するには、テーブル UI コンポーネントを使用します。アプリ ユーザーがアプリで行、列、またはセルの並べ替え、選択、または再配置を行ってそのデータを操作するためのオプションを構成できます。

テーブル UI コンポーネントを App Designer アプリに追加するには、[設計ビュー][コード ビュー] の両方で作業する必要があります。

[設計ビュー] を使用して次を行います。

  • テーブル UI コンポーネントを作成する。

  • 行と列の名前を指定する。

  • 並べ替え可否や編集可否などの対話機能オプションを指定する。

[コード ビュー]StartupFcn コールバックを作成して次を行います。

  • テーブル UI コンポーネントでテーブル データを取り込む。

  • データの外観を構成する。

このページで説明しているすべてのステップの実装を確認するには、アプリでの対話型のテーブルの作成を参照してください。

テーブルの作成およびテーブルの動作の構成

[設計ビュー] で、次の手順に従ってテーブル UI コンポーネントをアプリに追加します。

  1. [テーブル] コンポーネントを [コンポーネント ライブラリ] からアプリのキャンバスにドラッグします。

  2. [コンポーネント ブラウザー] で、テーブル UI コンポーネントを選択します。

  3. テーブルの列情報を構成するには、列関連のテーブル プロパティの右にある vertical ellipsis ボタンをクリックします。エディターを使用してテーブルの列を対話的に追加および名前変更します。ユーザーがアプリでテーブルを操作する際に、列の編集可否や並べ替え可否など、対話機能オプションを列ごとに指定することもできます。

    Component Browser with a table UI component selected and the table column editor open

  4. 行名を構成するには、[コンポーネント ブラウザー][RowName] フィールドを使用します。ただし、行名は、アプリの実行時にテーブルにデータが取り込まれた後にしか表示されないため、[設計ビュー] では表示されません。

テーブル データの取り込み

[コード ビュー] で、次の手順を使用して StartupFcn コールバックでテーブル データを取り込みます。このコールバックは、ユーザーがアプリを実行したときに実行されます。

  1. [コンポーネント ブラウザー] で、アプリ ノードを右クリックして [コールバック][StartupFcn コールバックの追加] を選択します。アプリ ノードの名前は、MLAPP ファイルと同じです。

    Context menu for the app node in the Component Browser

  2. [コードビュー]startupFcn コールバックのコードで、Data プロパティを使用してテーブル データをテーブル UI コンポーネントにプログラムで割り当てます。たとえば、次のコードでは、患者のサンプル データを読み取ってテーブルにそのデータを取り込みます。また、テーブル UI コンポーネントでデータのサブセットも表示されます。

    function startupFcn(app)
        % Read table array from file
        t = readtable("patients.xls");
        vars = {'Age','Systolic','SelfAssessedHealthStatus','Smoker'};
        t = t(1:20,vars);
    
        % Add data to the table UI Component
        app.UITable.Data = t;
    end

    テーブル UI コンポーネントでテーブル データを表示する方法の詳細については、アプリ内での表形式データの書式設定を参照してください。

  3. オプションとして、startupFcn コールバックのコードで、uistyle を使用してテーブル データを表示する方法を変更します。たとえば、次のコードを StartupFcn コールバックに追加して、テーブルの最初の列の背景色およびフォントの色を変更します。

    s = uistyle("BackgroundColor","black","FontColor","white");
    addStyle(app.UITable,s,"column",1);
    詳細については、テーブル UI コンポーネントのセルのスタイル設定を参照してください。

startupFcn コールバックの完全にコード化された例については、アプリでの対話型のテーブルの作成を参照してください。

参考

関数

プロパティ

関連するトピック