How can I customize filter options in MUI data grid filter

[vinitaran]

I have a field to bookmark rows and the filter to that column is a boolean type. So the filter displays the value true or false but instead I want it to display Marked or Unmarked. How can I do that?

const columns: GridColDef[] = [
{
field: "watchlist",
headerName: "Wishlist",
width: 120,
type: "boolean",
renderCell: (params) => (

<CustomCheckbox
rowId={params.id}
columnId={params.field}
checked={params.value}
onCheckboxClick={() =>
handleCheckboxClick(params.row.project_id, params.value)
}
/>

),
},
]

[jordan-kaxig]

I solved it by using type: "singleSelect" instead of type: "boolean". For "singleSelect" types, you can define which value options you want. And also you could set the filterOperators to only hold the "is" operator.

So you would do:

import { getGridSingleSelectOperators } from "@mui/x-data-grid-pro";

const columns: GridColDef[] = [
  {
    field: "watchlist",
    headerName: "Wishlist",
    width: 120,
    type: "singleSelect",
    valueOptions: [
      { value: true, label: "Marked" },
      { value: false, label: "Unmarked" },
    ],
    filterOperators: getGridSingleSelectOperators().filter((operator) => operator.value === "is"),
    renderCell: (params) => (
      <CustomCheckbox
        rowId={params.id}
        columnId={params.field}
        checked={params.value}
        onCheckboxClick={() =>
          handleCheckboxClick(params.row.project_id, params.value)
        }
      />
    ),
  },
];