Add back useFlexLayout and full-width-resizable-table example

This commit is contained in:
Tanner Linsley
2019-12-17 20:41:28 -07:00
parent f48ef14975
commit b48cddb92b
26 changed files with 10853 additions and 12 deletions
+6
View File
@@ -25,6 +25,12 @@
- **Usage Required**
- This core prop getter is required to to enable absolute layout for rows cells
### HeaderGroup Properties
- `getHeaderGroupProps`
- **Usage Required**
- This core prop getter is required to to enable absolute layout for headers
### Header Properties
- `getHeaderProps`
+6
View File
@@ -19,6 +19,12 @@
- **Usage Required**
- This core prop getter is required to to enable absolute layout for rows cells
### HeaderGroup Properties
- `getHeaderGroupProps`
- **Usage Required**
- This core prop getter is required to to enable absolute layout for headers
### Header Properties
- `getHeaderProps`
+43
View File
@@ -0,0 +1,43 @@
# `useFlexLayout`
- Plugin Hook
- Optional
`useFlexLayout` is a plugin hook that adds support for headers and cells to be rendered as `inline-block` `div`s (or other non-table elements) with `width` being used as the flex-basis and flex-grow. This hook becomes useful when implementing both virtualized and resizable tables that must also be able to stretch to fill all available space.
**NOTE:** Although no additional options are needed for this plugin to work, the core column options `width`, `minWidth` and `maxWidth` are used to calculate column and cell widths and must be set:
- `minWidth` is only used to limit column resizing. It does not define the minimum width for a column.
- `width` is used as both the `flex-basis` and `flex-grow`. This means that it essentially acts as both the minimum width and flex-ratio of the column.
- `maxWidth` is only used to limit column resizing. It does not define the maximum width for a column.
[See Column Options](#column-options) for more information on these options.
### Row Properties
- `getRowProps`
- **Usage Required**
- This core prop getter is required to to enable absolute layout for rows
### Cell Properties
- `getCellProps`
- **Usage Required**
- This core prop getter is required to to enable absolute layout for rows cells
### HeaderGroup Properties
- `getHeaderGroupProps`
- **Usage Required**
- This core prop getter is required to to enable absolute layout for headers
### Header Properties
- `getHeaderProps`
- **Usage Required**
- This core prop getter is required to to enable absolute layout for headers
### Example
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/block-layout)
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/block-layout)