react-table/docs/api/useBlockLayout.md
Jason Clark d2acfc4235
New documentation site built with Docz (#2013)
* size-snapshot created?

* Added docz for documentation site

* Modified .gitignore to get rid of .docz internal stuff

* Update all doc links to point to proper paths with docz

* Removed .docz folder from Git

Co-authored-by: Jason Clark <jason.clark@tcnbroadcasting.com>
2020-03-25 14:29:56 -06:00

44 lines
1.5 KiB
Markdown

---
name: useBlocklayout
route: /api/useBlocklayout
menu: API
---
# `useBlocklayout`
- Plugin Hook
- Optional
`useBlocklayout` 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 explicit `width`. Similar to the `useAbsoluteLayout` hook, this becomes useful if and when you need to virtualize rows and cells for performance.
**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. [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)