"columnControl": {
  "2": {
    "searchList": [],
    "searchInput": {
      "logic": "contains",
      "type": "text",
      "value": ""
    }
  },
  "3": {
    "searchList": [],
    "searchInput": {
      "logic": "contains",
      "type": "text",
      "value": ""
    }
  },
  "4": {
    "searchList": [],
    "searchInput": {
      "logic": "contains",
      "type": "text",
      "value": ""
    }
  },
  "6": {
    "searchInput": {
      "logic": "contains",
      "type": "text",
      "value": ""
    }
  },
  "7": {
    "searchList": [],
    "searchInput": {
      "logic": "contains",
      "type": "text",
      "value": ""
    }
  }
},

If we add a new column it has no way to know how to map the saved data to the correct (updated) columns as it's mapping by column index instead of column name. This ends up breaking all of the existing saved states. Am I missing something or don't have StateRestore/ColumnControl configured properly so that it stores this data by column name instead?

Fwiw we're running DataTables 2.3.8, StateRestore 1.4.3 and ColumnControl 1.2.1.

Thanks.

Ben

For example, this is saved state 1:

If I then clear out the search and load saved state 2:

However, if I load state 1 and then don't clear the search and load state two I get a union of the two:

But as I mentioned, the actual rows displayed are correct and match state 2. It's only the column filter check marks that are out of sync.

I asked Coplilot to track this down and it did. I don't know how good the code is but it did fix the issue. Here are the changes it suggested:

Here's the updated code:

CheckList.prototype.values = function (values) {
    var buttons = this._s.buttons;
    if (values === undefined) {
        var out = [];
        for (var j = 0; j < buttons.length; j++) {
            if (buttons[j].active()) {
                out.push(buttons[j].value());
            }
        }
        return out;
    }

    // Fix: replace selection set (do not merge with previous active values)
    this.selectNone();
    values = values || [];
    for (var i = 0; i < values.length; i++) {
        var btn = this.button(values[i]);
        if (btn) {
            btn.active(true);
        }
    }
    var count = this.values().length;
    this._dom.selectNoneCount.innerHTML = count ? '(' + count + ')' : '';

    return this;
};

And the second block:

    dt.on('stateLoaded', function (e, s, state) {
        var values = getState(_this.idxOriginal(), state) || [];
        checkList.values(values); // always apply, including empty => clear
        applySearch(values);
    });

Do these changes make sense? Is this ok or is there a better way to fix this?

Thanks.

Ben

