Row and Cells are re-rendering for all state changes, not just data. #82
Description
Rows and Cell get re-rendered for all state changes
- bug: Setting the state with unrelated changes causes re-rendering rows and cells
Short Description:
- When I set a boolean value in the state that isn't passed to react-tabulator, the table rerenders the row and cell data anyways.
Environment Details
- OS: Windows 10
- Node.js version: 10.15.1
- npm version: 6.4.1
- browser: chrome 73.0.3683.75
Long Description
In the example below, when editing data, I want to change the state to enable save button but when editing a large grid (30 columns, 10 rows) I noticed there was quite a bit of delay (1 sec?) when selecting the next column. If I remove the handleDataEdited prop, then it is very fast because the state doesn't get updated. I added the RowFormatter below to have it print a line in the console and sure enough, it prints for each row after setting the disabledSave in the state.
Code
handleDataEdited = (newData) => {
this.setState({ disabledSave: false });
}
render() {
return (
<div>
<ReactTabulator
columns={this.state.columns}
data={this.state.data}
dataEdited={this.handleDataEdited}
options={{
clipboard: true,
clipboardCopyStyled: false,
clipboardPasteAction: "update",
height: 'auto',
layout: 'fitDataFill',
variableHeight: true,
reactiveData: true,
rowFormatter: RowFormatter //custom row formatter that just logs when called
}}
>
</ReactTabulator>
<Button color="primary" variant="contained" disabled={this.state.disabledSave} onClick={this.handleSave}>Save</Button>
<div>
)
}Workaround
...
Please help with a PR if you have a solution. Thanks!