react-spreadsheet-grid-example.js

import React, { useState } 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'
}];

const UsersGrid = () => {
    const [rows, setRows] = useState(users);

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

        set(row, field, value);
        setRows(modifiedRows)
    }

    const initColumns = () => {
        return [
            {
                title: 'Photo',
                value: (row, {focus}) => {
                    return (
                        <img
                            src={row.photo}
                        />
                    );
                },
                id: 'photo',
                width: 6,
                getCellClassName: () => "Grid__photoCell"
            },
            {
                title: 'First name',
                value: (row, {focus}) => {
                    return (
                        <Input
                            value={row.firstName}
                            focus={focus}
                            onChange={onFieldChange(row.id, 'firstName')}
                        />
                    );
                },
                id: 'firstName'
            },
            {
                title: 'Last name',
                value: (row, {focus}) => {
                    return (
                        <Input
                            value={row.lastName}
                            focus={focus}
                            onChange={onFieldChange(row.id, 'lastName')}
                        />
                    );
                },
                id: 'lastName'
            },
            {
                title: 'Username',
                value: (row, {focus}) => {
                    return (
                        <Input
                            value={row.username}
                            focus={focus}
                            onChange={onFieldChange(row.id, 'username')}
                        />
                    );
                },
                id: 'username'
            },
            {
                title: 'Position',
                value: (row, {focus}) => {
                    return (
                        <Select
                            items={positions}
                            selectedId={row.positionId}
                            isOpen={focus}
                            onChange={onFieldChange(row.id, 'positionId')}
                        />
                    );
                },
                id: 'position',
                width: 15,
            },
            {
                title: 'Registered',
                value: (row, {focus}) => {
                    return (
                        <Input
                            value={row.registered]}
                            focus={focus}
                            onChange={onFieldChange(row.id, 'registered')}
                        />
                    );
                },
                id: 'registered',
                width: 9,
            },
            {
                title: 'Contract',
                value: (row, {focus}) => {
                    return (
                        <Select
                            items={contractTypes}
                            selectedId={row.contractTypeId}
                            isOpen={focus}
                            onChange={onFieldChange(row.id, 'contractTypeId')}
                        />
                    );
                },
                id: 'contract',
                width: 10,
            },
            {
                title: 'Location',
                value: (row, {focus}) => {
                    return (
                        <Input
                            value={row.location}
                            focus={focus}
                            onChange={onFieldChange(row.id, 'location')}
                        />
                    );
                },
                id: 'location',
                width: 25
            }
        ];
    }

    const [columns, setColumns] = useState(initColumns())

    const onColumnResize = (widthValues) => {
        const newColumns = [].concat(columns)
        Object.keys(widthValues).forEach((columnId) => {
            const column = columns.find(({ id }) => id === columnId);
            column.width = widthValues[columnId]
        })
        setColumns(newColumns)
    }

    return (
      <Grid
          columns={columns}
          rows={rows}
          getRowKey={row => row.id}
          rowHeight={60}
          disabledCellChecker={(row, columnId) => {
              return columnId === 'photo' ||
                  columnId === 'location' ||
                  columnId === 'registered';
          }}
          isColumnsResizable
          onColumnResize={onColumnResize}
      />
    );
}

export default UsersGrid