0.3.7 • Published 10 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
10 months ago
0.3.5
11 months ago
0.3.4
11 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
4 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