react-table/docs/api/useRowSelect.md
Tanner Linsley ddfa0fa227 Death of the path, fix some hooks, fix selectedRows
- Fixed an issue where dependency hooks were not being reduced properly, thus the table would rerender unnecessarily
- Renamed `toggleRowSelectedAll` to `toggleAllRowsSelected`. Duh...
- Added an `indeterminate` boolean prop to the default props for row selection toggle prop getters
- Renamed `selectedRowPaths` to `selectedRowIds`, which also no longer contains paths, but row IDs
- Grouped or nested row selection actions and state are now derived, instead of tracked in state.
- Rows now have a new property called `id`, which existed before and was derived from the `getRowId` option
- Rows now also have an `isSomeSelected` prop when using the `useRowSelect` hook, which denotes that at least one subRow is selected (if applicable)
- Rows' `path` property has been deprecated in favor of `id`
- Expanded state is now tracked with row IDs instead of paths
- RowState is now tracked with row IDs instead of paths
- `toggleExpandedByPath` has been renamed to `toggleExpandedById`, and thus accepts a row ID now, instead of a row path
2019-12-10 23:04:34 -07:00

2.6 KiB

useRowSelect

  • Plugin Hook
  • Optional

useRowSelect is the hook that implements basic row selection. For more information on row selection, see Row Selection

Table Options

The following options are supported via the main options object passed to useTable(options)

  • initialState.selectedRowIds: Set<RowPathKey>
    • Optional
    • Defaults to new Set()
    • If a row's ID is found in this array, it will have a selected state.
  • manualRowSelectedKey: String
    • Optional
    • Defaults to isSelected
    • If this key is found on the original data row, and it is true, this row will be manually selected
  • autoResetSelectedRows: Boolean

Instance Properties

The following values are provided to the table instance:

  • toggleRowSelected: Function(rowPath: String, ?set: Bool) => void
    • Use this function to toggle a row's selected state.
    • Optionally pass true or false to set it to that state
  • toggleAllRowsSelected: Function(?set: Bool) => void
    • Use this function to toggle all rows as select or not
    • Optionally pass true or false to set all rows to that state
  • getToggleAllRowsSelectedProps: Function(props) => props
    • Use this function to get the props needed for a select all checkbox.
    • Props:
      • onChange: Function()
      • style.cursor: 'pointer'
      • checked: Bool
      • title: 'Toggle All Rows Selected'
  • isAllRowsSelected: Bool
    • Will be true if all rows are selected.
    • If at least one row is not selected, will be false
  • selectedFlatRows: Array<Row>
    • The flat array of rows that are currently selected

Row Properties

The following additional properties are available on every prepared row object returned by the table instance.

  • isSelected: Bool
    • Will be true if the row is currently selected
  • isSomeSelected: Bool
    • Will be true if the row has subRows and at least one of them is currently selected
  • toggleRowSelected: Function(?set)
    • Use this function to toggle this row's selected state.
    • Optionally pass true or false to set it to that state

Example