Data Persistence

VTable-Sheet provides state persistence capabilities, allowing users to save and restore various table states, including filter conditions, selection areas, active sheets, and more. This chapter explains how to implement table state persistence.

Basic Concepts

Data persistence refers to saving the current state of a table (including data and user operations) so that it can be restored to the same state in subsequent use. This is particularly useful when you need to retain user operation history or implement auto-save functionality.

Saving Table State

VTableSheet provides a saveToConfig method that can export the current table state as a configuration object (using localStorage as an example):

// Get the complete configuration of the current table (including all states)
const currentConfig = sheetInstance.saveToConfig();

// Convert the configuration object to a JSON string
const configJson = JSON.stringify(currentConfig);

// Save to localStorage or a backend API
localStorage.setItem('vtable-sheet-state', configJson);

Restoring Table State

You can recreate the table using the saved configuration to restore the previous state (using localStorage as an example):

// Get the saved configuration from localStorage or from a backend API
const savedConfigJson = localStorage.getItem('vtable-sheet-state');

if (savedConfigJson) {
  try {
    // Parse the JSON string into a configuration object
    const savedConfig = JSON.parse(savedConfigJson);
    
    // Create a new table instance using the saved configuration
    const sheetInstance = new VTableSheet.VTableSheet(document.getElementById(CONTAINER_ID), savedConfig);
  } catch (error) {
    console.error('Failed to restore table state:', error);
    // Use default configuration
    const sheetInstance = new VTableSheet.VTableSheet(document.getElementById(CONTAINER_ID), defaultConfig);
  }
} else {
  // No saved state, use default configuration
  const sheetInstance = new VTableSheet.VTableSheet(document.getElementById(CONTAINER_ID), defaultConfig);
}

Saved State Content

The saveToConfig method can save the following states:

Data for each worksheet
Filter conditions
Currently active worksheet
Formula settings
Merged cell states
Frozen rows and columns

States to be implemented in future development:

Cell selection state
Table structure configuration (row heights, column widths, etc.)