@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|[gridTypes.GRID,gridTypes.NONE,gridTypes.HORIZONTAL,gridTypes.VERTICAL]|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