Material-table: How can I save state if I transition to another page and then come back

[rbeers]

I would like to click on a detail action to transition to a detail page (different route) and when I come back to the material table I want to keep where I was in my pagination, filters, etc.... Is there a way to do this with material-table?

[mbrn]

Hi @rbeers,

Material-table has its own state, so it is uncontrolled component. When component would be unmounted, state is removed from memory. But we can add a feature such as onStateChanged & state to make material-table controlled component. I will consider this feauture

[mbrn]

We need this feature our own projects.

[angelelizalde21]

Hi @mbrn

I have the same problem, I think this is a very necessary feature, I would really appreciate it if you included it

[Jak3b0]

Hi,

I see that this issue was closed but the linked PR does not resolve all the issues. We currently have the need to remember the page number and filtering when navigating away so that we can restore those state when the user click on the back button.

Would it be possible to have access to those information?

Thank you!

[nono-la-frite]

Hi,
In my case, I wanted to keep the grouped columns.
So I overloaded the "groubar" function to get the status of the columns. Then I pushed them into the state of the component so that I could save them in the local storage at the time of the "componentWillUnmount". Finally in "componentdidmount" I get the data from my local storage to update the columns of my table. It works, but the ideal would be to store all the props of the table (filter, sort,....) .

Do you have an idea to get all the table props ?

components={{ ...components, Groupbar: props => { this.state.groupedColumns = props.groupColumns; return ( <div> <MTableGroupbar {...props} /> </div> ); } }}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[ngoan98tv]

We still need a solution for this issue. It's very annoying when I go another page and go back, all the previous state including search, sort and page value are lost.

[Druwww]

We still need a solution for this issue. It's very annoying when I go another page and go back, all the previous state including search, sort and page value are lost.

You can try to save it manually 😄

For example, customFilterAndSearch is trigger each time the filter or the search input is different. So you can add in the method trigger a setState to save it. After, you can use the column.defaultFilter to set manually the filter value 😉

Code exemple :
columns={[{ title: 'MyTitle', field: 'fieldNameInData', render: this.renderMethod, customFilterAndSearch: (term, rowData) => this.saveAndAnwserFilter(term, rowData, 'myFilterName') } ]}

saveAndAnwserFilter(term, rowData, filterName){
this.setState({[filterName] : term})
//return 1 if term == rowData columns value, else 0
}

The only problem is customFilterAndSearch is trigger by all Row... hope this can help ^^

[k0xxx]

By the way, you can save your pagination status in "redux" using this function "onChangePage", after unmounting it stores globally, and then if you return to your page with the table you can pass it to options.pagination as the number of stored page and its loads as default pagination page

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.