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",
  },
];

CodePudding user response：

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

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