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