@chumsinc/sortable-tables 3.1.0 → 3.1.2

package/dist/index.es.js

@@ -1,53 +1,20 @@
-import { jsx as l, jsxs as h } from "react/jsx-runtime";
-import { createContext as I, useState as w, useCallback as g, useMemo as J, useContext as C, createElement as L, useEffect as q, useId as K } from "react";
-import R from "@emotion/styled";
-const T = I(null);
-function x({
-  children: t,
-  initialFields: e = [],
-  initialSort: a = null
-}) {
-  const [n, s] = w(e), [r, c] = w(a), u = g(
-    (p) => {
-      s(p);
-    },
-    []
-  ), i = g(
-    (p) => {
-      c(p);
-    },
-    []
-  ), d = g((p, f) => {
-    const N = n.map((y) => y.id === p ? { ...y, ...f } : y);
-    s(N);
-  }, [n]), o = g((p) => n.find((f) => f.id === p), [n]), b = J(
-    () => ({
-      fields: n,
-      setFields: u,
-      sort: r,
-      setSort: i,
-      getField: o,
-      updateField: d
-    }),
-    [n, u, r, i, d, o]
-  );
-  return /* @__PURE__ */ l(T.Provider, { value: b, children: t });
-}
-x.displayName = "DataTableProvider";
+import { jsx as l, Fragment as J, jsxs as h } from "react/jsx-runtime";
+import { createElement as L, createContext as q, useState as R, useCallback as g, useMemo as K, useContext as C, useEffect as O, useId as Q } from "react";
+import F from "@emotion/styled";
 function E(t) {
-  var e, a, n = "";
-  if (typeof t == "string" || typeof t == "number") n += t;
+  var e, n, a = "";
+  if (typeof t == "string" || typeof t == "number") a += t;
   else if (typeof t == "object") if (Array.isArray(t)) {
     var s = t.length;
-    for (e = 0; e < s; e++) t[e] && (a = E(t[e])) && (n && (n += " "), n += a);
-  } else for (a in t) t[a] && (n && (n += " "), n += a);
-  return n;
+    for (e = 0; e < s; e++) t[e] && (n = E(t[e])) && (a && (a += " "), a += n);
+  } else for (n in t) t[n] && (a && (a += " "), a += n);
+  return a;
 }
