Excel-like Grid Component For React

Category: React , Table | December 9, 2017
Author: denisraslov
Views Total: 1,715
Official Page: Go to website
Last Update: December 9, 2017
License: MIT

An Excel-like grid component for React with custom cell editors, performant scroll & resizable columns.

Features:

  • Custom cell editors (use built-in Input and Select, or any other components) & header content
  • Performant scroll for as many rows as you need
  • Resizable columns
  • Control by mouse & from keyboard
  • Flexible setting of disabled cells
  • Customizable CSS styling

Installation:

# NPM
$ npm install react-spreadsheet-grid --save

Usage:

import { Grid, Input, Select } from 'react-spreadsheet-grid'

const rows=[
    { id: 'user1', name: 'John Doe', positionId: 'position1' },
    // and so on...
];

class MyAwesomeGrid extends React.Component {
  render() {
    return (
      <Grid 
        columns={[
          {
            title: () => 'Name', 
            value: (row, { focus }) => {
                return (
                    <Input  
                      value={row.name}
                      focus={focus}
                    />
                );
            }
          }, {
            title: () => 'Position',
            value: (row, { focus }) => {
                return (
                    <Select  
                      value={row.positionId}
                      isOpen={focus}
                      items={somePositions}
                    />
                );
            }
          }
        ]}
        
        getRowKey={row => row.id}
      />
    )
  }
}

Preview:

Excel-like Grid Component For React