@paprika/data-table

Description

A virtualized table component.

Installation

yarn add @paprika/data-table

or with npm:

npm install @paprika/data-table

Props

DataTable

| 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 |

DataTable.InfiniteLoader

| 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