Excel-like Grid Component For React

Description:

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}
      />
    )
  }
}