1. Save the current state to a temporary state.
2. Loop through the existing saved states, load one at a time and listen for the draw to complete as each state is applied, then grab the resulting rows and get the data I need and save that data off to a list.
3. Restore the saved temporary state.
4. Remove the temporary state.
5. Switch to another screen to use the collected data (in this case to generate charts based on the user's saved states all at once).

It all happens quickly enough that you can't tell as a user which is good. That said, it is complicated and I was hoping I could simply loop through the saved states and ask for the filtered data for each state without affecting the current table. Is it possible and I've missed a simple way to do this? If I could call something like filter() on the state that would massively simplify things but from what I can tell that's not currently possible.

https://datatables.net/reference/api/filter()

One other thing I wanted to ask is if there's a way to add a confirmation modal to the "Remove All" for states. By default there's a confirmation modal when you try to remove a single state which seems reasonable but there's no confirmation modal if you remove all of the states at once which seems odd given it's potentially far more destructive. A confirmation modal by default would be great. I couldn't figure out a simple way to add one in manually.

https://datatables.net/extensions/staterestore/examples/initialisation/removeAll.html

Thanks.

Ben

https://datatables.net/reference/option/stateSaveParams

In this example I'm deleting everything (I think):

https://live.datatables.net/bagodele/1/edit

And yet some of the data is still getting saved to local storage.

I need to make sure the selected row(s) in particular isn't saved. Am I doing something wrong?

Thanks.

Ben

I've noticed an issue in your example page that reflects a similar issue I am having within my own application.

On that page, here are the steps to follow:

1. Create two or three states.
2. Select one of the states and you should see that it's highlighted as the active state (checkmark next to the active state)
3. Reload the page (your saved states should still be present)
4. Click on one of the states. You should see that it's not highlighted as an active state. (no checkmarks)
5. Create a new state. You should see that new state is highlighted (has checkmark)
6. Click one of the other states you created previously, they won't highlight to indicate they're the active state. (no checkmark)
7. Go back to the state you just created (checkmark is present)

Here is a video of the example page where this is occurring.

Thoughts on how to have DataTables recognize the active state on ajax-sourced data after a page reload?

Thanks,

Tanner

The issue is after a reloading how can I set the group column. Currently we are using ordinals as in the main row group example. Is there a way to use a class or other more data driven method.

I tried the following:

function GetGroupOrdinal() {
    let retVal = 0;
    let elem = $('#CASREPTbl th');
    //console.log('Length : ' + elem.length);
    elem.each(function () {
        if ($(this).hasClass('grpBy')) {
            retVal = elem.index(this);
            console.log("GetGroupOrdinal: ", retVal);
        }
    });
    return retVal;
}

with the following:

...
                rowGroup: {
                dataSrc: (GetGroupOrdinal()),
                startRender: function (rows, group) {
                    var collapsed = !!collapsedGroups[group];

                    rows.nodes().each(function (r) {
                        r.style.display = collapsed ? 'none' : '';
                    });

                    // Add category name to the <tr>. NOTE: Hardcoded colspan
                    return $('<tr/>')
                        .append('<td colspan="99" class="RowGroupText">CASREP ' + group + ' (' + rows.count() + ')</td>')
                        .attr('data-name', group)
                        .toggleClass('collapsed', collapsed);
                }
            },
...

this works until the column reorder changes the group ordinal. I really am sorry I cant get the test link up and going. I hope you can see my issue.

2 problems :
1. when I use jQuery.fn.dataTable.moment( 'DD/MM/YYYY' ); in my code, I have an error
1. when I put the button savedStates, I have an error a.button(...).collectionRebuild is not a function
2. when I clic on createState, I have an error Cannot read properties of undefined (reading 'c') at B.action (dataTables.stateRestore.min.js:99:137)

maybe a conflict between extensions I guess....
can you help me please ?
thank's

After creating a state in the example, clicking on the arrow (to update/delete state) returns an empty box. On inspection, the elements are present, but the styling for the height is broken.

When select a state which limits the data to 3600 of the 8000 it takes about 6 seconds for the menu to drop after I make the selection.

Is it possible to display some working indicator once a state is selected and drop it when the menu drops ?

I added processing : true and table.processing(true); with setTimeout into stateLoadParams, but this does not seem to work. Is there a different place where I need to add the processing code?

Test case: live.datatables.net/pivofaco/1/edit

I thought "paging" would be the setting to turn off but that doesn't work.

Is it possible to disable # rows displayed from a saved state ?

I don't see one on the documentation page https://datatables.net/reference/option/stateRestore.saveState

I'm struggling to find examples how to write the relevant Ajax data to save/rename a state in a database for stateRestore as this is a relatively new feature. Ideally I am looking to save/rename states by modifying/adding elements to the same format and to write them into the database. I also cannot find any similar Ajax writing code for datatables as I believe this is only used in stateRestore.

Are there maybe any examples I could learn from or refer to for this? Appreciate your input!

I have a button for Saved States. When clicked it loads the Modal to Create State or Manage the previously saved ones.

Link to test case: https://garyrowe.co.uk/acc/?mode=dev
There is also: ?mode=live and ?mode=ip
If you would like to see data in the table you need SimHub (https://www.simhubdash.com/download-2/) and the Swoop plugin (https://www.racedepartment.com/downloads/simhub-swoop-plugin.48487/)
Debugger code (debug.datatables.net): https://debug.datatables.net/uwupek
Error messages shown: None
Description of problem:
- On the Modal that appears the dropdown arrow button is wider than the button with the Saved State Title on it.
- When you click on the dropdown arrow it loads a dropdown menu from the button in the menu bar instead of a new Modal.
- In summary the UI is all off basically.

Now the problem is, the pagination state saving is not functioning anymore after implementing Bfullen's code..Can someone please help? how to make it both work together?(saving the search value when redirecting back to the page, and also saving the pagination state as well)

I think only started recently after updating to the latest versions of SearchBuilder-1.3.1, StateRestore-1.1.0 and Buttons 2.2.2.

The problem I am having is if I create 3 saved states as follows
1) Default State - no search builder filter
2) Filter 1 - Define a rule in search builder to filter the data
3) Filter 2 - Define a different rule in search builder to filter the data a different way

Then if I select Default State, I get active states "Default State"
If I select Filter 1, I get active states "Default State, Filter 1"
If I select Filter 2, I get active states "Default State, Filter 2"

