@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