Search code examples
material-uimui-x-data-grid

Material UI dataGrid Filter limit to one (or a subset of) operator values (e.g. only "contains")

How is possible to limit the default dataGrid filter to exactly on operatorValue. Lets say based on the screenshot below I would like to have only the "contains" operatorValue option and not all the other operatorValues (equals, starts with,...) for all columns.

Additionally, when this is possible it would be good to not even show the Operator Select Menu when there is only one default Operator value.

Link to a working example with material ui version >= 5 would be much much appreciated. enter image description here

Solution

  • You can define what filter operators are available when you defined your Column definitions using 'filterOperators'.

    const stringOperators = getGridStringOperators().filter((op => ['contains'].includes(op.value)));

const columns: GridColDef[] = [
    { field: 'name', headerName: 'Name', filterOperators: stringOperators },...];

    Here is the mui documentation

    I'm not sure that there is a way to completely remove the input for operator options; but if you're only allowing one, then it will be chosen by default and may not make a difference in your ux.