'tabulator5 persistent filters - anybody have a working example?

Trying to use persistent filters via local storage with Tabulator 5. The self contained example has uses 4 filters on 4 columns. If all the filters are active only 1 row should be visible. Try and set the 4 filters and reload the page. The current filters and content of the local storage used by tabulator persistence is also shown.

If there is an example online of this feature working, I'd appreciate the link, since I couldn't locate one.

<html>

<head>
  <title>Tabulator 5 filter persistence test</title>
  <script>
    function setFilter(filter) {
      if (document.getElementById(filter).checked) {
        table.addFilter(filter, "=", 1);
      } else {
        table.removeFilter(filter, "=", 1);
      }
      dispDebug();
    }
    function dispDebug() {
      document.getElementById("persist").innerText = localStorage.getItem('tabulator-keeper-filter');
      document.getElementById("filterlist").innerText = JSON.stringify(table.getFilters(true));
    }
  </script>
</head>

<body>
  <link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
  <div>
    <ol>
      <li>Filter checkboxes set filters on each column equal to a value of 1.</li>
      <li>Persistence is configured for filter, and using local storage.</li>
      <li>Debug data shows the current value of the local storage persistence and the current value of the filters.</li>
      <li>Local storage doesn't appear to record the filters in use unless more than 1 filter is active, and you then
        remove an active filter.</li>
      <li>It doesn't seem possible to get all 4 filters active and saved to local storage</li>
      <li>Loading the page with persistence set in local storage doesn't apply the filters defined there.</li>
  </div>

  Filters: <br>
  <label for="f1"><b>F1 = 1</b></label><input type="checkbox" id="f1" onclick="setFilter('f1');"><br>
  <label for="f2"><b>F2 = 1</b></label><input type="checkbox" id="f2" onclick="setFilter('f2');"><br>
  <label for="f3"><b>F3 = 1</b></label><input type="checkbox" id="f3" onclick="setFilter('f3');"><br>
  <label for="f4"><b>F4 = 1</b></label><input type="checkbox" id="f4" onclick="setFilter('f4');"><br><br>
  <div style="background-color: rgb(197, 199, 198);">
    <b>Debug data</b><br><br>
    <label for="persist"><b>tabulator-keeper-filter:</b></label>
    <div id="persist" style="background-color: burlywood;"></div><br>
    <label for="filterlist"><b>filter list: </b></label>
    <div id="filterlist" style="background-color:chocolate"></div><br><br>
  </div>

  <div id="example-table"></div>


  <script>
    //define some sample data
    var tabledata = [
      { id: 1, f1: "3", f2: 12, f3: 1, f4: 1 },
      { id: 2, f1: "1", f2: 1, f3: 1, f4: 1 },
      { id: 3, f1: "7", f2: 1, f3: 3, f4: 2 },
      { id: 4, f1: "1", f2: 5, f3: 4, f4: 3 },
      { id: 5, f1: "2", f2: 1, f3: 5, f4: 3 },
    ];

    //create Tabulator on DOM element with id "example-table"
    var table = new Tabulator("#example-table", {
      height: 205,
      persistenceID: "keeper",
      persistenceMode: "local",
      persistence: {
        filter: true,
      },
      data: tabledata, //assign data to table
      layout: "fitColumns", //fit columns to width of table (optional)
      columns: [ //Define Table Columns
        { title: "F1", field: "f1" },
        { title: "F2", field: "f2" },
        { title: "F3", field: "f3" },
        { title: "F4", field: "f4" },
      ],
    });

    dispDebug();

  </script>

</body>

</html>

Solution 1:^[1]

There was a bug in the 5.0 release that broke the persistent filters functionality, this has been resolved in one of the 5.1 patch releases.

For a full rundown of the fixes, checkout the Release Notes

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Oli Folkerd

'tabulator5 persistent filters - anybody have a working example?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]