@andrglo/react-window-grid

A react grid with column and row headers, like an spreadsheet

See a demo at code sandbox

Installation

# Yarn
yarn add react-window

# NPM
npm install --save react-window

Usage

import {ReactWindowGrid} from '@andrglo/react-window-grid'

const Grid = props => (
  <ReactWindowGrid
    height={300}
    width={300}
    columns={props.columns}
    recordset={props.recordset}
    rowHeaderWidth={50}
  />
)

createRoot(document.getElementById('app')).render(
  <Grid
    columns={[
      {id: 'column1', label: 'Column 1'},
      {id: 'column2', label: 'Column 2'}
    ]}
    recordset={[
      {column1: 'cell 1/1', column2: 'cell 1/2'},
      {column1: 'cell 2/1', column2: 'cell 2/2'},
      {column1: 'cell 3/1', column2: 'cell 3/2'}
    ]}
  />)

Props

Property	Type	Description
width*	number	The grid total width
recordset*	array of objects	The data to be displayed
columns*	array of objects	See table bellow
height	number	The grid total height
maxHeight	number	Limits the maximum height
rowHeaderWidth	number	Default is zero. Show a left header for each row and define the width
cellRenderer	({rowIndex: number, columnIndex: number, style: object}) => ReactElement	Render a row header header. If not defined the record value will be showed
columnHeaderRenderer	({columnIndex: number, style: object}) => ReactElement	Render a column header. If not defined the column label or the column id will be showed
rowHeaderRenderer	({rowIndex: number, style: object}) => ReactElement	Render a row header header. If not defined the row sequence begining with1 will be showed
footerRenderer	() => ReactElement	Render a footer after the last row
lineHeight	number	Define the line height. If not defined the current font size will be used
columnHeaderHeight	number	Define the column header height. If not defined lineHeight will be used
bodyProps	object	Additional props to be passed to the react-window VariableSizeGrid that is the grid body
columnHeaderProps	object	Additional props to be passed to the react-window VariableSizeList that is the grid header
rowHeaderProps	object	Additional props to be passed to the react-window VariableSizeList that is the grid row header
columnHorizontalPadding	number	For adjustments in column width, for example if you use borders, If not defined zero will be used
columnVerticalPadding	number	For adjustments in column height, for example if you use borders. If not defined zero will be used

Column props

Property	Type	Default	Description
id*	string	The field name in the record object
label	string	Label to be displayed in the header, if omitted the id will be showed
width	number	Cell width, if omitted will be calculated from the record field value or column label/id
height	number	Cell height, if omitted will be calculated from the record field value or column label/id
maxHeight	number	Cell height, when height is auto calculated it limits the maximum height

*required

How Does It Work?

It's built on top of react-window syncing one grid for the body and two lists one for the column header and the other for the row header

License

MIT