grid-editable-columns.js

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

// Define the array of positions to choose from them through Select
const positions = [{
    id: 1,
    name: 'System Architect'
},{
    id: 2,
    name: 'Frontend Developer'
}, {
    id: 3,
    name: 'Backend Developer'
}];

class GridContainer extends React.PureComponent {
  constructor(props) {
    super(props);

    // Define columns in the state
    this.state = {
      columns: this.getColumns()
    };
  }

  getColumns() {
    return [{
      title() {
        return 'Name';
      },
      value(row, { focus }) {
        // Use built-in Input component
        return (
          <Input
              value={row.name}
              focus={focus}
              onChange={this.onFieldChange.bind(this, row.id, 'name')}
          />
        );
      }
    },
    {
      title() {
        return 'Position';
      },
      value(row, { focus }) {
        // Use built-in Select component
        return (
          <Select
              items={positions}
              selectedId={row.positionId}
              isOpen={focus}
              onChange={this.onFieldChange.bind(this, row.id, 'positionId')}
          />
        );
      }
    }];
  }
}