How can I achieve optimistic rendering with remote data using material-table?

Question

I am using the library material-table for data tables in my application. I was setting the data prop to use data from this.state.data and adding rows would update on my tab

Answer 1

there is a solution calling the funtion that manage all query event of Material Table

You can do it creating a a React reference to the table. And in that moment you can access to the function. You can use this to pass values directly to the functions if you wanted.

These are the step: 1- Create a value and assign React.createRef() let tableRef=React.createRef()

2- Assign this to the Material Table property called tableRef

tableRef={tableRef}

3- Then you can call the function onQueryChange() whitout any parameters, when you need update your table.

tableRef.current.onQueryChange()

For example:

`async apiDelete(IDs) {
try {
  await Service.delete(IDs);
  this.state.tableRef.current.onQueryChange();
} catch (e) {
  console.log("Error Deleting" + e);
}

}`

You can do others things like: this.state.tableRef.current.onQueryChange({filters: "value"});

Please make a console.log(tableRef) to see all you can do.

Let me know if this help you Regards