It only seems to consider the SeachBuilder data if there is some data present. If no data is present then it is consider a match even when the current state of SearchBuilder does contain data.

Here are screen shots of this happening in my system. These shots were taken without making any changes to the saved states.

When I select my "Default View" you can note that Only Default View is active.

When I select "Pending View", you can note that Pending View is active but so is Default View which is incorrect.

When I switch to "award filter", you can note that award filter is active but so is Default View again which is incorrect.

If I change the sorting and have no search builder data like this "test" case then it works as expected.

Then I added a SearchBuilder filter and test remains active (This is incorrect)

If I save that state, then the same issue happens with both being active even though one has a search builder filter and the other does not.

If I then select the test view and add a search builder with no conditions (not sure why this is allowed), and I save that state

Then that Saved State matches "test" which sort of makes sense since the results are the same but in reality what is in the saved state for SearchBuilder is in fact different. One has search builder data but it's "empty" the other has no search builder data.

If I look at what is stored in the DB I notice that in every case "searchBuilder":false is present which I think might be causing this issue.

Here is the saved data for "Default View"
{"time":1644261222297,"start":0,"length":10,"order":[[5,"desc"]],"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true},"columns":[{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}}],"ColReorder":[0,1,2,3,4,5,6,7,8,9,10],"childRows":[],"searchBuilder":{},"page":0,"stateRestore":{"isPredefined":false,"state":"Default View","tableId":"award-person-table","isPreDefined":false},"c":{"_createInSaved":true,"create":true,"creationModal":true,"i18n":{"creationModal":{"button":"Create","colReorder":"Column Order","columns":{"search":"Column Search","visible":"Column Visibility"},"name":"Name:","order":"Sorting","paging":"Paging","scroller":"Scroll Position","search":"Search","searchBuilder":"SearchBuilder","searchPanes":"SearchPanes","select":"Select","title":"Create New State","toggleLabel":"Includes:"},"duplicateError":"A state with this name already exists.","emptyError":"Name cannot be empty.","emptyStates":"No saved states","removeConfirm":"Are you sure you want to remove %s?","removeError":"Failed to remove state.","removeJoiner":" and ","removeSubmit":"Remove","removeTitle":"Remove State","renameButton":"Rename","renameLabel":"New Name for %s:","renameTitle":"Rename State"},"modalCloseButton":true,"remove":true,"rename":true,"save":true,"saveState":{"colReorder":true,"columns":{"search":true,"visible":true},"order":true,"paging":true,"scroller":true,"search":true,"searchBuilder":true,"searchPanes":true,"select":true},"splitSecondaries":["updateState","removeState","renameState"],"toggle":{"colReorder":false,"columns":{"search":false,"visible":false},"order":false,"paging":false,"scroller":false,"search":false,"searchBuilder":false,"searchPanes":false,"select":false},"preDefined":{}}}

Here is the data for "Pending View" which makes "Default View" active but should not.
{"time":1644261246795,"start":0,"length":10,"order":[[5,"desc"]],"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true},"columns":[{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}}],"ColReorder":[0,1,2,3,4,5,6,7,8,9,10],"childRows":[],"searchBuilder":{"criteria":[{"condition":"!=","data":"Pending Children","origData":"pendingChildren","type":"string","value":[" "]}],"logic":"AND"},"page":0,"stateRestore":{"isPredefined":false,"state":"Pending View","tableId":"award-person-table","isPreDefined":false},"c":{"_createInSaved":true,"create":true,"creationModal":true,"i18n":{"creationModal":{"button":"Create","colReorder":"Column Order","columns":{"search":"Column Search","visible":"Column Visibility"},"name":"Name:","order":"Sorting","paging":"Paging","scroller":"Scroll Position","search":"Search","searchBuilder":"SearchBuilder","searchPanes":"SearchPanes","select":"Select","title":"Create New State","toggleLabel":"Includes:"},"duplicateError":"A state with this name already exists.","emptyError":"Name cannot be empty.","emptyStates":"No saved states","removeConfirm":"Are you sure you want to remove %s?","removeError":"Failed to remove state.","removeJoiner":" and ","removeSubmit":"Remove","removeTitle":"Remove State","renameButton":"Rename","renameLabel":"New Name for %s:","renameTitle":"Rename State"},"modalCloseButton":true,"remove":true,"rename":true,"save":true,"saveState":{"colReorder":true,"columns":{"search":true,"visible":true},"order":true,"paging":true,"scroller":true,"search":true,"searchBuilder":true,"searchPanes":true,"select":true},"splitSecondaries":["updateState","removeState","renameState"],"toggle":{"colReorder":false,"columns":{"search":false,"visible":false},"order":false,"paging":false,"scroller":false,"search":false,"searchBuilder":false,"searchPanes":false,"select":false},"preDefined":{}}}

Steps to test
1) Set # rows displayed to 100
2) Save a State
3) Set # rows back to 10
4) Switch to your saved state
Notice there are now 100 rows displayed but the selection box still displays as Show [10] Entries

