CODEWITHSUNDEEP
javascriptfiltermaterial-ui
J. Doe
J. Doe

Reputation: 137

Material UI - DataGrid custom list filter

I tried some custom filters on the Material UI DataGrid, e.g. https://material-ui.com/components/data-grid/filtering/

But I don't see the possiblity to make a list with text to filter. So one row contains "start", "stop" and "undefined" as values. How can I filter them directly without typing in the text all the time? (something like a list of predefined values)

Thank you in advance.

Upvotes: 4

Views: 17440

Answers (2)

Jimmy_barnes
Jimmy_barnes

Reputation: 110

I think the singleSelect data type will meet your needs. https://mui.com/x/react-data-grid/column-definition/#special-properties

In your column definition you would add:

type: 'singleSelect',
valueOptions: ['start', 'stop', 'undefined']

This will give you a dropdown in your filter where you can select those values instead of typing them into an input field.

Upvotes: 3

Zdenek F
Zdenek F

Reputation: 1919

You have to implement your own FilterPanel, which you pass to the data grid via components prop. components prop exposes overridable components within the data grid. You can use it like this:

<DataGrid
  {...data}
  components={{
    FilterPanel: YourFilterPanel
  }}
/>

You can also override the props passed to these overridden components via componentProps prop in the same manner.

See the default GridFilterPanel from the library for inspiration.

Upvotes: 6

Related Questions