@paprika/data-table

@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