JSFiddle - React, Tailwind, and code Playground

by bagelsesame

HTML

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.12.1/b-2.2.3/sr-1.1.1/datatables.min.css" />
  </head>

  <body>


    <table id="example" class="display nowrap" style="width:100%">
      <thead>
        <tr>
          <th>ID</th>
          <th>First name</th>
          <th>Last name</th>
          <th>ZIP / Post code</th>
          <th>Country</th>
        </tr>
      </thead>
    </table>


    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.12.1/b-2.2.3/sr-1.1.1/datatables.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/idbwrapper/1.7.2/idbstore.min.js"></script>
  </body>

</html>

JavaScript

$(document).ready(function() {
  var states = new IDBStore({
    dbVersion: 1,
    storeName: 'states',
    keyPath: 'identifier',
    onStoreReady: function() {
      // We need to wait for the database to be ready as the load will run straight away
      $('#example').DataTable({
        dom: 'Blfrtip',
        buttons: [
          'createState',
          {
            extend: 'savedStates',
            buttons: [
                'createState',
                'removeAllStates'
            ],
            config: {
              ajax: function(data, callback) {
                // Action to take if loading states into staterestore
                if (data.action === 'load') {
                  var reloadStates = loadData => {
                    // Manipulate the data into the structure expected by the callback
                    var cbData = {};
                    for (var i = 0; i < loadData.length; i++) {
                      // Convert back from the string created when saving
                      cbData[loadData[i].identifier] = JSON.parse(loadData[i].state);
                    }

                    // Load states into StateRestore
                    callback(cbData);
                  }

                  states.getAll(reloadStates);
                }
                // Action to take if renaming states
                else if (data.action === 'rename') {
                  // Get all of the state identifiers
                  var ids = Object.keys(data.stateRestore);
                  for (var i = 0; i < ids.length; i++) {
                    var savesuccess = (saveData) => {
                      // Remove the record with the current identifier
                      states.remove(saveData.identifier);
                      // Add a new record with the updated identifier that uses the old state
                      states.put({
                        identifier: data.stateRestore[saveData.identifier],
                        state: saveData.state
 ...