@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