Skip to content

A react grid with synced column and row headers based on react-window

License

Notifications You must be signed in to change notification settings

andrglo/react-window-grid

Repository files navigation

@andrglo/react-window-grid

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

npm version Dependency Status CircleCI Coverage Status

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

About

A react grid with synced column and row headers based on react-window

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages