vhad/react-table
1
0
Fork 0
mirror of https://github.com/gosticks/react-table.git synced 2025-10-16 11:55:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
a9c04ca3dc
react-table/docs/api/useExpanded.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

3.3 KiB
Raw Blame History

useExpanded

  • Plugin Hook
  • Optional

useExpanded is the hook that implements row expanding. It is most often used with useGroupBy to expand grouped rows or on its own with nested subRows in tree-like data sets, but is not limited to these use-cases. It supports expanding rows both via internal table state and also via a hard-coded key on the raw row model.

Table Options

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

  • state.expanded: Array<rowId: String>
    • Optional
    • Must be memoized
    • An array of expanded row IDs.
    • If a row's id is present in this array, that row will have an expanded state. For example, if ['3'] was passed as the expanded state, by default the 4th row in the original data array would be expanded, since it would have that ID
    • For nested expansion, you can use nested IDs like 1.3 to expand sub rows. For example, if ['3', '3.5'] was passed as the expanded state, then the the 4th row would be expanded, along with the 6th subRow of the 4th row as well.
    • This information is stored in state since the table is allowed to manipulate the filter through user interaction.
  • initialState.expanded
    • Identical to the state.expanded option above
  • getSubRows: Function(row, relativeIndex) => Rows[]
  • manualExpandedKey: String
    • Optional
    • Defaults to expanded
    • This string is used as the key to detect manual expanded state on any given row. For example, if a raw data row like { name: 'Tanner Linsley', friends: [...], expanded: true} was detected, it would always be expanded, regardless of state.
  • expandSubRows: Bool
    • Optional
    • Defaults to true
    • If set to true, expanded rows are rendered along with normal rows.
    • If set to false, expanded rows will only be available through their parent row. This could be useful if you are implementing a custom expanded row view.
  • autoResetExpanded: Boolean

Instance Properties

The following properties are available on the table instance returned from useTable

  • rows: Array<Row>
    • An array of sorted rows.

Row Properties

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

  • isExpanded: Bool
    • If true, this row is in an expanded state.
  • toggleExpanded: Function(?isExpanded: Bool) => void
    • This function will toggle the expanded state of a row between true and false or, if an isExpanded boolean is passed to the function, it will be set as the new isExpanded value.
    • Rows with a hard-coded manualExpandedKey (defaults to expanded) set to true are not affected by this function or the internal expanded state.

Example