React

プログラミング

DataGridのヘッダーから「…(テンテンテン)」や上矢印のメニューをなくす方法。

はじめに DataGridのヘッダーから「...(テンテンテン)」や上矢印のメニューをなくす方法を記します。 このテンテンテンは、Kebab Menu (ケバブメニュー)と呼ぶそうです。 環境 @mui/x-data-grid”: “6.1...
プログラミング

DataGridのセルにてWidthが一定以上小さくならないときに確認すること(備忘録)

はじめに Data Gridで表を作成するとき、セルのサイズなど指定することができますが、 Widthを一定以上小さくしようとプロパティを設定しても小さくならないです。 そのときに確認するべきことを記します。 環境 @mui/x-data-...
プログラミング

MUIのDataGridでshowCellRightBorderを使うとエラーが出る。対処法。

はじめに DataGridを使っていて、セルにBorderを適用させたかったのですが、用意されていたプロパティ「showCellRightBorder」を設定しても割り当てられないとエラーが発生してしまいます。 <DataGrid rows...
プログラミング

MUIのDataGridで初期表示時に特定の列を非表示にする(React)

はじめに 環境 mui/x-data-grid: 6.19.4 特定の列を非表示にする方法 DataGrid要素内のプロパティ「columnVisibilityModel」で、非表示にしたい列を指定することで 初期非表示にすることができます...
プログラミング

MUIのDataGridで標準の日本語と任意の文字列をマージさせる方法(備忘録)

はじめに MUIのx-data-gridは、多機能なデータテーブルのコンポーネントです。 フィルター等機能も簡単につけられます。 しかし、標準で英語になっているため日本語に変更する方法と、 一部任意の文字列に変更したい場合の手順を記します。...
プログラミング

MUIでの「AppBar」をスクロール時に隠す方法(備忘録)

はじめに 環境 react: "^17.0.0 || ^18.0.0", @mui/material:^5.15.9 @emotion/react:^11.11.3 @emotion/styled:^11.11.0 実装 下にスクロールした...