How can i hide a column in MUI X data grid?

Question

I don't wanna show the 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.

score 19 · Answer 1 · answered Mar 23 '22 at 13:46

19

I found the solution.

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

This is enough for me.

answered Mar 23 '22 at 13:46

Burak Algur

326
1
2
10

I like this solution a lot. If MUI is like other frameworks I have used, then this solution still allows me full use of the API on the hidden columns. – Jeff Bluemel Jun 16 '22 at 23:50
1

Hide is deprecated in v5 and will be removed in v6. See docs or answers from Robinson or my self on this page. https://mui.com/x/react-data-grid/column-visibility/#controlled-visible-columns – sirclesam Sep 30 '22 at 04:57

score 11 · Answer 2 · edited May 29 '23 at 12:39

11

According to MUI X 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,
      },
    },
  }}
/>

edited May 29 '23 at 12:39

Olivier Tassinari

8,238
4
23
23

answered Aug 17 '22 at 06:04

Robinson

111
1
2

sirclesam · Answer 3 · 2023-08-28T03:01:15.373

Expanding on Robinson's answer from the docs There's also a way to do this programmatically. I used this code to hide some columns on mobile version.

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

import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";

export const MOBILE_COLUMNS = {
  id: true,
  value: true,
  value2: false,
  value3: false,
};
export const ALL_COLUMNS = {
  id: true,
  value: true,
  value2: true,
  value3: true,
};

const Component = ({rows,columns}) => {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up("sm"));

  const [columnVisible, setColumnVisible] = React.useState(ALL_COLUMNS);
  React.useEffect(() => {
    const newColumns = matches ? ALL_COLUMNS : MOBILE_COLUMNS;
    setColumnVisible(newColumns);
  }, [matches]);

  return (
    <DataGrid
      rows={rows}
      columns={columns}
      columnVisibilityModel={columnVisible}
    />
  );
};

This answer would be more useful with an explanation of where useTheme is coming from - without it being defined, the answer is incomplete and there are multiple instances of useTheme with react components. — Dylan Glockler, Aug 20 '23 at 17:57
@DylanGlockler - fair point. It's an MUI method so I had assumed anyone looking at this answer would be familiar with it, but I could be wrong—updated answer. to include imports. — sirclesam, Aug 28 '23 at 03:02

score 0 · Answer 4 · answered Mar 25 '22 at 11:23

0

GridColDef.hide prop is deprecated, you should use the column visibility to hide the unwanted columns: https://mui.com/x/react-data-grid/columns/#controlled-visible-columns

answered Mar 25 '22 at 11:23

Andrea Procucci

1
1

score 0 · Answer 5 · answered Sep 02 '22 at 23:45

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}

How can i hide a column in MUI X data grid?

5 Answers5