0

I using MaterialTable from https://material-table.com/#/docs/features/editable to display data and crud operation in my app. I would like refresh data from table after CRUD operation (add, update, delete).

function fetchData(query: Query<Row>, fetchUrl: String): Promise<QueryResult<never>> {
  return (new Promise((resolve, reject) => {
    let url = `${fetchUrl}?page=${query.page}&size=${query.pageSize}`
    fetch(url, {
      headers: {
        'Content-Type': 'application/json',
        'accept': 'application/json',
        'Authorization': `Bearer ${getSessionStorageItem('token')}`
      }
    })
      .then(response => response.json())
      .then(result => {
        resolve({
          data: result.content,
          page: result.pageable.pageNumber,
          totalCount: result.totalElements,
        })
      })
  })
  )
}

export function MaterialTableDemo() {

  return (
    <MaterialTable
      title="Produkty"
      localization={{
        header: {
          actions: "Akcje"
        }
      }}
      columns={[
        { title: 'Id', field: 'id', editable: 'never' },
        { title: 'Nazwa', field: 'name' },
        { title: 'Cena', field: 'price' },
      ]}
      data={query =>
        fetchData(query, 'http://localhost:8080/products')
      }
      icons={tableIcons}
      editable={{
        onRowAdd: newData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              addProducts(newData);
              resolve()
            }, 3000)
          }),
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              updateProducts(newData);
              resolve()
            }, 600)
          }),
        onRowDelete: oldData =>
          new Promise(resolve => {
            setTimeout(() => {
              deleteProduct(oldData.id);
              resolve();
            }, 6000);
          }),
      }}
    />
  );
}

I tried to use createRef() from React but it is not working. How can I achieve this?

Dam M
  • 1
  • 1

1 Answers1

0

Have You tried keeping the downloaded data in state?

const [tableData, setTableData] = useState([])

then

useEffect(() => {
  // Your download function
  setTableData(response.data)
}, [])

It should force React to watch for this data and rerender the component if anything changes.

Adrian
  • 143
  • 5
  • It isn't solution. MaterialTable has parameter 'query' which I have to pass in this fragment: ``` data={query => fetchData(query, 'http://localhost:8080/products') } ``` And what about him then? – Dam M Jan 13 '20 at 22:55
  • I need similar solution to this: https://stackoverflow.com/questions/55752163/how-can-i-achieve-optimistic-rendering-with-remote-data-using-material-table , but working for functional component. – Dam M Jan 13 '20 at 23:00
  • Ohh. Ok. Maybe keep in state something else, like a timestamp from fetching data? And make react rerender when timestamp changes. It seems like a desperate idea though :p – Adrian Jan 13 '20 at 23:10