@gisce/react-formiga-table - npm Package Compare versions

Comparing version 1.3.0-alpha.6 to 1.3.0-alpha.7

dist/components/InfiniteTable/columnStateHelper.d.ts

 export declare const getPersistedColumnState: ({ actualColumnKeys, persistedColumnState, }: {
     actualColumnKeys: string[];
-    persistedColumnState: any[];
+    persistedColumnState?: any[] | undefined;
 }) => any[] | undefined;
 //# sourceMappingURL=columnStateHelper.d.ts.map

dist/react-formiga-table.es.js

@@ -1,11 +0,11 @@
-import { jsx as p, jsxs as M, Fragment as ce } from "react/jsx-runtime";
-import j, { useState as T, useRef as L, useEffect as A, useCallback as C, forwardRef as ae, useImperativeHandle as de, memo as V, useMemo as J } from "react";
-import xe from "use-deep-compare-effect";
-import Se from "style-object-to-css-string";
-import we from "styled-components";
-import { AgGridReact as Ie } from "ag-grid-react";
+import { jsx as p, jsxs as M, Fragment as le } from "react/jsx-runtime";
+import j, { useState as A, useRef as L, useEffect as T, useCallback as C, forwardRef as ce, useImperativeHandle as ae, memo as U, useMemo as re } from "react";
+import ve from "use-deep-compare-effect";
+import xe from "style-object-to-css-string";
+import Se from "styled-components";
+import { AgGridReact as we } from "ag-grid-react";
 import "ag-grid-community/styles/ag-grid.css";
