MUI v5 DataGridの使い方 その4 ～列ヘッダ、列の設定～
前回に続いて、Vite+React+TypeScript 環境で MUI の DataGrid の使い方を、Tips的にまとめていきます。
MUI v5 DataGrid の記事一覧
MUI v5 DataGridの使い方 その1 ～基本の使い方から日本語化まで～
MUI v5 DataGridの使い方 その2 ～クリックできるアイコンセルを表示する～
MUI v5 DataGridの使い方 その3 ～セルの縦線を表示する（不具合対応済み）～
MUI v5 DataGridの使い方 その4 ～列ヘッダ、列の設定～
MUI v5 DataGridの使い方 その5 ～フッター～
MUI v5 DataGridの使い方 その6 ～グリッドのPropsの一覧～
MUI v5 DataGridの使い方 その7～有償版(Pro版)のエラー対応～
ヘッダに色を付ける
列ヘッダに色を付けるには css を使用して MuiDataGrid-columnHeaders クラス に 背景色を指定します。
import * as React from 'react'
import {
DataGridPro,
GridColDef,
GridRowsProp,
GridToolbar,
GridActionsCellItem,
GridRowParams
} from '@mui/x-data-grid-pro'
import { SvgIcon } from '@mui/material'
import { ReactComponent as godetail } from '@/assets/go_detail.svg'
const rows: GridRowsProp = [
{ id: 1, name: 'JIN', kana: 'ジン', birth: '1992年12月04日' },
{ id: 2, name: 'SUGA', kana: 'シュガ', birth: '1993年03月09日' },
{ id: 3, name: 'J-HOPE', kana: 'ジェイホープ', birth: ' 1994年02月18日' },
{ id: 4, name: 'RM', kana: 'アールエム', birth: '1994年09月12日' },
{ id: 5, name: 'JIMIN', kana: 'ジミン', birth: '1995年10月13日' },
{ id: 6, name: 'V', kana: 'ヴィ', birth: '1995年12月30日' },
{ id: 7, name: 'JUNG KOOK', kana: 'ジョングク', birth: '1997年09月01日' }
]
export function List() {
// アイコンをクリックしたときの処理
const handleDetailClick = React.useCallback(
(params: GridRowParams) => (event: { stopPropagation: () => void }) => {
event.stopPropagation()
console.log(`handleDetailClick:id=${params.id}`)
},
[]
)
// 表示するアクションを返す関数です
const getDetailAction = React.useCallback(
(params: GridRowParams) => [
<GridActionsCellItem
icon={<SvgIcon component={godetail} sx={{ color: '#1e8cb0' }} />}
label="編集"
onClick={handleDetailClick(params)}
color="inherit"
/>
],
[handleDetailClick]
)
// グリッド列情報
const cols: GridColDef[] = [
{
field: 'detailAction',
headerName: ' ', // セルの右側に罫線を表示するために全角スペースを表示する
align: 'left',
width: 60,
type: 'actions',
getActions: getDetailAction
} as GridColDef,
{
field: 'id',
headerName: ' ', // セルの右側に罫線を表示するために全角スペースを表示する
width: 50,
headerAlign: 'center',
align: 'right'
},
{
field: 'name',
headerName: '英字',
width: 200,
headerAlign: 'center',
align: 'left'
},
{
field: 'kana',
headerName: '仮名',
width: 200,
headerAlign: 'center',
align: 'left'
},
{
field: 'birth',
headerName: '生年月日',
width: 150,
headerAlign: 'center',
align: 'center'
}
]
return (
<div style={{ width: '100%' }}>
<DataGridPro
sx={styles.grid} // --> 不具合対応のためcssで罫線を引く
columns={cols}
rows={rows}
density="compact"
autoHeight
components={{
Toolbar: GridToolbar,
}}
showColumnRightBorder // 列ヘッダセルの右側に線を引く
// showCellRightBorder // セルの右側に線を引く --> 不具合対応のためcssで罫線を引く
/>
</div>
)
}
const styles = {
grid: {
'.MuiDataGrid-toolbarContainer': {
borderBottom: 'solid 1px rgba(224, 224, 224, 1)'
},
'.MuiDataGrid-row .MuiDataGrid-cell:not(:last-child)': {
borderRight: 'solid 1px rgba(224, 224, 224, 1) !important'
},
+ // 列ヘッダに背景色を指定
'.MuiDataGrid-columnHeaders': {
backgroundColor: '#65b2c6',
color: '#fff',
}
}
}
ヘッダテキストの表示位置、セルテキストの表示位置
ヘッダテキストの表示位置を調整するには、列情報 GridColDef 配列に headerAlign を指定します。
セルテキストの表示位置も同様に、列情報 GridColDef 配列に align を指定します。
// グリッド列情報
const cols: GridColDef[] = [
{
field: 'detailAction',
headerName: '',
align: 'left',
width: 60,
type: 'actions',
getActions: getDetailAction
} as GridColDef,
{
field: 'id',
headerName: '',
width: 50,
+ headerAlign: 'center', // 列ヘッダの表示位置
+ align: 'right' // セルテキストの表示位置
},
{
field: 'name',
headerName: '英字',
width: 200,
headerAlign: 'center',
align: 'left'
},
{
field: 'kana',
headerName: '仮名',
width: 200,
headerAlign: 'center',
align: 'left'
},
{
field: 'birth',
headerName: '生年月日',
width: 150,
headerAlign: 'center',
align: 'center'
}
]
ヘッダ選択時のフォーカス枠が切れているので修正する
css を使用して .MuiDataGrid-columnHeader:focus-within クラス に outlineOffsetを調整します。
const styles = {
grid: {
'.MuiDataGrid-toolbarContainer': {
borderBottom: 'solid 1px rgba(224, 224, 224, 1)'
},
'.MuiDataGrid-row .MuiDataGrid-cell:not(:last-child)': {
borderRight: 'solid 1px rgba(224, 224, 224, 1) !important'
},
// 列ヘッダに背景色を指定
'.MuiDataGrid-columnHeaders': {
backgroundColor: '#65b2c6',
color: '#fff',
},
+ // ヘッダ選択時のフォーカス枠の切れを修正
'.MuiDataGrid-columnHeader:focus-within': {
outlineOffset: -3
},
}
}
列のソート、フィルタ、表示・非表示などの設定
グリッドの列情報 GridColDef に 設定することで制御できます。
// グリッド列情報
const cols: GridColDef[] = [
{
field: 'detailAction',
headerName: ' ', // セルの右側に罫線を表示するために全角スペースを表示する
align: 'left',
width: 60,
type: 'actions',
getActions: getDetailAction,
description: '詳細画面を表示' // ツールチップで表示される説明
hideable: false, // 非表示にできないようにする
sortable: false, // ソートできないようにする
hideSortIcons: false, // ソートアイコンを表示しない
resizable: false, // リサイズできないようにする
disableExport: false, // エクスポートに含めないようにする
disableReorder: false, // 並べ替えできないようにする
filterable: false, // フィルタリングしないようにする
disableColumnMenu: true // カラムメニューを表示しない
} as GridColDef,
{
field: 'id',
headerName: 'ID',
width: 60,
headerAlign: 'center',
align: 'right'
},
{
field: 'name',
headerName: '英字',
width: 200,
headerAlign: 'center',
align: 'left'
},
{
field: 'kana',
headerName: '仮名',
width: 200,
headerAlign: 'center',
align: 'left'
},
{
field: 'birth',
headerName: '生年月日',
width: 150,
headerAlign: 'center',
align: 'center'
}
]
他にも以下のような設定項目があります。
列情報 GridColDef に設定できる項目の一覧
field: string;
列の識別子です。[[GridRowModel]]の値との対応付けに使用されます。
headerName?: string;
列のヘッダーセルに表示される列のタイトル。
description?: string;
列のヘッダーセルにツールチップで表示される列の説明。
width?: number;
列の幅を設定します。
@default 100
flex?: number;
設定された場合、列が流体幅を持つことを示す。範囲 [0, ∞]。
minWidth?: number;
列の最小幅を設定する。
@default 50
maxWidth?: number;
列の最大幅を設定する。
@default Infinity
hide?: boolean;
true の場合、カラムを隠します。
@deprecated代わりに columnVisibility プロパティを使用します。
@default false
hideable?: boolean;
false ならば、このカラムを隠すためのボタンを削除します。
@default true
sortable?: boolean;
もし true ならば、その列はソート可能です。
@default true
sortingOrder?: GridSortDirection[];
並べ替えの順番を指定する。
resizable?: boolean;
true の場合、カラムはリサイズ可能です。
@default true
editable?: boolean;
true の場合、列のセルは編集可能です。
@default false
groupable?: boolean;
true の場合、このカラムの値に基づいて行をグループ化することができます（pro-plan のみ）。
@default true
pinnable?: boolean;
false の場合、カラムピニングメニューのメニューアイテムはレンダリングされない。
DataGridProのみ使用可能です。
@default true
sortComparator?: GridComparatorFn;
行の並べ替えに使用するコンパレータ関数です。
type?: GridColType;
このタイプは、このオブジェクトをデフォルトの定義[[GridColDef]]にマージすることができます。
@default 'string'
valueOptions?: Array< ValueOptions< | ((params: GridValueOptionsParams) => Array< ValueOptions<);
type: 'singleSelect'` と組み合わせて使用します。これは、可能なセルの値とラベルの配列（あるいは配列を返す関数）である。
align?: GridAlignment;
セル内の列の値を整列させることができるようにする。
valueGetter?: (params: GridValueGetterParams) => GridCellValue;
セル内に表示するフィールドの代わりに、特定のデータを取得することができる関数です。
@param {GridValueGetterParams} params
ゲッターのパラメータを含むオブジェクト。
@returns {GridCellValue} セルの値。
valueSetter?: (params: GridValueSetterParams) => GridRowModel;
入力された値がどのように行に格納されるかをカスタマイズできる関数です。
セル/行編集でのみ動作します。
@param {GridValueSetterParams} params
セッターのパラメータを含むオブジェクト。
@returns {GridRowModel}
フィールドが更新された行。
valueFormatter?: (params: GridValueFormatterParams) => GridCellValue;
値をレンダリングする前にフォーマッタを適用することができる関数です。
@param {GridValueFormatterParams} params
フォーマッタのパラメータを含むオブジェクト。
@returns {GridCellValue}
フォーマットされた値。
valueParser?: (value: GridCellValue, params?: GridCellParams) => GridCellValue;
ユーザーが入力した値を受け取り、内部で使用する値に変換する関数。
@param {GridCellValue} value
ユーザーが入力した値。
@param {GridCellParams} params
値を保存する前に呼び出されたときのパラメータ。
@returns {GridCellValue}
内部で使用する変換後の値。
cellClassName?: GridCellClassNamePropType;
その列のセルに追加されるクラス名。
renderCell?: (params: GridRenderCellParams) => React.ReactNode;
この列のセルとしてレンダリングされるコンポーネントをオーバーライドできるようにします。
@param {GridRenderCellParams} params
レンダラーのパラメータを含むオブジェクト。
@returns {React.ReactNode}
レンダリングする要素。
renderEditCell?: (params: GridRenderEditCellParams) => React.ReactNode;
この列のセル編集モードでレンダリングされるコンポーネントをオーバーライドできるようにします。
@param {GridRenderEditCellParams} params
レンダラに関するパラメータを含むオブジェクト。
@returns {React.ReactNode}
レンダリングする要素。
preProcessEditCellProps?: (params: GridPreProcessEditCellProps) => GridEditCellProps | Promise<GridEditCellProps>;
セルの編集プロパティーが変更されたときに呼び出されるコールバック。
状態に保存された小道具を処理することができます。
@param {GridPreProcessEditCellProps} params
編集中のセルのパラメータを含むオブジェクト。
@returns {GridEditCellProps | Promise<GridEditCellProps>}
新しい編集セルのプロップス。
headerClassName?: GridColumnHeaderClassNamePropType;
列のヘッダーセルに追加されるクラス名。
renderHeader?: (params: GridColumnHeaderParams) => React.ReactNode;
列のヘッダーセルにコンポーネントをレンダリングできるようにする。
@param {GridColumnHeaderParams} params
レンダラに関するパラメータを含むオブジェクト。
@returns {React.ReactNode}
レンダリングする要素。
headerAlign?: GridAlignment;
ヘッダーセルエレメントのアライメント。
hideSortIcons?: boolean;
ソートアイコンの表示/非表示を切り替えます。
@default false
disableColumnMenu?: boolean;
もし true ならば、このカラムのメニューは無効となります。
@default false
filterable?: boolean;
true` の場合、そのカラムはフィルタリング可能である。
@default true
filterOperators?: GridFilterOperator[];
このカラムのフィルタ演算子を設定できるようにします。
disableReorder?: boolean;
true の場合、このカラムは並べ替えができない。
@default false
disableExport?: boolean;
true ならば、このカラムはエクスポートに含まれない。
@default false
Discussion