Example issue:

In the Remove All Button example:

1) sort Age, create state
2) sort Office, create state
3) sort Salary, create state
Saved States will have 3 states saved
4) Click on Remove All States

-> State 2 still remains (Saved States button collection should be empty instead)

all of the "this example" links are 404 page not found.

Just a heads up.

I am enhancing StateRestore with an ability to share the states to others by making it "public".

But I don't want public states to be modified by anyone other than the original creator.

I am close to making this work but I am having one issue I can't think of a way to resolve.

To implement this I add the owner of the state to the saved state data using stateSaveParams.

 stateSaveParams: function (setting, data) {
      data.owner = _currentUser;
 }           

_currentUser is the login name of the user viewing the page.

I then modified the state buttons by adding an init function to hide the buttons to modify the state if the user is not the owner of the current state being initialized.

function savedStateActionInit(dt, node, config) {
        var stateId = config.parent._stateRestore.s.identifier;
        if (config.parent._stateRestore.s.savedState.owner != _currentUser) {
            node.addClass('hidden-important');
        }
    }

This all works fine so I am almost successful implementing this feature.

The problem I have is that "Current Active States" thinks the state is not active when the user is NOT the owner.

I think this happens because "Current Active States" logic creates a temp saved state of the current view and compares it to each of the saved states to see which match. Since the temp saved state will have a different "owner" value they will never match. The temp will have the _currentUser as owner but the loaded state shared by someone else will have that person listed as the owner.

Is there a way I tell this logic to ignore the "owner" field when comparing the states to detect if a state is active?

Also from a recommendation side of things, within this button, id recommend changing the css for div.dt-button-collection div.dt-btn-split-wrapper button.dt-button to include width: fit content and remove the pixel width on div.dt-button-collection (i set it to width: auto) This way the saved states expand to show the full name. Its not perfect but it works.

  "search": {
        "search":          {string}  // Search term
        "regex":           {boolean} // Indicate if the search term should be treated as regex or not
        "smart":           {boolean} // Flag to enable DataTables smart search
        "caseInsensitive": {boolean} // Case insensitive flag
    },

My code attempts to shoehorn searchbuilder into the predefined item but obviously fails...

buttons:[
     extend: 'savedStatesCreate',
     config: {
          'saveState': {search: false},
          'creationModal': true,
          preDefined:{
              "Expires in 1 Year":{
                   searchBuilder: {
                        'criteria': [{
                            'condition': '<',
                            'data' "expiration date",
                            'origData: 'ExpirationDate',
                            'type': 'date',
                            'value': ['2023-02-18']
                        ], logic: 'and'}
                   }
               }
          }
     }
]

I have a feeling the only way is to somehow set "expires in 1 year" to .searchBuilder.rebuild(stuff) -- where stuff is everything in criteria from above. Am I on the right track here?

Would it be possible to look at these php files or their structure to understand how the data is delivered:

../data/stateRestoreLoad.php
../data/stateRestoreSave.php

Is there an example for them somewhere?

live.datatables.net/jijufore/1/edit

I'm struggling with two issues:

1) The test case uses stateSave and when loading the page, searchBuilder conditions must not be loaded. This is done with data.searchBuilder = {}; inside stateLoadParams. However, this seems to prevent stateRestore from loading all searchBuilder configurations. Only when data.searchBuilder = {}; is commented out, stateRestore loads searchBuilder states. Is there a way not to load any searchBuilder conditions when loading the page while still being able to use stateRestore with searchBuilder?

2) stateRestore is not saving activated/deactivated custom filter buttons (filter1/filter2/filter3) although they are saved and loaded correctly when the page loads. Is it possible to save them with the states in stateRestore?

Thank you for any guidance. I'm really enjoying exploring the possibilities of stateRestore for our application.

Here is a simple test case to see the issue.
http://live.datatables.net/gimanevi/1/edit?html,js,output

