この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

lightning:datatable

型に応じて書式設定されたデータの列を表示するテーブルです。このコンポーネントでは、API バージョン 41.0 以降が必要です。

lightning:datatable コンポーネントには、表形式データが表示され、そこにデータ型に応じて各列が表示されます。たとえば、email 型を指定すると、mailto: URL スキームが付いているハイパーリンクとしてメールアドレスを表示します。デフォルトの型は text です。

このコンポーネントは、Lightning Design System のデータテーブルからスタイル設定を継承します。

インライン編集は現在サポートされていません。次の機能がサポートされています。

適用するデータ型による列の表示と書式設定
列のサイズ変更
行の選択
昇順または降順による列の並び替え

テーブルは、data、columns、keyField 属性を使用して、初期化中に生成されます。この例では、6 つの列を含むテーブルが作成され、1 列目に行選択のチェックボックスが表示されます。テーブルデータは、init ハンドラを使用して読み込まれます。チェックボックスをオンにすると、データの行全体が選択されて、onrowselection イベントハンドラをトリガできます。

1<aura:component>
2    <aura:attribute name="mydata" type="Object"/>
3    <aura:attribute name="mycolumns" type="List"/>
4    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
5    <lightning:datatable data="{! v.mydata }" columns="{! v.mycolumns }" onrowselection="{! c.getSelectedName }"/>
6</aura:component>

選択可能な行と columns オブジェクトを、対応する列データに作成するクライアント側コントローラを次に示します。

1({
2    init: function (cmp, event, helper) {
3    cmp.set('v.mycolumns', [
4                {label: 'Opportunity name', fieldName: 'opportunityName', type: 'text'},
5                {label: 'Confidence', fieldName: 'confidence', type: 'percent'},
6                {label: 'Amount', fieldName: 'amount', type: 'currency', cellAttributes: { currencyCode: 'EUR'}},
7                {label: 'Contact Email', fieldName: 'contact', type: 'email'},
8                {label: 'Contact Phone', fieldName: 'phone', type: 'phone'}
9            ]);
10        cmp.set('v.mydata', [{
11                id: 'a',
12                opportunityName: 'Cloudhub',
13                confidence: 0.2,
14                amount: 25000,
15                contact: 'jrogers@cloudhub.com',
16                phone: '2352235235'
17            },
18            {
19                id: 'b',
20                opportunityName: 'Quip',
21                confidence: 0.78,
22                amount: 740000,
23                contact: 'quipy@quip.com',
24                phone: '2352235235'
25            }]);
26    },
27    getSelectedName: function (cmp, event) {
28        var selectedRows = event.getParam('selectedRows');
29        // Display that fieldName of the selected rows
30        for (var i = 0; i < selectedRows.length; i++){
31            alert("You selected: " + selectedRows[i].opportunityName);
32        }
33    }
34})

前述の例では、データの 1 行目では、1 列目にチェックボックスが表示されて、Cloudhub、20%、$25,000.00、jrogers@cloudhub.com、(235) 223-5235 というデータを含む列が表示されます。最後の 2 列は、メールアドレスと電話番号のハイパーリンクとして表示されます。

列データの操作

列データを提供するほか、次の列プロパティを定義する必要があります。

label: 必須。列ヘッダーに表示されるテキスト表示ラベル。
fieldName: 必須。列プロパティを関連データに結びつけるための名前。columns プロパティはそれぞれ、データ配列の項目に対応している必要があります。
type: 必須。データ書式設定に使用するデータ型。
initialWidth: 初期化されたときの列幅。minColumnWidth および maxColumnWidth 値の範囲内、またはそれらが指定されていない場合は、50px および 1000px の範囲内である必要があります。
cellAttributes: データ型のコンポーネント属性にカスタム書式設定を提供します。たとえば、currency 型の場合、currencyCode です。
sortable: 列による並べ替えを有効にするかどうかを指定します。デフォルトは false です。

データ型による書式設定

データテーブルは、選択された型に基づいて形式を判断します。各データ型は、Lightning 基本コンポーネントに関連付けられています。たとえば、text 型を指定すると、関連データは lightning:formattedText コンポーネントを使用して表示されます。有効なデータ型は次のとおりです。

text: lightning:formattedText を使用してデータを表示
number: lightning:formattedNumber を使用してデータを表示
currency: lightning:formattedNumber を使用してデータを表示
percent: lightning:formattedNumber を使用してデータを表示
date: lightning:formattedDateTime を使用してデータを表示
email: lightning:formattedEmail を使用してデータを表示 (label 属性はサポートされていません)
phone: lightning:formattedPhone を使用してデータを表示
url: lightning:formattedUrl を使用してデータを表示 (label 属性はサポートされていません)
location: lightning:formattedLocation を使用してデータを表示 (データの形式は {latitude : number, longitude : number} である必要があります)

データ型に基づいた書式設定をカスタマイズするには、対応する Lightning 基本コンポーネントの属性を渡します。たとえば、カスタム currencyCode 値を渡すと、デフォルトの通貨コードが上書きされます。

1columns: [
2    {label: 'Amount', fieldName: 'amount', type: 'currency', cellAttributes: { currencyCode: 'EUR' }}
3]

通貨または日時データ型を使用する場合、ロケールの書式設定が指定されていなければ、デフォルトのユーザロケールが使用されます。

