How to clear tabulator persistence data?

Question

I have movable columns, hideable columns etc in my tabulator application. I would like a button to reset the view but I don't see anything that clears the persistence data in the documentation.

Answer 1

I'm very new to Tabulator but I have just recently done something similar. I wanted to reset col widths and positions.

The general idea is: In my grid setup code I have a function called getGridColumns. This gets the initial column definitions which then get added into the grid options that get passed to the new Tabulator(...) call. ie something like

const options = {
  data: this.data,
  columns: getGridColumns(),
  // ...other options
};
this.table = new Tabulator("#myGridId", options);

I have a header menu on one of the columns:

function getGridColumns() {
  return [
    {
      title: "",
      field: "dummy",
      width: 80,
      resizable: false,
      // etc...
      headerMenu: specialTableFuncsMenu,    
    },
    { title: "Col 1", field: "myField", /* etc */ },
  ];
}

and the header menu has a call to set the column layout using the getGridColumns function as parameter.

function specialTableFuncsMenu(e, col) {
  const menu = [
    {
      label: "Reset columns",
      action: col.getTable().setColumnLayout(getGridColumns()),
    },
  ];
  return menu;
}

The original is in Typescript so this might not be entirely accurate Javascript. And I have wrapped the action call in a setTimeout() just to prevent a console error when the grid tries to close the popup after it has redrawn itself.

I did, originally, clear the persistent storage too but removed the code as I don't think it's really needed. Something like:

localStorage.removeItem('tabulator-myGridId-columns');

Which assumes we're using localStorage and ignores the cookie option.

This all does an acceptable job of resetting my column layout. You could add in calls to clear filters etc as required.