tabulator icon indicating copy to clipboard operation
tabulator copied to clipboard

Preserve group show/hide state when calling replaceData

Open guilhemmarchand opened this issue 7 months ago • 2 comments

Is your feature request related to a problem? Please describe.*

To refresh data, we call table.replaceData(); so that Tabulator handles the data refesh notably at the ajax level, which works great. However, this method does not preserve the current status of opened or closed group, and systematically re-opens any previously closed group. (which is the default behaviour unless asked otherwise)

Describe the solution you'd like

It would be great either that replaceData() automatically preserves the current state of the groups, or an option within the function or a supported method to manage the state of a group.

Describe alternatives you've considered

We have tried the following, which works BUT only for the first row of the table, this doesn't work for any other row of the table.

function getGroupState(table) {
        let groupState = {};
        let groups = table.getGroups();

        groups.forEach((group) => {
          let key = group.getField() + "_" + group.getKey();
          let element = group.getElement();

          // Check for the presence of 'tabulator-group-visible' to determine if the group is open
          let isOpen = element.classList.contains("tabulator-group-visible");

          groupState[key] = isOpen;
        });

        return groupState;
      }

      function restoreGroupState(table, groupState) {
        let groups = table.getGroups();

        groups.forEach((group) => {
          let key = group.getField() + "_" + group.getKey();

          if (groupState[key]) {
            console.log(`Restoring group ${key} to open`);
            group.show();
          } else {
            console.log(`Restoring group ${key} to closed`);
            group.hide();
          }

        });
      }

Then when calling replaceData():

// refresh data
let groupState = getGroupState(table); // Save current group state
table
  .replaceData()
  .then(() => {
    restoreGroupState(table, groupState); // Restore group state
  })
  .catch((error) => {
    console.error("Error replacing data:", error);
  });

console log messages show that we detect properly the state of the group, but opening/hidding doesn't work however.

Additional context

Version: Tabulator v6.2.1

Thank you!

guilhemmarchand avatar Jul 14 '24 21:07 guilhemmarchand