これらの属性の詳細は、対応するコンポーネントのドキュメントを参照してください。

テーブルと列のサイズ変更

データテーブルの幅と高さは、コンテナ要素によって決まります。表示対象の行がさらにある場合は、テーブルボディにスクローラが追加されます。たとえば、コンテナ要素に CSS スタイル設定を適用して、高さを 300px に制限できます。

1<div style="height: 300px;">
2    <!-- lightning:datatable goes here -->
3</div>

デフォルトでは、列はサイズ変更できます。ユーザは、デフォルト値が変更されていない限り、最小 50px および最大 1000px の幅にクリックおよびドラッグできます。列はデフォルトでサイズ変更できます。列のサイズ変更を無効にする場合は、resizeColumnDisabled を true に設定します。最小および最大列幅を変更するには、minColumnWidth および maxColumnWidth 属性を使用します。

列によるデータの並び替え

列表示ラベルを使用して行データを並べ替えられるようにするには、並べ替えを有効にする列の sortable を true に設定します。sortedBy を列の fieldName プロパティに一致するように設定します。defaultSortDirection を変更しない限り、列ヘッダーをクリックすると列は昇順で並べ替えられます。続けてクリックすると、降順になります。onsort イベントハンドラを処理して、新しい列インデックスと並び替えの方向でテーブルを更新します。

onsort イベントハンドラによってコールされるクライアント側コントローラの例を次に示します。

1({
2    // Client-side controller called by the onsort event handler
3    updateColumnSorting: function (cmp, event, helper) {
4        var fieldName = event.getParam('fieldName');
5        var sortDirection = event.getParam('sortDirection');
6        // assign the latest attribute with the sorted column fieldName and sorted direction
7        cmp.set("v.sortedBy", fieldName);
8        cmp.set("v.sortedDirection", sortDirection);
9        helper.sortData(cmp, fieldName, sortDirection);
10    }
11    })

ヘルパー関数は次のとおりです。

1({
2    sortData: function (cmp, fieldName, sortDirection) {
3        var data = cmp.get("v.data");
4        var reverse = sortDirection !== 'asc';
5        //sorts the rows based on the column header that's clicked
6        data.sort(this.sortBy(fieldName, reverse))
7        cmp.set("v.data", data);
8    },
9    sortBy: function (field, reverse, primer) {
10        var key = primer ?
11            function(x) {return primer(x[field])} :
12            function(x) {return x[field]};
13        //checks if the two rows should switch places
14        reverse = !reverse ? 1 : -1;
15        return function (a, b) {
16            return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
17        }
18    }
19})

アクセシビリティ

データテーブルは、キーボードを使用して、ナビゲーションモードとアクションモードで使用できます。ナビゲーションモードを開始するには、Tab キーを押してデータテーブルに切り替えます。テーブルボディの最初のデータセルがフォーカスされます。矢印キーを使用して、テーブルを移動します。

アクションモードでは、列をサイズ変更できます。列のサイズを変更するには、上矢印キーを押してヘッダーに移動します。Enter キーまたはスペースキーを押してアクションモードを開始します。次に、Tab キーを押して列の仕切りを有効化��て、左右矢印を使用して列をサイズ変更します。列のサイズ変更を終了してナビゲーションモードに戻るには、Tab キーを押します。

メソッド

このコンポーネントは、次のメソッドをサポートします。

getSelectedRows(): 各選択行のデータの配列を返します。

属性

属性名	属性型	説明
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントの基本クラスに加え、外部要素の CSS クラス。
`title`	String	マウスポインタが要素に重ねられたときにツールチップテキストを表示します。
`columns`	List	データ型を定義するために使用される列オブジェクトの配列。必須プロパティには、「label」、「dataKey」、「type」があります。デフォルトの型は「text」です。
`data`	Object	表示するデータの配列。
`keyField`	String	パフォーマンス向上のために必須。各行を一意の ID に関連付けます。
`hideCheckboxColumn`	Boolean	行選択のチェックボックス列の非表示または表示。チェックボックス列を非表示にするには、hideCheckboxColumn を true に設定します。デフォルトは false です。
`resizeColumnDisabled`	Boolean	列のサイズ変更を無効にするかどうかを指定します。デフォルトは false です。
`minColumnWidth`	Integer	すべての列の最小幅。デフォルト値は 50px です。
`maxColumnWidth`	Integer	すべての列の最大幅。デフォルト値は 1000px です。
`resizeStep`	Integer	ユーザが左または右矢印を押したときの列サイズ変更幅。デフォルト値は 10px です。
`sortedBy`	String	並び順を制御する列 fieldName。onsort イベントハンドラを使用してデータを並び替えます。
`sortedDirection`	String	並び替え順を指定します。onsort イベントハンドラを使用してデータを並び替えます。有効なオプションには、「asc」および「desc」が含まれます。
`defaultSortDirection`	String	並び替えなしの列のデフォルトの並び替えの方向を指定します。有効なオプションには、「asc」および「desc」が含まれます。デフォルトでは、昇順の「asc」です。
`onrowselection`	Aura.Action	行が選択されたときにトリガされるアクション。
`onsort`	Aura.Action	列が並び替えられたときにトリガされるアクション。

Lightning コンポーネント開発者ガイド

lightning:datatable

属性