Node Packaged Masterfully

    @andrglo/react-window-grid

    0.2.9 • Public • Published

    @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

    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

    Install

    npm i @andrglo/react-window-grid

    DownloadsWeekly Downloads

    92

    Version

    0.2.9

    License

    MIT

    Unpacked Size

    133 kB

    Total Files

    15

    Last publish

    Collaborators

    • andrglo