koddiv-dyn-table 0.1.2

package/dist/dyn-table.js

@@ -0,0 +1,1387 @@
+import { jsx as t, jsxs as o, Fragment as $t } from "react/jsx-runtime";
+import * as d from "react";
+function j(s) {
+  if (s == null) return;
+  if (typeof s == "number") return s;
+  const u = parseFloat(s);
+  return Number.isNaN(u) ? void 0 : u;
+}
+function X(s, u) {
+  if (u.valueGetter) return u.valueGetter(s);
+  if (u.accessorKey === void 0) return;
+  const h = u.accessorKey;
+  return s[h];
+}
+const on = "tr-TR";
+function He(s) {
+  if (s == null) return null;
+  if (s instanceof Date) return s;
+  const u = typeof s == "number" ? s : Number(s);
+  if (!Number.isNaN(u)) return new Date(u);
+  const h = String(s).trim();
+  if (!h) return null;
+  const g = new Date(h);
+  return Number.isNaN(g.getTime()) ? null : g;
+}
+function Ee(s, u, h = {}) {
+  const g = h.locale ?? on;
+  switch (u) {
+    case "date": {
+      const f = He(s);
+      return f ? h.dateStyle != null ? f.toLocaleDateString(g, { dateStyle: h.dateStyle }) : f.toLocaleDateString(g, {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric"
+      }) : s != null ? String(s) : "—";
+    }
+    case "datetime": {
+      const f = He(s);
+      return f ? f.toLocaleString(g, {
+        dateStyle: h.dateStyle ?? "short",
+        timeStyle: h.timeStyle ?? "short"
+      }) : s != null ? String(s) : "—";
+    }
+    case "time": {
+      const f = He(s);
+      return f ? f.toLocaleTimeString(g, {
+        timeStyle: h.timeStyle ?? "short"
+      }) : s != null ? String(s) : "—";
+    }
+    case "number": {
+      const f = typeof s == "number" ? s : Number(s);
+      return Number.isNaN(f) ? s != null ? String(s) : "—" : f.toLocaleString(g, {
+        minimumFractionDigits: h.minimumFractionDigits,
+        maximumFractionDigits: h.maximumFractionDigits ?? 2
+      });
+    }
+    case "currency": {
+      const f = typeof s == "number" ? s : Number(s);
+      return Number.isNaN(f) ? s != null ? String(s) : "—" : f.toLocaleString(g, {
+        style: "currency",
+        currency: h.currency ?? "TRY",
+        minimumFractionDigits: h.minimumFractionDigits,
+        maximumFractionDigits: h.maximumFractionDigits ?? 2
+      });
+    }
+    case "percent": {
+      const f = typeof s == "number" ? s : Number(s);
+      return Number.isNaN(f) ? s != null ? String(s) : "—" : f.toLocaleString(g, {
+        style: "percent",
+        minimumFractionDigits: h.minimumFractionDigits,
+        maximumFractionDigits: h.maximumFractionDigits ?? 2
+      });
+    }
+    default:
+      return s != null ? String(s) : "—";
+  }
+}
+const un = {
+  status: { active: "Aktif", inactive: "Pasif" },
+  yesNo: { active: "Evet", inactive: "Hayır" },
+  onOff: { active: "Açık", inactive: "Kapalı" },
+  published: { active: "Yayında", inactive: "Taslak" },
+  approved: { active: "Onaylı", inactive: "Beklemede" },
+  badge: { active: "Evet", inactive: "Hayır" }
+  // özel için cellFormatOptions zorunlu önerilir
+}, bn = "table-formatter-status table-formatter-status--active", hn = "table-formatter-status table-formatter-status--inactive";
+function fn({
+  value: s,
+  activeLabel: u = "Aktif",
+  inactiveLabel: h = "Pasif",
+  activeClass: g = bn,
+  inactiveClass: f = hn
+}) {
+  const F = s === !0 || s === "true" || s === 1;
+  return /* @__PURE__ */ t("span", { className: F ? g : f, children: F ? u : h });
+}
+function mn(s, u) {
+  const h = un[s];
+  return {
+    activeLabel: u.activeLabel ?? h.active,
+    inactiveLabel: u.inactiveLabel ?? h.inactive
+  };
+}
+function Te(s, u, h, g = {}) {
+  const { activeLabel: f, inactiveLabel: F } = mn(s, g);
+  return /* @__PURE__ */ t(
+    fn,
+    {
+      value: u,
+      activeLabel: f,
+      inactiveLabel: F,
+      activeClass: g.activeClass,
+      inactiveClass: g.inactiveClass
+    }
+  );
+}
+const yn = [10, 25, 50, 100], Ot = 50, ge = 80;
+function P(s) {
+  return j(s.minWidth) ?? (s.flex ? ge : Ot);
+}
+function Et({
+  colId: s,
+  minWidth: u,
+  maxWidth: h,
+  startWidth: g,
+  onResize: f
+}) {
+  const F = d.useRef(null), I = d.useRef(f);
+  return I.current = f, d.useEffect(() => {
+    const z = F.current;
+    if (!z) return;
+    let S = 0, L = 0;
+    const q = (V) => {
+      V.preventDefault(), V.stopPropagation(), S = V.clientX, L = g, document.body.classList.add("dyn-table-resizing");
+      const _ = (W) => {
+        const w = W.clientX - S;
+        let M = Math.max(u, L + w);
+        h != null && (M = Math.min(h, M)), I.current(M);
+      }, c = () => {
+        document.removeEventListener("mousemove", _), document.removeEventListener("mouseup", c), document.body.classList.remove("dyn-table-resizing");
+      };
+      document.addEventListener("mousemove", _), document.addEventListener("mouseup", c);
+    };
+    return z.addEventListener("mousedown", q), () => z.removeEventListener("mousedown", q);
+  }, [s, u, h, g]), /* @__PURE__ */ t(
+    "div",
+    {
+      ref: F,
+      className: "dyn-table-resize-handle",
+      role: "separator",
+      "aria-label": `${s} kolon genişliğini değiştir`
+    }
+  );
+}
+const U = 44;
+function Tt({
+  displayData: s,
+  getRowKey: u,
+  selectedSet: h,
+  onToggleAll: g
+}) {
+  const f = d.useRef(null), F = s.map((L) => u(L)), I = F.length > 0 && F.every((L) => h.has(L)), S = F.some((L) => h.has(L)) && !I;
+  return d.useEffect(() => {
+    f.current && (f.current.indeterminate = S);
+  }, [S]), /* @__PURE__ */ t("label", { className: "dyn-table-selection-header", children: /* @__PURE__ */ t(
+    "input",
+    {
+      ref: f,
+      type: "checkbox",
+      checked: I,
+      onChange: g,
+      "aria-label": "Tümünü seç"
+    }
+  ) });
+}
+function pn(s, u, h, g, f) {
+  const F = s.some((c) => (c.flex ?? 0) > 0), z = s.filter((c) => (c.flex ?? 0) > 0).reduce((c, W) => c + (W.flex ?? 0), 0), S = [];
+  let L = 0;
+  for (const c of s) {
+    const W = j(c.minWidth) ?? (c.flex ? ge : Ot), w = j(c.maxWidth);
+    if (c.flex) {
+      const M = h[c.id];
+      M != null ? (S.push(Math.max(W, w != null ? Math.min(M, w) : M)), L += S[S.length - 1]) : S.push(-1);
+    } else {
+      const M = h[c.id] ?? j(c.width) ?? W;
+      S.push(w != null ? Math.min(M, w) : Math.max(W, M)), L += S[S.length - 1];
+    }
+  }
+  if (!F || u <= 0 || z <= 0)
+    return S.map((c) => c === -1 ? ge : c);
+  const q = u - L - g - f;
+  if (q <= 0)
+    return S.map((c) => c === -1 ? ge : c);
+  const V = [...S];
+  let _ = 0;
+  for (let c = 0; c < s.length; c++) {
+    if (V[c] !== -1) continue;
+    const W = s[c], w = j(W.minWidth) ?? ge, M = j(W.maxWidth), re = (W.flex ?? 0) / z * q, Oe = M != null ? Math.min(re, M) : re;
+    V[c] = Math.max(w, Oe), _ += V[c];
+  }
+  return V;
+}
+function Nn({
+  data: s,
+  columns: u,
+  keyExtractor: h,
+  keyColumnId: g,
+  sortable: f = !0,
+  defaultSort: F = { id: "", direction: null },
+  onSort: I,
+  emptyMessage: z = "Veri yok",
+  theme: S = "light",
+  className: L = "",
+  headerClassName: q = "",
+  bodyClassName: V = "",
+  rowClassName: _,
+  actions: c,
+  actionsHeader: W = "İşlemler",
+  actionsAlign: w = "center",
+  actionsWidth: M,
+  pagination: ae = !1,
+  pageSize: re = 10,
+  pageSizeOptions: Oe = yn,
+  page: et,
+  defaultPage: zt = 1,
+  onPageChange: Ne,
+  totalCount: tt,
+  onBlockNeeded: he,
+  blockSize: vn,
+  minHeight: m,
+  height: y,
+  mobileBreakpoint: nt = 768,
+  rowSelection: N = !1,
+  selectedRowKeys: lt,
+  defaultSelectedRowKeys: At = [],
+  onSelectionChange: _e,
+  selectionToolbarLabel: ze,
+  filterable: Ae = !1,
+  filterModel: at,
+  defaultFilterModel: Rt = {},
+  onFilterChange: ke,
+  filterPanelWidth: Bt = 280,
+  virtualization: It = !1,
+  rowHeight: se = 44,
+  virtualizationOverscan: Re = 5,
+  columnVisibility: rt,
+  onColumnVisibilityChange: xe,
+  columnOrder: st,
+  onColumnOrderChange: Se,
+  columnReorder: Z = !0,
+  loading: fe = !1,
+  stickyHeader: Vt = !1
+}) {
+  const C = d.useCallback(
+    (e, n) => {
+      if (h) return h(e);
+      if (g) {
+        const a = u.find((l) => l.id === g);
+        if (a) return X(e, a);
+      }
+      return String(n ?? 0);
+    },
+    [h, g, u]
+  ), Be = d.useRef(null), [it, Kt] = d.useState(0), [Ie, Pt] = d.useState(0), [dt, ct] = d.useState(0), [ot, ut] = d.useState({});
+  d.useEffect(() => {
+    const e = Be.current;
+    if (!e) return;
+    const n = () => {
+      Kt(e.clientWidth), Pt(e.clientHeight);
+    }, a = new ResizeObserver(n);
+    return a.observe(e), n(), () => a.disconnect();
+  }, []);
+  const [A, bt] = d.useState(!1);
+  d.useEffect(() => {
+    const e = window.matchMedia(`(max-width: ${nt}px)`);
+    bt(e.matches);
+    const n = () => bt(e.matches);
+    return e.addEventListener("change", n), () => e.removeEventListener("change", n);
+  }, [nt]);
+  const [$, jt] = d.useState(F), [Ut, Yt] = d.useState(zt), [E, Ve] = d.useState(re);
+  d.useEffect(() => {
+    Ve(re);
+  }, [re]);
+  const me = rt != null, [Gt, ht] = d.useState(
+    () => u.reduce((e, n) => ({ ...e, [n.id]: !n.hide }), {})
+  );
+  d.useEffect(() => {
+    me || ht((e) => {
+      const n = { ...e };
+      for (const a of u)
+        n[a.id] === void 0 && (n[a.id] = !a.hide);
+      return n;
+    });
+  }, [u, me]);
+  const ne = me ? rt : Gt, ft = d.useCallback(
+    (e) => {
+      me || ht(e), xe == null || xe(e);
+    },
+    [me, xe]
+  ), ye = st != null, [Xt, mt] = d.useState(() => u.map((e) => e.id));
+  d.useEffect(() => {
+    ye || mt((e) => {
+      const n = u.map((i) => i.id), a = n.filter((i) => !e.includes(i)), l = e.filter((i) => !n.some((b) => b === i));
+      if (a.length === 0 && l.length === 0) return e;
+      let r = e.filter((i) => n.includes(i));
+      for (const i of a) r.push(i);
+      return r;
+    });
+  }, [u, ye]);
+  const ie = ye ? st : Xt, yt = d.useCallback(
+    (e) => {
+      ye || mt(e), Se == null || Se(e);
+    },
+    [ye, Se]
+  ), Ke = et != null, de = Ke ? et : Ut, Pe = d.useCallback(
+    (e, n) => {
+      Ke || Yt(e), n !== E && Ve(n), Ne == null || Ne(e, n);
+    },
+    [Ke, E, Ne]
+  ), je = d.useRef(null);
+  d.useEffect(() => {
+    if (!ae || !he) return;
+    const e = de * E;
+    if (s.length >= e) {
+      je.current = null;
+      return;
+    }
+    je.current !== de && (je.current = de, he(de));
+  }, [ae, he, de, E, s.length]);
+  const pt = (e) => {
+    if (!f) return;
+    const n = $.id === e ? {
+      id: e,
+      direction: $.direction === "asc" ? "desc" : $.direction === "desc" ? null : "asc"
+    } : { id: e, direction: "asc" };
+    jt(n), I == null || I(n.id, n.direction);
+  }, v = d.useMemo(() => {
+    const n = ie.filter((i) => u.some((b) => b.id === i)).filter((i) => ne[i] !== !1).map((i) => u.find((b) => b.id === i)).filter(Boolean);
+    for (const i of u)
+      ne[i.id] !== !1 && !n.some((b) => b.id === i.id) && n.push(i);
+    const a = n.filter((i) => i.pinned === "left"), l = n.filter((i) => i.pinned !== "left" && i.pinned !== "right"), r = n.filter((i) => i.pinned === "right");
+    return [...a, ...l, ...r];
+  }, [u, ie, ne]), qt = d.useMemo(
+    () => v.filter((e) => e.filter != null),
+    [v]
+  ), Ue = at != null, [Zt, Jt] = d.useState(
+    () => Rt ?? {}
+  ), J = Ue ? at : Zt, ce = d.useCallback(
+    (e) => {
+      Ue || Jt(e), ke == null || ke(e);
+    },
+    [Ue, ke]
+  ), pe = d.useMemo(() => {
+    const e = Object.entries(J).filter(
+      ([n, a]) => a != null && a !== ""
+    );
+    return e.length === 0 ? s : s.filter((n) => {
+      for (const [a, l] of e) {
+        const r = u.find((b) => b.id === a);
+        if (!(r != null && r.filter)) continue;
+        const i = X(n, r);
+        if (r.filter === "text") {
+          const b = String(i ?? "").toLowerCase(), p = String(l).toLowerCase();
+          if (p && !b.includes(p)) return !1;
+        } else if (r.filter === "number") {
+          const b = typeof i == "number" ? i : Number(i), p = typeof l == "number" ? l : Number(l);
+          if (Number.isNaN(p)) continue;
+          if (Number.isNaN(b) || b !== p) return !1;
+        } else if (r.filter === "date") {
+          const b = i != null ? new Date(i).getTime() : NaN, p = new Date(l).getTime();
+          if (Number.isNaN(p)) continue;
+          if (Number.isNaN(b)) return !1;
+          const O = new Date(b).toDateString(), k = new Date(p).toDateString();
+          if (O !== k) return !1;
+        } else if (r.filter === "select") {
+          const b = i != null ? String(i) : "", p = String(l);
+          if (p && b !== p) return !1;
+        }
+      }
+      return !0;
+    });
+  }, [s, u, J]), Ce = tt ?? pe.length, vt = tt == null, Ye = Math.max(1, Math.ceil(Ce / E)), Y = Math.min(Math.max(1, de), Ye), R = c == null ? 0 : j(M) ?? 80, De = N ? U : 0, T = d.useMemo(
+    () => pn(
+      v,
+      it,
+      ot,
+      R,
+      De
+    ),
+    [v, it, ot, R, De]
+  ), { pinnedLeftOffsets: Q, pinnedRightOffsets: H } = d.useMemo(() => {
+    const e = [], n = [];
+    let a = De;
+    for (let r = 0; r < v.length; r++)
+      v[r].pinned === "left" ? (e[r] = a, a += T[r]) : e[r] = void 0;
+    let l = R;
+    for (let r = v.length - 1; r >= 0; r--)
+      v[r].pinned === "right" ? (n[r] = l, l += T[r]) : n[r] = void 0;
+    return {
+      pinnedLeftOffsets: e,
+      pinnedRightOffsets: n
+    };
+  }, [v, T, De, R]), Fe = d.useMemo(() => {
+    if (!$.direction || !$.id) return pe;
+    const e = u.find((n) => n.id === $.id);
+    return !(e != null && e.sortable) || e != null && e.suppressSort ? pe : [...pe].sort((n, a) => {
+      const l = X(n, e), r = X(a, e), i = e.comparator ? e.comparator(l, r, n, a) : typeof l == "number" && typeof r == "number" ? l - r : String(l ?? "").localeCompare(String(r ?? ""));
+      return $.direction === "asc" ? i : -i;
+    });
+  }, [pe, u, $]), x = d.useMemo(() => {
+    if (!ae) return Fe;
+    if (vt || he) {
+      const e = (Y - 1) * E;
+      return Fe.slice(e, e + E);
+    }
+    return Fe;
+  }, [ae, vt, he, Fe, Y, E]), Ge = lt != null, [Qt, Ht] = d.useState(
+    () => At
+  ), B = Ge ? lt : Qt, D = d.useMemo(() => new Set(B), [B]), ee = d.useCallback(
+    (e) => {
+      Ge || Ht(e);
+      const n = s.filter((a) => e.includes(C(a)));
+      _e == null || _e(e, n);
+    },
+    [Ge, s, C, _e]
+  ), oe = d.useCallback(
+    (e) => {
+      const n = D.has(e) ? B.filter((a) => a !== e) : [...B, e];
+      ee(n);
+    },
+    [B, D, ee]
+  ), gt = d.useCallback(() => {
+    const e = x.map((l) => C(l)), a = e.length > 0 && e.every((l) => D.has(l)) ? B.filter((l) => !e.includes(l)) : [.../* @__PURE__ */ new Set([...B, ...e])];
+    ee(a);
+  }, [x, C, B, D, ee]), en = d.useMemo(
+    () => s.filter((e) => D.has(C(e))),
+    [s, D, C]
+  ), tn = d.useCallback(() => {
+    ee(s.map((e) => C(e)));
+  }, [s, C, ee]), nn = d.useCallback(() => {
+    ee([]);
+  }, [ee]), [ve, Nt] = d.useState(!1), Xe = d.useRef(null);
+  d.useEffect(() => {
+    if (!ve) return;
+    const e = (n) => {
+      Xe.current && !Xe.current.contains(n.target) && Nt(!1);
+    };
+    return document.addEventListener("click", e), () => document.removeEventListener("click", e);
+  }, [ve]);
+  const [Me, qe] = d.useState(!1), [ue, _t] = d.useState(!1), Ze = d.useRef(null);
+  d.useEffect(() => {
+    if (!ue) return;
+    const e = (n) => {
+      Ze.current && !Ze.current.contains(n.target) && _t(!1);
+    };
+    return document.addEventListener("click", e), () => document.removeEventListener("click", e);
+  }, [ue]);
+  const ln = d.useCallback(
+    (e) => {
+      ft({ ...ne, [e]: !ne[e] });
+    },
+    [ne, ft]
+  ), [kt, xt] = d.useState(null), [St, Le] = d.useState(-1), Ct = d.useCallback((e, n) => {
+    e.dataTransfer.setData("text/plain", n), e.dataTransfer.effectAllowed = "move";
+    const a = e.currentTarget.closest("th");
+    a && e.dataTransfer.setDragImage(a, 0, 0), xt(n);
+  }, []), Dt = d.useCallback((e, n) => {
+    e.preventDefault(), e.dataTransfer.dropEffect = "move", Le(n);
+  }, []), Ft = d.useCallback(() => {
+    Le(-1);
+  }, []), Mt = d.useCallback(
+    (e, n) => {
+      var O, k;
+      e.preventDefault(), Le(-1);
+      const a = e.dataTransfer.getData("text/plain");
+      if (!a || a === ((O = v[n]) == null ? void 0 : O.id)) return;
+      const l = ie.indexOf(a), r = (k = v[n]) == null ? void 0 : k.id, i = ie.indexOf(r);
+      if (l === -1 || i === -1) return;
+      const b = ie.slice();
+      b.splice(l, 1);
+      const p = b.indexOf(r);
+      b.splice(p, 0, a), yt(b);
+    },
+    [v, ie, yt]
+  ), Lt = d.useCallback(() => {
+    xt(null), Le(-1);
+  }, []), Je = Object.values(J).filter(
+    (e) => e != null && e !== ""
+  ).length, an = d.useCallback(() => {
+    ce({});
+  }, [ce]), K = It && !A && x.length > 0, We = Vt && !A, { virtualStart: we, virtualEnd: Qe } = d.useMemo(() => {
+    if (!K || Ie <= 0)
+      return { virtualStart: 0, virtualEnd: x.length };
+    const e = Math.ceil(Ie / se) + Re * 2, n = Math.max(0, Math.floor(dt / se) - Re), a = Math.min(x.length, n + e);
+    return { virtualStart: n, virtualEnd: a };
+  }, [K, Ie, dt, se, Re, x.length]), rn = (Y - 1) * E + 1, sn = Math.min(Y * E, Ce), $e = fe ? Math.min(E, 10) : 0;
+  function Wt(e, n, a) {
+    return n.cell != null ? n.cell(e) : n.valueFormatter != null ? n.valueFormatter(a, e) : n.valueFormat != null ? Ee(a, n.valueFormat, n.valueFormatOptions) : n.cellFormat != null ? Te(n.cellFormat, a, e, n.cellFormatOptions) : a;
+  }
+  const dn = S === "dark" ? "dyn-table-wrapper--dark" : "dyn-table-wrapper--light", cn = N || Ae || u.length > 1;
+  return /* @__PURE__ */ o("div", { className: `dyn-table-wrapper ${dn} ${L}`.trim(), children: [
+    cn && /* @__PURE__ */ t("div", { className: `dyn-table-toolbar ${A ? "dyn-table-toolbar--mobile" : ""}`.trim(), children: /* @__PURE__ */ o("div", { className: "dyn-table-toolbar__actions", children: [
+      N && /* @__PURE__ */ o($t, { children: [
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "dyn-table-toolbar__btn",
+            onClick: tn,
+            "aria-label": "Tümünü seç",
+            children: "Tümünü seç"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "dyn-table-toolbar__btn",
+            onClick: nn,
+            disabled: B.length === 0,
+            "aria-label": "Seçimi kaldır",
+            children: "Kaldır"
+          }
+        ),
+        /* @__PURE__ */ o("div", { ref: Xe, className: "dyn-table-toolbar__dropdown", children: [
+          /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              className: "dyn-table-toolbar__dropdown-trigger",
+              onClick: () => Nt((e) => !e),
+              disabled: B.length === 0,
+              "aria-expanded": ve,
+              "aria-haspopup": "listbox",
+              "aria-label": "Seçilenleri göster",
+              children: [
+                /* @__PURE__ */ o("span", { children: [
+                  B.length,
+                  " seçili"
+                ] }),
+                /* @__PURE__ */ t(
+                  "svg",
+                  {
+                    className: `dyn-table-toolbar__dropdown-chevron ${ve ? "dyn-table-toolbar__dropdown-chevron--open" : ""}`,
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    width: "14",
+                    height: "14",
+                    children: /* @__PURE__ */ t("path", { d: "M6 9l6 6 6-6" })
+                  }
+                )
+              ]
+            }
+          ),
+          ve && B.length > 0 && /* @__PURE__ */ t(
+            "div",
+            {
+              className: "dyn-table-toolbar__dropdown-panel",
+              role: "listbox",
+              "aria-label": "Seçilen satırlar",
+              children: /* @__PURE__ */ t("ul", { className: "dyn-table-toolbar__dropdown-list", children: en.map((e) => {
+                const n = C(e), a = (ze == null ? void 0 : ze(e)) ?? String(n);
+                return /* @__PURE__ */ o("li", { className: "dyn-table-toolbar__dropdown-item", children: [
+                  /* @__PURE__ */ t("span", { className: "dyn-table-toolbar__dropdown-item-label", children: a }),
+                  /* @__PURE__ */ t(
+                    "button",
+                    {
+                      type: "button",
+                      className: "dyn-table-toolbar__dropdown-item-remove",
+                      onClick: (l) => {
+                        l.stopPropagation(), oe(n);
+                      },
+                      "aria-label": `${a} seçimini kaldır`,
+                      children: /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "12", height: "12", children: /* @__PURE__ */ t("path", { d: "M18 6L6 18M6 6l12 12" }) })
+                    }
+                  )
+                ] }, String(n));
+              }) })
+            }
+          )
+        ] })
+      ] }),
+      Ae && /* @__PURE__ */ o(
+        "button",
+        {
+          type: "button",
+          className: `dyn-table-toolbar__btn dyn-table-toolbar__btn--filter ${Me ? "dyn-table-toolbar__btn--filter-active" : ""}`,
+          onClick: () => qe((e) => !e),
+          "aria-expanded": Me,
+          "aria-label": "Filtreler",
+          children: [
+            /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", children: /* @__PURE__ */ t("path", { d: "M22 3H2l8 9.46V19l4 2v-8.54L22 3z" }) }),
+            /* @__PURE__ */ t("span", { className: "dyn-table-toolbar__btn-label", children: "Filtre" }),
+            Je > 0 && /* @__PURE__ */ t("span", { className: "dyn-table-toolbar__filter-count", children: Je })
+          ]
+        }
+      ),
+      u.length > 1 && /* @__PURE__ */ o("div", { ref: Ze, className: "dyn-table-toolbar__dropdown", children: [
+        /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            className: `dyn-table-toolbar__dropdown-trigger ${ue ? "dyn-table-toolbar__dropdown-trigger--open" : ""}`,
+            onClick: () => _t((e) => !e),
+            "aria-expanded": ue,
+            "aria-haspopup": "dialog",
+            "aria-label": "Kolonları göster/gizle",
+            children: [
+              /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", children: /* @__PURE__ */ t("path", { d: "M3 6h18M3 12h18M3 18h18M7 6v12M11 12v6M15 6v12M19 12v6" }) }),
+              /* @__PURE__ */ t("span", { className: "dyn-table-toolbar__btn-label", children: "Kolonlar" }),
+              /* @__PURE__ */ t(
+                "svg",
+                {
+                  className: `dyn-table-toolbar__dropdown-chevron ${ue ? "dyn-table-toolbar__dropdown-chevron--open" : ""}`,
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  width: "14",
+                  height: "14",
+                  children: /* @__PURE__ */ t("path", { d: "M6 9l6 6 6-6" })
+                }
+              )
+            ]
+          }
+        ),
+        ue && /* @__PURE__ */ o(
+          "div",
+          {
+            className: "dyn-table-toolbar__dropdown-panel dyn-table-toolbar__dropdown-panel--columns",
+            role: "dialog",
+            "aria-label": "Kolon görünürlüğü",
+            children: [
+              /* @__PURE__ */ t("div", { className: "dyn-table-column-visibility__header", children: "Görünen kolonlar" }),
+              /* @__PURE__ */ t("ul", { className: "dyn-table-toolbar__dropdown-list", children: u.map((e) => {
+                const n = ne[e.id] !== !1, a = typeof e.header == "string" ? e.header : e.id;
+                return /* @__PURE__ */ t("li", { className: "dyn-table-toolbar__dropdown-item dyn-table-toolbar__dropdown-item--checkbox", children: /* @__PURE__ */ o("label", { className: "dyn-table-column-visibility__label", children: [
+                  /* @__PURE__ */ t(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: n,
+                      onChange: () => ln(e.id),
+                      "aria-label": `${a} ${n ? "gizle" : "göster"}`
+                    }
+                  ),
+                  /* @__PURE__ */ t("span", { className: "dyn-table-toolbar__dropdown-item-label", children: a })
+                ] }) }, e.id);
+              }) })
+            ]
+          }
+        )
+      ] })
+    ] }) }),
+    Ae ? /* @__PURE__ */ o("div", { className: "dyn-table-main", children: [
+      Me && /* @__PURE__ */ t(
+        "div",
+        {
+          className: "dyn-table-filter-overlay",
+          role: "presentation",
+          onClick: () => qe(!1),
+          "aria-hidden": !0
+        }
+      ),
+      /* @__PURE__ */ o(
+        "div",
+        {
+          className: `dyn-table-filter-panel ${Me ? "dyn-table-filter-panel--open" : ""}`,
+          style: { width: Bt },
+          "aria-label": "Filtreler paneli",
+          children: [
+            /* @__PURE__ */ o("div", { className: "dyn-table-filter-panel__header", children: [
+              /* @__PURE__ */ t("h3", { className: "dyn-table-filter-panel__title", children: "Filtreler" }),
+              /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  className: "dyn-table-filter-panel__close",
+                  onClick: () => qe(!1),
+                  "aria-label": "Paneli kapat",
+                  children: /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "20", height: "20", children: /* @__PURE__ */ t("path", { d: "M18 6L6 18M6 6l12 12" }) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ o("div", { className: "dyn-table-filter-panel__body", children: [
+              Je > 0 && /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  className: "dyn-table-filter-panel__clear",
+                  onClick: an,
+                  children: "Filtreleri temizle"
+                }
+              ),
+              qt.map((e) => {
+                const n = typeof e.header == "string" ? e.header : e.id, a = J[e.id] ?? "";
+                return /* @__PURE__ */ o("div", { className: "dyn-table-filter-panel__item", children: [
+                  /* @__PURE__ */ t("label", { className: "dyn-table-filter-panel__label", children: n }),
+                  e.filter === "text" && /* @__PURE__ */ t(
+                    "input",
+                    {
+                      type: "text",
+                      className: "dyn-table-filter-panel__input",
+                      value: a,
+                      onChange: (l) => ce({ ...J, [e.id]: l.target.value || null }),
+                      placeholder: "Ara..."
+                    }
+                  ),
+                  e.filter === "number" && /* @__PURE__ */ t(
+                    "input",
+                    {
+                      type: "number",
+                      className: "dyn-table-filter-panel__input",
+                      value: a === "" || a === null ? "" : a,
+                      onChange: (l) => {
+                        const r = l.target.value;
+                        ce({
+                          ...J,
+                          [e.id]: r === "" ? null : Number(r)
+                        });
+                      },
+                      placeholder: "—"
+                    }
+                  ),
+                  e.filter === "date" && /* @__PURE__ */ t(
+                    "input",
+                    {
+                      type: "date",
+                      className: "dyn-table-filter-panel__input",
+                      value: a === "" || a === null ? "" : String(a),
+                      onChange: (l) => ce({
+                        ...J,
+                        [e.id]: l.target.value || null
+                      })
+                    }
+                  ),
+                  e.filter === "select" && /* @__PURE__ */ o(
+                    "select",
+                    {
+                      className: "dyn-table-filter-panel__select",
+                      value: a === "" || a === null ? "" : String(a),
+                      onChange: (l) => ce({
+                        ...J,
+                        [e.id]: l.target.value === "" ? null : l.target.value
+                      }),
+                      children: [
+                        /* @__PURE__ */ t("option", { value: "", children: "Tümü" }),
+                        (e.filterSelectOptions ?? []).map((l) => /* @__PURE__ */ t("option", { value: String(l.value), children: l.label }, String(l.value)))
+                      ]
+                    }
+                  )
+                ] }, e.id);
+              })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: "dyn-table-main__content", children: A ? /* @__PURE__ */ t(
+        "div",
+        {
+          className: "dyn-table-mobile",
+          style: {
+            ...m != null && {
+              minHeight: typeof m == "number" ? `${m}px` : m
+            },
+            ...y != null && {
+              height: typeof y == "number" ? `${y}px` : y
+            }
+          },
+          children: fe ? /* @__PURE__ */ t("div", { className: "dyn-table-cards", "aria-busy": !0, children: Array.from({ length: Math.min($e, 5) }, (e, n) => /* @__PURE__ */ o("div", { className: "dyn-table-card dyn-table-card--skeleton", children: [
+            N && /* @__PURE__ */ t("div", { className: "dyn-table-card__selection", children: /* @__PURE__ */ t("span", { className: "dyn-table-skeleton dyn-table-skeleton--checkbox" }) }),
+            v.map((a) => /* @__PURE__ */ o("div", { className: "dyn-table-card__row", children: [
+              /* @__PURE__ */ t("span", { className: "dyn-table-card__label", children: typeof a.header == "string" ? a.header : a.id }),
+              /* @__PURE__ */ t("span", { className: "dyn-table-card__value", children: /* @__PURE__ */ t("span", { className: "dyn-table-skeleton" }) })
+            ] }, a.id)),
+            c != null && /* @__PURE__ */ t("div", { className: "dyn-table-card__actions" })
+          ] }, `skeleton-card-${n}`)) }) : x.length === 0 ? /* @__PURE__ */ t("div", { className: "dyn-table-empty dyn-table-empty--card", children: z }) : /* @__PURE__ */ t("div", { className: "dyn-table-cards", children: x.map((e, n) => {
+            const a = C(e);
+            return /* @__PURE__ */ o(
+              "div",
+              {
+                className: `dyn-table-card ${typeof _ == "function" ? _(e, n) : _ ?? ""}`.trim(),
+                children: [
+                  N && /* @__PURE__ */ t("div", { className: "dyn-table-card__selection", children: /* @__PURE__ */ t("label", { className: "dyn-table-selection-cell", children: /* @__PURE__ */ t(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: D.has(a),
+                      onChange: () => oe(a),
+                      "aria-label": "Satırı seç"
+                    }
+                  ) }) }),
+                  v.map((l) => {
+                    const r = X(e, l), i = Wt(e, l, r);
+                    return /* @__PURE__ */ o("div", { className: "dyn-table-card__row", children: [
+                      /* @__PURE__ */ t("span", { className: "dyn-table-card__label", children: (typeof l.header == "string", l.header) }),
+                      /* @__PURE__ */ t("span", { className: "dyn-table-card__value", children: i })
+                    ] }, l.id);
+                  }),
+                  c != null && /* @__PURE__ */ t("div", { className: "dyn-table-card__actions", children: c(e) })
+                ]
+              },
+              a
+            );
+          }) })
+        }
+      ) : /* @__PURE__ */ t(
+        "div",
+        {
+          ref: Be,
+          className: `dyn-table-scroll ${K ? "dyn-table-scroll--virtualized" : ""} ${We ? "dyn-table-scroll--sticky-header" : ""}`.trim(),
+          style: {
+            ...m != null && {
+              minHeight: typeof m == "number" ? `${m}px` : m
+            },
+            ...y != null && {
+              height: typeof y == "number" ? `${y}px` : y
+            },
+            ...K && {
+              overflowY: "auto",
+              height: y != null ? typeof y == "number" ? `${y}px` : y : m != null ? typeof m == "number" ? `${m}px` : m : 400
+            },
+            ...We && !K && {
+              overflowY: "auto",
+              height: y != null ? typeof y == "number" ? `${y}px` : y : m != null ? typeof m == "number" ? `${m}px` : m : 400
+            }
+          },
+          onScroll: K ? (e) => ct(e.currentTarget.scrollTop) : void 0,
+          children: /* @__PURE__ */ o("table", { className: "dyn-table dyn-table--fixed", children: [
+            /* @__PURE__ */ o("colgroup", { children: [
+              N && /* @__PURE__ */ t("col", { style: { width: U } }),
+              v.map((e, n) => /* @__PURE__ */ t("col", { style: { width: T[n], minWidth: P(e) } }, e.id)),
+              c != null && /* @__PURE__ */ t("col", { style: { width: R } })
+            ] }),
+            /* @__PURE__ */ t("thead", { className: q, children: /* @__PURE__ */ o("tr", { children: [
+              N && /* @__PURE__ */ t("th", { className: "dyn-table-th dyn-table-th--selection", style: { width: U }, children: /* @__PURE__ */ t(
+                Tt,
+                {
+                  displayData: x,
+                  getRowKey: C,
+                  selectedSet: D,
+                  onToggleAll: gt
+                }
+              ) }),
+              v.map((e, n) => {
+                const a = f && e.sortable !== !1 && !e.suppressSort, l = $.id === e.id, r = e.pinned === "left", i = e.pinned === "right", b = kt === e.id, p = St === n, O = [
+                  "dyn-table-th",
+                  a ? "dyn-table-th--sortable" : "",
+                  l ? "dyn-table-th--sorted" : "",
+                  e.resizable ? "dyn-table-th--resizable" : "",
+                  r ? "dyn-table-th--pinned-left" : "",
+                  i ? "dyn-table-th--pinned-right" : "",
+                  b ? "dyn-table-th--dragging" : "",
+                  p ? "dyn-table-th--drag-over" : "",
+                  e.headerClass ?? ""
+                ].filter(Boolean).join(" ");
+                return /* @__PURE__ */ o(
+                  "th",
+                  {
+                    className: O,
+                    style: {
+                      width: T[n],
+                      minWidth: P(e),
+                      maxWidth: j(e.maxWidth),
+                      textAlign: e.headerAlign ?? e.align ?? "left",
+                      ...r && Q[n] != null ? { left: Q[n] } : {},
+                      ...i && H[n] != null ? { right: H[n] } : {},
+                      ...e.headerStyle
+                    },
+                    title: e.headerTooltip,
+                    onClick: () => a && pt(e.id),
+                    onDragOver: Z && !A ? (k) => Dt(k, n) : void 0,
+                    onDragLeave: Z && !A ? Ft : void 0,
+                    onDrop: Z && !A ? (k) => Mt(k, n) : void 0,
+                    children: [
+                      /* @__PURE__ */ o("span", { className: "dyn-table-th__content", children: [
+                        Z && !A && /* @__PURE__ */ t(
+                          "span",
+                          {
+                            className: "dyn-table-th__drag-handle",
+                            draggable: !0,
+                            onDragStart: (k) => Ct(k, e.id),
+                            onDragEnd: Lt,
+                            onClick: (k) => k.stopPropagation(),
+                            "aria-label": `${e.id} kolonunu taşı`,
+                            children: /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": !0, children: /* @__PURE__ */ t("path", { d: "M8 6h2V4H8v2zm0 4h2V8H8v2zm0 4h2v-2H8v2zm4-8h2V4h-2v2zm0 4h2V8h-2v2zm0 4h2v-2h-2v2z" }) })
+                          }
+                        ),
+                        e.header,
+                        a && /* @__PURE__ */ o("span", { className: "dyn-table-sort", "aria-hidden": !0, children: [
+                          l && $.direction === "asc" && /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", fill: "currentColor", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ t("path", { d: "M7 15l5-5 5 5H7z" }) }),
+                          l && $.direction === "desc" && /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", fill: "currentColor", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ t("path", { d: "M7 10l5 5 5-5H7z" }) }),
+                          !l && /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ t("path", { d: "M7 15l5-5 5 5H7z" }) })
+                        ] })
+                      ] }),
+                      e.resizable && /* @__PURE__ */ t(
+                        Et,
+                        {
+                          colId: e.id,
+                          minWidth: P(e),
+                          maxWidth: j(e.maxWidth),
+                          startWidth: T[n],
+                          onResize: (k) => ut((G) => ({ ...G, [e.id]: k }))
+                        }
+                      )
+                    ]
+                  },
+                  e.id
+                );
+              }),
+              c != null && /* @__PURE__ */ t(
+                "th",
+                {
+                  className: "dyn-table-th dyn-table-th--actions",
+                  style: {
+                    width: R,
+                    minWidth: R,
+                    textAlign: w
+                  },
+                  children: W
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ t("tbody", { className: V, children: fe ? Array.from({ length: $e }, (e, n) => /* @__PURE__ */ o("tr", { className: "dyn-table-row--skeleton", "aria-busy": !0, children: [
+              N && /* @__PURE__ */ t("td", { className: "dyn-table-td dyn-table-td--selection", style: { width: U }, children: /* @__PURE__ */ t("span", { className: "dyn-table-skeleton dyn-table-skeleton--checkbox" }) }),
+              v.map((a, l) => /* @__PURE__ */ t(
+                "td",
+                {
+                  className: "dyn-table-td",
+                  style: {
+                    width: T[l],
+                    minWidth: P(a),
+                    textAlign: a.align ?? "left"
+                  },
+                  children: /* @__PURE__ */ t("span", { className: "dyn-table-skeleton" })
+                },
+                a.id
+              )),
+              c != null && /* @__PURE__ */ t("td", { className: "dyn-table-td dyn-table-td--actions", style: { width: R } })
+            ] }, `skeleton-${n}`)) : x.length === 0 ? /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t(
+              "td",
+              {
+                colSpan: v.length + (c != null ? 1 : 0) + (N ? 1 : 0),
+                className: "dyn-table-empty",
+                children: z
+              }
+            ) }) : K ? /* @__PURE__ */ o($t, { children: [
+              we > 0 && /* @__PURE__ */ t("tr", { "aria-hidden": !0, className: "dyn-table-virtual-spacer", children: /* @__PURE__ */ t(
+                "td",
+                {
+                  colSpan: v.length + (c != null ? 1 : 0) + (N ? 1 : 0),
+                  style: { height: we * se, padding: 0, border: "none", verticalAlign: "top", lineHeight: 0 }
+                }
+              ) }),
+              x.slice(we, Qe).map((e, n) => {
+                const a = we + n, l = C(e);
+                return /* @__PURE__ */ o(
+                  "tr",
+                  {
+                    style: { height: se },
+                    className: [
+                      typeof _ == "function" ? _(e, a) : _ ?? "",
+                      N && D.has(l) ? "dyn-table-row--selected" : ""
+                    ].filter(Boolean).join(" "),
+                    children: [
+                      N && /* @__PURE__ */ t("td", { className: "dyn-table-td dyn-table-td--selection", style: { width: U }, children: /* @__PURE__ */ t("label", { className: "dyn-table-selection-cell", children: /* @__PURE__ */ t(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: D.has(l),
+                          onChange: () => oe(l),
+                          "aria-label": "Satırı seç"
+                        }
+                      ) }) }),
+                      v.map((r, i) => {
+                        var wt;
+                        const b = X(e, r), p = r.cell != null ? r.cell(e) : r.valueFormatter != null ? r.valueFormatter(b, e) : r.valueFormat != null ? Ee(b, r.valueFormat, r.valueFormatOptions) : r.cellFormat != null ? Te(r.cellFormat, b, e, r.cellFormatOptions) : b, O = typeof r.cellClass == "function" ? r.cellClass(e, b) : r.cellClass ?? "", k = typeof r.cellStyle == "function" ? r.cellStyle(e, b) : r.cellStyle ?? {}, G = (wt = r.tooltip) == null ? void 0 : wt.call(r, e, b), te = r.pinned === "left", be = r.pinned === "right", le = [
+                          "dyn-table-td",
+                          te ? "dyn-table-td--pinned-left" : "",
+                          be ? "dyn-table-td--pinned-right" : "",
+                          O
+                        ].filter(Boolean).join(" ");
+                        return /* @__PURE__ */ t(
+                          "td",
+                          {
+                            className: le.trim(),
+                            style: {
+                              width: T[i],
+                              minWidth: P(r),
+                              textAlign: r.align ?? "left",
+                              ...r.wrapText ? { whiteSpace: "normal" } : {},
+                              ...te && Q[i] != null ? { left: Q[i] } : {},
+                              ...be && H[i] != null ? { right: H[i] } : {},
+                              ...k
+                            },
+                            title: G,
+                            children: p
+                          },
+                          r.id
+                        );
+                      }),
+                      c != null && /* @__PURE__ */ t(
+                        "td",
+                        {
+                          className: "dyn-table-td dyn-table-td--actions",
+                          style: { textAlign: w },
+                          children: c(e)
+                        }
+                      )
+                    ]
+                  },
+                  l
+                );
+              }),
+              Qe < x.length && /* @__PURE__ */ t("tr", { "aria-hidden": !0, className: "dyn-table-virtual-spacer", children: /* @__PURE__ */ t(
+                "td",
+                {
+                  colSpan: v.length + (c != null ? 1 : 0) + (N ? 1 : 0),
+                  style: { height: (x.length - Qe) * se, padding: 0, border: "none", verticalAlign: "top", lineHeight: 0 }
+                }
+              ) })
+            ] }) : x.map((e, n) => {
+              const a = C(e);
+              return /* @__PURE__ */ o(
+                "tr",
+                {
+                  className: [
+                    typeof _ == "function" ? _(e, n) : _ ?? "",
+                    N && D.has(a) ? "dyn-table-row--selected" : ""
+                  ].filter(Boolean).join(" "),
+                  children: [
+                    N && /* @__PURE__ */ t("td", { className: "dyn-table-td dyn-table-td--selection", style: { width: U }, children: /* @__PURE__ */ t("label", { className: "dyn-table-selection-cell", children: /* @__PURE__ */ t(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: D.has(a),
+                        onChange: () => oe(a),
+                        "aria-label": "Satırı seç"
+                      }
+                    ) }) }),
+                    v.map((l, r) => {
+                      var le;
+                      const i = X(e, l), b = l.cell != null ? l.cell(e) : l.valueFormatter != null ? l.valueFormatter(i, e) : l.valueFormat != null ? Ee(i, l.valueFormat, l.valueFormatOptions) : l.cellFormat != null ? Te(l.cellFormat, i, e, l.cellFormatOptions) : i, p = typeof l.cellClass == "function" ? l.cellClass(e, i) : l.cellClass ?? "", O = typeof l.cellStyle == "function" ? l.cellStyle(e, i) : l.cellStyle ?? {}, k = (le = l.tooltip) == null ? void 0 : le.call(l, e, i), G = l.pinned === "left", te = l.pinned === "right", be = [
+                        "dyn-table-td",
+                        G ? "dyn-table-td--pinned-left" : "",
+                        te ? "dyn-table-td--pinned-right" : "",
+                        p
+                      ].filter(Boolean).join(" ");
+                      return /* @__PURE__ */ t(
+                        "td",
+                        {
+                          className: be.trim(),
+                          style: {
+                            width: T[r],
+                            minWidth: P(l),
+                            textAlign: l.align ?? "left",
+                            ...l.wrapText ? { whiteSpace: "normal" } : {},
+                            ...G && Q[r] != null ? { left: Q[r] } : {},
+                            ...te && H[r] != null ? { right: H[r] } : {},
+                            ...O
+                          },
+                          title: k,
+                          children: b
+                        },
+                        l.id
+                      );
+                    }),
+                    c != null && /* @__PURE__ */ t(
+                      "td",
+                      {
+                        className: "dyn-table-td dyn-table-td--actions",
+                        style: { textAlign: w },
+                        children: c(e)
+                      }
+                    )
+                  ]
+                },
+                a
+              );
+            }) })
+          ] })
+        }
+      ) })
+    ] }) : A ? /* @__PURE__ */ t(
+      "div",
+      {
+        className: "dyn-table-mobile",
+        style: {
+          ...m != null && {
+            minHeight: typeof m == "number" ? `${m}px` : m
+          },
+          ...y != null && {
+            height: typeof y == "number" ? `${y}px` : y
+          }
+        },
+        children: fe ? /* @__PURE__ */ t("div", { className: "dyn-table-cards", "aria-busy": !0, children: Array.from({ length: Math.min($e, 5) }, (e, n) => /* @__PURE__ */ o("div", { className: "dyn-table-card dyn-table-card--skeleton", children: [
+          N && /* @__PURE__ */ t("div", { className: "dyn-table-card__selection", children: /* @__PURE__ */ t("span", { className: "dyn-table-skeleton dyn-table-skeleton--checkbox" }) }),
+          v.map((a) => /* @__PURE__ */ o("div", { className: "dyn-table-card__row", children: [
+            /* @__PURE__ */ t("span", { className: "dyn-table-card__label", children: typeof a.header == "string" ? a.header : a.id }),
+            /* @__PURE__ */ t("span", { className: "dyn-table-card__value", children: /* @__PURE__ */ t("span", { className: "dyn-table-skeleton" }) })
+          ] }, a.id)),
+          c != null && /* @__PURE__ */ t("div", { className: "dyn-table-card__actions" })
+        ] }, `skeleton-card-${n}`)) }) : x.length === 0 ? /* @__PURE__ */ t("div", { className: "dyn-table-empty dyn-table-empty--card", children: z }) : /* @__PURE__ */ t("div", { className: "dyn-table-cards", children: x.map((e) => {
+          const n = C(e);
+          return /* @__PURE__ */ o(
+            "div",
+            {
+              className: `dyn-table-card ${typeof _ == "function" ? _(e, 0) : _ ?? ""}`.trim(),
+              children: [
+                N && /* @__PURE__ */ t("div", { className: "dyn-table-card__selection", children: /* @__PURE__ */ t("label", { className: "dyn-table-selection-cell", children: /* @__PURE__ */ t(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: D.has(n),
+                    onChange: () => oe(n),
+                    "aria-label": "Satırı seç"
+                  }
+                ) }) }),
+                v.map((a) => {
+                  const l = X(e, a), r = Wt(e, a, l);
+                  return /* @__PURE__ */ o("div", { className: "dyn-table-card__row", children: [
+                    /* @__PURE__ */ t("span", { className: "dyn-table-card__label", children: (typeof a.header == "string", a.header) }),
+                    /* @__PURE__ */ t("span", { className: "dyn-table-card__value", children: r })
+                  ] }, a.id);
+                }),
+                c != null && /* @__PURE__ */ t("div", { className: "dyn-table-card__actions", children: c(e) })
+              ]
+            },
+            n
+          );
+        }) })
+      }
+    ) : /* @__PURE__ */ t(
+      "div",
+      {
+        ref: Be,
+        className: `dyn-table-scroll ${K ? "dyn-table-scroll--virtualized" : ""} ${We ? "dyn-table-scroll--sticky-header" : ""}`.trim(),
+        style: {
+          ...m != null && {
+            minHeight: typeof m == "number" ? `${m}px` : m
+          },
+          ...y != null && {
+            height: typeof y == "number" ? `${y}px` : y
+          },
+          ...K && {
+            overflowY: "auto",
+            height: y != null ? typeof y == "number" ? `${y}px` : y : m != null ? typeof m == "number" ? `${m}px` : m : 400
+          },
+          ...We && !K && {
+            overflowY: "auto",
+            height: y != null ? typeof y == "number" ? `${y}px` : y : m != null ? typeof m == "number" ? `${m}px` : m : 400
+          }
+        },
+        onScroll: K ? (e) => ct(e.currentTarget.scrollTop) : void 0,
+        children: /* @__PURE__ */ o("table", { className: "dyn-table dyn-table--fixed", children: [
+          /* @__PURE__ */ o("colgroup", { children: [
+            N && /* @__PURE__ */ t("col", { style: { width: U } }),
+            v.map((e, n) => /* @__PURE__ */ t("col", { style: { width: T[n], minWidth: P(e) } }, e.id)),
+            c != null && /* @__PURE__ */ t("col", { style: { width: R } })
+          ] }),
+          /* @__PURE__ */ t("thead", { className: q, children: /* @__PURE__ */ o("tr", { children: [
+            N && /* @__PURE__ */ t("th", { className: "dyn-table-th dyn-table-th--selection", style: { width: U }, children: /* @__PURE__ */ t(
+              Tt,
+              {
+                displayData: x,
+                getRowKey: C,
+                selectedSet: D,
+                onToggleAll: gt
+              }
+            ) }),
+            v.map((e, n) => {
+              const a = f && e.sortable !== !1 && !e.suppressSort, l = $.id === e.id, r = kt === e.id, i = St === n, b = [
+                "dyn-table-th",
+                a ? "dyn-table-th--sortable" : "",
+                l ? "dyn-table-th--sorted" : "",
+                e.resizable ? "dyn-table-th--resizable" : "",
+                r ? "dyn-table-th--dragging" : "",
+                i ? "dyn-table-th--drag-over" : "",
+                e.headerClass ?? ""
+              ].filter(Boolean).join(" ");
+              return /* @__PURE__ */ o(
+                "th",
+                {
+                  className: b,
+                  style: {
+                    width: T[n],
+                    minWidth: P(e),
+                    maxWidth: j(e.maxWidth),
+                    textAlign: e.headerAlign ?? e.align ?? "left",
+                    ...e.headerStyle
+                  },
+                  title: e.headerTooltip,
+                  onClick: () => a && pt(e.id),
+                  onDragOver: Z && !A ? (p) => Dt(p, n) : void 0,
+                  onDragLeave: Z && !A ? Ft : void 0,
+                  onDrop: Z && !A ? (p) => Mt(p, n) : void 0,
+                  children: [
+                    /* @__PURE__ */ o("span", { className: "dyn-table-th__content", children: [
+                      Z && !A && /* @__PURE__ */ t(
+                        "span",
+                        {
+                          className: "dyn-table-th__drag-handle",
+                          draggable: !0,
+                          onDragStart: (p) => Ct(p, e.id),
+                          onDragEnd: Lt,
+                          onClick: (p) => p.stopPropagation(),
+                          "aria-label": `${e.id} kolonunu taşı`,
+                          children: /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": !0, children: /* @__PURE__ */ t("path", { d: "M8 6h2V4H8v2zm0 4h2V8H8v2zm0 4h2v-2H8v2zm4-8h2V4h-2v2zm0 4h2V8h-2v2zm0 4h2v-2h-2v2z" }) })
+                        }
+                      ),
+                      e.header,
+                      a && /* @__PURE__ */ o("span", { className: "dyn-table-sort", "aria-hidden": !0, children: [
+                        l && $.direction === "asc" && /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", fill: "currentColor", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ t("path", { d: "M7 15l5-5 5 5H7z" }) }),
+                        l && $.direction === "desc" && /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", fill: "currentColor", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ t("path", { d: "M7 10l5 5 5-5H7z" }) }),
+                        !l && /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ t("path", { d: "M7 15l5-5 5 5H7z" }) })
+                      ] })
+                    ] }),
+                    e.resizable && /* @__PURE__ */ t(
+                      Et,
+                      {
+                        colId: e.id,
+                        minWidth: P(e),
+                        maxWidth: j(e.maxWidth),
+                        startWidth: T[n],
+                        onResize: (p) => ut((O) => ({ ...O, [e.id]: p }))
+                      }
+                    )
+                  ]
+                },
+                e.id
+              );
+            }),
+            c != null && /* @__PURE__ */ t(
+              "th",
+              {
+                className: "dyn-table-th dyn-table-th--actions",
+                style: {
+                  width: R,
+                  minWidth: R,
+                  textAlign: w
+                },
+                children: W
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ t("tbody", { className: V, children: fe ? Array.from({ length: $e }, (e, n) => /* @__PURE__ */ o("tr", { className: "dyn-table-row--skeleton", "aria-busy": !0, children: [
+            N && /* @__PURE__ */ t("td", { className: "dyn-table-td dyn-table-td--selection", style: { width: U }, children: /* @__PURE__ */ t("span", { className: "dyn-table-skeleton dyn-table-skeleton--checkbox" }) }),
+            v.map((a, l) => /* @__PURE__ */ t(
+              "td",
+              {
+                className: "dyn-table-td",
+                style: { width: T[l], minWidth: P(a), textAlign: a.align ?? "left" },
+                children: /* @__PURE__ */ t("span", { className: "dyn-table-skeleton" })
+              },
+              a.id
+            )),
+            c != null && /* @__PURE__ */ t("td", { className: "dyn-table-td dyn-table-td--actions", style: { width: R } })
+          ] }, `skeleton-${n}`)) : x.length === 0 ? /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t(
+            "td",
+            {
+              colSpan: v.length + (c != null ? 1 : 0) + (N ? 1 : 0),
+              className: "dyn-table-empty",
+              children: z
+            }
+          ) }) : x.map((e, n) => {
+            const a = C(e);
+            return /* @__PURE__ */ o(
+              "tr",
+              {
+                className: [
+                  typeof _ == "function" ? _(e, n) : _ ?? "",
+                  N && D.has(a) ? "dyn-table-row--selected" : ""
+                ].filter(Boolean).join(" "),
+                children: [
+                  N && /* @__PURE__ */ t("td", { className: "dyn-table-td dyn-table-td--selection", style: { width: U }, children: /* @__PURE__ */ t("label", { className: "dyn-table-selection-cell", children: /* @__PURE__ */ t(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: D.has(a),
+                      onChange: () => oe(a),
+                      "aria-label": "Satırı seç"
+                    }
+                  ) }) }),
+                  v.map((l, r) => {
+                    var le;
+                    const i = X(e, l), b = l.cell != null ? l.cell(e) : l.valueFormatter != null ? l.valueFormatter(i, e) : l.valueFormat != null ? Ee(i, l.valueFormat, l.valueFormatOptions) : l.cellFormat != null ? Te(l.cellFormat, i, e, l.cellFormatOptions) : i, p = typeof l.cellClass == "function" ? l.cellClass(e, i) : l.cellClass ?? "", O = typeof l.cellStyle == "function" ? l.cellStyle(e, i) : l.cellStyle ?? {}, k = (le = l.tooltip) == null ? void 0 : le.call(l, e, i), G = l.pinned === "left", te = l.pinned === "right", be = [
+                      "dyn-table-td",
+                      G ? "dyn-table-td--pinned-left" : "",
+                      te ? "dyn-table-td--pinned-right" : "",
+                      p
+                    ].filter(Boolean).join(" ");
+                    return /* @__PURE__ */ t(
+                      "td",
+                      {
+                        className: be.trim(),
+                        style: {
+                          width: T[r],
+                          minWidth: P(l),
+                          textAlign: l.align ?? "left",
+                          ...l.wrapText ? { whiteSpace: "normal" } : {},
+                          ...G && Q[r] != null ? { left: Q[r] } : {},
+                          ...te && H[r] != null ? { right: H[r] } : {},
+                          ...O
+                        },
+                        title: k,
+                        children: b
+                      },
+                      l.id
+                    );
+                  }),
+                  c != null && /* @__PURE__ */ t(
+                    "td",
+                    {
+                      className: "dyn-table-td dyn-table-td--actions",
+                      style: { textAlign: w },
+                      children: c(e)
+                    }
+                  )
+                ]
+              },
+              a
+            );
+          }) })
+        ] })
+      }
+    ),
+    ae && Ce > 0 && /* @__PURE__ */ o("div", { className: "dyn-table-pagination", children: [
+      /* @__PURE__ */ o("div", { className: "dyn-table-pagination__info", children: [
+        rn,
+        "-",
+        sn,
+        " / ",
+        Ce,
+        " kayıt"
+      ] }),
+      /* @__PURE__ */ o("div", { className: "dyn-table-pagination__controls", children: [
+        /* @__PURE__ */ t(
+          "select",
+          {
+            className: "dyn-table-pagination__pagesize",
+            value: E,
+            onChange: (e) => {
+              const n = Number(e.target.value);
+              Ve(n), Pe(1, n);
+            },
+            "aria-label": "Sayfa başına kayıt",
+            children: Oe.map((e) => /* @__PURE__ */ t("option", { value: e, children: e }, e))
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "dyn-table-pagination__btn",
+            disabled: Y <= 1,
+            onClick: () => Pe(Y - 1, E),
+            "aria-label": "Önceki sayfa",
+            children: "Önceki"
+          }
+        ),
+        /* @__PURE__ */ o("span", { className: "dyn-table-pagination__page", children: [
+          "Sayfa ",
+          Y,
+          " / ",
+          Ye
+        ] }),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "dyn-table-pagination__btn",
+            disabled: Y >= Ye,
+            onClick: () => Pe(Y + 1, E),
+            "aria-label": "Sonraki sayfa",
+            children: "Sonraki"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  Nn as Table
+};
+//# sourceMappingURL=dyn-table.js.map