-function m() {
-  for (var t, e, a = 0, n = "", s = arguments.length; a < s; a++) (t = arguments[a]) && (e = E(t)) && (n && (n += " "), n += e);
-  return n;
+function b() {
+  for (var t, e, n = 0, a = "", s = arguments.length; n < s; n++) (t = arguments[n]) && (e = E(t)) && (a && (a += " "), a += e);
+  return a;
 }
-const F = R.table`
+const w = F.table`
     --table-sticky-top: ${(t) => t.sticky ? "0" : void 0};
 
     thead {
@@ -63,34 +30,116 @@ const F = R.table`
 function P({
   sticky: t,
   responsive: e,
-  children: a,
-  className: n,
+  children: n,
+  className: a,
   ref: s,
   ...r
 }) {
   if (e) {
-    const c = m(n, {
+    const o = b(a, {
       "table-responsive": e === !0,
       [`table-responsive-${e}`]: e !== !0
     });
-    return /* @__PURE__ */ l("div", { className: c, children: /* @__PURE__ */ l(F, { ref: s, ...r, children: a }) });
+    return /* @__PURE__ */ l("div", { className: o, children: /* @__PURE__ */ l(w, { ref: s, ...r, children: n }) });
   }
-  return /* @__PURE__ */ l(F, { className: n, sticky: t, ref: s, ...r, children: a });
+  return /* @__PURE__ */ l(w, { className: a, sticky: t, ref: s, ...r, children: n });
+}
+function j({
+  className: t,
+  rowClassName: e,
+  selected: n,
+  row: a,
+  trRef: s,
+  onClick: r,
+  children: o,
+  ...c
+}) {
+  const i = (d) => {
+    r?.(a, d);
+  }, u = typeof e == "function" ? e(a) : e;
+  return a ? /* @__PURE__ */ l(
+    "tr",
+    {
+      ref: s,
+      className: b({ "table-active": n }, t, u),
+      onClick: i,
+      ...c,
+      children: o
+    }
+  ) : null;
+}
+j.displayName = "DataTableTR";
+function x({ field: t, row: e, className: n, as: a, ...s }) {
+  if (t.visible === !1)
+    return null;
+  const r = b(
+    { [`text-${t.align}`]: !!t.align },
+    n,
+    typeof t.className == "function" ? t.className(e) : t.className
+  );
+  return L(
+    a ?? t.as ?? "td",
+    {
+      className: r,
+      scope: (a ?? t.as) === "th" ? "row" : void 0,
+      colSpan: t.colSpan,
+      ...t.cellProps,
+      ...s
+    },
+    e[t.field] === void 0 && !t.render ? null : typeof t.render == "function" ? t.render(e) : e[t.field]
+  );
+}
+x.displayName = "DataTableCell";
+function U({ fields: t, row: e }) {
+  return /* @__PURE__ */ l(J, { children: t.map((n, a) => /* @__PURE__ */ l(x, { field: n, row: e }, String(n?.id ?? a))) });
 }
+const y = q(null);
 function S({
+  children: t,
+  initialFields: e = [],
+  initialSort: n = null
+}) {
+  const [a, s] = R(e), [r, o] = R(n), c = g(
+    (p) => {
+      s(p);
+    },
+    []
+  ), i = g(
+    (p) => {
+      o(p);
+    },
+    []
+  ), u = g((p, f) => {
+    const N = a.map((T) => T.id === p ? { ...T, ...f } : T);
+    s(N);
+  }, [a]), d = g((p) => a.find((f) => f.id === p), [a]), m = K(
+    () => ({
+      fields: a,
+      setFields: c,
+      sort: r,
+      setSort: i,
+      getField: d,
+      updateField: u
+    }),
+    [a, c, r, i, u, d]
+  );
+  return /* @__PURE__ */ l(y.Provider, { value: m, children: t });
+}
+S.displayName = "DataTableProvider";
+function D({
   field: t,
   className: e,
-  children: a,
-  ...n
+  children: n,
+  ...a
 }) {
   if (t.visible === !1)
     return null;
-  const s = m({ [`text-${t.align}`]: !!t.align }, e);
-  return /* @__PURE__ */ l("th", { className: s, scope: "col", ...n, children: a ?? t.title });
+  const s = b({ [`text-${t.align}`]: !!t.align }, e);
+  return /* @__PURE__ */ l("th", { className: s, scope: "col", ...a, children: n ?? t.title });
 }
-S.displayName = "DataTableTH";
+D.displayName = "DataTableTH";
 function v() {
-  const t = C(T);
+  const t = C(y);
   if (!t)
     throw new Error("useTableContext must be used within a DataTableProvider");
   return [
@@ -98,166 +147,145 @@ function v() {
     t.setFields
   ];
 }
-function j({ ...t }) {
+function _({ ...t }) {
   const [e] = v();
-  return /* @__PURE__ */ l("thead", { ...t, children: /* @__PURE__ */ l("tr", { children: e.map((a, n) => /* @__PURE__ */ l(
-    S,
+  return /* @__PURE__ */ l("thead", { ...t, children: /* @__PURE__ */ l("tr", { children: e.map((n, a) => /* @__PURE__ */ l(
+    D,
     {
-      ...a.thProps,
-      field: a,
-      className: m(
-        typeof a.className == "function" ? { [`text-${a.align}`]: !!a.align } : a.className
+      ...n.thProps,
+      field: n,
+      className: b(
+        typeof n.className == "function" ? { [`text-${n.align}`]: !!n.align } : n.className
       )
     },
-    String(a.id ?? n)
+    String(n.id ?? a)
   )) }) });
 }
-j.displayName = "DataTableHead";
-function _({
+_.displayName = "DataTableHead";
+function M({
   className: t,
   size: e,
-  responsive: a,
-  sticky: n,
+  responsive: n,
+  sticky: a,
   data: s,
   keyField: r,
-  rowClassName: c,
-  renderRow: u,
+  rowClassName: o,
+  renderRow: c,
   onSelectRow: i,
-  selected: d,
-  tableHeadProps: o,
-  children: b,
+  selected: u,
+  tableHeadProps: d,
+  children: m,
   tfoot: p,
   ...f
 }) {
-  const N = m("table", t, {
+  const N = b("table", t, {
     [`table-${e}`]: !!e
   });
-  return /* @__PURE__ */ h(P, { sticky: n, responsive: a, className: N, ...f, children: [
+  return /* @__PURE__ */ h(P, { sticky: a, responsive: n, className: N, ...f, children: [
     /* @__PURE__ */ l(H, {}),
-    /* @__PURE__ */ l(j, { ...o }),
+    /* @__PURE__ */ l(_, { ...d }),
     !!s.length && /* @__PURE__ */ l(
       k,
       {
         data: s,
         keyField: r,
-        rowClassName: c,
-        renderRow: u,
+        rowClassName: o,
+        renderRow: c,
         onSelectRow: i,
-        selected: d
+        selected: u
       }
     ),
-    b,
+    m,
     p
   ] });
 }
-_.displayName = "ContainedDataTable";
-function O({
+M.displayName = "ContainedDataTable";
+function X({
   fields: t,
   ...e
 }) {
-  return /* @__PURE__ */ l(x, { initialFields: t, children: /* @__PURE__ */ l(_, { ...e }) });
-}
-O.displayName = "DataTable";
-function D({ field: t, row: e, className: a, as: n, ...s }) {
-  if (t.visible === !1)
-    return null;
-  const r = m(
-    { [`text-${t.align}`]: !!t.align },
-    a,
-    typeof t.className == "function" ? t.className(e) : t.className
-  );
-  return L(
-    n ?? t.as ?? "td",
-    {
-      className: r,
-      scope: (n ?? t.as) === "th" ? "row" : void 0,
-      colSpan: t.colSpan,
-      ...t.cellProps,
-      ...s
-    },
-    e[t.field] === void 0 && !t.render ? null : typeof t.render == "function" ? t.render(e) : e[t.field]
-  );
+  return /* @__PURE__ */ l(S, { initialFields: t, children: /* @__PURE__ */ l(M, { ...e }) });
 }
-D.displayName = "DataTableCell";
-function M({
+X.displayName = "DataTable";
+function A({
   className: t,
   rowClassName: e,
-  selected: a,
-  row: n,
+  selected: n,
+  row: a,
   trRef: s,
   onClick: r,
-  ...c
+  ...o
 }) {
-  const [u] = v(), i = (o) => {
-    r?.(n, o);
-  }, d = typeof e == "function" ? e(n) : e;
-  return n ? /* @__PURE__ */ l(
+  const [c] = v(), i = (d) => {
+    r?.(a, d);
+  }, u = typeof e == "function" ? e(a) : e;
+  return a ? /* @__PURE__ */ l(
     "tr",
     {
       ref: s,
-      className: m({ "table-active": a }, t, d),
+      className: b({ "table-active": n }, t, u),
       onClick: i,
-      ...c,
-      children: u.map((o, b) => /* @__PURE__ */ l(D, { field: o, row: n }, String(o?.id ?? b)))
+      ...o,
+      children: c.map((d, m) => /* @__PURE__ */ l(x, { field: d, row: a }, String(d?.id ?? m)))
     }
   ) : null;
 }
-M.displayName = "ContainedDataTableRow";
-function Q({
+A.displayName = "ContainedDataTableRow";
+function Y({
   fields: t,
   className: e,
-  rowClassName: a,
-  selected: n,
+  rowClassName: n,
+  selected: a,
   row: s,
   trRef: r,
-  onClick: c,
-  ...u
+  onClick: o,
+  ...c
 }) {
-  const i = (o) => {
-    c?.(s, o);
-  }, d = typeof a == "function" ? a(s) : a;
-  return s ? /* @__PURE__ */ l(
-    "tr",
+  return /* @__PURE__ */ l(
+    j,
     {
-      ref: r,
-      className: m({ "table-active": n }, e, d),
-      onClick: i,
-      ...u,
-      children: t.map((o, b) => /* @__PURE__ */ l(D, { field: o, row: s }, String(o?.id ?? b)))
+      className: e,
+      rowClassName: n,
+      row: s,
+      selected: a,
+      trRef: r,
+      onClick: o,
+      ...c,
+      children: /* @__PURE__ */ l(U, { fields: t, row: s })
     }
-  ) : null;
+  );
 }
-Q.displayName = "DataTableRow";
+Y.displayName = "DataTableRow";
 function k({
   data: t,
   keyField: e,
-  rowClassName: a,
-  renderRow: n,
+  rowClassName: n,
+  renderRow: a,
   onSelectRow: s,
   selected: r = "",
-  children: c,
-  ...u
+  children: o,
+  ...c
 }) {
-  return /* @__PURE__ */ h("tbody", { ...u, children: [
+  return /* @__PURE__ */ h("tbody", { ...c, children: [
     t.map((i) => {
-      const d = String(typeof e == "function" ? e(i) : i[e]), o = typeof r == "function" ? r(i) : d === r;
-      return n ? n(i) : /* @__PURE__ */ l(
-        M,
+      const u = String(typeof e == "function" ? e(i) : i[e]), d = typeof r == "function" ? r(i) : u === r;
+      return a ? a(i) : /* @__PURE__ */ l(
+        A,
         {
           onClick: s,
-          rowClassName: a,
+          rowClassName: n,
           row: i,
-          selected: o
+          selected: d
         },
-        d
+        u
       );
     }),
-    c
+    o
   ] });
 }
 k.displayName = "DataTableTBody";
 function $() {
-  const t = C(T);
+  const t = C(y);
   if (!t)
     throw new Error("useTableSort must be used within a DataTableProvider");
   return [
@@ -265,11 +293,11 @@ function $() {
     t.setSort
   ];
 }
-const U = (t) => t ? t === "end" ? "flex-end" : "center" : "flex-start", X = R.div`
+const Z = (t) => t ? t === "end" ? "flex-end" : "center" : "flex-start", z = F.div`
     display: flex;
     width: 100%;
     flex-direction: ${(t) => t.align === "end" ? "row-reverse" : "row"};
-    justify-content: ${(t) => U(t.align)};
+    justify-content: ${(t) => Z(t.align)};
 
     .sort-icon {
         flex-grow: ${(t) => t.align === "end" ? "1" : "0"};
@@ -282,173 +310,173 @@ const U = (t) => t ? t === "end" ? "flex-end" : "center" : "flex-start", X = R.d
         transition: opacity 0.2s;
     }
 `;
-function A({
+function B({
   field: t,
   sorted: e,
-  ascending: a,
-  className: n,
+  ascending: n,
+  className: a,
   onClick: s
 }) {
   if (t.visible === !1)
     return null;
   if (!t.sortable)
-    return /* @__PURE__ */ l(S, { field: t, className: n });
-  const { className: r, ...c } = t.thProps ?? {}, u = m(
-    n,
+    return /* @__PURE__ */ l(D, { field: t, className: a });
+  const { className: r, ...o } = t.thProps ?? {}, c = b(
+    a,
     r,
     { [`text-${t.align}`]: !!t.align }
   ), i = () => {
-    s({ field: t.field, ascending: e ? !a : !0 });
-  }, d = {
-    "bi-arrow-down": a,
-    "bi-arrow-up": !a
+    s({ field: t.field, ascending: e ? !n : !0 });
+  }, u = {
+    "bi-arrow-down": n,
+    "bi-arrow-up": !n
   };
-  return /* @__PURE__ */ l("th", { ...c, className: m("sortable", u), scope: "col", onClick: i, children: /* @__PURE__ */ h(X, { sorted: e, align: t.align, children: [
+  return /* @__PURE__ */ l("th", { ...o, className: b("sortable", c), scope: "col", onClick: i, children: /* @__PURE__ */ h(z, { sorted: e, align: t.align, children: [
     /* @__PURE__ */ l("div", { className: "field-title", children: t.title }),
-    /* @__PURE__ */ l("div", { className: m("me-1 sort-icon", d) })
+    /* @__PURE__ */ l("div", { className: b("me-1 sort-icon", u) })
   ] }) });
 }
-A.displayName = "SortableTableTH";
-function B({
+B.displayName = "SortableTableTH";
+function V({
   onChangeSort: t
 }) {
-  const [e] = v(), [a] = $();
-  return /* @__PURE__ */ l("thead", { children: /* @__PURE__ */ l("tr", { children: e.map((n, s) => /* @__PURE__ */ l(
-    A,
+  const [e] = v(), [n] = $();
+  return /* @__PURE__ */ l("thead", { children: /* @__PURE__ */ l("tr", { children: e.map((a, s) => /* @__PURE__ */ l(
+    B,
     {
-      field: n,
-      sorted: a?.field === n.field,
-      ascending: a?.ascending,
-      className: m(
-        typeof n.className == "function" ? { [`text-${n.align}`]: !!n.align } : n.className
+      field: a,
+      sorted: n?.field === a.field,
+      ascending: n?.ascending,
+      className: b(
+        typeof a.className == "function" ? { [`text-${a.align}`]: !!a.align } : a.className
       ),
       onClick: t
     },
     s
   )) }) });
 }
-B.displayName = "SortableTableHead";
-function V({
+V.displayName = "SortableTableHead";
+function W({
   onChangeSort: t
 }) {
-  const [e] = v(), [a] = $();
-  return /* @__PURE__ */ l(B, { fields: e, currentSort: a, onChangeSort: t });
+  const [e] = v(), [n] = $();
+  return /* @__PURE__ */ l(V, { fields: e, currentSort: n, onChangeSort: t });
 }
-V.displayName = "SortableTableHeadWrapper";
-function W({
+W.displayName = "SortableTableHeadWrapper";
+function G({
   className: t,
   size: e,
-  responsive: a,
-  sticky: n,
+  responsive: n,
+  sticky: a,
   data: s,
   keyField: r,
-  rowClassName: c,
-  renderRow: u,
+  rowClassName: o,
+  renderRow: c,
   onSelectRow: i,
-  selected: d,
-  tableHeadProps: o,
-  children: b,
+  selected: u,
+  tableHeadProps: d,
+  children: m,
   tfoot: p,
   onChangeSort: f,
   ...N
 }) {
-  const y = m("table", t, {
+  const T = b("table", t, {
     [`table-${e}`]: !!e
   });
-  return /* @__PURE__ */ h(P, { className: y, responsive: a, sticky: n, ...N, children: [
+  return /* @__PURE__ */ h(P, { className: T, responsive: n, sticky: a, ...N, children: [
     /* @__PURE__ */ l(H, {}),
-    /* @__PURE__ */ l(V, { onChangeSort: f, ...o }),
+    /* @__PURE__ */ l(W, { onChangeSort: f, ...d }),
     !!s.length && /* @__PURE__ */ l(
       k,
       {
         data: s,
         keyField: r,
-        rowClassName: c,
-        renderRow: u,
+        rowClassName: o,
+        renderRow: c,
         onSelectRow: i,
-        selected: d
+        selected: u
       }
     ),
-    b,
+    m,
     p
   ] });
 }
-W.displayName = "ContainedSortableTable";
-function Y({ nextSort: t }) {
+G.displayName = "ContainedSortableTable";
+function tt({ nextSort: t }) {
   const [, e] = $();
-  return q(() => {
+  return O(() => {
     console.log("setNextSort", t), e(t);
   }, [t, e]), null;
 }
-function Z({
+function et({
   fields: t,
   currentSort: e,
-  ...a
+  ...n
 }) {
-  return /* @__PURE__ */ h(x, { initialFields: t, initialSort: e, children: [
-    /* @__PURE__ */ l(Y, { nextSort: e }),
-    /* @__PURE__ */ l(W, { ...a })
+  return /* @__PURE__ */ h(S, { initialFields: t, initialSort: e, children: [
+    /* @__PURE__ */ l(tt, { nextSort: e }),
+    /* @__PURE__ */ l(G, { ...n })
   ] });
 }
-Z.displayName = "SortableTable";
-const z = [10, 25, 50, 100, 250, 500, 1e3];
-function G({
+et.displayName = "SortableTable";
+const at = [10, 25, 50, 100, 250, 500, 1e3];
+function I({
   value: t,
-  pageValues: e = z,
-  size: a,
-  label: n,
+  pageValues: e = at,
+  size: n,
+  label: a,
   className: s,
   onChange: r,
-  ...c
+  ...o
 }) {
-  const u = K(), i = (b) => r(Number(b.target.value)), d = s ?? m("form-select", { [`form-select-${a}`]: !!a }), o = m("input-group", {
-    [`input-group-${a}`]: !!a
+  const c = Q(), i = (m) => r(Number(m.target.value)), u = s ?? b("form-select", { [`form-select-${n}`]: !!n }), d = b("input-group", {
+    [`input-group-${n}`]: !!n
   });
-  return /* @__PURE__ */ h("div", { className: o, children: [
-    /* @__PURE__ */ l("label", { className: "input-group-text", htmlFor: u, children: n ?? "Rows" }),
+  return /* @__PURE__ */ h("div", { className: d, children: [
+    /* @__PURE__ */ l("label", { className: "input-group-text", htmlFor: c, children: a ?? "Rows" }),
     /* @__PURE__ */ l(
       "select",
       {
-        className: d,
-        id: u,
+        className: u,
+        id: c,
         value: t,
         onChange: i,
-        ...c,
-        children: e.map((b) => /* @__PURE__ */ l("option", { value: b, children: b }, b))
+        ...o,
+        children: e.map((m) => /* @__PURE__ */ l("option", { value: m, children: m }, m))
       }
     )
   ] }, t);
 }
-G.displayName = "RowsPerPage";
-function tt({
+I.displayName = "RowsPerPage";
+function nt({
   page: t,
   rowsPerPage: e,
-  onChangePage: a,
-  count: n,
+  onChangePage: n,
+  count: a,
   size: s,
   showFirst: r,
-  showLast: c,
-  className: u,
+  showLast: o,
+  className: c,
   rowsPerPageProps: i,
-  ...d
+  ...u
 }) {
-  const o = n === 0 ? 0 : t * e + 1, b = Math.min(t * e + e, n), p = e === 0 ? 0 : Math.floor((n - 1) / e), f = m("btn btn-link", { [`btn-${s}`]: !!s });
-  return /* @__PURE__ */ h("div", { className: m("row g-3 justify-content-end", u), ...d, children: [
-    !!i && /* @__PURE__ */ l("div", { className: "col-auto", children: /* @__PURE__ */ l(G, { ...i, value: e, size: s }) }),
+  const d = a === 0 ? 0 : t * e + 1, m = Math.min(t * e + e, a), p = e === 0 ? 0 : Math.floor((a - 1) / e), f = b("btn btn-link", { [`btn-${s}`]: !!s });
+  return /* @__PURE__ */ h("div", { className: b("row g-3 justify-content-end", c), ...u, children: [
+    !!i && /* @__PURE__ */ l("div", { className: "col-auto", children: /* @__PURE__ */ l(I, { ...i, value: e, size: s }) }),
     /* @__PURE__ */ l("div", { className: "col-auto", children: /* @__PURE__ */ h("div", { className: "row g-3 flex-nowrap align-items-baseline", children: [
       /* @__PURE__ */ h("div", { className: "col-auto", children: [
-        o,
+        d,
         "-",
-        b,
+        m,
         " of ",
-        n
+        a
       ] }),
       r && /* @__PURE__ */ l("div", { className: "col-auto", children: /* @__PURE__ */ l(
         "button",
         {
           className: f,
           disabled: t === 0,
-          onClick: () => a(0),
+          onClick: () => n(0),
           "aria-label": "First page",
           children: /* @__PURE__ */ l("span", { className: "bi-chevron-bar-left", "aria-hidden": "true" })
         }
@@ -458,7 +486,7 @@ function tt({
         {
           className: f,
           disabled: t === 0,
-          onClick: () => a(t - 1),
+          onClick: () => n(t - 1),
           "aria-label": "Previous page",
           children: /* @__PURE__ */ l("span", { className: "bi-chevron-left", "aria-hidden": "true" })
         }
@@ -468,17 +496,17 @@ function tt({
         {
           className: f,
           disabled: t >= p,
-          onClick: () => a(t + 1),
+          onClick: () => n(t + 1),
           "aria-label": "Next page",
           children: /* @__PURE__ */ l("span", { className: "bi-chevron-right", "aria-hidden": "true" })
         }
       ) }),
-      c && /* @__PURE__ */ l("div", { className: "col-auto", children: /* @__PURE__ */ l(
+      o && /* @__PURE__ */ l("div", { className: "col-auto", children: /* @__PURE__ */ l(
         "button",
         {
           className: f,
           disabled: t >= p,
-          onClick: () => a(p),
+          onClick: () => n(p),
           "aria-label": "Last page",
           children: /* @__PURE__ */ l("span", { className: "bi-chevron-bar-right", "aria-hidden": "true" })
         }
@@ -486,52 +514,56 @@ function tt({
     ] }) })
   ] });
 }
-tt.displayname = "TablePagination";
+nt.displayname = "TablePagination";
 function H() {
   const [t] = v();
-  return /* @__PURE__ */ l("colgroup", { children: t.filter((e) => e.visible !== !1).map((e, a) => /* @__PURE__ */ l(
+  return /* @__PURE__ */ l("colgroup", { children: t.filter((e) => e.visible !== !1).map((e, n) => /* @__PURE__ */ l(
     "col",
     {
       className: e.colClassName,
       span: e.colSpan ?? 1
     },
-    a
+    n
   )) });
 }
 H.displayName = "DataTableCols";
-function lt(t) {
-  const e = C(T);
+function it(t) {
+  const e = C(y);
   if (!e)
     throw new Error("useField must be used within a DataTableProvider");
   return [
-    e.fields.find((a) => a.id === t) ?? null,
+    e.fields.find((n) => n.id === t) ?? null,
     e.updateField
   ];
 }
-function st() {
-  const t = C(T);
+function ot() {
+  const t = C(y);
   if (!t)
     throw new Error("useTableContext must be used within a DataTableProvider");
   return t;
 }
 export {
-  _ as ContainedDataTable,
-  M as ContainedDataTableRow,
-  W as ContainedSortableTable,
-  O as DataTable,
+  M as ContainedDataTable,
+  A as ContainedDataTableRow,
+  G as ContainedSortableTable,
+  X as DataTable,
+  x as DataTableCell,
   H as DataTableCols,
-  T as DataTableContext,
-  x as DataTableProvider,
-  Q as DataTableRow,
+  y as DataTableContext,
+  S as DataTableProvider,
+  Y as DataTableRow,
+  U as DataTableRowCellSet,
   k as DataTableTBody,
-  S as DataTableTH,
-  G as RowsPerPage,
-  Z as SortableTable,
-  B as SortableTableHead,
-  A as SortableTableTH,
-  tt as TablePagination,
-  lt as useField,
-  st as useTableContext,
+  D as DataTableTH,
+  j as DataTableTR,
+  I as RowsPerPage,
+  et as SortableTable,
+  V as SortableTableHead,
+  B as SortableTableTH,
+  P as Table,
+  nt as TablePagination,
+  it as useField,
+  ot as useTableContext,
   v as useTableFields,
   $ as useTableSort
 };