denisraslov/react-spreadsheet-grid

Can't add new rows

dedesken opened this issue · 1 comments

  • react-spreadsheet-grid version: 2.0.0
  • React version: 16.13.1
  • Operating System: win 10 x64

My code:
*`import React, { Fragment, useEffect, useState } from 'react';
import { Grid, Input, Select } from 'react-spreadsheet-grid'
import './App.css';

function App() {
  const positions = [{
   id: 1,
    name: 'Frontend developer'
  }, {
    id: 2,
    name: 'Backend developer'
  }];

  const [rows, setRows] = useState([{
    id: 1,
    name: '',
    positionId: 1
  }]);
  const onFieldChange = (rowId, field) => (value) => {
    // Find the row that is being changed
    const row = rows.find(({ id }) => id === rowId);

    // Change a value of a field
    row[field] = value;
    setRows([].concat(rows))
  }
  const addRow = () => {
    const id = [...rows][rows.length - 1].id + 1;
    const newRow = {
      id: id,
      name: '',
      positionId: 1
    };

    setRows(rows.concat(newRow))

  }

  useEffect(() => {
    console.log(rows)
  }, [rows])
  return (
    <Fragment>
      <Grid isScrollable={false}
        columns={[
          {
            title: () => 'Name',
            value: (row, { focus }) => {
              // You can use the built-in Input.
              return (
                <Input
                  value={row.name}
                  focus={focus}
                  onChange={onFieldChange(row.id, 'name')}
                />
              );
            }
          }, {
            id: 'position',
            title: () => {
              return <span>Position</span>
            },
            value: (row, { focus }) => {
              return (
                <Select
                  items={positions}
                  selectedId={row.positionId}
                  isOpen={focus}
                  onChange={onFieldChange(row.id, 'positionId')}
                />
              );
            }
          }
        ]}
        rows={rows}
        getRowKey={row => row.id}
      />
      <button onClick={addRow}>Add row</button>
    </Fragment>
  );
}

export default App;`*

What happened:

Created function that adds new row, but it's not working, console.log() shows that new data was added :/

Thats happens only if isScrollable set to false

screenshot

Thank you!
Fixed in the release 2.3.0.