@paprika/data-table

Description

A virtualized table component.

Installation

``
yarn add @paprika/data-table
`

or with npm:

`
npm install @paprika/data-table
``

Props

$3

| Prop | Type | required | default | Description |
| ------------------------ | -------------- | -------- | -------------------- | ---------------------------------------------------------------- |
| a11yText | string | true | - | Accessible description of the table |
| children | ReactReactNode | false | null | |
| columns | Array | true | - | Array of column definition |
| data | Array | true | - | Array of data to be stored in the table |
| maxHeight | string | false | "100vh" | The max height of the table in px/vh/calc(xvh+/-xpx) |
| maxWidth | string | false | "100vw" | The max width of the table in px/vw/calc(xvw+/-xpx) |
| borderType | BorderType | false | gridTypes.HORIZONTAL | Define the look for borders in the table |
| getRowHeight | [unknown,null] | false | null | Function to return the row height for each row |
| hasZebraStripes | boolean | false | false | Add an alternating background on the table rows |
| isHeaderSticky | boolean | false | true | If the entire table header is sticky or not |
| renderRow | [unknown,null] | false | null | Override the table Column configuration for some particular rows |
| shouldResizeWithViewport | boolean | false | true | If the table should be resized when the viewport size changed |
| extraCellProps | Record | false | {} | Experimental prop |

$3

| Prop | Type | required | default | Description |
| ------------------------------------------------------------------------------- | --------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| isItemLoaded | signature | true | - | Function responsible for tracking the loaded state of each item. |
| itemCount | number | true | - | Number of rows in list; can be arbitrary high number if actual number is unknown. |
| loadMoreItems | signature | true | - | Callback to be invoked when more rows must be loaded. |
| It should return a Promise that is resolved once all data has finished loading. |
| isNextPageLoading | boolean | false | - | If true, will prevent the InfiniteLoader from asking to load more than once at a time |
| minimumBatchSize | number | false | - | Minimum number of rows to be loaded at a time; defaults to 10. This property can be used to batch requests to reduce HTTP requests. |
| threshold | number | false | - | Threshold at which to pre-fetch data; defaults to 15. A threshold of 15 means that data will start loading when a user scrolls within 15 rows. |

Links

- Storybook Showcase
- GitHub source code
- Create GitHub issue
- CHANGELOG