react-spreadsheet-grid-example.js

import React from 'react';
import { Grid, Input, Select } from 'react-spreadsheet-grid';
import set from 'lodash.set';
import users from './users.json';

const positions = [{
    id: 1,
    name: 'System Architect'
},{
    id: 2,
    name: 'Frontend Developer'
}, {
    id: 3,
    name: 'Backend Developer'
}, {
    id: 4,
    name: 'Big Data Developer'
}, {
    id: 5,
    name: 'Computer Operator'
}, {
    id: 6,
    name: 'Manager'
}, {
    id: 7,
    name: 'Content Manager'
}, {
    id: 8,
    name: 'Support manager'
}];

const contractTypes = [{
    id: 1,
    name: 'Full-time'
},{
    id: 2,
    name: 'Part-time'
}, {
    id: 3,
    name: 'Freelance'
}];

class UsersGrid extends React.PureComponent {

    constructor(props) {
        super(props);

        this.state = {
            rows: users
        };
    }

    onFieldChange(rowId, field, value) {
        const modifiedRows = [].concat(this.state.rows);
        const row = modifiedRows.find((row) => {
            return row.id === rowId;
        });

        set(row, field, value);

        this.setState({
            rows: modifiedRows,
            blurCurrentFocus: true
        });
    }

    render() {
        return (
          <Grid
              columns={[
                  {
                      title: 'Photo',
                      value: (row, {focus}) => {
                          return (
                              <img
                                  src={row.picture.thumbnail}
                              />
                          );
                      },
                      id: 'photo',
                      getCellClassName: () => "Grid__photoCell"
                  },
                  {
                      title: 'First name',
                      value: (row, {focus}) => {
                          return (
                              <Input
                                  value={row.name.first}
                                  focus={focus}
                                  onChange={this.onFieldChange.bind(this, rowId, 'name.first')}
                              />
                          );
                      },
                      id: 'name.first'
                  },
                  {
                      title: 'Last name',
                      value: (row, {focus}) => {
                          return (
                              <Input
                                  value={row.name.last}
                                  focus={focus}
                                  onChange={this.onFieldChange.bind(this, rowId, 'name.last')}
                              />
                          );
                      },
                      id: 'name.last'
                  },
                  {
                      title: 'Username',
                      value: (row, {focus}) => {
                          return (
                              <Input
                                  value={row.login.username}
                                  focus={focus}
                                  onChange={this.onFieldChange.bind(this, rowId, 'login.username')}
                              />
                          );
                      },
                      id: 'login.username'
                  },
                  {
                      title: 'Position',
                      value: (row, {focus}) => {
                          return (
                              <Select
                                  items={positions}
                                  selectedId={row.positionId}
                                  isOpen={focus}
                                  onChange={this.onFieldChange.bind(this, rowId, 'positionId')}
                              />
                          );
                      },
                      id: 'position'
                  },
                  {
                      title: 'Registered',
                      value: (row, {focus}) => {
                          return (
                              <Input
                                  value={row.registered}
                              />
                          );
                      },
                      id: 'registered'
                  },
                  {
                      title: 'Contract',
                      value: (row, {focus}) => {
                          return (
                              <Select
                                  items={contractTypes}
                                  selectedId={row.contractTypeId}
                                  isOpen={focus}
                                  onChange={this.onFieldChange.bind(this, rowId, 'contractTypeId')}
                              />
                          );
                      },
                      id: 'contract'
                  },
                  {
                      title: 'Location',
                      value: (row, {focus}) => {
                          return (
                              <Input
                                  value={row.location.postcode + ', ' +
                                      row.location.city + ', ' +
                                      row.location.state + ', ' +
                                      row.location.street}
                              />
                          );
                      },
                      id: 'location'
                  }
              ]}
              rows={this.state.rows}
              blurCurrentFocus={this.state.blurCurrentFocus}
              getRowKey={row => row.id}
              rowHeight={60}
              disabledCellChecker={(row, columnId) => {
                  return columnId === 'photo' ||
                      columnId === 'location' ||
                      columnId === 'registered';
              }}
              isColumnsResizable
              columnWidthValues={{
                  photo: 6,
                  position: 15,
                  registered: 9,
                  contract: 10,
                  location: 25
              }}
          />
        );
    }
}

export default UsersGrid;