CODEWITHSUNDEEP
reactjsmaterial-uimui-x-data-gridmui-x
Burak Algur
Burak Algur

Reputation: 482

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

I don't want to 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>
    );
}

The Id column can be hidden or display:none. I tried to use

display: false

Or:

hidden: true

And I also tried:

options: {display: false, filter: false,}, but it didn’t work.

Upvotes: 23

Views: 40643

Answers (8)

TJRawlins
TJRawlins

Reputation: 1

There are column hiding filters in the column header cells or you can add GridToolbar to the data grid options which will give you a small toolbar above the grid for filtering, sorting, and hiding.

<DataGrid 
   slots={{toolbar: GridToolbar}} 
/>

columnVisibilityModel is a good solution if you don't want to let users manually select which columns they want to hide. The caveat with using columnVisibilityModel is that you won't be able to use the build-in column hiding functionality in the data grid or with GridToolbar.

I've used columnVisibilityModel with media query to hide certain columns on mobile screens

Upvotes: 0

&#214;zge Kocabaşoğlu
&#214;zge Kocabaşoğlu

Reputation: 1

const matchesSm = useMediaQuery(theme.breakpoints.down('sm'));

const columns = [ { field: ${matchesSm ? false : "testName" }, headerName: 'Test Name', width: 120,},... ]

Upvotes: -1

Evgeniy Andreevich
Evgeniy Andreevich

Reputation: 66

In the last MUI V5 you just need to pass object with exceptions values

  <DataGrid
    columnVisibilityModel={{
      id: false,
    }}
  />

Upvotes: 3

sirclesam
sirclesam

Reputation: 2337

Expanding on Robinson's answer from the documentation, there's also a way to do this programmatically. I used this code to hide some columns on the 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}
    />
  );
};

Upvotes: 8

Alister MacCormack
Alister MacCormack

Reputation: 1

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}

Upvotes: 0

Andrea Procucci
Andrea Procucci

Reputation: 11

The GridColDef.hide prop is deprecated, and you should use the column visibility to hide the unwanted columns: Data Grid - Column definition

Upvotes: 1

Robinson
Robinson

Reputation: 351

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,
      },
    },
  }}
/>

Upvotes: 35

Burak Algur
Burak Algur

Reputation: 482

I found the solution.

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

This is enough for me.

Upvotes: 22

Related Questions