如何实现React Material-UI表格指定列搜索，支持下拉选择搜索列

第一步：定义可搜索列配置与新增状态 #

首先预先定义所有支持搜索的表格列配置，后续下拉选择和表格列定义可以复用该配置，同时新增状态存储用户选中的搜索列：

// 可搜索列配置，可和你的表格列配置复用
const searchableColumns = [
  { value: 'name', label: '名称' },
  { value: 'calories', label: '卡路里' },
  { value: 'carbs', label: '碳水化合物' },
  { value: 'protein', label: '蛋白质' }
]

// 新增状态：存储当前选中的搜索列
const [selectedSearchColumn, setSelectedSearchColumn] = useState('name')
// 保留原有搜索输入值状态
const [input, setInput] = useState('')
const [filterFn, setFilterFn] = useState({ fn: items => { return items; } })

第二步：修改搜索逻辑适配动态列 #

修改原有handleSearch方法，将固定检索name列改为基于选中的列动态检索，同时兼容数字、字符串等不同类型的列值：

const handleSearch = e => {
  const searchVal = e.target.value.trim().toLowerCase()
  setInput(searchVal)
  setFilterFn({
    fn: items => {
      if (searchVal === "") return items
      return items.filter(x => {
        // 统一转成字符串后匹配，避免数字类型列调用toLowerCase报错
        const columnValue = String(x[selectedSearchColumn]).toLowerCase()
        return columnValue.includes(searchVal)
      })
    }
  })
}

// 新增列切换的处理逻辑
const handleColumnChange = (e) => {
  setSelectedSearchColumn(e.target.value)
  // 可选：切换列时清空已有搜索条件
  setInput('')
  setFilterFn({ fn: items => items })
}

第三步：新增下拉选择组件到UI #

使用MUI原生的Select + MenuItem组件实现列选择器，和原有搜索输入框并排展示即可：

import { Box, Select, MenuItem } from '@mui/material'

// 渲染部分代码
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center', marginBottom: 2 }}>
  {/* 列选择下拉框 */}
  <Select
    value={selectedSearchColumn}
    onChange={handleColumnChange}
    sx={{ minWidth: 150 }}
  >
    {searchableColumns.map(col => (
      <MenuItem key={col.value} value={col.value}>
        {col.label}
      </MenuItem>
    ))}
  </Select>

  {/* 原有搜索输入框，修改label动态适配选中列 */}
  <Controls.Input
    id="search-input"
    label={`搜索${searchableColumns.find(col => col.value === selectedSearchColumn)?.label}`}
    value={input}
    autoFocus={true}
    className={classes.searchInput}
    InputProps={{
        startAdornment: (<InputAdornment position="start">
            <Search />
        </InputAdornment>)
    }}
    onChange={handleSearch}
  />
</Box>

补充说明 #

整个实现完全基于Material-UI原生组件，不需要引入第三方包。如果后续需要更复杂的表格筛选能力比如多条件组合筛选、数值范围筛选、服务端分页筛选，可以直接使用官方的MUI X DataGrid组件，其内置了完整的列筛选能力。

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