npm package: @paprika/data-grid
Description: DataGrid is a wrapper of react-window
Author: @paprika
Latest version: 4.0.4

<!-- start: Autogenerated - do not modify -->

# @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    | () => {} |             |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## 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 (
  <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](https://github.com/acl-services/paprika/blob/master/packages/DataGrid/src/DataGrid.js)

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/table-datagrid--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/DataGrid/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/data-grid%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/DataGrid/CHANGELOG.md)