@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