0.3.3 • Published 1 month ago
@andrglo/react-window-grid v0.3.3
@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
0.3.3
1 month ago
0.3.2
11 months ago
0.3.0
1 year ago
0.3.1
1 year ago
0.2.9
2 years ago
0.2.8
2 years ago
0.2.7
2 years ago
0.2.6
2 years ago
0.2.5
3 years ago
0.2.4
3 years ago
0.2.3
3 years ago
0.2.2
3 years ago
0.2.1
3 years ago
0.2.0
4 years ago
0.1.19
4 years ago
0.1.18
4 years ago
0.1.17
4 years ago
0.1.16
5 years ago
0.1.15
5 years ago
0.1.14
5 years ago
0.1.13
5 years ago
0.1.12
5 years ago
0.1.11
5 years ago
0.1.10
5 years ago
0.1.9
5 years ago
0.1.8
5 years ago
0.1.7
5 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago