mirror of
https://github.com/gosticks/react-table.git
synced 2025-10-16 11:55:36 +00:00
ddfa0fa227
- 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
61 lines
3.3 KiB
Markdown
61 lines
3.3 KiB
Markdown
# `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[]`
|
|
- Optional
|
|
- See the [useTable hook](#table-options) for more details
|
|
- `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`
|
|
- Defaults to `true`
|
|
- When `true`, the `expanded` state will automatically reset if any of the following conditions are met:
|
|
- `data` is changed
|
|
- To disable, set to `false`
|
|
- For more information see the FAQ ["How do I stop my table state from automatically resetting when my data changes?"](../faq.md#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes)
|
|
|
|
### 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
|
|
|
|
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/expanding)
|
|
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/expanding)
|