@paprika/data-grid
@paprika/data-grid
npm i @paprika/data-grid
@paprika/data-grid

@paprika/data-grid

🌶 A robust + accessible UI component library for React applications by Galvanize.

by acl-services

2.0.3 (see all)License:MITTypeScript:Built-In
npm i @paprika/data-grid
Readme

@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

PropTyperequireddefaultDescription
autofocusboolfalsetrueIf the data cell should automatically get focus
borderType[ DataGrid.types.border.GRID, DataGrid.types.border.NONE, DataGrid.types.border.HORIZONTAL, DataGrid.types.border.VERTICAL]falseDataGrid.types.border.GRIDDefine the look for borders in the table types.DataGrid.GRID, types.DataGrid.NONE, etc.
childrennodetrue-
forceTableWidthWithScrollBarsboolfalsefalseThis will force the table to include in the calculation of the table the scrollbar thickness
hasZebraStripesboolfalsefalseAdd an alternate background on the DataGrid's rows
dataarrayOffalse[]Array of data to be stored in the DataGrid
heightnumberfalse600Sets the height of the DataGrid
onClickfuncfalsenullCallback onClick
onKeyDownfuncfalse() => {}Callback onKeyDown press
onPressEnterfuncfalsenullCallback when Enter key is pressed
onPressShiftSpaceBarfuncfalsenullCallback when Shift + Spacebar is pressed
onPressSpaceBarfuncfalsenullCallback when Spacebar is pressed
onRowCheckedfuncfalse() => {}Callback when user click the f key. Might change in the future
onHighlightedfuncfalse() => {}Callback with information about the prev and next highlighted cell
rowHeightnumberfalse36Sets the row height
widthnumberfalsenullSets the DataGrid width

DataGrid.ColumnDefinition

PropTyperequireddefaultDescription
canGrowboolfalsefalse
cellcustomfalse-
cellA11yTextfuncfalsenull
cellPropsfuncfalsenull
cellPropsResetCSSboolfalsefalse
headercustomfalse-
headerA11yTextfuncfalsenull
headerPropsfuncfalsenull
isStickyboolfalsefalse
onClickfuncfalse() => {}
onPressEnterfuncfalsenull
onPressShiftSpaceBarfuncfalsenull
onPressSpaceBarfuncfalsenull
widthnumberfalse182

DataGrid.InfiniteScroll

PropTyperequireddefaultDescription
rowsOffsetnumberfalse25
onReachedOffsetfuncfalse() => {}

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

Downloads/wk

2.2K

GitHub Stars

49

LAST COMMIT

9mos ago

MAINTAINERS

3

CONTRIBUTORS

58

OPEN ISSUES

45

OPEN PRs

21
VersionTagPublished
2.0.3
latest
4mos ago
2.0.3-next.0
next
4mos ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate