如何在Material React Table列中实现带搜索功能的下拉选择框

方案一：使用MUI Autocomplete（推荐） #

Autocomplete组件内置搜索过滤功能，代码简洁，能快速实现自动完成/搜索下拉需求：

import { Autocomplete, TextField } from '@mui/material';
import { useMemo } from 'react';
import { MRT_ColumnDef } from 'material-react-table';

//列配置
const columns = useMemo<MRT_ColumnDef<Person>[]>(
  () => [
    //...其他列配置
    {
      accessorKey: 'state',
      header: 'State',
      //自定义编辑组件
      muiTableBodyCellEditComponent: ({ cell, updateRow }) => (
        <Autocomplete
          options={states}
          value={cell.getValue()}
          onChange={(event, newValue) => {
            if (newValue) {
              updateRow({ state: newValue });
            }
          }}
          renderInput={(params) => <TextField {...params} label="State" variant="outlined" fullWidth />}
        />
      ),
    },
  ],
  [states], //添加states到依赖数组
);

方案二：基于MUI Select+TextField自定义搜索 #

如果需要完全自定义搜索逻辑，可采用这种方式：

import { useState } from 'react';
import { MenuItem, TextField, Select } from '@mui/material';
import { useMemo } from 'react';
import { MRT_ColumnDef } from 'material-react-table';

//自定义带搜索的Select组件
const SearchableSelect = ({ value, onChange, options, label }) => {
  const [searchTerm, setSearchTerm] = useState('');
  
  //实时过滤选项
  const filteredOptions = options.filter(option =>
    option.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <TextField
      select
      fullWidth
      value={value}
      onChange={onChange}
      label={label}
      variant="outlined"
      inputProps={{
        //监听输入更新搜索关键词
        onChange: (e) => setSearchTerm(e.target.value),
      }}
    >
      {filteredOptions.map((option) => (
        <MenuItem key={option} value={option}>
          {option}
        </MenuItem>
      ))}
    </TextField>
  );
};

//列配置
const columns = useMemo<MRT_ColumnDef<Person>[]>(
  () => [
    //...其他列配置
    {
      accessorKey: 'state',
      header: 'State',
      muiTableBodyCellEditComponent: ({ cell, updateRow }) => (
        <SearchableSelect
          value={cell.getValue()}
          onChange={(e) => updateRow({ state: e.target.value })}
          options={states}
          label="State"
        />
      ),
    },
  ],
  [states],
);

关键说明 #

• 替换原有的muiTableBodyCellEditTextFieldProps为muiTableBodyCellEditComponent，通过自定义组件实现搜索功能
• 两种方案都通过updateRow方法将选中的值同步到表格行数据中
• 方案一的Autocomplete自带搜索过滤，无需手动处理状态；方案二适合需要定制搜索规则的场景

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