diff --git a/README.md b/README.md
index 2a28e90..9c437f1 100644
--- a/README.md
+++ b/README.md
@@ -83,7 +83,7 @@ The differences between the 2 versions are incredibly massive. Unfortunately, I
**React Table v7** is being built and maintained by me, @tannerlinsley and I am always in need of more Patreon support to keep this project afloat. If you would like to contribute to my Patreon goal for v7 and beyond, [visit my Patreon and help me out!](https://patreon.com/tannerlinsley)
))}
-
+
{rows.map(
(row, i) =>
prepareRow(row) || (
@@ -516,7 +544,7 @@ function Table({ columns, data }) {
))}
-
+
{rows.map(
(row, i) =>
prepareRow(row) || (
@@ -809,7 +837,7 @@ function Table({ columns, data }) {
))}
-
+
{firstPageRows.map(
(row, i) =>
prepareRow(row) || (
@@ -1008,7 +1036,7 @@ function Table({ columns: userColumns, data }) {
))}
-
+
{rows.map(
(row, i) =>
prepareRow(row) || (
@@ -1227,7 +1255,7 @@ function Table({ columns, data }) {
))}
-
+
{page.map(
(row, i) =>
prepareRow(row) || (
@@ -1436,7 +1464,7 @@ function Table({ columns, data }) {
))}
-
+
{rows.map(
(row, i) =>
prepareRow(row) || (
@@ -1578,47 +1606,75 @@ The following additional properties are available on every `Cell` object returne
- Use this function to programmatically update the state of a cell.
- `updater` can be a function or value. If a `function` is passed, it will receive the current value and expect a new one to be returned.
+# `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, 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
+
+### Header Properties
+
+- `getHeaderProps`
+ - **Usage Required**
+ - This core prop getter is required to to enable absolute layout for headers
+
+### Example
+
+- [Source + Guide](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)
+
# `useAbsoluteLayout`
- Plugin Hook
- Optional
-`useAbsoluteLayout` is a plugin hook that helps you to form layout of table based on absolute arranegment of cells.
+`useAbsoluteLayout` is a plugin hook that adds support for headers and cells to be rendered as absolutely positioned `div`s (or other non-table elements) with explicit `width`. Similar to the `useBlockLayout` hook, this becomes useful if and when you need to virtualize rows and cells for performance.
-### Table Options
-
-No table options needed
-
-### Column Options
-
-- `width: Number`
- - `Required`, used to calulate width of the given column header and cell
-- `minWidth: Number`
- - `Optional`, defaults to 0
- - Used to set width of the given column if the provided, `width` < `minWidth`
-- `maxWidth: Number`
- - `Optional`, defaults to Number.MAX_SAFE_INTEGER
- - Used to limit width of the given column when `width` > `maxWidth`
+**NOTE:** Although no additional options are needed, 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.
### Instance Properties
-NA
+- `getTableBodyProps`
+ - **Usage Required**
+ - This core prop getter is required to to enable absolute layout for the table body
### Row Properties
- - `getRowProps`
- - Used to return styles needed to enable absolute layout for rows
+
+- `getRowProps`
+ - **Usage Required**
+ - This core prop getter is required to to enable absolute layout for rows
### Cell Properties
- - `getCellProps`
- - Used to return styles needed to enable absolute layout for rows cells
+
+- `getCellProps`
+ - **Usage Required**
+ - This core prop getter is required to to enable absolute layout for rows cells
### Header Properties
- - `getHeaderProps`
- - Used to return styles needed to enable absolute layout for headers
+
+- `getHeaderProps`
+ - **Usage Required**
+ - This core prop getter is required to to enable absolute layout for headers
### Example
- - [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/absolute-layout)
- - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/absolute-layout)
+
+- [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/absolute-layout)
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/absolute-layout)
# `useColumnOrder`
diff --git a/docs/examples.md b/docs/examples.md
index d93f057..99154fb 100644
--- a/docs/examples.md
+++ b/docs/examples.md
@@ -39,7 +39,10 @@
- Pagination (Controlled)
- [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination-controlled)
- [Open in CodeSandobx](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination-controlled)
-- **UI** - These examples demonstrate how to use React Table with your favorite UI libraries or tools!
+- **UI & Rendering** - These examples demonstrate how to use React Table with your favorite UI libraries or tools!
+ - Virtualized Rows (React-Window)
+ - [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/virtualized-rows)
+ - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/virtualized-rows)
- Animated (Framer-Motion)
- [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/animated-framer-motion)
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/animated-framer-motion)
diff --git a/examples/absolute-layout/src/App.js b/examples/absolute-layout/src/App.js
index d58862c..4538427 100644
--- a/examples/absolute-layout/src/App.js
+++ b/examples/absolute-layout/src/App.js
@@ -13,18 +13,27 @@ const Styles = styled.div`
.table {
border: 1px solid #000;
- overflow: auto;
max-width: 700px;
- max-height: 600px;
+ overflow-x: auto;
}
.header {
font-weight: bold;
}
+ .rows {
+ overflow-y: auto;
+ }
+
.row {
border-bottom: 1px solid #000;
height: 32px;
+
+ &.body {
+ :last-child {
+ border: 0;
+ }
+ }
}
.cell {
@@ -32,6 +41,7 @@ const Styles = styled.div`
line-height: 30px;
border-right: 1px solid #000;
padding-left: 5px;
+
:last-child {
border: 0;
}
@@ -43,14 +53,18 @@ function Table({ columns, data }) {
const defaultColumn = React.useMemo(
() => ({
- minWidth: 100,
- maxWidth: 1000,
width: 150,
}),
[]
)
- const { getTableProps, headerGroups, rows, prepareRow } = useTable(
+ const {
+ getTableProps,
+ getTableBodyProps,
+ headerGroups,
+ rows,
+ prepareRow,
+ } = useTable(
{
columns,
data,
@@ -64,7 +78,10 @@ function Table({ columns, data }) {
{headerGroups.map(headerGroup => (
-
+
{headerGroup.headers.map(column => (
{column.render('Header')}
@@ -74,11 +91,11 @@ function Table({ columns, data }) {
))}