React・TypeScript・Material-UI(MUI)で、TableのComponentを作成する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、React・TypeScript・Material-UI(MUI)で、TableのComponentを作成する方法について解説していきます。

1 Material-UI(MUI)で、TableのComponentを作成する方法
- 1.1 Table Componentの要件定義とComponent導入イメージ
- 1.2 Table Component のSampleCode
2 Twitterやってます！Follow Me！
3 React関連の書籍
4 プログラミング学習・エンジニア転職関連の情報
5 最近の投稿

Material-UI(MUI)で、TableのComponentを作成する方法

React・TypeScript環境でのTableのComponent作成に、Material-UI(MUI)のTable, TableHead, TableRow, TableCell, TableBody の5つを利用します。

Table Componentの要件定義とComponent導入イメージ

今回作成する Table Component の要件定義は、次のとおりになります。

1行目は、theadで、カラム名を表示する。
2行目以降は、tbody で、RecodeData (TableData)を表示する。

Component導入イメージは、次のようなSimpleな TableList になります。

Table Component のSampleCode

Table Component の SampleCode は、次のとおりです。

// import React from "react";
import {
  Table,
  TableHead,
  TableRow,
  TableCell,
  TableBody,
} from "@mui/material";

// 行(Row)のDataType
export interface RowDataType {
  [key: string]: any;
}

// Propsの型定義
interface PropsType {
  columnKeyList: string[];
  rowDataList: RowDataType[];
}

// TableのComponent => 縦型(Column_Key)のTableList
const TableList = (props: PropsType) => {
  // props.columnKey
  console.log("TableList_Props", props);
  const columnKeyList = props.columnKeyList;
  const rowDataList = props.rowDataList;
  return (
    <Table>
      <TableHead>
        <TableRow>
          {columnKeyList.map((key, index) => {
            return <TableCell key={index}>{key}</TableCell>;
          })}
        </TableRow>
      </TableHead>
      <TableBody>
        {rowDataList.map((recode, index) => (
          <TableRow key={index}>
            {
              // Recode(Object) の Key と ColumnKey が一致する場合は、それを表示する
              columnKeyList.map((key, index_2) => {
                if (recode.hasOwnProperty(key)) {
                  return <TableCell key={index_2}>{recode[key]}</TableCell>;
                }
              })
            }
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
};

export default TableList;

親コンポーネントからは、次のようにして、Table Component を使います。

{/* Table_Component */}
<TableList
  columnKeyList={["email", "id", "password"]}
  rowDataList={[
    { email: "robotama@gmail.com", id: 1, password: "robotama" },
    { email: "robotama@gmail.com", id: 2, password: "robotama2" },
    { email: "robotama@gmail.com", id: 3, password: "robotama3" },
  ]}
/>