在 react-table 中切换按钮组件中的所有行 select

Question

需要 select 所有行而不使用 table API 中可用的复选框触发器。我想将此触发器放到一个单独的组件中，而不是文档中 table 列之一是 select 所有触发器的内容。

沙盒游乐场：https://codesandbox.io/s/test-select-all-button-toggle-33c3g?file=/src/App.js

尝试检查文档中的选项 https://react-table-omega.vercel.app/docs/api/useRowSelect#instance-properties 可能是一个很好的指导，但我还没有想出如何将其付诸实践。

并将其放入一个组件中：

<IconHolder
  onClick={toggleAllRows} //trigger select all rows here
>
  <Text>
    <Icon
      actionIcon
      name={true ? "ok-circled2" : "circle-thin"}
      color={globalColors.purple}
      size={20}
    />{" "}
    Select All
  </Text>
</IconHolder>

Answer 1

使用 table 对象中的 toggleAllRowsSelected。

toggleAllRowsSelected: Function(?set: Bool) => void Use this function to toggle all rows as selected or not. Optionally pass true or false to set all rows to that state

...

const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  rows,
  prepareRow,
  selectedFlatRows,
  state: { selectedRowPaths },
  toggleAllRowsSelected
} = table;


...
<button onClick={() => toggleAllRowsSelected()}>
  Select All Rows
</button>

在 react-table 中切换按钮组件中的所有行 select

Toggle select all rows from a button component in react-table

reactjs

react-table