Test scenario
1) Open the test case and save a few states
2) Uncomment out the three sections that say "Uncomment after creating a saved state"
3) Try to switch to one of your saved states

This means any changes to my table Add Column, Remove Column and likely Rename Column would result in a user having to create all of their views again from scratch.
Since I am using this in combination with Search Builder that could be considerable work for every user.

Would there be a way to fix this so it recognizes the column is new and does some default behavior to allow the saved state to work. Then an update would include the new column making the saved state "correct" again.

Here is my test case. I flipped the logic from done to fail because I couldn't think of a way to get post to succeed without my actual server.

http://live.datatables.net/cixelute/1/edit?js,console,output

Test Scenario
You can see that each time my stateRestoreAjax method is called it attempts a post and on failure (make believe it was "done" success) it calls the callback();
If you test save updates the dropdown list with the new "State 1" but attempt to remove or rename "State 1" will no be reflected correctly in the dropdown.

Test scenario
1) Select "Saved States->Create State"
2) Save "State 1"
3) Note the dropdown get correctly updated with "State 1"
4) Now try to rename or remove "State 1", the callback is called correctly (seen in console) but the dropdown is not updated.

Sorry if moving the "callback()" to fail is confusing but that was the only way I could get a simple test case to demonstrate the issue. My actual code looks more like this. See the comments starting with // ************** for my findings while testing

            function stateRestoreAjax(data, callback) {
                // Action to take if loading states
                if (data.action === 'load') {
                    let url = _rcoiBaseUrl + "dataTablesView/getViews/" + _dataTableViewStoreDataTableId;
                    $.get(url, function (data, status) {
                        let cbData = {};
                        for (let i = 0; i < data.length; i++) {
                            // Convert back from the string created when saving
                            cbData[data[i].identifier] = JSON.parse(data[i].state);
                        }
                        // Load states into StateRestore
                        console.log("starting callback");
                        _stateRestoreBlockSaveAjaxCall = true;
                        callback(cbData);
                        _stateRestoreBlockSaveAjaxCall = false;
                        console.log("Finished callback")
                    });
                }
                // Action to take if renaming states
                else if (data.action === 'rename') {
                    if (_stateRestoreBlockRenameAjaxCall) {
                        return;
                    }
                    // Get all of the state identifiers
                    var ids = Object.keys(data.stateRestore);
                    for (var i = 0; i < ids.length; i++) {
                        let url = _rcoiBaseUrl + "dataTablesView/renameView";
                        let viewId = ids[i];
                        let newViewId = data.stateRestore[ids[i]];
                        let _viewSaveRequestData = {
                            'viewId': viewId,
                            'newViewId': newViewId,
                            'dataTableId': _dataTableViewStoreDataTableId
                        };
                        // This allows the post to pass the security token verification
                        // without this data you will get a 401 error
                        _viewSaveRequestData[_dt_sr_csrf_param_name] = _dt_sr_csrf_token; // Adds the token
                        console.log("Renaming");
                        $.post(url, _viewSaveRequestData).done(function () {
                            console.log("Rename View done, issuing callback");
                            callback();  // ********** THIS CALLBACK NOT WORKING *****************
                        }).fail(function () {
                            console.log("Rename Request Failed");
                            // Remove the state true prevents modal confirmation
                            alert("Sorry, rename view:'" + viewId + "' to '" + newViewId + "' failed, contact help desk if this condition persists.")
                        });
                    }
                }
                // Action to take if removing states
                else if (data.action === 'remove') {
                    if (_stateRestoreBlockRemoveAjaxCall) {
                        return;
                    }
                    var ids = Object.keys(data.stateRestore);
                    for (var i = 0; i < ids.length; i++) {
                        let url = _rcoiBaseUrl + "dataTablesView/removeView";
                        let viewId = ids[i];
                        let viewData = data.stateRestore[ids[i]];
                        let _viewSaveRequestData = {
                            'viewId': viewId,
                            'dataTableId': _dataTableViewStoreDataTableId
                        };
                        // This allows the post to pass the security token verification
                        // without this data you will get a 401 error
                        _viewSaveRequestData[_dt_sr_csrf_param_name] = _dt_sr_csrf_token; // Adds the token
                        console.log("Removing " + viewId);
                        // callback();  // ******* CALLBACK HERE WORKS BUT THEN GETS CALLED EVEN ON FAIL
                        $.post(url, _viewSaveRequestData).done(function () {
                            console.log("Remove View done, issuing callback");
                            callback();  // ********** THIS CALLBACK NOT WORKING *****************
                        }).fail(function () {
                            console.log("Remove Request Failed");
                            alert("Sorry, view:'" + viewId + "' failed to remove, contact help desk if this condition persists.")
                        });
                    }
                }
                // Action to take if saving states
                else if (data.action === 'save') {
                    let ids = Object.keys(data.stateRestore);
                    if (_stateRestoreBlockSaveAjaxCall) {
                        // Fix issue with stateRestore calling save for every State when loading
                        console.log("Blocked Save on Load from State Restore");
                        callback();
                        return;
                    }
                    for (let i = 0; i < ids.length; i++) {
                        let url = _rcoiBaseUrl + "dataTablesView/saveView";
                        let viewId = ids[i];
                        let viewData = JSON.stringify(data.stateRestore[ids[i]]);
                        let _viewSaveRequestData = {
                            'viewId': viewId,
                            'viewData': viewData,
                            'dataTableId': _dataTableViewStoreDataTableId
                        };
                        // This allows the post to pass the security token verification
                        // without this data you will get a 401 error
                        _viewSaveRequestData[_dt_sr_csrf_param_name] = _dt_sr_csrf_token; // Adds the token
                        console.log("Saving");
                        $.post(url, _viewSaveRequestData).done(function () {
                            console.log("Save View done, issuing callback");
                            callback();  // ******************* ONLY THIS CALL BACK FOR SAVE WORKS *******************/
                        }).fail(function () {
                            console.log("Save Request Failed");
                            alert("Sorry, view:'" + viewId + "' failed to save, contact help desk if this condition persists.")
                        });
                    }
                }
            }

