I have @silevis/reactgrid table. The question is how to get data from calculated cell (last column) to state or context??
The obvious solution here is just calculate those numbers from the state people while it handling by handleChange, but is there any reason to do that if this numbers already calculated in the table? So how to get those calculated numbers from the table?
const MoneyCalc = () => {
const getTableData = () => {
return [
{ name: "", money: null, loan: null, calc: null },
{ name: "", money: null, loan: null, calc: null },
{ name: "", money: null, loan: null, calc: null }]
const getRows = (people) => [
headerRow,
...people.map((person, idx) => ({
rowId: idx,
cells: [
{ type: "text", text: person.name },
{ type: "number", value: person.money},
{ type: "number", value: person.loan},
{ type: "number", value: person.money - person.loan},
]
}))
];
})
const [people, setPeople] = useState(getTableData());
const applyChangesToPeople = (changes, prevPeople) => {
changes.forEach((change) => {
const personIndex = change.rowId;
const fieldName = change.columnId;
prevPeople[personIndex][fieldName] = change.newCell.text && change.newCell.value;
});
return [...prevPeople];
};
const handleChanges = (changes) => {
setPeople((prevPeople) => applyChangesToPeople(changes, prevPeople));
}
<ReactGrid
rows={rows}
columns={columns}
onCellsChanged={handleChanges}
/>
return(
<>
{ <ReactGrid
rows={rows}
columns={columns}
onCellsChanged={handleChanges}
/>}
</>
)
}