🐕🦺
MUIでDataTablesを使ってみる（Next.js,TypeScript)
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はここみたらわかりました
いろいろな例
optionsのtypeエラー対応
Discussion