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: Object<rowId: Boolean>
    • Optional
    • Defaults to {}
    • If a row's ID is set to true in this object, 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 selected or not
    • Optionally pass true or false to set all rows to that state
  • toggleAllPageRowsSelected: Function(?set: Bool) => void
    • Use this function to toggle all of the current page's rows as selected or not
    • Optionally pass true or false to set all rows to that state
  • getToggleAllPageRowsSelectedProps: Function(props) => props
    • Use this function to get the props needed for a select all checkbox (current page only).
    • Props:
      • onChange: Function()
      • style.cursor: 'pointer'
      • checked: Bool
      • indeterminate: Bool
      • title: 'Toggle All Rows Selected'
  • 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
      • indeterminate: 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
  • getToggleRowSelectedProps: Function(props) => props
    • Use this function to get the props needed for a select row checkbox.
    • Props:
      • onChange: Function()
      • style.cursor: 'pointer'
      • checked: Bool
      • title: 'Toggle Row Selected'

Example

Select All Checks All Rows

Select All Checks Current Page's Rows

Was this page helpful?

Subscribe to our newsletter

The latest TanStack news, articles, and resources, sent to your inbox.

    I won't send you spam.

    Unsubscribe at any time.

    © 2020 Tanner Linsley. All rights reserved.