React Table列级下拉筛选求助：外部下拉实现全表过滤

核心实现思路 #

借助React Table的useFilters插件提供的setFilter方法，结合外部下拉组件绑定切换事件，实现指定列的筛选控制，同时可与已有的全局筛选（setGlobalFilter）功能兼容。

完整代码示例 #

import React from 'react';
import { useTable, useFilters } from 'react-table';

export default function FilterableTable() {
  // 模拟业务数据
  const tableData = React.useMemo(
    () => [
      { name: '张三', age: 25, department: '前端部' },
      { name: '李四', age: 32, department: '后端部' },
      { name: '王五', age: 28, department: '产品部' },
      { name: '赵六', age: 30, department: '前端部' },
    ],
    []
  );

  // 列配置
  const tableColumns = React.useMemo(
    () => [
      { Header: '姓名', accessor: 'name' },
      { Header: '年龄', accessor: 'age' },
      { Header: '部门', accessor: 'department' },
    ],
    []
  );

  // 筛选状态管理
  const [targetColumn, setTargetColumn] = React.useState('name');
  const [filterInput, setFilterInput] = React.useState('');

  // 初始化表格实例，启用Filters插件
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    setFilter, // 列级筛选核心方法
    setGlobalFilter, // 已实现的全局筛选方法
  } = useTable(
    {
      columns: tableColumns,
      data: tableData,
    },
    useFilters // 必须启用此插件才能使用列级筛选API
  );

  // 切换筛选列时重置筛选状态
  const handleColumnSwitch = (e) => {
    const columnId = e.target.value;
    setTargetColumn(columnId);
    setFilter(columnId, '');
    setFilterInput('');
  };

  // 更新列级筛选值
  const handleFilterUpdate = (e) => {
    const value = e.target.value;
    setFilterInput(value);
    setFilter(targetColumn, value);
  };

  return (
    <div className="table-container">
      {/* 外部列级筛选控件 */}
      <div style={{ marginBottom: '1rem', display: 'flex', gap: '0.5rem' }}>
        <select value={targetColumn} onChange={handleColumnSwitch}>
          {tableColumns.map(col => (
            <option key={col.accessor} value={col.accessor}>
              {col.Header}
            </option>
          ))}
        </select>
        <input
          type="text"
          placeholder={`筛选${tableColumns.find(c => c.accessor === targetColumn)?.Header}`}
          value={filterInput}
          onChange={handleFilterUpdate}
        />
      </div>

      {/* 全局筛选控件（保留原有实现） */}
      <div style={{ marginBottom: '1rem' }}>
        <input
          type="text"
          placeholder="全局搜索"
          onChange={(e) => setGlobalFilter(e.target.value)}
        />
      </div>

      {/* React Table渲染 */}
      <table {...getTableProps()} style={{ borderCollapse: 'collapse', width: '100%' }}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()} style={{ border: '1px solid #ddd', padding: '0.5rem' }}>
                  {column.render('Header')}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map(row => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => (
                  <td {...cell.getCellProps()} style={{ border: '1px solid #ddd', padding: '0.5rem' }}>
                    {cell.render('Cell')}
                  </td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

关键说明 #

• 启用useFilters插件：这是使用列级筛选setFilter方法的前提，必须在useTable的第二个参数中传入该插件。
• setFilter方法用法：setFilter(columnAccessor, filterValue)，第一个参数是列配置中的accessor值，第二个是筛选内容，调用后表格会自动过滤匹配该列值的行。
• 筛选状态重置：切换筛选列时，需要清空目标列的筛选值和输入框内容，避免残留的筛选条件影响新列的筛选结果。
• 多筛选兼容：列级筛选和全局筛选的逻辑是叠加的，只有同时满足两个筛选条件的行才会被展示。

效果展示 #

全局筛选效果

列级筛选控件效果

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