material-ui - XGrid 或 Data Grid：如何在工具栏中限制过滤器运算符？

Question

我在页面上设置了 Material-UI 的 XGrid，支持它的 API 仅支持“等于”作为过滤器运算符。如何在工具栏中隐藏其他运算符？

工具栏截图

标签： material-ui

Answer 1

解决方案涉及

• getGridStringOperators使用网格的 api 提供的访问内置的“字符串类型”过滤器

• 使用这些过滤器的引用，继续过滤它们以获得您的 api 支持的内容

• 最后，使用结果设置列道具。

或者，您可以考虑创建一个自定义道具以在标题中显示您的搜索字段。

下面是代码的样子：

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
  },
];

这些文档似乎没有为您想要完成的工作提供明确的示例。尽管如此，这里是相关文档的链接。

最后，为了完善答案，如果您想添加自己的过滤器，即不属于内置过滤器的过滤器，这里有一个链接。