The idea is that local browser storage isn't necessarily long lived and it can take a while to reconfigure states if that is lost, and the second use case would be for users to be able to share their states with others as it allows for quite complex setup of views which is great and being able to have one user share their setup might be quite helpful for others.

I am trying to use StateRestore with NPM and I don't succeed to install the BS4 module

Link to test case: npm install datatables.net-staterestore-bs4
Debugger code (debug.datatables.net): N/A
Error messages shown:

npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name ">=null": Tags may not have any characters that encodeURIComponent encodes.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/arnaud/.npm/_logs/2022-01-06T10_33_52_975Z-debug.log

And in the debug logs I have

36 timing command:install Completed in 1255ms
37 verbose stack Error: Invalid tag name ">=null": Tags may not have any characters that encodeURIComponent encodes.
37 verbose stack     at invalidTagName (/Users/arnaud/project/data/node/node_modules/npm/node_modules/npm-package-arg/npa.js:89:15)
37 verbose stack     at fromRegistry (/Users/arnaud/project/data/node/node_modules/npm/node_modules/npm-package-arg/npa.js:343:13)
37 verbose stack     at Function.resolve (/Users/arnaud/project/data/node/node_modules/npm/node_modules/npm-package-arg/npa.js:80:12)
37 verbose stack     at /Users/arnaud/project/data/node/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1034:38
37 verbose stack     at Array.map (<anonymous>)
37 verbose stack     at visit (/Users/arnaud/project/data/node/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1033:56)
37 verbose stack     at visitNode (/Users/arnaud/project/data/node/node_modules/npm/node_modules/treeverse/lib/depth-descent.js:57:25)
37 verbose stack     at next (/Users/arnaud/project/data/node/node_modules/npm/node_modules/treeverse/lib/depth-descent.js:44:19)
37 verbose stack     at depth (/Users/arnaud/project/data/node/node_modules/npm/node_modules/treeverse/lib/depth-descent.js:82:10)
37 verbose stack     at depth (/Users/arnaud/project/data/node/node_modules/npm/node_modules/treeverse/lib/depth.js:27:12)
38 verbose cwd /Users/arnaud/project
39 verbose Darwin 21.2.0
40 verbose argv "/Users/arnaud/project/data/node/node" "/Users/arnaud/project/data/node/node_modules/npm/bin/npm-cli.js" "install" "datatables.net-staterestore-bs4"
41 verbose node v16.13.1
42 verbose npm  v8.1.2
43 error code EINVALIDTAGNAME
44 error Invalid tag name ">=null": Tags may not have any characters that encodeURIComponent encodes.
45 verbose exit 1

Description of problem:

It's impossible to install the node module datatables.net-staterestore-bs4

Note: datatables.net-staterestore is ok