【LWC】datatableでページングを実装する

はじめに

今回はdatatableでページングを実装しました。大量のデータを1列で表示すると描画に時間がかかることがあるので数ページに分けて表示するものです。ページング自体は様々なサイトで使われています。Qiitaでも使われてますね。

完成図

完成図は以下の通りです。
設定で1ページ5件に設定しています。
「前へ」と「次へ」ボタンがあり、押すとページ遷移します。
最初のページでは「前へ」ボタンが非活性になります。

最後のページになると「次へ」ボタンが非活性になります。

datatable

datatableWithPaging.html

<template>
  <lightning-card title="DataTable" icon-name="custom:custom1">
    <lightning-datatable
      key-field="id"
      data={accounts}
      columns={columns}
      hide-checkbox-column="true">
    </lightning-datatable>
    <div class="slds-m-around_medium">
      <p class="slds-m-vertical_medium content">
              {totalRecountCount}件中　{startingRecord}件～{endingRecord}件を表示中。
              {page}/{totalPage}ページ</p>
      <lightning-layout>
          <lightning-layout-item>
              <lightning-button label="前へ" icon-name="utility:chevronleft" onclick={previousHandler} disabled={isFirstPage}></lightning-button>
          </lightning-layout-item>
        <lightning-layout-item flexibility="grow"></lightning-layout-item>
          <lightning-layout-item>
              <lightning-button label="次へ" icon-name="utility:chevronright" icon-position="right" onclick={nextHandler} disabled={isLastPage}></lightning-button>
          </lightning-layout-item>
    </lightning-layout>
    </div>
  </lightning-card>
</template>

標準のdatatableとボタンを配置したくらいです。

配列のスライスを利用

datatableWithPaging.js

import { LightningElement, api, wire } from 'lwc';
import getAccountListWithRating from '@salesforce/apex/AccountTableViewController.getAccountListWithRating';

const columns = [
  { label: '企業名', fieldName: 'Name'},
  { label: '電話', fieldName: 'Phone'},
  { label: '優先度', fieldName: 'Rating'},
];

export default class DatatableWithPaging extends LightningElement {
  @api recordId;
  accounts = [];
  page = 1; 
  items = []; 
  columns = columns; 
  startingRecord = 1; 
  endingRecord = 0; 
  pageSize = 5; 
  totalRecountCount = 0; 
  totalPage = 0; 

  get isFirstPage() {
    return this.page === 1;
  }

  get isLastPage() {
    return this.page === this.totalPage;
  }

  @wire(getAccountListWithRating)
  wiredAccount({data, error}) {
    if(data) {
      this.items = data;
      this.totalRecountCount = data.length;
      this.totalPage = Math.ceil(this.totalRecountCount/this.pageSize);
      this.accounts = this.items.slice(0, this.pageSize);
      this.endingRecord = this.pageSize;
    } else if(error) {
      console.log('error' + error);
    }
  }

  previousHandler() {
    if(this.page > 1) {
      this.page -= 1;
      this.changePageHandler(this.page);
    }
  }

  nextHandler() {
    if(this.page < this.totalPage) {
      this.page += 1;
      this.changePageHandler(this.page);
    }
  }

  changePageHandler(page) {
    this.startingRecord = ((page - 1) * this.pageSize);
    this.endingRecord = (page * this.pageSize);
    if((page * this.pageSize) > this.totalRecountCount) {
      this.endingRecord = this.totalRecountCount;
    } else {
      this.endingRecord = page * this.pageSize;
    }

    this.accounts = this.items.slice(this.startingRecord, this.endingRecord);

    this.startingRecord += 1;
  }
}

データの取得自体は一括で取得し、javascript内で配列をスライスしています。ボタンが押されるたびに表示開始位置(startingRecord)と表示終了位置(endingRecord)を変更します。

終わりに

やってみたら思いのほか簡単に出来ました。気を付けるべきはページがマイナスになったり、行き過ぎないようにすることだけです。
今度は似たような機能で無限スクロールをやってみたいと思います。