Hide Column in Material UI Data Grid Filter

Question

I have successfully hidden the id in the columns. But how do I also hide it in the filter?

<StyledDataGrid
  getRowId={(r) => r.newId}
  columns={columns}
  rows={rows}
  disableSelectionOnClick
  checkboxSelection
/>;

const columns = [
  { field: "id", hide: true, filterable: false },
  {
    field: "product",
    headerName: "Product Name",
  },
  { field: "price", headerName: "Price" },
  {
    field: "expiry",
    headerName: "Expiry date",
  },
];

Dobromir Kirov · Accepted Answer · 2022-10-13 02:10:07Z

1

You could apply a filter when you provide the columns to <StyledDataGrid />.

colums={ columns.filter((col) => !col.hide) }

edited Oct 13, 2022 at 2:10

Dobromir Kirov

1,0611 gold badge9 silver badges19 bronze badges

answered Oct 12, 2022 at 0:09

David Pearl

481 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Hide Column in Material UI Data Grid Filter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related