【TypeScript】Reactで一覧表をMaterialUIのDataGridで表示する方法ご紹介。

今回の記事はTypeScriptを使うReactプロジェクトで一覧表をMaterialUIのDataGridで表示する方法をご紹介する記事です。私自身タイプスクリプトもReactも初心者ですので初心者に分かりやすいように解説していきます。是非参考にしてみて下さい。

ReactプロジェクトにMaterialUIをインストール
TypeScriptでMaterialUIに一覧表を表示

ReactプロジェクトにMaterialUIをインストール

node等がインストールされてない方はインストールして下さい。その前提で話を進めます。

npx create-react-app sample --template typescript

まずは上記で「sample」プロジェクトを作成します。

cd sample
npm start

これでローカルサーバが立ち上がって初期画面が表示できます。

ではここにMaterialUIをインストールしましょう。MaterialUIは最新バージョンで名称が変わっているので下記をインストールしましょう。「ctrl」+「c」でサーバを止めプロジェクトの中、今回で言うと「sample」プロジェクトの階層で下記を実行します。

npm install @mui/x-data-grid@next --save
npm install @mui/material @mui/styles @emotion/react @emotion/styled --save

1行目が最新バージョンのMaterialUIのDataGridをインストールしてしています。2行目がそのモジュールに必要なその他のモジュールをインストールしています。

では、このインストールしたものを使って一覧表を表示していきましょう。

TypeScriptでMaterialUIに一覧表を表示

「App.tsx」に下記のように記載します。

import { DataGrid, GridColDef, GridRowParams, GridValueGetterParams } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
    editable: true,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
    editable: true,
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 110,
    editable: true,
  },
  {
    field: 'fullName',
    headerName: 'Full name',
    description: 'This column has a value getter and is not sortable.',
    sortable: false,
    width: 160,
    valueGetter: (params: { getValue: (arg0: any, arg1: string) => any; id: any; }) =>
      `${params.getValue(params.id, 'firstName') || ''} ${
        params.getValue(params.id, 'lastName') || ''
      }`,
  },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];



function App() {
  return (
    <div className="App">
      <h1>Learn useEffect</h1>
      <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
      />
    </div>
    </div>
  );
}

export default App;

内容自体は公式ドキュメントのままです。ゲームオブスローズ好きにはたまりません。

少し、解説をすると下記の部分で行と列に入るデータを指定しております。

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
    editable: true,
  },
  ...(省略)...
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
  ...(省略)...
];

「column」の「field」の値が「row」のデータが入る場所になっています。これを下記で一覧表に表示させているようです。

<DataGrid
    rows={rows}
    columns={columns}
    pageSize={5}
    rowsPerPageOptions={[5]}
    checkboxSelection
    disableSelectionOnClick
/>

「index.tsx」は変更なしでOKですので再度サーバを立ち上げてローカルサーバをブラウザで開きます。

npm start

http://localhost:3000/

では今回の記事は以上です。他にもTypeScriptとReactの記事を書き始めているので、是非サイト内みていって下さい。