Material-UI DataGrid无法使用土耳其字符（如İ、Ş）进行过滤

问题根源 #

Material-UI DataGrid默认的过滤逻辑采用通用字符串匹配规则，没有适配土耳其语的特殊字符映射——比如土耳其语里大写İ对应小写i，大写I对应小写ı，而普通的toUpperCase()/toLowerCase()会按英语规则处理，直接导致土耳其字符的大小写匹配失效。

解决方案：自定义适配土耳其语的过滤逻辑 #

你可以通过为列配置自定义过滤操作，或者全局重写过滤规则来解决这个问题，核心是使用土耳其语locale的字符串处理方法。

方案1：为特定列配置自定义过滤 #

针对包含土耳其字符的列（比如名称列），定义专属的包含过滤操作：

import { GridFilterOperator } from '@mui/x-data-grid';

// 适配土耳其语的包含过滤操作
const turkishContainsFilter: GridFilterOperator = {
  label: '包含',
  value: 'turkishContains',
  getApplyFilterFn: (filterItem) => {
    if (!filterItem.value) return null;
    const filterVal = filterItem.value.toLocaleLowerCase('tr-TR');
    return ({ value }) => {
      if (value == null) return false;
      return value.toLocaleLowerCase('tr-TR').includes(filterVal);
    };
  },
};

// 列定义中使用该过滤操作
const columns = [
  {
    field: 'fullName',
    headerName: '全名',
    filterOperators: [turkishContainsFilter],
  },
  // 其他列配置...
];

// 渲染DataGrid
<DataGrid rows={yourDataRows} columns={columns} />

方案2：全局适配土耳其语过滤 #

如果需要所有列都支持土耳其语过滤，可以全局替换默认的过滤操作：

import { DataGrid, GridFilterOperator } from '@mui/x-data-grid';

// 重写默认的包含操作，适配土耳其语
const turkishFilterOperators: GridFilterOperator[] = [
  {
    ...GridFilterOperator.contains,
    getApplyFilterFn: (filterItem) => {
      if (!filterItem.value) return null;
      const filterVal = filterItem.value.toLocaleLowerCase('tr-TR');
      return ({ value }) => {
        if (value == null) return false;
        return value.toLocaleLowerCase('tr-TR').includes(filterVal);
      };
    },
  },
  // 可按需重写其他操作：等于、开头为、结尾为等
];

// 封装成适配土耳其语的DataGrid组件
function TurkishDataGrid(props) {
  return <DataGrid filterOperators={turkishFilterOperators} {...props} />;
}

// 使用自定义组件
<TurkishDataGrid rows={yourDataRows} columns={columns} />

进阶：精确匹配处理 #

如果需要更严谨的匹配（忽略大小写和重音差异），可以使用localeCompare方法：

// 替换方案中的匹配逻辑
return value.localeCompare(filterVal, 'tr-TR', { sensitivity: 'base' }) === 0;

sensitivity: 'base'表示仅区分基础字符，不区分大小写和重音，完全适配土耳其语字符的匹配需求。

验证要点 #

测试时分别输入大写İ/Ş和小写i/ş，确认两种大小写都能正确匹配包含对应字符的行。

内容的提问来源于stack exchange，提问作者Reşat Akkuş