【LWC】lightning-datatableで無限スクロールを実装する【Salesforce】

無限スクロールとは、初めからデータをすべて表示せず、一番下までスクロールされたときに新たなデータを追加で表示する機能です。

今回は lightning-datatable を使って無限スクロールを実装しました。

lightning-datatable で用意されている機能

lightning-datatable では、表の一番下までスクロールされたときにイベントを発生させる機能があらかじめ用意されています。

このイベントが発生したときの処理については自分で実装する必要があります。

実装例

HTMLでは、lightning-datatable に以下を追加します。

• enable-infinite-loading
• onloadmore={アクションメソッド名}

これにより、テーブルの一番下までスクロールしたときにイベントが発生し、onloadmore で指定したメソッドが呼び出されます。

<lightning-datatable key-field="id" columns={columns} data={data} enable-infinite-loading onloadmore={loadMoreData} ></lightning-datatable>

そしてJavaScript側でアクションメソッドを定義します。

今回は10件ずつ表示されるデータが増えていくように実装しました。

data;       // 画面に表示されるデータ
allData;    // すべてのデータ。別でクエリ等して準備する必要があります。
lastRowNum = 10; // 最初に10件表示されているとする
loadMoreData(event) {
    let newData = this.allData.slice(this.lastRowNum, this.lastRowNum + 10);
    this.lastRowNum += 10;
    this.data = this.data.concat(newData);
}