How can i hide a column in MUI?

user_18307219 0
Viewed 5218

I don't wanna show id field of my table.I use "@mui/x-data-grid":"^5.6.1" version. Here is my code;

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 column can be hidden or display:none. I tried to use

display:false

or:

hidden: true

and also tried:

options: {display: false, filter: false,} but it wasnt work.

mui-datatable material-ui reactjs
5 Answers

I found the solution.

{ field: 'id', headerName: 'ID', width: 50, hide: true}

This is enough for me.

user_183072190

According to MUI documentation, hide: true is now deprecated.

Instead you should use the Column Visibility Model.

Example from the documentation:

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

Try removing the first object in columns array like so

const columns = [
    //{ field: 'id', headerName: 'ID', width: 50}, //or delete it entirely
    { field: 'testName', headerName: 'Test Name', width: 120,},
    { field: 'testDate', headerName: 'Test Date', width: 160 },
]
user_165774830
user_72956130

I know that this question is already answered, but what I encountered was that I needed to hide a field but retrieve its value once I edit a row, which is also what OP commented on one of the answers.

The solution for this is adding the editable prop to the field like so:

{field: 'id', hide: true, editable: true}
user_199076120
Related