electron react-table,筛选器和选择列在同一个表中

aamkag61  于 2022-12-08  发布在  Electron
关注(0)|答案(1)|浏览(190)

我正在尝试使用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
我删除了一些与问题无关的多余行,如Table接收的参数。
这是我在这里的第一个问题,所以我希望我已经足够清楚了。谢谢!

aiazj4mn

aiazj4mn1#

使用全局筛选器(前端筛选器),您可以使用selectedRowIdsreact-table内置变量轻松地仅管理它。
我已经在This link中实现了整个项目。
https://codesandbox.io/s/admiring-wood-8rxinu?file=/src/components/DataTable.js:2212-2226
我希望这对你有帮助

相关问题