🐕‍🦺

MUIでDataTablesを使ってみる(Next.js,TypeScript)

2022/03/08に公開

MUIのDataGridを利用していたが、検索機能がコチラのほうが使いやすそうなので、移行してみた。

環境

  • Next.js
  • TypeScript

やること

  • APIでデータ取得し表示
  • csv出力、文字列、列毎の検索を可能とする
  • PDF出力も必要だったので印刷機能も試してみたが、フォーマット変更の仕方がわからないので今回は使わないことにした
  • 編集ボタン、削除ボタンを列内に実装する(ボタンは別途作成しているコンポーネントを使用)

イメージ

インストール

$ npm i --save-dev @types/mui-datatables

いきなりコード

コメントで説明入れます

ExampleDataTable.tsx
import React, { useState, useEffect } from "react";
import { ExampleTableData } from "../../types/WebData";
// 削除アイコンクリックで削除ダイアログが表示されるコンポーネント
import DeleteDialog from "../common/DeleteDialog";
// 編集アイコンクリックで編集ダイアログが表示されるコンポーネント
import EditDialog from "./EditDialog";
import { getExample } from "../../api";
// MUIDataTableを利用する
import MUIDataTable from "mui-datatables";

const ExampleDataTable: React.FC = () => {
  const [exampleData, setExampleData] = useState<ExampleTableData>({ data: [] });

  // APIでデータ取得しstateに格納
  useEffect(() => {
    const getExampleData = async () => {
      const result = await getExample();
      setExampleData(result);
    };
    
    getExampleData();
  }, []);

  // 列を定義
  const columns = [
    // 非表示の列 sortに利用している
    {
      name: "id",
      label: "ID",
      // filterにも入れない
      options: { filter: false, display: false },
    },
    {
      name: "test_code",
      label: "TEST ID",
      options: { filter: true },
    },
    {
      name: "remarks",
      label: "備考",
      options: { filter: true },
    },
    {
      name: "status",
      label: "状態",
      options: { filter: true },
    },
    // 編集アイコンを表示
    {
      name: "",
      options: {
        filter: false,  // filterには入れない
        sort: false,    // sortにも入れない
        download: false,   // CSVにも入れない
	// 編集コンポーネント(列の値情報を渡している)
        customBodyRenderLite: (dataIndex: number) => {
          return (
            <EditDialog
              editData={{
                id: exampleData[dataIndex].id,
                test_code: exampleData[dataIndex].test_code,
                remarks: exampleData[dataIndex].remarks,
              }}
            />
          );
        },
      },
    },
    // 削除アイコンを表示
    {
      name: "",
      options: {
        filter: false,
        sort: false,
        empty: true,
        download: false,
        print: false,
        customBodyRenderLite: (dataIndex: number) => {
          return (
            <DeleteDialog
              deleteId={exampleData[dataIndex].id}
            />
          );
        },
      },
    },
  ];

  // table全体のoption設定
  const options = {
    // 列選択のcheckboxを表示しない
    selectableRows: false as any,
    rowHover: true,
    tableBodyHeight: "500px",
    // idでソート
    sortOrder: { name: "id" as any, direction: "asc" as any },
    // 列表示の機能は使わない
    viewColumns: false,
    // 印刷機能も使わない
    print: false,
    // 出力CSVファイルの名前
    downloadOptions: { filename: "例データ.csv" },
  };

  return (
    <div style={{ height: 650, width: "100%" }}>
      <MUIDataTable
        title=""
        data={exampleData}
        columns={columns}
        options={options}
      />
    </div>
  );
};

export default ExampleDataTable;

ちょっとハマった

ビルド時に以下のようなTypeエラーが・・

Type '{ rowHover: boolean; tableBodyHeight: string; sortOrder: { name: string; direction: string; }; viewColumns: boolean; downloadOptions: { filename: string; }; }' is not assignable to type 'Partial<{ caseSensitive: boolean; confirmFilters: boolean; columnOrder: number[]; count: number; customFilterDialogFooter: (filterList: string[][], applyNewFilters?: ((...args: any[]) => any) | undefined) => ReactNode; ... 81 more ...; viewColumns: ToolbarButton; }>'.
  Types of property 'selectableRows' are incompatible.
    Type 'boolean' is not assignable to type 'SelectableRows | undefined'.

  117 |         data={exampleData}
  118 |         columns={columns}
> 119 |         options={options}

optionsのセットのところで、selecttableRowsの型がちがうって怒られている様子。
sortOrderでも同じだったため、以下の様にas anyをつけたらエラー解消!!

const options = {
    selectableRows: false as any,
    sortOrder: { name: "id" as any, direction: "asc" as any },
  };

参考サイト

optionはここみたらわかりました

https://bestofreactjs.com/repo/gregnb-mui-datatables-react-table-grid

いろいろな例

https://github.com/gregnb/mui-datatables/tree/master/examples

optionsのtypeエラー対応

https://stackoverflow.com/questions/63596094/error-in-options-when-writing-filtertype-api-in-options-for-mui-datatables-usin

Discussion