A react grid with column and row headers, like an spreadsheet
See a demo at code sandbox
# Yarn yarn add react-window # NPM npm install --save react-windowimport {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'} ]} />)| 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 |
| 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
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
MIT