带有过滤器的react-table并在同一个表中选择列

Question

我正在尝试使用react-table 7.5来创建一个带有搜索栏和按行选择功能的表格。 我分别有搜索和选择行的代码，但我无法使其一起工作。

这是我的表格组件：

 const Table = (...) => {
  const [data, setData] = useState(MOCK_DATA);
  const columns = useMemo(() => COLUMNS, []);

  const defaultColumn = React.useMemo(
    () => ({
      Filter: ColumnFilter,
    }),
    []
  );

  // table props
  let {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    footerGroups,
    rows,
    prepareRow,
    setGlobalFilter,
    selectedFlatRows,
    state: { selectedRowPaths },
  } = useTable(
    {
      columns,
      data,
    },
    useFilters,
    (hooks) => {
        hooks.visibleColumns.push((columns) => [
          {
            id: "selection",
            Header: ({ getToggleAllRowsSelectedProps }) => (
              <Checkbox {...getToggleAllRowsSelectedProps()} />
            ),
            Cell: ({ row }) => <Checkbox {...row.getToggleRowSelectedProps()} />,
          },
          ...columns,
        ]);
      },
    useRowSelect,
    useGlobalFilter
  );

  const stateF = state;

  const { globalFilter } = stateF;

  const backButton = (e) => {
    e.preventDefault();
    setTable(true);
  };

  return (
    <>
      <div
        className="Table"
        }
      >
                <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />

        
          {isFirstTable ? "next" : "submit"}
        </button>
        <table {...getTableProps()}>
          <thead>
            {headerGroups.map((headerGroup) => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column) => (
                  <th {...column.getHeaderProps()}>
                    {column.render("Header")}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {rows.map(row => {
              prepareRow(row);
              return (
                <tr {...row.getRowProps()}>
                  {row.cells.map((cell) => {
                    return (
                      <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
        <pre>
          <code>
            {JSON.stringify(
              {
                selectedFlatRows: selectedFlatRows.map((row) => row.original),
              },
              null,
              2
            )}
          </code>
        </pre>
      </div>
    </>
  );
};

这就是代码，主要问题是编译器说状态未定义。 第 66:18 行：“state”未定义 no-undef

我删除了一些与问题无关的额外行，例如表接收的参数。

这是我的第一个问题，所以我希望我足够清楚。谢谢！

Answer 1

使用全局过滤器（前端过滤器），您可以使用selectedRowIdsreact-table内置变量轻松管理它。

我已经在此链接中实现了整个项目。

https://codesandbox.io/s/admiring-wood-8rxinu?file=/src/components/DataTable.js:2212-2226

希望对你有帮助