如何在React Table每列添加搜索按钮实现列过滤并调用API更新表格数据

1. 新增状态管理 #

先在组件内添加状态存储每列的搜索输入值与表格数据：

import { useState } from 'react';

// 组件内定义
const [columnSearchValues, setColumnSearchValues] = useState({});
// 存储接口返回的表格数据
const [tableData, setTableData] = useState([]);

2. 修改columns配置，在表头新增搜索输入框与按钮 #

修改原有的columns生成逻辑，在Header区域追加搜索控件：

const columns = tableColumns.map(({ key, header }) => ({
  Header: (
    <div>
      <Tooltip arrow title={header} placement="top">
        <strong className={classes.head}>{header}</strong>
      </Tooltip>
      {/* 新增列搜索区域 */}
      <div style={{ marginTop: 8, display: 'flex', gap: 4 }}>
        <input
          style={{ width: '70%', padding: '2px 4px' }}
          placeholder="搜索关键词"
          value={columnSearchValues[key] || ''}
          onChange={(e) => setColumnSearchValues(prev => ({
            ...prev,
            [key]: e.target.value
          }))}
          onPressEnter={() => handleColumnSearch(key, columnSearchValues[key])}
        />
        <button 
          onClick={() => handleColumnSearch(key, columnSearchValues[key])}
          style={{ width: '30%', padding: '2px' }}
        >
          搜索
        </button>
      </div>
    </div>
  ),
  id: key,
  accessor: key,
  headValue: header,
  Cell: row => {
    const rowValue = row.values[key];
    return (
      <div style={{ textAlign: 'center' }}>
        {rowValue ?? ''}
      </div>
    );
  },
  width: 220, // 调整列宽适配搜索控件
  // 禁用React Table自带的前端过滤，因为我们走后端接口
  disableFilters: true
}));

3. 实现列搜索接口调用逻辑 #

编写搜索触发函数，调用后端接口更新表格数据：

const handleColumnSearch = async (columnKey, keyword) => {
  // 没有关键词时可以按需决定是否重置表格
  if (!keyword?.trim()) {
    // 可选：调用全量数据接口重置表格
    // const res = await fetchFullTableData();
    // setTableData(res.data);
    return;
  }
  try {
    // 调用后端搜索接口，传入列标识和搜索关键词
    const res = await fetch('/你的接口地址', {
      method: 'POST',
      body: JSON.stringify({
        filterColumn: columnKey,
        filterKeyword: keyword.trim()
        // 其余分页、排序参数按需携带
      })
    });
    const result = await res.json();
    // 更新表格数据
    setTableData(result.data);
  } catch (err) {
    console.error('列搜索失败', err);
  }
};

4. 调整DraggableTable配置 #

不需要使用自带的前端过滤回调，适配列宽调整即可：

<DraggableTable
  showPagination={false}
  fixedCol={fixedCol}
  // 如果不需要自带前端过滤可去掉filterable属性
  // filterable
  handleColumnChange={onColumnChange}
  rows={tableData}
  columns={columns}
  style={{
    height: tableData?.length === 0
      ? 200
      : tableData?.length <= 8
        ? tableData.length * 50 + 60
        : 400,
    width: columns?.length === 0
      ? '60vw'
      : columns?.length <= 3
        ? columns.length * 240 // 调整列宽计算适配新增的搜索控件
        : columns?.length <= 6
          ? columns.length * 220
          : columns?.length <=9
            ? columns.length * 190
            : '80vw'
  }}
  getTrProps={(state, rowInfo) => {
    return {
      onClick: () => enableCellClick && onCellClick(rowInfo.original)
    };
  }} 
  resizable
/>

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