Row and Cells are re-rendering for all state changes, not just data.

[hprutsman]

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!

[SuddenDevelopment]

same issue. blew lots of time blaming it on hooks.

[agustingrigoriu]

Same issue here!

[SimoneIrato]

Same there, banging my head on the wall for a couple of days now trying to find a workaround to set a call back with a state change after a row selection. Looks like any state change made out or next to tabulator component kind of breaks every behavior. For me changing the wrapping component's state with useState caused tabulator to miss randomly row selection and scrolling to top when selecting last rows. Commenting the set state with useState in the callback fixes the behavior.

[ngduc]

Thanks for reporting. I'm checking this, hopefully can fix it this weekend.

[ngduc]

It's strange. I can reproduce in this link: (React 16) https://codesandbox.io/s/react-tabulator-examples-ok3t0

but I couldn't reproduce in the Repo Example: (React 15) https://codesandbox.io/s/0mwpy612xw?module=/src/components/Home.js I refactored the Example a bit, moved "columns" into class, added setState & it works for me here (see "Selected Name"):

[ngduc]

The Repo Example uses React 15, But with React 16, in another project, I had an issue with another functional component keeps getting re-rendered. (had to keep it in the main render to avoid that)

[ngduc]

I've just fixed this bug (React 16 grid): componentDidUpdate called table.setData which kept re-rendering the grid. A check was put in to setData only when props data changed. Released 0.10.2. Let me know if you still have this issue.

[jmazier-j2d]

My issue is similar... when updating state (no states var related to the table), all selected rows get unselected (rowSelectionChanged callback is called...). I have no clue on how to fix this tho... Only way to bypass is to avoid call to setState (which is kinda react anti-patter...). Any idea ?

[Abhijeet501]

My issue is similar... when updating state (no states var related to the table), all selected rows get unselected (rowSelectionChanged callback is called...). I have no clue on how to fix this tho... Only way to bypass is to avoid call to setState (which is kinda react anti-patter...). Any idea ?

Hello Jmazier-2d Even I am facing the same issue. Did you find any solution for it?

[ngduc]

@Abhijeet501 @jmazier-j2d or somebody, can you post a Codesandbox example for troubleshooting? I'm reopening this issue to look into it further.. Thanks.

[Marlom01]

Hi, were you able to solve the problem?

[Abhijeet501]

    <ReactTabulator
      id="table"
      style={{
        maxHeight: "100%",
        width: "98%",
      }}
      columns={[]}
      data={this.state.results}
      index="FileId"
      ref={(ref) => (this.gridSearchRef = ref)}
      options={{
        pagination: "local",
        paginationSize: 20,
        placeholder: "No Files Available",
      }}
              />

yes instead of adding columns directly into the react tabulator. I assigned it to null or empty like above example. after that used this way let gridcolumns = this.mapColumnsToGrid(); this.gridSearchRef.table.setColumns(gridcolumns);

Used separate method mapColumnsToGrid() to generate the required columns and then used setColumns to set it to Tabulator, this stopped columns and cells from re-rendering after every state change

[hollen9]

@Abhijeet501 Wow, it works! Thanks for your solution <3, though I really have no idea how would this even work 🤔