@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