-import { useCustomCompareMemo as Ee } from "use-custom-compare";
-import ue from "lodash/debounce";
-const Ke = ({
+import { useCustomCompareMemo as Ie } from "use-custom-compare";
+import de from "lodash/debounce";
+const Ee = ({
   dataSource: e,
@@ -15,5 +15,5 @@ onFetchChildrenForRecord: t,
 }) => {
-  const [s, a] = T([]), [l, i] = T([]), r = L(/* @__PURE__ */ new Map()), [o, c] = T(
+  const [s, a] = A([]), [i, l] = A([]), r = L(/* @__PURE__ */ new Map()), [o, c] = A(
     e.map(
-      (f) => Q({
+      (f) => G({
         entry: f,
@@ -25,6 +25,6 @@ childField: n,
   );
-  A(() => {
+  T(() => {
     c(
       e.map(
-        (f) => Q({
+        (f) => G({
           entry: f,
@@ -39,3 +39,3 @@ childField: n,
     (f) => {
-      s.indexOf(f) === -1 ? (s.push(f), a([...s])) : a(s.filter((y) => y !== f));
+      s.indexOf(f) === -1 ? (s.push(f), a([...s])) : a(s.filter((m) => m !== f));
     },
@@ -47,14 +47,14 @@ [s]
   ), b = C(
-    (f) => l.includes(f),
-    [l]
-  ), g = (f) => r.current.get(f) || 0, S = C(
+    (f) => i.includes(f),
+    [i]
+  ), g = (f) => r.current.get(f) || 0, x = C(
     (f) => {
-      const y = o.find((m) => m.id === f);
-      return y ? y[n] !== void 0 && y[n].length > 0 : !1;
+      const m = o.find((y) => y.id === f);
+      return m ? m[n] !== void 0 && m[n].length > 0 : !1;
     },
     [n, o]
-  ), w = C(
+  ), S = C(
     (f) => {
-      const y = o.find((m) => m.id === f);
-      return y ? y.isLoading : !1;
+      const m = o.find((y) => y.id === f);
+      return m ? m.isLoading : !1;
     },
@@ -64,7 +64,7 @@ [o]
     (f) => {
-      const y = o.find((E) => E.id === f);
-      if (!y)
+      const m = o.find((E) => E.id === f);
+      if (!m)
         return [];
-      const m = y[n];
-      return m ? o.filter((E) => m.includes(E.id)) : [];
+      const y = m[n];
+      return y ? o.filter((E) => y.includes(E.id)) : [];
     },
@@ -74,11 +74,11 @@ [n, o]
     async (f) => {
-      const y = o.find((m) => m.id === f.id);
-      if (!y)
+      const m = o.find((y) => y.id === f.id);
+      if (!m)
         return !1;
-      if (!y.isLoading) {
-        if (!u(f.id) && !b(y.id)) {
+      if (!m.isLoading) {
+        if (!u(f.id) && !b(m.id)) {
           c(
-            U(
+            Q(
               {
-                ...y,
+                ...m,
                 isLoading: !0
@@ -90,9 +90,9 @@ },
           try {
-            const m = await (t == null ? void 0 : t(y)) || [];
-            m.forEach((E) => {
-              r.current.set(E.id, y.level + 1);
+            const y = await (t == null ? void 0 : t(m)) || [];
+            y.forEach((E) => {
+              r.current.set(E.id, m.level + 1);
             }), c(
-              U(
+              Q(
                 {
-                  ...y,
+                  ...m,
                   isLoading: !1
@@ -102,3 +102,3 @@ },
                   ...o,
-                  ...m.map((E) => Q({
+                  ...y.map((E) => G({
                     entry: E,
@@ -110,8 +110,8 @@ childField: n,
               )
-            ), l.push(y.id), i([...l]);
-          } catch (m) {
-            console.error(m), c(
-              U(
+            ), i.push(m.id), l([...i]);
+          } catch (y) {
+            console.error(y), c(
+              Q(
                 {
-                  ...y,
+                  ...m,
                   isLoading: !1
@@ -133,16 +133,16 @@ },
       t,
-      l,
+      i,
       n
     ]
-  ), I = C(
-    (f) => w(f.id) ? "loading" : S(f.id) ? u(f.id) ? "collapse" : "expand" : "none",
-    [w, S, u]
-  ), x = C(() => {
-    const y = o.filter((m) => m.level === 0).map((m) => m.id);
-    return s.forEach((m) => {
-      const E = o.find((N) => N.id === m);
+  ), w = C(
+    (f) => S(f.id) ? "loading" : x(f.id) ? u(f.id) ? "collapse" : "expand" : "none",
+    [S, x, u]
+  ), I = C(() => {
+    const m = o.filter((y) => y.level === 0).map((y) => y.id);
+    return s.forEach((y) => {
+      const E = o.find((N) => N.id === y);
       E && E.child_id && E.child_id.forEach((N) => {
-        y.includes(N) || y.push(N);
+        m.includes(N) || m.push(N);
       });
-    }), y;
+    }), m;
   }, [s, o]);
@@ -152,9 +152,9 @@ return {
     onExpandableIconClicked: h,
-    getExpandableStatusForRow: I,
+    getExpandableStatusForRow: w,
     getChildsForParent: k,
-    getAllVisibleKeys: x,
+    getAllVisibleKeys: I,
     getLevelForKey: g
   };
 };
-function Q({
+function G({
   entry: e,
@@ -172,9 +172,9 @@ childField: t,
 }
-const U = (e, t) => t.map((n) => n.id === e.id ? e : n), Le = ({
+const Q = (e, t) => t.map((n) => n.id === e.id ? e : n), Ke = ({
   selectionRowKeysProps: e = []
 }) => {
-  const [t, n] = T(
+  const [t, n] = A(
     e
   );
-  xe(() => {
+  ve(() => {
     n(e);
@@ -196,3 +196,3 @@ }, [e]);
     [t, n]
-  ), l = C(
+  ), i = C(
     (r) => {
@@ -208,3 +208,3 @@ if (t.find(
     [t, n]
-  ), i = C(
+  ), l = C(
     (r) => t.find(
@@ -217,9 +217,9 @@ (c) => r.id === c
     selectedRowKeys: t,
-    isRowSelected: i,
+    isRowSelected: l,
     toggleAllRowsSelected: s,
-    toggleRowSelected: l,
+    toggleRowSelected: i,
     changeSelected: a
   };
-}, Ne = (e, t) => {
-  const [n, s] = T(null), [a, l] = T(!1), [i, r] = T(null);
+}, Le = (e, t) => {
+  const [n, s] = A(null), [a, i] = A(!1), [l, r] = A(null);
   return C(
@@ -229,11 +229,11 @@ (c, d) => {
         const u = e.findIndex((k) => k === c), b = e.findIndex((k) => k === n), g = e.findIndex(
-          (k) => k === i
-        ), S = Math.min(u, b), w = Math.max(u, b);
-        if (S > -1 && w > -1) {
-          t(a, e.slice(S, w + 1)), g > w && t(
+          (k) => k === l
+        ), x = Math.min(u, b), S = Math.max(u, b);
+        if (x > -1 && S > -1) {
+          t(a, e.slice(x, S + 1)), g > S && t(
             !a,
-            e.slice(w + 1, g + 1)
-          ), g < S && t(
+            e.slice(S + 1, g + 1)
+          ), g < x && t(
             !a,
-            e.slice(g, S)
+            e.slice(g, x)
           ), r(c);
@@ -243,3 +243,3 @@ return;
       } else
-        s(c), r(null), l(d.target.checked);
+        s(c), r(null), i(d.target.checked);
       t(d.target.checked, [c]);
@@ -253,11 +253,11 @@ },
       a,
+      i,
       l,
-      i,
       r
     ]
   );
-}, Ae = (e) => {
-  const [t, n] = T(e), s = C(
-    (l) => {
-      if (t && l === t.id)
+}, Ne = (e) => {
+  const [t, n] = A(e), s = C(
+    (i) => {
+      if (t && i === t.id)
         return t;
@@ -267,6 +267,6 @@ },
   ), a = C(
-    (l) => {
+    (i) => {
       if (!t) {
         n({
-          id: l,
+          id: i,
           desc: !1
@@ -276,5 +276,5 @@ });
       }
-      if (t.id !== l) {
+      if (t.id !== i) {
         n({
-          id: l,
+          id: i,
           desc: !1
@@ -286,3 +286,3 @@ });
         n({
-          id: l,
+          id: i,
           desc: !0
@@ -301,7 +301,7 @@ });
   };
-}, Te = we.div`
+}, Ae = Se.div`
   overflow-x: auto;
   height: ${({ height: e }) => `${e}px` || "auto"};
   border-bottom: 1px solid #f0f0f0;
-  ${(e) => Se(e.containerStyle ?? {})}
+  ${(e) => xe(e.containerStyle ?? {})}
 
@@ -391,3 +391,3 @@ table {
   }
-`, fe = ({
+`, ue = ({
   value: e,
@@ -412,3 +412,3 @@ onChange: t
   );
-}, De = ({
+}, Te = ({
   onRowSelectionChange: e,
@@ -419,4 +419,4 @@ allRowsAreSelected: t,
   selectedRowKeys: a,
-  handleColumnClick: l,
-  getColumnSorter: i,
+  handleColumnClick: i,
+  getColumnSorter: l,
   sortEnabled: r,
@@ -426,3 +426,3 @@ readonly: o,
   headerStyle: d
-}) => /* @__PURE__ */ M(ce, { children: [
+}) => /* @__PURE__ */ M(le, { children: [
   e && !o && /* @__PURE__ */ p(
@@ -449,3 +449,3 @@ "th",
           children: /* @__PURE__ */ p(
-            fe,
+            ue,
             {
@@ -467,3 +467,3 @@ value: t ? !0 : a.length === 0 ? !1 : null,
       onClick: r ? () => {
-        l(u.key);
+        i(u.key);
       } : void 0,
@@ -488,6 +488,6 @@ children: /* @__PURE__ */ M("div", { className: "ctx", children: [
             style: {
-              visibility: i(u.key) !== void 0 ? void 0 : "hidden",
+              visibility: l(u.key) !== void 0 ? void 0 : "hidden",
               marginLeft: "auto"
             },
-            children: i(u.key) !== void 0 && i(u.key).desc ? " ▼" : " ▲"
+            children: l(u.key) !== void 0 && l(u.key).desc ? " ▼" : " ▲"
           },
@@ -500,3 +500,3 @@ u.key
   ))
-] }), oe = ({
+] }), se = ({
   column: e,
@@ -507,4 +507,4 @@ row: t,
   getColumnSorter: a,
-  expandableOpts: l,
-  getExpandableStatusForRow: i,
+  expandableOpts: i,
+  getExpandableStatusForRow: l,
   onExpandableIconClicked: r,
@@ -528,8 +528,8 @@ onCellRender: o,
     /* @__PURE__ */ p(
-      Me,
+      De,
       {
         row: t,
         columnIdx: n,
-        expandableOpts: l,
-        getExpandableStatusForRow: i,
+        expandableOpts: i,
+        getExpandableStatusForRow: l,
         onExpandableIconClicked: r,
@@ -552,3 +552,3 @@ level: s
 };
-function Me({
+function De({
   row: e,
@@ -559,14 +559,14 @@ columnIdx: t,
   onExpandableIconClicked: a,
-  level: l
+  level: i
 }) {
   if (!n)
     return null;
-  const i = s(e);
-  if (i === "none" || t !== 0)
-    return /* @__PURE__ */ p("div", { style: { display: "inline-block", width: 19 + l * 25 } });
+  const l = s(e);
+  if (l === "none" || t !== 0)
+    return /* @__PURE__ */ p("div", { style: { display: "inline-block", width: 19 + i * 25 } });
   let r;
-  return i === "expand" ? r = n.expandIcon : i === "collapse" ? r = n.collapseIcon : i === "loading" && (r = n.loadingIcon), /* @__PURE__ */ p("div", { style: { display: "inline-block" }, children: /* @__PURE__ */ p(
+  return l === "expand" ? r = n.expandIcon : l === "collapse" ? r = n.collapseIcon : l === "loading" && (r = n.loadingIcon), /* @__PURE__ */ p("div", { style: { display: "inline-block" }, children: /* @__PURE__ */ p(
     r,
     {
-      style: { marginRight: 5, marginLeft: l * 25 },
+      style: { marginRight: 5, marginLeft: i * 25 },
       onClick: () => {
@@ -578,3 +578,3 @@ a(e);
 }
-class le extends j.Component {
+class oe extends j.Component {
   constructor(t) {
@@ -611,3 +611,3 @@ super(t), this.state = { hasError: !1, error: null, errorInfo: null };
 }
-const Re = ({
+const Me = ({
   onRowSelectionChange: e,
@@ -618,4 +618,4 @@ dataSource: t,
   onRowStyle: a,
-  onRowStatus: l,
-  onRowDoubleClick: i,
+  onRowStatus: i,
+  onRowDoubleClick: l,
   isRowSelected: r,
@@ -628,12 +628,12 @@ toggleRowSelected: o,
   getChildsForParent: g,
-  getLevelForKey: S,
-  onCellRender: w,
+  getLevelForKey: x,
+  onCellRender: S,
   cellStyle: k,
   readonly: h
-}) => /* @__PURE__ */ p(ce, { children: t.filter((I) => S(I.id) === 0).map((I) => pe({
-  row: I,
+}) => /* @__PURE__ */ p(le, { children: t.filter((w) => x(w.id) === 0).map((w) => fe({
+  row: w,
   columns: n,
   onRowStyle: a,
-  onRowStatus: l,
-  onRowDoubleClick: i,
+  onRowStatus: i,
+  onRowDoubleClick: l,
   onRowSelectionChange: e,
@@ -651,3 +651,3 @@ isRowSelected: r,
 })) });
-function pe({
+function fe({
   row: e,
@@ -658,4 +658,4 @@ columns: t,
   isRowSelected: a,
-  toggleRowSelected: l,
-  expandableOpts: i,
+  toggleRowSelected: i,
+  expandableOpts: l,
   getExpandableStatusForRow: r,
@@ -668,9 +668,9 @@ onExpandableIconClicked: o,
   onRowStatus: g,
-  level: S = 0,
-  onCellRender: w,
+  level: x = 0,
+  onCellRender: S,
   cellStyle: k,
   readonly: h
 }) {
-  var y;
-  const I = b ? b(e) : "", x = a(e);
+  var m;
+  const w = b ? b(e) : "", I = a(e);
   let f = [
@@ -680,3 +680,3 @@ /* @__PURE__ */ M(
       {
-        style: I,
+        style: w,
         onDoubleClick: () => {
@@ -692,7 +692,7 @@ n == null || n(e);
                 position: "sticky",
-                backgroundColor: x ? "#E6F7FF" : "#f2f2f2",
+                backgroundColor: I ? "#E6F7FF" : "#f2f2f2",
                 cursor: "auto"
               },
-              onDoubleClick: (m) => {
-                m.stopPropagation(), m.preventDefault();
+              onDoubleClick: (y) => {
+                y.stopPropagation(), y.preventDefault();
               },
@@ -709,7 +709,7 @@ children: /* @__PURE__ */ p(
                   children: !h && /* @__PURE__ */ p(
-                    fe,
+                    ue,
                     {
-                      value: x,
-                      onChange: (m) => {
-                        l(e.id, m);
+                      value: I,
+                      onChange: (y) => {
+                        i(e.id, y);
                       }
@@ -723,4 +723,4 @@ }
           ),
-          g && /* @__PURE__ */ p(le, { children: /* @__PURE__ */ p(
-            oe,
+          g && /* @__PURE__ */ p(oe, { children: /* @__PURE__ */ p(
+            se,
             {
@@ -733,25 +733,25 @@ row: e,
               onCellRender: () => g(e),
-              expandableOpts: i,
+              expandableOpts: l,
               getExpandableStatusForRow: r,
               onExpandableIconClicked: o,
-              level: S,
-              rowIsSelected: x,
+              level: x,
+              rowIsSelected: I,
               cellStyle: k
             }
           ) }, `status-${e.id}`),
-          t.map((m, E) => /* @__PURE__ */ p(le, { children: /* @__PURE__ */ p(
-            oe,
+          t.map((y, E) => /* @__PURE__ */ p(oe, { children: /* @__PURE__ */ p(
+            se,
             {
-              column: m,
+              column: y,
               columnIdx: E,
               row: e,
               getColumnSorter: c,
-              expandableOpts: i,
+              expandableOpts: l,
               getExpandableStatusForRow: r,
               onExpandableIconClicked: o,
-              level: S,
-              rowIsSelected: x,
+              level: x,
+              rowIsSelected: I,
               cellStyle: k
             }
-          ) }, `${m.key}-${e.id}`))
+          ) }, `${y.key}-${e.id}`))
         ]
@@ -762,5 +762,5 @@ },
   ];
-  return i !== void 0 && d(e.id) && (f = f.concat(
-    (y = u(e.id)) == null ? void 0 : y.map((m) => pe({
-      row: m.data,
+  return l !== void 0 && d(e.id) && (f = f.concat(
+    (m = u(e.id)) == null ? void 0 : m.map((y) => fe({
+      row: y.data,
       columns: t,
@@ -771,4 +771,4 @@ onRowStyle: b,
       isRowSelected: a,
-      toggleRowSelected: l,
-      expandableOpts: i,
+      toggleRowSelected: i,
+      expandableOpts: l,
       getExpandableStatusForRow: r,
@@ -779,4 +779,4 @@ onExpandableIconClicked: o,
       getChildsForParent: u,
-      level: m.level,
-      onCellRender: w,
+      level: y.level,
+      onCellRender: S,
       onRowStatus: g
@@ -786,3 +786,3 @@ }))
 }
-const ze = ae((e, t) => {
+const Re = ce((e, t) => {
   const {
@@ -792,4 +792,4 @@ height: n,
     loadingComponent: a,
-    dataSource: l,
-    columns: i,
+    dataSource: i,
+    columns: l,
     onRowDoubleClick: r,
@@ -802,23 +802,23 @@ onRowStyle: o,
     expandableOpts: g,
-    onCellRender: S,
-    readonly: w,
+    onCellRender: x,
+    readonly: S,
     selectionRowKeys: k,
     customStyle: h
   } = e, {
-    selectedRowKeys: I,
-    toggleAllRowsSelected: x,
+    selectedRowKeys: w,
+    toggleAllRowsSelected: I,
     isRowSelected: f,
-    changeSelected: y
-  } = Le({
+    changeSelected: m
+  } = Ke({
     selectionRowKeysProps: k
   });
-  de(t, () => ({
+  ae(t, () => ({
     unselectAll: () => {
-      x([]);
+      I([]);
     }
   }));
-  const m = Ne(
-    l.map((H) => H.id),
-    y
-  ), { localSorter: E, getColumnSorter: N, handleColumnClick: _ } = Ae(b), {
+  const y = Le(
+    i.map((H) => H.id),
+    m
+  ), { localSorter: E, getColumnSorter: N, handleColumnClick: _ } = Ne(b), {
     keyIsOpened: O,
@@ -830,30 +830,30 @@ onExpandableIconClicked: B,
     getLevelForKey: P
-  } = Ke({
-    dataSource: l,
+  } = Ee({
+    dataSource: i,
     onFetchChildrenForRecord: g == null ? void 0 : g.onFetchChildrenForRecord,
     childField: g == null ? void 0 : g.childField
   });
-  A(() => {
-    d == null || d(I);
-  }, [I]), A(() => {
+  T(() => {
+    d == null || d(w);
+  }, [w]), T(() => {
     u == null || u(E);
   }, [E]);
-  const q = C(() => I.length === 0 ? !1 : g ? D().length === I.length : l.length === I.length, [l.length, g, I.length]), W = C(() => {
-    x(D());
-  }, [x, D]);
+  const q = C(() => w.length === 0 ? !1 : g ? D().length === w.length : i.length === w.length, [i.length, g, w.length]), W = C(() => {
+    I(D());
+  }, [I, D]);
   return s ? a : /* @__PURE__ */ p(
-    Te,
+    Ae,
     {
       height: n,
       canClick: r !== void 0,
-      readonly: w,
+      readonly: S,
       containerStyle: h == null ? void 0 : h.containerStyle,
       children: /* @__PURE__ */ M("table", { style: h == null ? void 0 : h.tableStyle, children: [
         /* @__PURE__ */ p("thead", { children: /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p(
-          De,
+          Te,
           {
             allRowsAreSelected: q(),
-            columns: i,
+            columns: l,
             onRowSelectionChange: d,
-            selectedRowKeys: I,
+            selectedRowKeys: w,
             toggleAllRowsSelected: W,
@@ -863,3 +863,3 @@ handleColumnClick: _,
             sortEnabled: g === void 0,
-            readonly: w,
+            readonly: S,
             status: !!c,
@@ -870,6 +870,6 @@ headerStyle: h == null ? void 0 : h.headerStyle
         /* @__PURE__ */ p("tbody", { children: /* @__PURE__ */ p(
-          Re,
+          Me,
           {
-            dataSource: l,
-            columns: i,
+            dataSource: i,
+            columns: l,
             onRowSelectionChange: d,
@@ -881,3 +881,3 @@ getColumnSorter: N,
             isRowSelected: f,
-            toggleRowSelected: m,
+            toggleRowSelected: y,
             expandableOpts: g,
@@ -889,5 +889,5 @@ onExpandableIconClicked: B,
             getLevelForKey: P,
-            onCellRender: S,
+            onCellRender: x,
             cellStyle: h == null ? void 0 : h.cellStyle,
-            readonly: w
+            readonly: S
           }
@@ -899,11 +899,11 @@ ) })
 });
-ze.displayName = "Table";
-const Pe = (e, t) => Ee(
+Re.displayName = "Table";
+const ze = (e, t) => Ie(
   () => e,
   [e],
   (n, s) => {
-    const a = n[0], l = s[0], i = a.map((o) => o[t]).sort((o, c) => o.localeCompare(c)).join(","), r = l.map((o) => o[t]).sort((o, c) => o.localeCompare(c)).join(",");
-    return i === r;
+    const a = n[0], i = s[0], l = a.map((o) => o[t]).sort((o, c) => o.localeCompare(c)).join(","), r = i.map((o) => o[t]).sort((o, c) => o.localeCompare(c)).join(",");
+    return l === r;
   }
-), he = V(
+), pe = U(
   ({
@@ -914,3 +914,3 @@ value: e,
     const n = j.useRef();
-    return A(() => {
+    return T(() => {
       const s = n.current;
@@ -939,4 +939,4 @@ e === !0 ? (s.checked = !0, s.indeterminate = !1) : e === !1 ? (s.checked = !1, s.indeterminate = !1) : e === null && (s.checked = !1, s.indeterminate = !0);
 );
-he.displayName = "HeaderCheckboxComp";
-const me = V(
+pe.displayName = "HeaderCheckboxComp";
+const he = U(
   ({
@@ -949,9 +949,9 @@ selectedRowKeysLength: e,
   }) => {
-    const l = e === 0, i = e > 0 && t !== e;
+    const i = e === 0, l = e > 0 && t !== e;
     let r = !1;
-    return a || t === e && t > 0 || n ? r = !0 : l ? r = !1 : i && (r = null), /* @__PURE__ */ p(he, { value: r, onChange: s });
+    return a || t === e && t > 0 || n ? r = !0 : i ? r = !1 : l && (r = null), /* @__PURE__ */ p(pe, { value: r, onChange: s });
   }
 );
-me.displayName = "HeaderCheckbox";
-const $e = 50, Fe = ({
+he.displayName = "HeaderCheckbox";
+const Pe = 50, $e = ({
   gridRef: e,
@@ -963,46 +963,46 @@ onRowSelectionChange: t,
 }) => {
-  const [l, i] = T(
+  const [i, l] = A(
     []
-  ), [r, o] = T(
+  ), [r, o] = A(
     a
   ), c = L(!1), d = L([]), u = L(!1), b = L(null);
-  A(() => {
+  T(() => {
     c.current = r;
-  }, [r]), A(() => {
-    o(a), a && (i([]), u.current = !0);
-  }, [a]), A(() => {
+  }, [r]), T(() => {
+    o(a), a && (l([]), u.current = !0);
+  }, [a]), T(() => {
     n == null || n(r);
   }, [r]);
   const g = C(() => {
-    var I;
+    var w;
     let h = !1;
-    r ? h = !1 : !r && l.length === 0 ? h = !0 : !r && l.length === s ? h = !1 : (r || l.length > 0) && (h = !0), u.current = !0, (I = e == null ? void 0 : e.current) == null || I.api.forEachNode((x) => {
-      x.setSelected(h);
+    r ? h = !1 : !r && i.length === 0 ? h = !0 : !r && i.length === s ? h = !1 : (r || i.length > 0) && (h = !0), u.current = !0, (w = e == null ? void 0 : e.current) == null || w.api.forEachNode((I) => {
+      I.setSelected(h);
     }), o(h), b.current && clearTimeout(b.current), b.current = setTimeout(() => {
       u.current = !1;
     }, 1e3);
-  }, [r, l.length, s, e]);
-  A(() => () => {
+  }, [r, i.length, s, e]);
+  T(() => () => {
     b.current && clearTimeout(b.current);
   }, [g]);
-  const S = C(
+  const x = C(
     (h) => {
       if (u.current) {
-        t == null || t([]), i([]);
+        t == null || t([]), l([]);
         return;
       }
       o(!1);
-      let x = h.api.getSelectedNodes().map(
+      let I = h.api.getSelectedNodes().map(
         (f) => f.data.id
       );
-      x = x.concat(
+      I = I.concat(
         d.current
-      ), t == null || t(x), i(x);
+      ), t == null || t(I), l(I);
     },
     [t]
-  ), w = C(
-    ue((h) => {
-      S == null || S(h);
-    }, $e),
-    [S]
+  ), S = C(
+    de((h) => {
+      x == null || x(h);
+    }, Pe),
+    [x]
   ), k = C((h) => {
@@ -1012,10 +1012,10 @@ d.current = h;
   return {
-    internalSelectedRowKeys: l,
+    internalSelectedRowKeys: i,
     onHeaderCheckboxChange: g,
     allRowSelectedMode: r,
-    onSelectionChangedDebounced: w,
+    onSelectionChangedDebounced: S,
     selectedRowKeysPendingToRender: d.current,
     setSelectedRowKeysPendingToRender: k
   };
-}, _e = ({
+}, Fe = ({
   gridRef: e,
@@ -1026,5 +1026,5 @@ containerRef: t,
   const s = L(!1), a = C(
-    (i) => {
+    (l) => {
       var c;
-      const r = i == null ? void 0 : i.reduce(
+      const r = l == null ? void 0 : l.reduce(
         (d, u) => d + u.getActualWidth(),
@@ -1043,13 +1043,13 @@ 0
         (o = e == null ? void 0 : e.current) == null || o.api.autoSizeAllColumns();
-        const i = (c = e == null ? void 0 : e.current) == null ? void 0 : c.api.getAllGridColumns();
-        if (!i)
+        const l = (c = e == null ? void 0 : e.current) == null ? void 0 : c.api.getAllGridColumns();
+        if (!l)
           return;
-        const r = a(i);
+        const r = a(l);
         if (r > 0) {
-          const b = r / (i.length - 1), S = ((d = e == null ? void 0 : e.current) == null ? void 0 : d.api.getColumnState()).map((w) => ({
-            ...w,
+          const b = r / (l.length - 1), x = ((d = e == null ? void 0 : e.current) == null ? void 0 : d.api.getColumnState()).map((S) => ({
+            ...S,
             // colId 0 is the checkbox column
-            width: w.colId !== "0" ? w.width + b : w.width
+            width: S.colId !== "0" ? S.width + b : S.width
           }));
-          (u = e == null ? void 0 : e.current) == null || u.api.applyColumnState({ state: S });
+          (u = e == null ? void 0 : e.current) == null || u.api.applyColumnState({ state: x });
         }
@@ -1059,3 +1059,3 @@ }, 50));
   };
-}, Be = ({
+}, _e = ({
   actualColumnKeys: e,
@@ -1067,7 +1067,9 @@ persistedColumnState: t
   const n = t.map(
-    (i) => i.colId
-  ), s = [...e].sort(), a = [...n].sort();
+    (l) => l.colId
+  ), s = [...e].sort(), a = [
+    ...n.filter((l) => l !== "0")
+  ].sort();
   if (JSON.stringify(s) === JSON.stringify(a))
     return t;
-}, ie = 50, ye = ae(
+}, ie = 50, ye = ce(
   (e, t) => {
@@ -1078,4 +1080,4 @@ const {
       onRowDoubleClick: a,
-      onRowSelectionChange: l,
-      height: i,
+      onRowSelectionChange: i,
+      height: l,
       onRowStyle: r,
@@ -1088,12 +1090,12 @@ onColumnChanged: o,
       totalRows: g,
-      onAllRowSelectedModeChange: S,
-      allRowSelectedMode: w
-    } = e, k = L(null), h = L(!0), I = L(!1), x = L(), f = L(null), y = L(!1), { autoSizeColumnsIfNecessary: m } = _e({
+      onAllRowSelectedModeChange: x,
+      allRowSelectedMode: S
+    } = e, k = L(null), h = L(!0), w = L(!1), I = L(), f = L(null), m = L(!1), { autoSizeColumnsIfNecessary: y } = Fe({
       gridRef: k,
       containerRef: f,
-      columnsPersistedStateRef: x
+      columnsPersistedStateRef: I
     }), E = C(
-      ue((v) => {
-        if (!y.current) {
-          y.current = !0;
+      de((v) => {
+        if (!m.current) {
+          m.current = !0;
           return;
@@ -1111,3 +1113,3 @@ }
     );
-    de(t, () => ({
+    ae(t, () => ({
       unselectAll: () => {
@@ -1129,13 +1131,13 @@ var v, K;
       setSelectedRowKeysPendingToRender: D
-    } = Fe({
+    } = $e({
       gridRef: k,
-      onRowSelectionChange: l,
-      onAllRowSelectedModeChange: S,
+      onRowSelectionChange: i,
+      onAllRowSelectedModeChange: x,
       totalRows: g,
-      allRowSelectedModeProps: w
+      allRowSelectedModeProps: S
     });
-    A(() => {
-      I.current = z;
+    T(() => {
+      w.current = z;
     }, [z]);
-    const P = Pe(s, "key"), q = J(() => ({}), []), W = J(() => [
+    const P = ze(s, "key"), q = re(() => ({}), []), W = re(() => [
       {
@@ -1150,3 +1152,3 @@ checkboxSelection: !0,
         headerComponent: () => /* @__PURE__ */ p(
-          me,
+          he,
           {
@@ -1173,20 +1175,10 @@ totalRows: g,
       g
-    ]), H = J(
-      () => P.map((v) => v.key),
-      [P]
-    );
-    A(() => {
-      x.current || (x.current = Be({
-        actualColumnKeys: H,
-        persistedColumnState: x.current
-      }));
-    }, [H, c]);
-    const X = C(
+    ]), H = C(
       async (v) => {
-        var ee, te, ne, re;
-        (ee = k.current) == null || ee.api.showLoadingOverlay();
-        const { startRow: K, endRow: Y } = v, G = await n(K, Y);
-        let Z = -1;
-        if (G.length < Y - K && (Z = K + G.length), v.successCallback(G, Z), I.current)
-          (te = k == null ? void 0 : k.current) == null || te.api.forEachNode(($) => {
+        var Y, Z, ee, te;
+        (Y = k.current) == null || Y.api.showLoadingOverlay();
+        const { startRow: K, endRow: V } = v, J = await n(K, V);
+        let X = -1;
+        if (J.length < V - K && (X = K + J.length), v.successCallback(J, X), w.current)
+          (Z = k == null ? void 0 : k.current) == null || Z.api.forEachNode(($) => {
             $.setSelected(!0);
@@ -1196,7 +1188,7 @@ });
           const $ = b == null ? void 0 : b();
-          D($ || []), $ && $.length > 0 && ((ne = k == null ? void 0 : k.current) == null || ne.api.forEachNode((R) => {
-            var se;
-            (se = R == null ? void 0 : R.data) != null && se.id && $.includes(R.data.id) && (R.setSelected(!0), D(
+          D($ || []), $ && $.length > 0 && ((ee = k == null ? void 0 : k.current) == null || ee.api.forEachNode((R) => {
+            var ne;
+            (ne = R == null ? void 0 : R.data) != null && ne.id && $.includes(R.data.id) && (R.setSelected(!0), D(
               B.filter(
-                (ve) => R.data.id && ve !== R.data.id
+                (ke) => R.data.id && ke !== R.data.id
               )
@@ -1206,6 +1198,6 @@ ));
         }
-        (re = k.current) == null || re.api.hideOverlay(), m();
+        (te = k.current) == null || te.api.hideOverlay(), y();
       },
       [
-        m,
+        y,
         b,
@@ -1216,13 +1208,16 @@ n,
       ]
-    ), ge = C(
+    ), me = C(
       (v) => {
-        x.current && v.api.applyColumnState({
-          state: x.current,
+        I.current = _e({
+          actualColumnKeys: P.map((K) => K.key),
+          persistedColumnState: c == null ? void 0 : c()
+        }), I.current && v.api.applyColumnState({
+          state: I.current,
           applyOrder: !0
         }), v.api.setGridOption("datasource", {
-          getRows: X
+          getRows: H
         });
       },
-      [X]
-    ), be = C(
+      [P, H, c]
+    ), ge = C(
       ({ data: v }) => {
@@ -1232,3 +1227,3 @@ a == null || a(v);
       [a]
-    ), Ce = C(
+    ), be = C(
       (v) => {
@@ -1239,3 +1234,3 @@ const K = u == null ? void 0 : u();
       [u]
-    ), ke = C(
+    ), Ce = C(
       (v) => {
@@ -1253,5 +1248,5 @@ h.current || d == null || d(
         className: "ag-grid-default-table ag-theme-quartz",
-        style: { height: i || 600, width: "100%" },
+        style: { height: l || 600, width: "100%" },
         children: /* @__PURE__ */ p(
-          Ie,
+          we,
           {
@@ -1261,3 +1256,3 @@ ref: k,
             defaultColDef: q,
-            onRowDoubleClicked: be,
+            onRowDoubleClicked: ge,
             rowStyle: {
@@ -1280,5 +1275,5 @@ cursor: a ? "pointer" : "auto"
             maxBlocksInCache: 10,
-            onGridReady: ge,
-            onFirstDataRendered: Ce,
-            onBodyScroll: ke,
+            onGridReady: me,
+            onFirstDataRendered: be,
+            onBodyScroll: Ce,
             blockLoadDebounceMillis: ie
@@ -1292,7 +1287,7 @@ }
 ye.displayName = "InfiniteTable";
-const Ve = V(ye);
+const Ue = U(ye);
 export {
-  Ve as InfiniteTable,
-  ze as Table
+  Ue as InfiniteTable,
+  Re as Table
 };
 //# sourceMappingURL=react-formiga-table.es.js.map

package.json

 {
   "name": "@gisce/react-formiga-table",
-  "version": "1.3.0-alpha.6",
+  "version": "1.3.0-alpha.7",
   "engines": {
@@ -5,0 +5,0 @@ "node": "20.5.0"

src/components/InfiniteTable/columnStateHelper.ts

@@ -6,3 +6,3 @@ export const getPersistedColumnState = ({
   actualColumnKeys: string[];
-  persistedColumnState: any[];
+  persistedColumnState?: any[];
 }) => {
@@ -16,4 +16,7 @@ if (!persistedColumnState) {
   // we now have to sort both actualColumnKeys and persistedColumnKeys, and detect if there are differences
+  // we have to remove the "0" (checkbox column) from the persistedColumnKeys
   const sortedActualColumnKeys = [...actualColumnKeys].sort();
-  const sortedPersistedColumnKeys = [...persistedColumnKeys].sort();
+  const sortedPersistedColumnKeys = [
+    ...persistedColumnKeys.filter((key) => key !== "0"),
+  ].sort();
   const areColumnKeysEqual =
@@ -20,0 +23,0 @@ JSON.stringify(sortedActualColumnKeys) ===

No alert changes

Worsened metrics

Total package byte prevSize

364230

decreased by-0.08%

Lines of code

6578

decreased by-0.15%

No dependency changes