Cache

The ColumnPicker component offers a caching mechanism to persist user-defined column configurations (visibility and order) across sessions using the browser's localStorage. When the cacheKey prop is provided, the component attempts to load a previously saved configuration on mount. The key used for storage in localStorage is automatically generated based on the provided cacheKey (which must be registered in cacheKeys.js) and a version number to manage updates. If a saved configuration is found, it is merged with the initial columns prop, applying the saved visibility and order while preserving the original column definitions (like title). The onDataBound callback is then invoked with this loaded and merged configuration. When the user clicks the "Configure" button, the current column state is saved to localStorage. Conversely, clicking "Reset" removes the saved configuration from localStorage. The component also includes logic to automatically clear older versions of the cache key on mount, ensuring that users are not stuck with outdated configurations after component updates.

cacheKeys.js structure

// add your cache key or your cache key prefix here
const CACHE_KEYS = [
  "column-picker-demo",
  "column-picker-demo-key-duplicated",
  "column-picker-demo-key-duplicated",
];

// if an update is needed (forcing the cache clearing) add a new object to the CACHE_UPDATES array
// with a higher version and the list of keys to clear
const CACHE_UPDATES = [{ VERSION: 1, KEYS: [] }];

// utility function
function getLatestVersionForKey(key, updates = CACHE_UPDATES) {
  for (let i = updates.length - 1; i >= 0; i--) {
    if (updates[i].KEYS.includes(key)) {
      return updates[i].VERSION;
    }
  }
  return 0;
}

export { CACHE_KEYS, CACHE_UPDATES, getLatestVersionForKey };

cacheKey generation

The final key used for storing and retrieving column configurations in localStorage is automatically generated based on the provided cacheKey prop and the latest version associated with the key's prefix (as defined in CACHE_UPDATES).

Here are some examples of how the cacheKey prop translates to the localStorage key:

cacheKey (Prop Value)	Generated Key (Assuming latest version is 0)
"column-picker-demo"	"column-picker-demo:ColumnPicker:0"
{ prefix: "column-picker-demo", userId: "123" }	"column-picker-demo:123:ColumnPicker:0"
{ prefix: "column-picker-demo", view: "grid" }	"column-picker-demo:grid:ColumnPicker:0"
{ prefix: "column-picker-demo", id: "abc", type: "xyz" }	"column-picker-demo:abc:xyz:ColumnPicker:0"