@paprika/data-grid

@paprika/data-grid

Description

DataGrid is a wrapper of react-window

Installation

yarn add @paprika/data-grid

or with npm:

npm install @paprika/data-grid

Props

DataGrid

Prop	Type	required	default	Description
autofocus	bool	false	true	If the data cell should automatically get focus
borderType	[ DataGrid.types.border.GRID, DataGrid.types.border.NONE, DataGrid.types.border.HORIZONTAL, DataGrid.types.border.VERTICAL]	false	DataGrid.types.border.GRID	Define the look for borders in the table types.DataGrid.GRID, types.DataGrid.NONE, etc.
children	node	true	-
forceTableWidthWithScrollBars	bool	false	false	This will force the table to include in the calculation of the table the scrollbar thickness
hasZebraStripes	bool	false	false	Add an alternate background on the DataGrid's rows
data	arrayOf	false	[]	Array of data to be stored in the DataGrid
height	number	false	600	Sets the height of the DataGrid
onClick	func	false	null	Callback onClick
onKeyDown	func	false	() => {}	Callback onKeyDown press
onPressEnter	func	false	null	Callback when Enter key is pressed
onPressShiftSpaceBar	func	false	null	Callback when Shift + Spacebar is pressed
onPressSpaceBar	func	false	null	Callback when Spacebar is pressed
onRowChecked	func	false	() => {}	Callback when user click the f key. Might change in the future
onHighlighted	func	false	() => {}	Callback with information about the prev and next highlighted cell
rowHeight	number	false	36	Sets the row height
width	number	false	null	Sets the DataGrid width

DataGrid.ColumnDefinition

Prop	Type	required	default	Description
canGrow	bool	false	false
cell	custom	false	-
cellA11yText	func	false	null
cellProps	func	false	null
cellPropsResetCSS	bool	false	false
header	custom	false	-
headerA11yText	func	false	null
headerProps	func	false	null
isSticky	bool	false	false
onClick	func	false	() => {}
onPressEnter	func	false	null
onPressShiftSpaceBar	func	false	null
onPressSpaceBar	func	false	null
width	number	false	182

DataGrid.InfiniteScroll

Prop	Type	required	default	Description
rowsOffset	number	false	25
onReachedOffset	func	false	() => {}

Usage

For a basic DataGrid

import DataGrid from "@paprika/data-grid";

const data = [{ column1: "1", column2: "2" }, { column1: "3", column2: "4" }, { column1: "5", column2: "6" }];

return (
  <DataGrid>
    <DataGrid.ColumnDefinition header="Column 1" cell="column1" />
    <DataGrid.ColumnDefinition header="Column 2" cell="column2" />
  </DataGrid>
);

Documentation Need to update link for documentation More detail about these props

Links

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