0.2.9 • Published 2 months ago

@andrglo/react-window-grid v0.2.9

Weekly downloads
42
License
MIT
Repository
github
Last release
2 months ago

@andrglo/react-window-grid

A react grid with column and row headers, like an spreadsheet

npm version Dependency Status CircleCI Coverage Status

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

PropertyTypeDescription
width*numberThe grid total width
recordset*array of objectsThe data to be displayed
columns*array of objectsSee table bellow
heightnumberThe grid total height
maxHeightnumberLimits the maximum height
rowHeaderWidthnumberDefault is zero. Show a left header for each row and define the width
cellRenderer({rowIndex: number, columnIndex: number, style: object}) => ReactElementRender a row header header. If not defined the record value will be showed
columnHeaderRenderer({columnIndex: number, style: object}) => ReactElementRender a column header. If not defined the column label or the column id will be showed
rowHeaderRenderer({rowIndex: number, style: object}) => ReactElementRender a row header header. If not defined the row sequence begining with1 will be showed
footerRenderer() => ReactElementRender a footer after the last row
lineHeightnumberDefine the line height. If not defined the current font size will be used
columnHeaderHeightnumberDefine the column header height. If not defined lineHeight will be used
bodyPropsobjectAdditional props to be passed to the react-window VariableSizeGrid that is the grid body
columnHeaderPropsobjectAdditional props to be passed to the react-window VariableSizeList that is the grid header
rowHeaderPropsobjectAdditional props to be passed to the react-window VariableSizeList that is the grid row header
columnHorizontalPaddingnumberFor adjustments in column width, for example if you use borders, If not defined zero will be used
columnVerticalPaddingnumberFor adjustments in column height, for example if you use borders. If not defined zero will be used

Column props

PropertyTypeDefaultDescription
id*stringThe field name in the record object
labelstringLabel to be displayed in the header, if omitted the id will be showed
widthnumberCell width, if omitted will be calculated from the record field value or column label/id
heightnumberCell height, if omitted will be calculated from the record field value or column label/id
maxHeightnumberCell 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.2.9

2 months ago

0.2.8

3 months ago

0.2.7

7 months ago

0.2.6

8 months ago

0.2.5

11 months ago

0.2.4

1 year ago

0.2.3

1 year ago

0.2.2

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.1.19

2 years ago

0.1.18

3 years ago

0.1.17

3 years ago

0.1.16

3 years ago

0.1.15

3 years ago

0.1.14

3 years ago

0.1.13

3 years ago

0.1.12

3 years ago

0.1.11

3 years ago

0.1.10

3 years ago

0.1.9

3 years ago

0.1.8

3 years ago

0.1.7

3 years ago

0.1.6

3 years ago

0.1.5

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago