如何在MUI X Data Grid中添加基础搜索栏实现行数据过滤

你提到的GridToolbarQuickFilter已经和Data Grid内置的过滤能力做了原生打通，不需要额外手动编写行过滤逻辑，只要按以下方式接入即可实现输入实时过滤效果：

接入步骤 #

• 导入依赖组件：从你使用的MUI X Data Grid对应包（社区版/Pro版/Premium版均可）导入DataGrid、GridToolbarQuickFilter，如果需要保留默认工具栏的列控制、导出、高级过滤等按钮，额外导入GridToolbar即可。
• 编写自定义工具栏组件，将GridToolbarQuickFilter放入工具栏容器内，可按需调整布局、样式匹配设计要求。
• 通过Data Grid的slots.toolbar属性传入自定义工具栏，组件会自动完成搜索输入和内置过滤状态的绑定，用户输入时会实时触发全表/指定列的模糊匹配过滤，清空输入自动恢复全量数据。

基础代码示例 #

import Box from '@mui/material/Box';
import { 
  DataGrid, 
  GridToolbar, 
  GridToolbarQuickFilter 
} from '@mui/x-data-grid';

// 自定义搜索工具栏
function CustomSearchToolbar() {
  return (
    <Box sx={{ padding: 1, display: 'flex', justifyContent: 'flex-start' }}>
      <GridToolbarQuickFilter
        placeholder="输入关键词搜索..."
        debounceMs={200} // 输入防抖时间，默认150ms
        sx={{ width: 300 }} // 自定义搜索框宽度、边距等样式
        // 限定搜索列：只匹配指定field的列，不传默认匹配所有列
        // quickFilterColumns={['id', 'userName', 'email']}
      />
      {/* 如需保留默认工具栏的其他功能按钮，放开下方注释即可 */}
      {/* <GridToolbar sx={{ marginLeft: 'auto' }} /> */}
    </Box>
  );
}

// 表格使用示例
export default function DataTable() {
  return (
    <div style={{ height: 500, width: '100%' }}>
      <DataGrid
        rows={/* 你的表格行数据 */}
        columns={/* 你的列配置 */}
        slots={{
          toolbar: CustomSearchToolbar
        }}
        // 可选：配置搜索匹配逻辑
        filterMode="client" // 客户端过滤用client，服务端过滤用server
        // 初始过滤配置，默认是多关键词OR匹配
        initialState={{
          filter: {
            quickFilterLogicOperator: 'or'
          }
        }}
      />
    </div>
  );
}

常见自定义配置 #

• 自定义匹配规则：如果需要实现精确匹配、前缀匹配等自定义逻辑，可通过slotProps.toolbar.quickFilterProps传入自定义匹配函数，不需要修改组件内部状态。
• 服务端搜索适配：如果是服务端分页/过滤场景，把filterMode设为server，监听onFilterModelChange事件获取当前搜索关键词，调用接口传参获取过滤后的数据即可，搜索栏的状态依然会自动维护。
• 样式对齐：GridToolbarQuickFilter底层是MUI TextField组件，支持通过sx、className属性自定义样式，完全可以对齐参考截图的搜索栏样式。

避坑提示：不要自己维护搜索输入框的value、不要手动写filterModel更新逻辑，GridToolbarQuickFilter已经做了完整的状态同步，重复实现反而会导致过滤状态冲突。

内容的提问来源于stack exchange，提问作者TangoCharlie