React 表 - 下拉过滤器

Question

我已经使用 setGlobalFilter 实现了全局文件管理器

但我想明智地设置过滤器列，例如：

在表之外，我需要一个包含一些值的下拉列表，这些值应该根据下拉列表中选择的值来过滤反应表。 此下拉过滤器应根据下拉列表中选择的值过滤掉整个表格。

任何人都可以给我演示链接或任何有关此问题的帮助。

Answer 1

好吧，我们在

react-table v8上做吧，是的，它是新版本的react-table。

首先，请确保从

@tanstack/react-table

导入所需的项目

import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  useReactTable,
} from "@tanstack/react-table";

在这里，我们使用简单的数据。

const defaultData = [
  {
    firstName: "tanner",
    lastName: "linsley",
    age: 24,
    visits: 100,
    status: "In Relationship",
    progress: 50,
  },
  {
    firstName: "tandy",
    lastName: "miller",
    age: 40,
    visits: 40,
    status: "Single",
    progress: 80,
  },
  {
    firstName: "joe",
    lastName: "dirte",
    age: 45,
    visits: 20,
    status: "Complicated",
    progress: 10,
  },
];

在新版本的

react-table中，我们不必记住columns。我们可以借助 columnHelper 来定义它。您可以阅读详细信息这里。

const columnHelper = createColumnHelper();

const columns = [
  columnHelper.accessor("firstName", {
    header: "First Name",
  }),
  columnHelper.accessor("lastName", {
    header: "Last Name",
  }),
  columnHelper.accessor("age", {
    header: "Age",
  }),
  columnHelper.accessor("visits", {
    header: "Visits",
  }),
  columnHelper.accessor("status", {
    header: "Status",
  }),
  columnHelper.accessor("progress", {
    header: "Profile Progress",
  }),
];

接下来，我们在组件中定义所需的状态。

  const [data] = useState(() => [...defaultData]);

  // to keep the selected column field
  const [field, setField] = useState();

  // to keep the input search value
  const [searchValue, setSearchValue] = useState("");

  // required by react-table for filtering purposes
  const [columnFilters, setColumnFilters] = useState();

在之前的版本中，我们使用

useTable 钩子来创建表实例，在新版本中，我们使用 useReactTable 来代替。我们通过这些配置来使我们的过滤器正确运行。

  const table = useReactTable({
    data,
    columns,
    enableFilters: true,
    enableColumnFilters: true,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    state: {
      columnFilters,
    },
    onColumnFiltersChange: setColumnFilters,
  });

接下来，我们创建

select option 标签，将选择选项 value 绑定到 field 状态，并将 onChange 事件处理程序绑定到 handleSelectChange。对于 input 标签，我们将 value 绑定到 searchValue，并将 onChange 事件处理程序绑定到 handleInputChange 方法。 在选择更改处理程序中，我们需要重置 columnFilters 和 searchValue 状态。

  ...

  const handleSelectChange = (e) => {
    setColumnFilters([]);
    setSearchValue("");
    setField(e.target.value);
  };

  const handleInputChange = (e) => {
    setSearchValue(e.target.value);
  };

  return (
    ...
      <select value={field} onChange={handleSelectChange}>
        <option value="">Select Field</option>
        {table.getAllLeafColumns().map((column, index) => {
          return (
            <option value={column.id} key={index}>
              {column.columnDef.header}
            </option>
          );
        })}
      </select>
      <input
        value={searchValue}
        onChange={handleInputChange}
        className="p-2 font-lg shadow border border-block"
        placeholder={
          field ? `Search ${field} column...` : "Please select a field"
        }
      />
   ...
 )

在这里，我们从

table.getAllLeafColumns() 中获取了选择选项列表。

由于列

age、visits 和 progress 值是数字，我们需要使用自定义 filterFn 选项来修改列配置。

const columns = [
  ...

  columnHelper.accessor("age", {
    header: "Age",
    filterFn: (row, _columnId, value) => {
      return row.original.age === parseInt(value);
    },
  }),
  columnHelper.accessor("visits", {
    header: "Visits",
    filterFn: (row, _columnId, value) => {
      return row.original.visits === parseInt(value);
    },
  }),

  ...

  columnHelper.accessor("progress", {
    header: "Profile Progress",
    filterFn: (row, _columnId, value) => {
      return row.original.progress === parseInt(value);
    },
  }),
];

正如

文档所说，我们需要记住这一点：

每个过滤器函数接收：

要过滤的行
用于检索行值的columnId
过滤值

如果该行应包含在过滤行中，则应返回 true；如果应删除该行，则应返回 false。

最后，是时候渲染表格了：

  return (
    <div className="p-2">
      ...

      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );

这是工作代码：

希望有帮助。