Material UI - DataGrid 自定义列表过滤器

Question

我在 Material UI DataGrid 上尝试了一些自定义过滤器，例如https://material-ui.com/components/data-grid/filtering/

但我不认为有可能制作一个包含要过滤的文本的列表。因此，一行包含“开始”、“停止”和“未定义”作为值。如何直接过滤它们而不需要一直输入文本？（类似于预定义值的列表）

先感谢您。

Answer 1

您必须实现自己的FilterPanel，并通过 prop 将其传递到数据网格components。componentsprop 公开数据网格内的可重写组件。你可以这样使用它：

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

componentProps您还可以以相同的方式覆盖通过 prop 传递给这些被覆盖组件的 props 。

GridFilterPanel请参阅库中的默认值以获取灵感。