🌏

【MUI】DataGridの使い方(基本)

4 min read

TabelとDataGridを利用することがあり調べてみました。

TableコンポーネントとDataGridの違い

TableコンポーネントはHTMLでテーブル作るのと変わらないです。テーブルを作るのに必要なパーツが提供されているイメージです。それゆえDataGridと比べて自由に組み立てられます。デメリットはすべて0から自分で書く必要があります。数行のテーブルを表現するだけでも十数行必要です。それだけならよいですが、sort機能など実装するとなるとそのコード量は100以上は必要です。

DataGridコンポーネントはヘッダーとレコードのデータを渡すだけでそれっぽいテーブルが作られます。テーブルを丸ごと提供してくれているイメージです。
さらにTableと違うところはページネーションや昇順降順、チェックボックス機能を簡単に実装できるところです。Tableだったら数百行必要でもDataGridなら10行にも満たないです。
デメリットとしては自由にカスタマイズできないところです。DataGridにはDataGridProというコンポーネントがあって、DataGridはお試し版という位置付けです。ですので意図的に制限が設けられています。しかし、お試し版でもたくさんの機能が簡単に実装できるので、かなり強力です。

DataGridの基本形

DataGridのAPIページを確認すると以下の2つが必須要素となっています。
・columns
・rows
これをDataGridに渡せばテーブルができます。すごい。

      <DataGrid
        rows={rows}
        columns={columns}
      />


しかもこの時点でページネーションと昇順降順機能が付いている。

ハマった部分

画面のスクロールのほかにテーブルないでもするロールするようにしたい。

これはcssの知識があれば当たり前なので高さや幅が"auto"だとスクロールが表示されません。autoではなくwidth: 200とか設定すればテーブルのスクロールが表示される。テーブル自体に高さを持たせるにはdivでDataGridを囲んであげると良いと思っています。

スタイル変更

DataGridはテーブルと違ってテーブル丸ごとの提供なので<DataGrid>に直接スタイル定義しても適用されない。そこで利用したのがThemeProvider。※APIページの一番下に書いてあった。

const theme = createTheme({
  components: {
    MuiDataGrid: {
      styleOverrides: {
        root: {
	 // & .が必要っぽい。
          "& .MuiDataGrid-columnHeaders": {
            backgroundColor: "#87cefa"
          },
          "& .MuiDataGrid-row.Mui-selected": {
            backgroundColor: "#ffe6ce",
	    // 疑似要素適用
            "&:hover": {
              backgroundColor: "#ffe6ce"
            }
          }
        }
      }
    }
  }
});	

あとはこれでDataGridを囲むだけ。

      <ThemeProvider theme={theme}>
          <DataGrid
            rows={レコード}
            columns={cols}
          />
      </ThemeProvider>	

cssはAPIのページのcssから確認できる。

https://mui.com/api/data-grid/data-grid/#css

また、styled()でも定義できるっぽい。
以下はTextFieldになりますが、やることは一緒。

const CustomizedTextField1 = styled(TextField)({
  '& .MuiOutlinedInput-notchedOutline': {
    borderColor: 'red',
  },
});

セルにコンポーネントを入れる

columns propsに渡す配列にrenderCellを渡す。以下の例では<Button/>を渡しています。

  const columns = [
    {
      field: " ",
      width: 50,
      align: "center",
	renderCell: (parm: GridRenderCellParams) => <Button>ボタン</Button>
    },

parmはこんな感じで使えて、クリックしたときにテーブルのレコードの情報を持ってきてくれます。

      renderCell: (parm: GridRenderCellParams) => (
        <Button onClick={() => handleClick(parm)}>ボタン</Button>
      )

props

APIページのpropsの項目を確認すればたくさんのpropsがあることがわかる。propsを渡すだけでいろんな機能が一瞬で実装できる。ヤバい。

https://mui.com/api/data-grid/data-grid/#props
一部紹介します。
  • checkboxSelection
    テーブルにチェックボックスを実装します。一括チェックボタンも勝手に実装してくれます。
  • onSelectionModelChange
    チェックされている要素を取得します。状態管理と組み合わせると良さそうです。
    使い方はこんな感じ。
          <DataGrid
            onSelectionModelChange={(ele) => setValue(ele)}
            rows={レコード}
            columns={cols}
          />	
  • showCellRightBorderとshowColumnRightBorder
    ボーダーを付けます。
  • pageSize={50}
    中カッコでサイズ指定を行います。無料版は100以上を入れるとエラーになります。100レコード以上を表示するには以下を利用します。
  • rowsPerPageOptions={[100, 1000]}
    テーブルフッターにページ切り替えボタンを実装します。1000とすることで1000レコードのテーブル表示を実現できます。
  • disableSelectionOnClick
    レコードをクリックしたときにチェックが入らないようにします。

おまけ

ちなみにtypescriptを使ってテーマの拡張をするにはモジュールを利用する必要がある見たいです。

// 1. テーマを拡張
const theme = createTheme({
  palette: {
    neutral: {
      main: "#d79b4a"
    }
  }
});

// 2. パレットの新しい色について TypeScript に通知
declare module "@mui/material/styles" {
  interface Palette {
    neutral: Palette["primary"];
  }
  interface PaletteOptions {
    neutral: PaletteOptions["primary"];
  }
}

// 3. Button の color props を更新
declare module "@mui/material/Button" {
  interface ButtonPropsColorOverrides {
    neutral: true;
  }
}

Discussion

ログインするとコメントできます