Can't add new rows
dedesken opened this issue · 1 comments
dedesken commented
react-spreadsheet-grid
version: 2.0.0React
version: 16.13.1Operating 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
denisraslov commented
Thank you!
Fixed in the release 2.3.0.