XGrid or Data Grid: How to restrict filter operators in the tool bar?

The solution involves

• accessing the built-in "string type" filters using getGridStringOperators provided by the grid's api

• with a ref to those filters, go ahead and filter them for what your api supports

• finally, set the column prop with the result.

Optionally, you might consider creating a custom prop to display your search field in the header.

Here is what the code might look like:

import {
  XGrid as DataGrid,
  getGridStringOperators,
} from '@material-ui/x-grid';

//-------------------------------------------------------------------------
// Column-related configuration
//
const filterOperators = getGridStringOperators().filter(({ value }) =>
  ['equals' /* add more over time */ ].includes(value),
);

const columns = [
  { field: 'id', headerName: 'ID', hide: true },
  {
    field: 'myEqualOnlyField',
    className: ['myEqualOnlyField'], // not required
    sortable: true, // not required
    filterOperators, // <<< required for what you want
    flex: 1, // not required
    // renderHeader: () => <SearchField />, <<< perhaps useful for a single, equal only option search  
  },
  {
    ...other fields/columns
  },
];

The docs don't seem to provide an explicit example for what you want to accomplish. Nonetheless, here is the link to the related documentation.

Finally, to round-out the answer, in the event you want to add your own filter, i.e., one that is not part of the built-in filters, here is a link.