Table do not rerender after data change. When I update data second time, it works.

I have data coming in as a prop like below. I usually click a button in the parent component to change the prop in the Performancetbl component. But when i click on the button once, table is not rerendering with new data. When I click on it one more time, it rerenders though. Why is that happening?

I tried to save props into a state variable state in Performancetbl component, but that did not change the behavior at all.

I also tried console.log(props.datas) to see if correct data is appearing the first time I click on the button. And it is indeed the correct value! Can you guys figure out why this is happening?

function Performancetbl(props) {   
    const options = { 
        ...
    };
    console.log(props.datas)
    return(
        <div style={{ maxWidth: "100%" }}>
            <MaterialTable
                title="Overall"
                data={props.datas}
                columns={props.columns}        
                options={options}
                components={props.components}
            />
        </div>
    );
}

export default Performancetbl;

Thanks!

[Sheing]

^ you were really fast in replying. I saw your other live demo and figured out the solution. Thanks man. Also, using stateprovider from ‘Unstated-Next’ works really well with this table. Simpler version inside Try—>

setData(prevState=>{
       const dataCopy = [...prevState];
       const index = dataCopy.indexOf(oldData);
       dataCopy[index] = newData;
       return dataCopy;
})

[oze4]

@Sheing I wouldn’t expect that to update the data… you have to update the state/data yourself…

Live demo here

import React, { useState } from "react";
import MaterialTable from "material-table";
import { makeStyles } from "@material-ui/styles";
import tableIcons from "./TableIcons.js";

const originalData = ["Rock", "Paper", "Scissors"].map(word => ({
  id: Math.floor(Math.random() * 300),
  name: word
}));

const useStyles = makeStyles({
  myEditIcon: {
    color: "red",
    fontSize: "60px"
  }
});

export default function AppTable() {
  const classes = useStyles();
  const [data, setData] = useState(originalData);

  return (
    <MaterialTable
      data={data}
      title="My Table"
      icons={{
        ...tableIcons,
        Edit: () => <tableIcons.Edit className={classes.myEditIcon} />
      }}
      columns={[
        {
          title: "Id",
          field: "id"
        },
        {
          title: "Name",
          field: "name"
        }
      ]}
      editable={{
        onRowUpdate: (newData, oldData) => {
          return new Promise((resolve, reject) => {
            try {
              // First make a copy of state, per best practices
              const dataCopy = [...data];
              // Find the index of the updated row - we have to use old data since
              // new data is not part of state yet
              const index = dataCopy.indexOf(oldData)
              // Update the found index with the new data
              dataCopy[index] = newData;
              // Update our state
              setData(dataCopy);
              // Since `onRowUpdate` has to return a Promise, resolve it
              resolve();
            } catch (err) {
              // Since `onRowUpdate` has to return a Promise, reject it if there is an error
              reject(err);
            }
          });
        }
      }}
    />
  );
}