无法在 Material-UI DataGrid 过滤器中使用本地字符（例如“?”、“Ş”）

Question

我正在使用 Material-UI 在基于 React 的应用程序中创建 DataGrid。但是，我在尝试使用土耳其字符（例如“і”、“Ş”）过滤数据时遇到了问题。

具体来说，当尝试过滤包含土耳其语字符的数据时，使用大写“ı”或“Ş”字母进行过滤无法按预期工作，并且无法获得所需的结果。看来过滤过程对土耳其字符不敏感。

Answer 1

要在 Material-UI DataGrid 过滤器中使用本地字符，您需要配置 DataGrid 组件的过滤行为。

一种可能的解决方案是使用 DataGrid 组件的 filterOptions 属性并将 matchFrom 属性设置为“start”。这将使过滤器从文本的开头开始匹配，而不是使用不区分大小写的搜索。

以下是如何配置 DataGrid 组件以在过滤器中使用本地字符的示例：

在此示例中，名称列包含带有本地字符的数据。通过在filterOptions中设置matchFrom: 'start'，过滤器将只匹配文本开头的本地字符。

您可以通过调整filterModel对象中的operatorValue和value属性来进一步自定义过滤器行为。

确保用您的实际数据替换列和行。

import { DataGrid } from '@material-ui/data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: 'Name', width: 130 },
  // other columns...
];

const rows = [
  { id: 1, name: 'İstanbul' },
  { id: 2, name: 'Şişli' },
  // other rows...
];

const MyDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        filterModel={{
          items: [
            {
              columnField: 'name',
              operatorValue: 'contains',
              value: '', // specify the initial filter value here
            },
          ],
        }}
        filterOptions={{
          matchFrom: 'start',
        }}
      />
    </div>
  );
};

export default MyDataGrid;