スポンサーリンク

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

TypeScript
スポンサーリンク

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

スポンサーリンク

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の記事を書き始めているので、是非サイト内みていって下さい。

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

TypeScript
スポンサーリンク
スポンサーリンク
ともぶろぐ

コメント

タイトルとURLをコピーしました