React Table is not rerendering after being passed new data from parent container.

What version of React-Table are you using? 6.7.6

Your bug may already be fixed in the latest release. Run yarn upgrade react-table! Place your version here…

What bug are you experiencing, or what feature are you proposing?

I am passing new data from my parent component to my child component which renders a ReactTable. When I add a new row of data to my empty array and then send this new array to my child component to render ReactTable, it works fine, however when I add another row to my array, the new row does not get rendered, eventhough the REACT table has the correct data.
// I did a functional render and this is what I get for the first row. This row shows up in my react table

STATE.DATA === [ { “KEY”: 0, “INTERNALID”: 5673, “NAME”: “ADAM MCADOO” } ] STATE.RESOLVEDDATA === [ { “_ORIGINAL”: { “KEY”: 0, “INTERNALID”: 5673, “NAME”: “ADAM MCADOO” }, “_INDEX”: 0, “_NESTINGLEVEL”: 0, “KEY”: 0, “INTERNALID”: 5673, “NAME”: “ADAM MCADOO” } ]

//After adding a second element into my data array the second row does not render howerver ReactTable has this new data.

STATE.DATA === [ { “KEY”: 0, “INTERNALID”: 5673, “NAME”: “ADAM MCADOO” }, { “KEY”: 1, “INTERNALID”: 1524, “NAME”: “AIDEN SOMERHALDER” } ] STATE.RESOLVEDDATA === [ { “_ORIGINAL”: { “KEY”: 0, “INTERNALID”: 5673, “NAME”: “ADAM MCADOO” }, “_INDEX”: 0, “_NESTINGLEVEL”: 0, “KEY”: 0, “INTERNALID”: 5673, “NAME”: “ADAM MCADOO” } ]

//I add another element into my array. Which now I have 3 and it still does not render.

STATE.DATA === [ { “KEY”: 0, “INTERNALID”: 5673, “NAME”: “ADAM MCADOO” }, { “KEY”: 1, “INTERNALID”: 1524, “NAME”: “AIDEN SOMERHALDER” }, { “KEY”: 2, “INTERNALID”: -5, “NAME”: “ALEX WOLFE” } ] STATE.RESOLVEDDATA === [ { “_ORIGINAL”: { “KEY”: 0, “INTERNALID”: 5673, “NAME”: “ADAM MCADOO” }, “_INDEX”: 0, “_NESTINGLEVEL”: 0, “KEY”: 0, “INTERNALID”: 5673, “NAME”: “ADAM MCADOO” } ]

//If I navigate away from this page and come back I can see all rows but if I add another row again I cannot see it until I navigate away from the tab and go back into it.

STATE.DATA === [ { “KEY”: 0, “INTERNALID”: 5673, “NAME”: “ADAM MCADOO” }, { “KEY”: 1, “INTERNALID”: 1524, “NAME”: “AIDEN SOMERHALDER” }, { “KEY”: 2, “INTERNALID”: -5, “NAME”: “ALEX WOLFE” } ] STATE.RESOLVEDDATA === [ { “_ORIGINAL”: { “KEY”: 0, “INTERNALID”: 5673, “NAME”: “ADAM MCADOO” }, “_INDEX”: 0, “_NESTINGLEVEL”: 0, “KEY”: 0, “INTERNALID”: 5673, “NAME”: “ADAM MCADOO” }, { “_ORIGINAL”: { “KEY”: 1, “INTERNALID”: 1524, “NAME”: “AIDEN SOMERHALDER” }, “_INDEX”: 1, “_NESTINGLEVEL”: 0, “KEY”: 1, “INTERNALID”: 1524, “NAME”: “AIDEN SOMERHALDER” }, { “_ORIGINAL”: { “KEY”: 2, “INTERNALID”: -5, “NAME”: “ALEX WOLFE” }, “_INDEX”: 2, “_NESTINGLEVEL”: 0, “KEY”: 2, “INTERNALID”: -5, “NAME”: “ALEX WOLFE” } ]

[tannerlinsley]

React-Table is simple in that it detects if the object reference to the data prop has changed. This is important to understand. You cannot simply modify the data in your data array and expect it to change. At the very least, you need to immutably pass a new object to react-table to allow it to detect a change.

A simple example:

this.setState({
  data: [ ...this.state.data ]
})

Then you can pass this.state.data to your table’s data prop and it will rerender.

[sskanishk]

I also ran into same issue, but it was due to memoization of column and data. As i commented everything start working smooth.

    // const COLUMNS = useMemo(() => columns, [])
    // const DATA = useMemo(() => data, [])