@canvas-components/react-pivot-table 0.2.3 → 0.2.4

package/dist/index.cjs

@@ -1268,6 +1268,7 @@ function ReactPivotTableInner(props, ref) {
     null
   );
   const chartIdRef = react.useRef(0);
+  const layoutRevisionRef = react.useRef(0);
   const [internalLayout, setInternalLayout] = react.useState(
     () => customizationOptions?.defaultLayout ?? pivotTable.createEmptyPivotFieldLayout()
   );
@@ -1373,7 +1374,13 @@ function ReactPivotTableInner(props, ref) {
     setCharts((current) => current.filter((chart) => chart.id !== chartId));
   };
   const applyLayout = (next) => {
-    if (customizationOptions?.layout === void 0) setInternalLayout(next);
+    if (customizationOptions?.layout === void 0) {
+      layoutRevisionRef.current += 1;
+      setInternalLayout(next);
+      if (customizationOptions?.storageKey) {
+        void pivotTable.savePivotFieldLayout(customizationOptions.storageKey, next);
+      }
+    }
     customizationOptions?.onLayoutChange?.(next);
   };
   const moveField = (fieldKey, area, index, sourceArea) => {
@@ -1421,6 +1428,22 @@ function ReactPivotTableInner(props, ref) {
     table.updateOptions(options);
     refreshChartModel();
   }, [options]);
+  react.useEffect(() => {
+    const storageKey = customizationOptions?.storageKey;
+    if (!storageKey || customizationOptions?.layout !== void 0) return;
+    let active = true;
+    const revision = layoutRevisionRef.current;
+    void pivotTable.loadPivotFieldLayout(storageKey).then((storedLayout) => {
+      if (!active || !storedLayout || layoutRevisionRef.current !== revision) {
+        return;
+      }
+      setInternalLayout(storedLayout);
+      customizationOptions?.onLayoutChange?.(storedLayout);
+    });
+    return () => {
+      active = false;
+    };
+  }, [customizationOptions?.layout, customizationOptions?.storageKey]);
   react.useEffect(() => {
     if (customizationOptions?.panelWidth != null) {
       setFieldPanelWidth(customizationOptions.panelWidth);