Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrglo/react-window-grid
A react grid with synced column and row headers based on react-window
https://github.com/andrglo/react-window-grid
grid react react-window spreadsheet
Last synced: about 1 month ago
JSON representation
A react grid with synced column and row headers based on react-window
- Host: GitHub
- URL: https://github.com/andrglo/react-window-grid
- Owner: andrglo
- License: mit
- Created: 2019-05-03T18:07:50.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-24T13:56:13.000Z (10 months ago)
- Last Synced: 2024-04-25T22:21:17.623Z (9 months ago)
- Topics: grid, react, react-window, spreadsheet
- Language: JavaScript
- Size: 1.34 MB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @andrglo/react-window-grid
A react grid with column and row headers, like an spreadsheet
[](https://badge.fury.io/js/%40andrglo%2Freact-window-grid) [![Dependency Status][daviddm-image]][daviddm-url] [](https://circleci.com/gh/andrglo/react-window-grid) [](https://coveralls.io/github/andrglo/react-window-grid?branch=master)
> See a demo at [code sandbox](https://codesandbox.io/s/reactwindowgrid-demo-ux5we)
## Installation
```bash
# Yarn
yarn add react-window
# NPM
npm install --save react-window
```
## Usage
```javascript
import {ReactWindowGrid} from '@andrglo/react-window-grid'
const Grid = props => (
)
createRoot(document.getElementById('app')).render(
)
```
### 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](https://react-window.now.sh/#/api/VariableSizeGrid) that is the grid body |
| __columnHeaderProps__ | object | Additional props to be passed to the react-window [VariableSizeList](https://react-window.now.sh/#/api/VariableSizeList) that is the grid header |
| __rowHeaderProps__ | object | Additional props to be passed to the react-window [VariableSizeList](https://react-window.now.sh/#/api/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
[daviddm-image]: https://david-dm.org/andrglo/react-window-grid.svg
[daviddm-url]: https://david-dm.org/andrglo/react-window-grid