@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

$3

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

$3

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

$3

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

Usage

For a basic DataGrid

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

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

return (




);
`

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

Links

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