Ability to store and retrieve DataTable state from database

[liamoshea]

Is there a way to load a customRestoreState asynchronously? In my app the user creates custom tables which they can access later on after saving them. The user will have multiple custom tables. I would like to be able to save the user's table state long term to our database, rather than using sessionStorage or localStorage which are more impermanent. When the user loads the table I would like the state to be retrieved from the database and used to inform the table's state using customRestoreState.

I have tried to mock this up by saving the state in sessionStorage, and setting a timeout function to cause a delay (representing the time of communication with the database) before returning the state data.

**Current behavior**
Using custom solution described above, the table's state does not update.

**Expected behavior**
Table's state updates after customRestoreState returns state.

**Minimal reproduction of the problem with instructions**

Code: Select all

 const getState = () => {
    return new Promise ((resolve, reject) => {
      setTimeout(() => {
        resolve(JSON.parse(window.sessionStorage.getItem('dt-state-demo-custom')))
      }, 3000)
    })
  }

  const onCustomRestoreState = async () => {
    const result = await getState();
    return result;
  }


  return (
    <div>
      <Toast ref={toast}></Toast>

      <div className="card">
        <DataTable value={products} reorderableColumns onRowReorder={onRowReorder} onColReorder={onColReorder}
          stateStorage="custom" customSaveState={onCustomSaveState} customRestoreState={onCustomRestoreState}>
          <Column rowReorder style={{ width: '3em' }} />
          {dynamicColumns}
        </DataTable>
      </div>
    </div>
  );

[mert.sincan]

Hi,

Thanks a lot for the sample code. I added restoreTableState(restoredState) method for such issues on the next version.

Code: Select all

    onCustomSaveState = (state) => {
        window.sessionStorage.setItem('dt-state-demo-custom', JSON.stringify(state));
    }

    getState = () => {
        const customState = JSON.parse(window.sessionStorage.getItem('dt-state-demo-custom')); // you need to get state values before timeout in your sample code.
        return new Promise ((resolve, reject) => {
          setTimeout(() => {
            dataTableRef.current.restoreTableState(customState);
          }, 3000)
        })
      }

    onCustomRestoreState = async () => {
        const result = await this.getState();
        return result;
    }

If you get state values from database, you can use like;

Code: Select all

getState = () => {
        return new Promise ((resolve, reject) => {
          setTimeout(() => {
            dataTableRef.current.restoreTableState(<RestoredStatesFromDatabase>);
          }, 3000)
        })
      }

Best Regards,

[liamoshea]

Thanks mertsincan! When will the next version be releasing?

[mert.sincan]

Hi,

It has already been released. You can try it with the latest PrimeVue version.
https://github.com/primefaces/primereac ... ANGELOG.md
Issue; https://github.com/primefaces/primereact/issues/1776

Best Regards,