☰

MUI X データグリッドの列を非表示にするにはどうすればいいですか? 質問する

tag-icon • tag-icon reactjs material-ui mui-x-data-grid mui-x
MUI X データグリッドの列を非表示にするにはどうすればいいですか? 質問する

テーブルの ID フィールドを表示したくありません。 "@mui/x-data-grid": "^5.6.1" バージョンを使用します。コードは次のとおりです。

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';


const columns = [
    { field: 'id', headerName: 'ID', width: 50},
    { field: 'testName', headerName: 'Test Name', width: 120,},
    { field: 'testDate', headerName: 'Test Date', width: 160 },
];

export default function DataTable(props) {

    const rows = [id:1, testName:"test", testDate:"23/03/2022"];

    return (
        <div id="resultTable" >
            <DataGrid
                rows={rows}
                columns={columns}
                pageSize={5}
                rowsPerPageOptions={[5]}

            />
        </div>
    );
}

Id列は隠れたまたは表示:なし使ってみました

display: false

または：

hidden: true

また、次のことも試しました:

options: {display: false, filter: false,}、しかしそれは機能しませんでした。

ベストアンサー1

によるとMUI X ドキュメントはhide: true非推奨になりました。

代わりに、列の可視性モデル。

ドキュメントからの例:

<DataGrid
  initialState={{
    columns: {
      columnVisibilityModel: {
        // Hide columns status and traderName, the other columns will remain visible
        status: false,
        traderName: false,
      },
    },
  }}
/>

おすすめ記事