vlite3 0.7.4 → 0.7.7

package/components/DataTable/DataTable.vue.js

@@ -1,24 +1,24 @@
-import { defineComponent as me, inject as ve, computed as n, ref as b, watch as g, openBlock as r, createElementBlock as u, createBlock as R, normalizeClass as S, createSlots as M, withCtx as T, renderSlot as D, createCommentVNode as x, createElementVNode as f, createVNode as z, Fragment as A, renderList as $, normalizeStyle as L, mergeProps as Y, unref as W } from "vue";
-import he from "../CheckBox.vue.js";
-import ge from "../Button.vue.js";
-import pe from "../ConfirmationModal.vue.js";
-import be from "../Pagination/Pagination.vue.js";
-import ye from "../Empty/Empty.vue.js";
-import we from "./DataTableHeader.vue.js";
-import Pe from "./DataTableRow.vue.js";
-import Ce from "./DataTableToolbar.vue.js";
-import { $t as P } from "../../utils/i18n.js";
-import { SCREEN_CONTEXT_KEY as ke } from "./types.js";
-const Ie = { class: "space-y-6.5" }, Se = { class: "overflow-x-auto w-full" }, Te = { class: "hover:bg-transparent" }, De = {
+import { defineComponent as me, inject as fe, computed as r, ref as b, watch as v, openBlock as i, createElementBlock as u, createBlock as A, normalizeClass as C, createSlots as N, withCtx as k, renderSlot as I, createVNode as S, createCommentVNode as $, createElementVNode as m, Fragment as B, renderList as T, normalizeStyle as O, mergeProps as K, unref as L } from "vue";
+import ve from "../CheckBox.vue.js";
+import he from "../Button.vue.js";
+import ge from "../ConfirmationModal.vue.js";
+import pe from "../Pagination/Pagination.vue.js";
+import be from "../Empty/Empty.vue.js";
+import ye from "./DataTableHeader.vue.js";
+import we from "./DataTableRow.vue.js";
+import Pe from "./DataTableToolbar.vue.js";
+import { $t as y } from "../../utils/i18n.js";
+import { SCREEN_CONTEXT_KEY as Ce } from "./types.js";
+const ke = { class: "space-y-6.5" }, Ie = { class: "overflow-x-auto w-full" }, Se = { class: "hover:bg-transparent" }, Te = {
   key: 0,
   scope: "col",
   class: "w-[48px] px-0 text-center font-medium text-muted-foreground",
   style: { width: "48px" }
-}, xe = { class: "flex items-center justify-center" }, $e = { class: "[&_tr:last-child]:border-0" }, Be = {
+}, De = { class: "flex items-center justify-center" }, xe = { class: "[&_tr:last-child]:border-0" }, $e = {
   key: 0,
   class: "w-[48px] px-0 py-4 align-middle text-center",
   style: { width: "48px" }
-}, Ee = { key: 2 }, Re = ["colspan"], ze = { key: 1 }, We = /* @__PURE__ */ me({
+}, Be = { key: 2 }, Ee = ["colspan"], Re = { key: 1 }, Ye = /* @__PURE__ */ me({
   __name: "DataTable",
   props: {
     rows: { default: () => [] },
@@ -57,320 +57,283 @@ const Ie = { class: "space-y-6.5" }, Se = { class: "overflow-x-auto w-full" }, T
     variant: { default: "default" }
   },
   emits: ["change", "select", "rowClick", "update:itemsPerPage", "update:selectedRows", "delete"],
-  setup(o, { emit: X }) {
-    const q = (e, t) => {
+  setup(o, { emit: Y }) {
+    const W = (e, t) => {
       if (!(!e || !t))
-        return t.includes(".") ? t.split(".").reduce((a, c) => a?.[c], e) : e[t];
-    }, m = (e, t) => q(e, t), G = (e, t) => {
+        return t.includes(".") ? t.split(".").reduce((a, n) => a?.[n], e) : e[t];
+    }, f = (e, t) => W(e, t), X = (e, t) => {
       const a = ["id", "_id"];
       if (t && t !== "auto") return t;
       if (e && e.length > 0) {
-        for (const c of a)
-          if (c in e[0]) return c;
+        for (const n of a)
+          if (n in e[0]) return n;
       }
       return "_id";
-    }, l = o, y = X, j = ve(ke, null), O = n(() => j?.disableSearch ? !1 : l.showSearch), B = n(() => !!(l.selectable || j?.forceSelectable)), i = n(() => G(l.rows, l.keyField)), d = b({ field: "", order: "" }), C = b(
+    }, l = o, g = Y, E = fe(Ce, null), U = r(() => E?.disableSearch ? !1 : l.showSearch), D = r(() => l.selectable || !!E?.forceSelectable), d = r(() => X(l.rows, l.keyField)), c = b({ field: "", order: "" }), w = b(
       l.pageInfo?.itemsPerPage || l.paginationProps?.itemsPerPage || 10
-    ), p = b(l.pageInfo?.currentPage || 1), w = b(l.search || ""), k = b(!1), I = b("initial"), H = n(() => l.loading);
-    g(
+    ), h = b(l.pageInfo?.currentPage || 1), p = b(l.search || ""), P = b(!1), q = r(() => l.loading);
+    v(
       () => l.loading,
       (e, t) => {
-        !e && t && (I.value = "idle");
       }
-    ), g(
+    ), v(
       () => l.search,
       (e) => {
-        e !== void 0 && e !== w.value && (w.value = e);
+        e !== void 0 && e !== p.value && (p.value = e);
       }
     );
-    let N = null;
-    g(w, () => {
-      N && clearTimeout(N), N = setTimeout(() => {
-        p.value = 1, I.value = "search", E();
+    let R = null;
+    v(p, () => {
+      R && clearTimeout(R), R = setTimeout(() => {
+        h.value = 1, x();
       }, 300);
-    }), g(
-      () => l.pageInfo?.itemsPerPage,
-      (e) => {
-        e !== void 0 && (C.value = e);
-      }
-    ), g(
-      () => l.paginationProps?.itemsPerPage,
-      (e) => {
-        e !== void 0 && (C.value = e);
-      }
-    ), g(
-      () => l.pageInfo?.currentPage,
-      (e) => {
-        e && (p.value = e);
-      }
-    );
+    }), v(() => l.pageInfo?.itemsPerPage, (e) => {
+      e !== void 0 && (w.value = e);
+    }), v(() => l.paginationProps?.itemsPerPage, (e) => {
+      e !== void 0 && (w.value = e);
+    }), v(() => l.pageInfo?.currentPage, (e) => {
+      e && (h.value = e);
+    });
     const s = b(/* @__PURE__ */ new Set());
-    g(
+    v(
       () => l.selectedRows,
       (e) => {
-        const t = new Set(
-          (e || []).map((a) => m(a, i.value))
-        );
+        const t = new Set((e || []).map((a) => f(a, d.value)));
         (t.size !== s.value.size || [...t].some((a) => !s.value.has(a))) && (s.value = t);
       },
       { immediate: !0, deep: !0 }
     );
-    const U = n(() => l.rows.length === 0 ? !1 : l.rows.every(
-      (e) => s.value.has(m(e, i.value))
-    )), V = n(
-      () => s.value.size > 0 && !U.value
-    ), J = n(() => {
+    const z = r(
+      () => l.rows.length > 0 && l.rows.every((e) => s.value.has(f(e, d.value)))
+    ), F = r(() => s.value.size > 0 && !z.value), G = r(() => {
       const e = [...l.selectedRows || [], ...l.rows], t = /* @__PURE__ */ new Map();
-      return e.forEach((a) => t.set(m(a, i.value), a)), Array.from(s.value).map((a) => t.get(a)).filter(Boolean);
-    }), Q = (e) => {
-      e ? l.rows.forEach(
-        (t) => s.value.add(m(t, i.value))
-      ) : s.value.size > 0 && l.rows.forEach(
-        (t) => s.value.delete(m(t, i.value))
-      ), K();
+      return e.forEach((a) => t.set(f(a, d.value), a)), Array.from(s.value).map((a) => t.get(a)).filter(Boolean);
+    }), H = (e) => {
+      e ? l.rows.forEach((t) => s.value.add(f(t, d.value))) : l.rows.forEach((t) => s.value.delete(f(t, d.value))), M();
+    }, J = (e) => {
+      s.value.has(e) ? s.value.delete(e) : s.value.add(e), M();
+    }, M = () => {
+      const e = /* @__PURE__ */ new Set(), t = [];
+      l.rows.forEach((a) => {
+        const n = f(a, d.value);
+        s.value.has(n) && (t.push(a), e.add(n));
+      }), (l.selectedRows || []).forEach((a) => {
+        const n = f(a, d.value);
+        !e.has(n) && s.value.has(n) && (t.push(a), e.add(n));
+      }), g("select", { selected: t, all: z.value, indeterminate: F.value }), g("update:selectedRows", t);
+    }, Q = (e) => {
+      c.value.field === e ? c.value.order === "asc" ? c.value.order = "desc" : c.value.order === "desc" ? (c.value.order = "", c.value.field = "") : c.value.order = "asc" : (c.value.field = e, c.value.order = "asc"), h.value = 1, x();
     }, Z = (e) => {
-      s.value.has(e) ? s.value.delete(e) : s.value.add(e), K();
-    }, K = () => {
-      const e = l.selectedRows || [], t = /* @__PURE__ */ new Set(), a = [];
-      l.rows.forEach((v) => {
-        const h = m(v, i.value);
-        s.value.has(h) && (a.push(v), t.add(h));
-      }), e.forEach((v) => {
-        const h = m(v, i.value);
-        !t.has(h) && s.value.has(h) && (a.push(v), t.add(h));
-      });
-      const c = {
-        selected: a,
-        all: U.value,
-        indeterminate: V.value
-      };
-      y("select", c), y("update:selectedRows", a);
+      h.value = e, x();
     }, _ = (e) => {
-      d.value.field === e ? d.value.order === "asc" ? d.value.order = "desc" : d.value.order === "desc" ? (d.value.order = "", d.value.field = "") : d.value.order = "asc" : (d.value.field = e, d.value.order = "asc"), p.value = 1, I.value = "sort", E();
-    }, ee = (e) => {
-      p.value = e, I.value = "page", E();
-    }, te = (e) => {
-      C.value = e, p.value = 1, I.value = "limit", y("update:itemsPerPage", e), E();
-    }, le = (e) => {
-      y("rowClick", e);
-    }, ae = () => {
-      const e = J.value;
-      y("delete", e), k.value = !1;
+      w.value = e, h.value = 1, g("update:itemsPerPage", e), x();
+    }, ee = (e) => g("rowClick", e), te = () => {
+      g("delete", G.value), P.value = !1;
     };
-    let F = null;
-    const E = () => {
-      F && clearTimeout(F), F = setTimeout(() => {
-        y("change", {
-          pagination: {
-            page: p.value,
-            limit: C.value
-          },
-          sorting: { ...d.value },
-          search: w.value
-        });
+    let V = null;
+    const x = () => {
+      V && clearTimeout(V), V = setTimeout(() => {
+        const e = {
+          pagination: { page: h.value, limit: w.value },
+          sort: { ...c.value },
+          search: p.value,
+          filter: {}
+        };
+        g("change", e), E?.onTableChange?.(e);
       }, 10);
     };
-    g(
+    v(
       () => l.rows,
       () => {
-        const e = new Set(
-          l.rows.map((t) => m(t, i.value))
-        );
+        const e = new Set(l.rows.map((t) => f(t, d.value)));
         s.value = new Set([...s.value].filter((t) => e.has(t)));
       }
     );
-    const oe = n(() => [
+    const le = r(() => [
       "w-full flex flex-col",
       l.variant === "raised" ? "bg-background shadow-sm p-2 rounded-lg" : "bg-background rounded",
       "overflow-hidden",
       l.bordered ? "border border-border" : "",
       l.class
-    ].join(" ")), se = n(
-      () => ["w-full caption-bottom -text-fs-1", l.tableClass].join(" ")
-    ), ne = (e) => e.width || "auto", re = n(
-      () => l.emptyTitleI18n ? P(l.emptyTitleI18n) : l.emptyTitle
-    ), ie = n(
-      () => l.emptyDescriptionI18n ? P(l.emptyDescriptionI18n) : l.emptyDescription
-    ), de = n(() => {
-      const e = P("vlite.dataTable.confirmDeleteTitle");
+    ].join(" ")), ae = r(() => ["w-full caption-bottom -text-fs-1", l.tableClass].join(" ")), oe = (e) => e.width || "auto", se = r(() => l.emptyTitleI18n ? y(l.emptyTitleI18n) : l.emptyTitle), ne = r(() => l.emptyDescriptionI18n ? y(l.emptyDescriptionI18n) : l.emptyDescription), re = r(() => {
+      const e = y("vlite.dataTable.confirmDeleteTitle");
       return e !== "vlite.dataTable.confirmDeleteTitle" ? e : "Confirm Deletion";
-    }), ce = n(() => {
-      const e = P("vlite.dataTable.confirmDeleteDesc");
+    }), ie = r(() => {
+      const e = y("vlite.dataTable.confirmDeleteDesc");
       return e !== "vlite.dataTable.confirmDeleteDesc" ? e : "Are you sure you want to delete the selected items?";
-    }), ue = n(() => {
-      const e = P("vlite.dataTable.deleteBtn");
+    }), de = r(() => {
+      const e = y("vlite.dataTable.deleteBtn");
       return e !== "vlite.dataTable.deleteBtn" ? e : "Delete";
-    }), fe = n(() => {
-      const e = P("vlite.dataTable.cancelBtn");
+    }), ce = r(() => {
+      const e = y("vlite.dataTable.cancelBtn");
       return e !== "vlite.dataTable.cancelBtn" ? e : "Cancel";
     });
-    return (e, t) => (r(), u("div", Ie, [
-      O.value || e.$slots?.["toolbar-left"] || e.$slots?.["toolbar-right"] ? (r(), R(Ce, {
+    return (e, t) => (i(), u("div", ke, [
+      U.value || e.$slots?.["toolbar-left"] || e.$slots?.["toolbar-right"] ? (i(), A(Pe, {
         key: 0,
-        modelValue: w.value,
-        "onUpdate:modelValue": t[1] || (t[1] = (a) => w.value = a),
-        "show-search": O.value,
+        modelValue: p.value,
+        "onUpdate:modelValue": t[1] || (t[1] = (a) => p.value = a),
+        "show-search": U.value,
         placeholder: o.searchPlaceholder,
         placeholderI18n: o.searchPlaceholderI18n,
-        class: S(o.toolbarClass),
+        class: C(o.toolbarClass),
         "search-class": o.toolbarSearchClass
-      }, M({ _: 2 }, [
+      }, N({ _: 2 }, [
         e.$slots?.["toolbar-left"] ? {
           name: "left",
-          fn: T(() => [
-            D(e.$slots, "toolbar-left")
+          fn: k(() => [
+            I(e.$slots, "toolbar-left")
           ]),
           key: "0"
         } : void 0,
         s.value.size > 0 ? {
           name: "delete",
-          fn: T(() => [
-            s.value.size > 0 ? (r(), R(ge, {
-              key: 0,
+          fn: k(() => [
+            S(he, {
               rounded: "full",
               variant: "outline",
               size: "lg",
               icon: "lucide:trash-2",
-              onClick: t[0] || (t[0] = (a) => k.value = !0)
-            })) : x("", !0)
+              onClick: t[0] || (t[0] = (a) => P.value = !0)
+            })
           ]),
           key: "1"
         } : void 0,
         e.$slots?.["toolbar-right"] ? {
           name: "right",
-          fn: T(() => [
-            D(e.$slots, "toolbar-right")
+          fn: k(() => [
+            I(e.$slots, "toolbar-right")
           ]),
           key: "2"
         } : void 0
-      ]), 1032, ["modelValue", "show-search", "placeholder", "placeholderI18n", "class", "search-class"])) : x("", !0),
-      f("div", {
-        class: S(oe.value)
+      ]), 1032, ["modelValue", "show-search", "placeholder", "placeholderI18n", "class", "search-class"])) : $("", !0),
+      m("div", {
+        class: C(le.value)
       }, [
-        f("div", Se, [
-          f("table", {
-            class: S([se.value, "data-table"])
+        m("div", Ie, [
+          m("table", {
+            class: C([ae.value, "data-table"])
           }, [
-            f("thead", {
-              class: S([
+            m("thead", {
+              class: C([
                 "[&_tr]:border-b [&_tr]:border-border bg-muted",
                 o.variant === "raised" ? "[&_th:first-child]:rounded-tl-lg [&_th:last-child]:rounded-tr-lg" : ""
               ])
             }, [
-              f("tr", Te, [
-                B.value ? (r(), u("th", De, [
-                  f("div", xe, [
-                    z(he, {
-                      "model-value": U.value,
-                      indeterminate: V.value,
+              m("tr", Se, [
+                D.value ? (i(), u("th", Te, [
+                  m("div", De, [
+                    S(ve, {
+                      "model-value": z.value,
+                      indeterminate: F.value,
                       size: "xs",
-                      "onUpdate:modelValue": Q
+                      "onUpdate:modelValue": H
                     }, null, 8, ["model-value", "indeterminate"])
                   ])
-                ])) : x("", !0),
-                (r(!0), u(A, null, $(o.headers, (a) => (r(), R(we, {
+                ])) : $("", !0),
+                (i(!0), u(B, null, T(o.headers, (a) => (i(), A(ye, {
                   key: a.field,
                   header: a,
-                  "sort-config": d.value,
+                  "sort-config": c.value,
                   compact: o.compact,
                   "table-sortable": o.sortable,
-                  onSort: _,
+                  onSort: Q,
                   class: "last:pr-5!",
-                  style: L({ width: ne(a) })
+                  style: O({ width: oe(a) })
                 }, null, 8, ["header", "sort-config", "compact", "table-sortable", "style"]))), 128))
               ])
             ], 2),
-            f("tbody", $e, [
-              H.value ? (r(!0), u(A, { key: 0 }, $(Math.min(C.value, 15), (a) => (r(), u("tr", {
+            m("tbody", xe, [
+              q.value ? (i(!0), u(B, { key: 0 }, T(Math.min(w.value, 15), (a) => (i(), u("tr", {
                 key: "skeleton-" + a,
                 class: "border-b border-border/70 bg-background transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
               }, [
-                B.value ? (r(), u("td", Be, [...t[4] || (t[4] = [
-                  f("div", { class: "flex items-center justify-center" }, [
-                    f("div", { class: "h-4 w-4 rounded-[4px] bg-muted/50 animate-pulse" })
+                D.value ? (i(), u("td", $e, [...t[4] || (t[4] = [
+                  m("div", { class: "flex items-center justify-center" }, [
+                    m("div", { class: "h-4 w-4 rounded-[4px] bg-muted/50 animate-pulse" })
                   ], -1)
-                ])])) : x("", !0),
-                (r(!0), u(A, null, $(o.headers, (c) => (r(), u("td", {
-                  key: c.field,
-                  class: S(["p-5! align-middle last:pr-6!", [c.hideOnMobile ? "hidden md:table-cell" : ""]])
+                ])])) : $("", !0),
+                (i(!0), u(B, null, T(o.headers, (n) => (i(), u("td", {
+                  key: n.field,
+                  class: C(["p-5! align-middle last:pr-6!", [n.hideOnMobile ? "hidden md:table-cell" : ""]])
                 }, [
-                  f("div", {
-                    class: "rounded-md bg-muted/50 animate-pulse h-4 w-full",
-                    style: L({ width: `${50 + Math.random() * 40}%` })
+                  m("div", {
+                    class: "rounded-md bg-muted/50 animate-pulse h-4",
+                    style: O({ width: `${50 + Math.random() * 40}%` })
                   }, null, 4)
                 ], 2))), 128))
-              ]))), 128)) : o.rows.length > 0 ? (r(!0), u(A, { key: 1 }, $(o.rows, (a, c) => (r(), R(Pe, {
-                key: m(a, i.value),
+              ]))), 128)) : o.rows.length > 0 ? (i(!0), u(B, { key: 1 }, T(o.rows, (a, n) => (i(), A(we, {
+                key: f(a, d.value),
                 row: a,
                 headers: o.headers,
-                index: c,
-                "key-field": i.value,
-                selectable: B.value,
-                "is-selected": s.value.has(m(a, i.value)),
+                index: n,
+                "key-field": d.value,
+                selectable: D.value,
+                "is-selected": s.value.has(f(a, d.value)),
                 hoverable: o.hoverable,
                 striped: o.striped,
                 compact: o.compact,
-                onSelect: Z,
-                onRowClick: le,
+                onSelect: J,
+                onRowClick: ee,
                 class: "[&_td:last-child]:pr-3.5!"
-              }, M({ _: 2 }, [
-                $(o.headers, (v) => ({
-                  name: v.field,
-                  fn: T((h) => [
-                    D(e.$slots, v.field, Y({ ref_for: !0 }, h))
+              }, N({ _: 2 }, [
+                T(o.headers, (j) => ({
+                  name: j.field,
+                  fn: k((ue) => [
+                    I(e.$slots, j.field, K({ ref_for: !0 }, ue))
                   ])
                 }))
-              ]), 1032, ["row", "headers", "index", "key-field", "selectable", "is-selected", "hoverable", "striped", "compact"]))), 128)) : (r(), u("tr", Ee, [
-                f("td", {
-                  colspan: B.value ? o.headers.length + 1 : o.headers.length,
+              ]), 1032, ["row", "headers", "index", "key-field", "selectable", "is-selected", "hoverable", "striped", "compact"]))), 128)) : (i(), u("tr", Be, [
+                m("td", {
+                  colspan: D.value ? o.headers.length + 1 : o.headers.length,
                   class: "align-middle hover:bg-transparent"
                 }, [
-                  D(e.$slots, "empty", {}, () => [
-                    z(W(ye), {
-                      title: re.value,
-                      description: ie.value,
+                  I(e.$slots, "empty", {}, () => [
+                    S(L(be), {
+                      title: se.value,
+                      description: ne.value,
                       icon: o.emptyIcon,
                       class: "border-none! bg-transparent! py-16!"
-                    }, M({ _: 2 }, [
+                    }, N({ _: 2 }, [
                       e.$slots["empty-action"] ? {
                         name: "action",
-                        fn: T(() => [
-                          D(e.$slots, "empty-action")
+                        fn: k(() => [
+                          I(e.$slots, "empty-action")
                         ]),
                         key: "0"
                       } : void 0
                     ]), 1032, ["title", "description", "icon"])
                   ])
-                ], 8, Re)
+                ], 8, Ee)
               ]))
             ])
           ], 2)
         ])
       ], 2),
-      o.showPagination && o.pageInfo && o.pageInfo.totalPages > 1 ? (r(), u("div", ze, [
-        z(W(be), Y({
-          "current-page": p.value,
+      o.showPagination && o.pageInfo && o.pageInfo.totalPages > 1 ? (i(), u("div", Re, [
+        S(L(pe), K({
+          "current-page": h.value,
           "total-pages": o.pageInfo.totalPages,
           "total-items": o.pageInfo.totalItems
         }, o.paginationProps, {
-          onChange: ee,
-          "onUpdate:itemsPerPage": te
+          onChange: Z,
+          "onUpdate:itemsPerPage": _
         }), null, 16, ["current-page", "total-pages", "total-items"])
-      ])) : x("", !0),
-      z(pe, {
-        show: k.value,
-        "onUpdate:show": t[2] || (t[2] = (a) => k.value = a),
-        title: de.value,
-        description: ce.value,
-        "confirm-text": ue.value,
-        "cancel-text": fe.value,
+      ])) : $("", !0),
+      S(ge, {
+        show: P.value,
+        "onUpdate:show": t[2] || (t[2] = (a) => P.value = a),
+        title: re.value,
+        description: ie.value,
+        "confirm-text": de.value,
+        "cancel-text": ce.value,
         variant: "danger",
-        onConfirm: ae,
-        onCancel: t[3] || (t[3] = (a) => k.value = !1)
+        onConfirm: te,
+        onCancel: t[3] || (t[3] = (a) => P.value = !1)
       }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text"])
     ]));
   }
 });
 export {
-  We as default
+  Ye as default
 };

package/components/DataTable/types.d.ts

@@ -10,16 +10,17 @@ export interface SortConfig {
 }
 export interface TableState {
     pagination: PaginationConfig;
-    sorting: SortConfig;
+    sort: SortConfig;
     search: string;
+    filter: Record<string, any>;
 }
 export interface FilterConfig {
-    search: string;
-    sorting: SortConfig;
     [key: string]: any;
 }
 export interface TableFilter {
     pagination: PaginationConfig;
+    search: string;
+    sort: SortConfig;
     filter: FilterConfig;
 }
 export interface TableHeader {
@@ -49,10 +50,7 @@ export interface DataTableProps {
     headers: TableHeader[];
     /**
      * Unique row identifier field.
-     * When set to the sentinel value 'auto' (the internal default), DataTable will
-     * automatically pick the first matching key from ['id', '_id'] found on the
-     * first row. Explicitly passing 'id' or '_id' (or any other string) pins the
-     * field to that exact value.
+     * 'auto' → picks first of ['id','_id'] found on first row, fallback '_id'.
      */
     keyField?: string;
     loading?: boolean;
@@ -83,11 +81,18 @@ export interface RowClickPayload {
     row: any;
     index: number;
 }
-/** Shape provided by Screen to deeply nested components */
+/**
+ * Shape provided by Screen to all deeply nested components via provide/inject.
+ *
+ * - disableSearch    → DataTable hides its own search toolbar (Screen owns search)
+ * - forceSelectable  → DataTable enables row selection for bulk-delete
+ * - onTableChange    → DataTable calls this whenever sort/pagination/search changes
+ *                      so Screen can merge the state and call its own refetch.
+ *                      Undefined when DataTable is used standalone (outside Screen).
+ */
 export interface ScreenContext {
-    /** When true, DataTable should hide its own search toolbar */
     disableSearch: boolean;
-    /** When true, DataTable should enable row selection */
     forceSelectable: boolean;
+    onTableChange?: (state: TableState) => void;
 }
 export declare const SCREEN_CONTEXT_KEY: unique symbol;