Saving table column visibility state

[djkingh01]

Saving table column visibility state

Expected Behavior

Is there a way to save the state of the current user session like column visibility and filter criteria to the localStorage?

Current Behavior

Steps to Reproduce (for bugs)

Your Environment

Tech	Version
Material-UI	latest
MUI-datatables	latest
React
browser
etc

[marek-jarab]

Hi. I would like to start working on that issue. Could you please assign me for this?

[gabrielliwerant]

This sounds like something that is out of scope for this library to handle. The library exposes the ability to set all the initial states, from which you can recreate the state you wish, and save/restore however you wish. It's already possible with everything that exists.

E.g. (psuedocode)

// Seed initial state however you wish
constructor(props) {
  super(props);

  // array like ['true', 'false', 'true', 'false']
  savedDisplayColumns = localSotrage.get('displayColumns');

  this.state = {
    displayColumns: savedDisplayColumns 
  };
}

const columns = [
  { name: 'Name', options: { display: this.state.displayColumns[0] },
  ...
];

[gabrielliwerant]

You can also get some ideas from the serverside examples, just replace serverside requests with requests to something else, like local storage.

[jeje42]

Does #1718 satisfy this requirement?

[x3igh7]

Does #1718 satisfy this requirement?

In theory it should, but it does not appear to be working, at least for me on version 3.8.x. When I update visible columns it saves the column display property correctly to localstorage, but when I reload the page those column settings aren't retained.

On the other hand column order, for example, appears to properly be remembered across sessions.

I'm also noticing that the 'display' property on a column is also being stored as a string (i.e. "false") instead of a boolean type (although I don't think that matters).