klun-ui 0.4.0 → 0.4.1

package/dist/{chunk-XLK6BYW3.cjs → chunk-IETPQZRQ.cjs}

@@ -3,6 +3,9 @@
 var chunkTPGAXYFU_cjs = require('./chunk-TPGAXYFU.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
 var reactDom = require('react-dom');
 var client = require('react-dom/client');
 
@@ -3344,15 +3347,70 @@ var DiffViewer = react.forwardRef(function DiffViewer2({
   );
 });
 DiffViewer.displayName = "DiffViewer";
-var Kanban = react.forwardRef(function Kanban2({ columns = [], onMove, onCardClick, renderCard, columnFooter, columnWidth = 280, className, style, ...props }, ref) {
-  const [drag, setDrag] = react.useState(null);
-  const [overColumn, setOverColumn] = react.useState(null);
-  const handleDrop = (column, index) => {
-    if (drag && (drag.fromColumn !== column.id || index !== index)) {
-      onMove?.(drag.cardId, drag.fromColumn, column.id, index);
-    }
-    setDrag(null);
-    setOverColumn(null);
+function draggedCenterY(active, delta) {
+  const translated = active.rect.current.translated;
+  if (translated) return translated.top + translated.height / 2;
+  const initial = active.rect.current.initial;
+  return initial ? initial.top + delta.y + initial.height / 2 : null;
+}
+function resolveMove(columns, activeId, overId, after) {
+  if (activeId === overId) return null;
+  const from = columns.find((c) => c.cards.some((k2) => k2.id === activeId));
+  if (!from) return null;
+  const overCard = columns.flatMap((c) => c.cards).find((k2) => k2.id === overId);
+  const to = overCard ? columns.find((c) => c.cards.some((k2) => k2.id === overCard.id)) : columns.find((c) => c.id === overId);
+  if (!to) return null;
+  const rest = to.cards.filter((k2) => k2.id !== activeId);
+  const toIndex = overCard ? rest.findIndex((k2) => k2.id === overCard.id) + (after ? 1 : 0) : rest.length;
+  if (to.id === from.id && from.cards.findIndex((k2) => k2.id === activeId) === toIndex) {
+    return null;
+  }
+  return { fromColumn: from.id, toColumn: to.id, toIndex };
+}
+var Kanban = react.forwardRef(function Kanban2({
+  columns = [],
+  onMove,
+  onCardClick,
+  renderCard,
+  columnFooter,
+  columnWidth = 280,
+  className,
+  style,
+  ...props
+}, ref) {
+  const [over, setOver] = react.useState(null);
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor, { activationConstraint: { distance: 4 } }),
+    core.useSensor(core.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
+  );
+  const columnOf = (cardId) => columns.find((c) => c.cards.some((k2) => k2.id === cardId));
+  const computeOver = ({
+    active,
+    delta,
+    over: o
+  }) => {
+    if (!o) return null;
+    const overId = String(o.id);
+    const column = columnOf(overId);
+    if (!column) return { columnId: overId };
+    const centerY = draggedCenterY(active, delta);
+    return {
+      columnId: column.id,
+      cardId: overId,
+      after: centerY != null && centerY > o.rect.top + o.rect.height / 2
+    };
+  };
+  const handleDragEnd = ({ active, delta, over: o }) => {
+    setOver(null);
+    if (!o) return;
+    const overId = String(o.id);
+    const column = columnOf(overId);
+    const centerY = column ? draggedCenterY(active, delta) : null;
+    const after = centerY != null && centerY > o.rect.top + o.rect.height / 2;
+    const target = resolveMove(columns, String(active.id), overId, after);
+    if (target) {
+      onMove?.(String(active.id), target.fromColumn, target.toColumn, target.toIndex);
+    }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -3361,87 +3419,118 @@ var Kanban = react.forwardRef(function Kanban2({ columns = [], onMove, onCardCli
       className: chunkTPGAXYFU_cjs.cx("klun-kanban", className),
       style: { ...style, ["--klun-kanban-col"]: `${columnWidth}px` },
       ...props,
-      children: columns.map((column) => {
-        const over = overColumn === column.id && drag;
-        const full = column.limit !== void 0 && column.cards.length >= column.limit;
-        return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: chunkTPGAXYFU_cjs.cx("klun-kanban__column", over && "klun-kanban__column--over"), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "klun-kanban__header", children: [
-            column.accent ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-kanban__dot", style: { background: column.accent } }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-kanban__title", children: column.title }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: chunkTPGAXYFU_cjs.cx("klun-kanban__count", full && "klun-kanban__count--full"), children: [
-              column.cards.length,
-              column.limit !== void 0 ? ` / ${column.limit}` : ""
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        core.DndContext,
+        {
+          sensors,
+          collisionDetection: core.closestCorners,
+          onDragOver: (e) => setOver(computeOver(e)),
+          onDragMove: (e) => setOver(computeOver(e)),
+          onDragEnd: handleDragEnd,
+          children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+            KanbanColumnView,
             {
-              className: "klun-kanban__list",
-              onDragOver: (e) => {
-                if (!drag) return;
-                e.preventDefault();
-                setOverColumn(column.id);
-              },
-              onDrop: (e) => {
-                e.preventDefault();
-                handleDrop(column, column.cards.length);
-              },
-              children: [
-                column.cards.map((card, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                  "article",
-                  {
-                    draggable: true,
-                    onDragStart: (e) => {
-                      e.dataTransfer.effectAllowed = "move";
-                      e.dataTransfer.setData("text/plain", card.id);
-                      setDrag({ cardId: card.id, fromColumn: column.id });
-                    },
-                    onDragEnd: () => {
-                      setDrag(null);
-                      setOverColumn(null);
-                    },
-                    onDragOver: (e) => {
-                      if (!drag) return;
-                      e.preventDefault();
-                      e.stopPropagation();
-                      const rect = e.currentTarget.getBoundingClientRect();
-                      const after = e.clientY - rect.top > rect.height / 2;
-                      setOverColumn(column.id);
-                      setDrag((d) => d ? { ...d, overColumn: column.id, overIndex: index + (after ? 1 : 0) } : d);
-                    },
-                    onDrop: (e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleDrop(column, index);
-                    },
-                    onClick: () => onCardClick?.(card, column.id),
-                    className: chunkTPGAXYFU_cjs.cx(
-                      "klun-kanban__card",
-                      drag?.cardId === card.id && "klun-kanban__card--dragging",
-                      over && drag?.overIndex === index && "klun-kanban__card--dropbefore",
-                      over && drag?.overIndex === index + 1 && "klun-kanban__card--dropafter"
-                    ),
-                    style: card.accent ? { boxShadow: `inset 3px 0 0 ${card.accent}` } : void 0,
-                    children: renderCard ? renderCard(card, column.id) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__card-title", children: card.title }),
-                      card.description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__card-desc", children: card.description }) : null,
-                      card.tags?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__card-tags", children: card.tags.map((t, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: t }, i)) }) : null,
-                      card.meta ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__card-meta", children: card.meta }) : null
-                    ] })
-                  },
-                  card.id
-                )),
-                column.cards.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__empty", children: "Drop a card here" }) : null
-              ]
-            }
-          ),
-          columnFooter ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__footer", children: columnFooter(column) }) : null
-        ] }, column.id);
-      })
+              column,
+              over,
+              onCardClick,
+              renderCard,
+              columnFooter
+            },
+            column.id
+          ))
+        }
+      )
     }
   );
 });
 Kanban.displayName = "Kanban";
+function KanbanColumnView({
+  column,
+  over,
+  onCardClick,
+  renderCard,
+  columnFooter
+}) {
+  const { setNodeRef } = core.useDroppable({ id: column.id });
+  const isOver = over?.columnId === column.id;
+  const full = column.limit !== void 0 && column.cards.length >= column.limit;
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: chunkTPGAXYFU_cjs.cx("klun-kanban__column", isOver && "klun-kanban__column--over"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "klun-kanban__header", children: [
+      column.accent ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-kanban__dot", style: { background: column.accent } }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-kanban__title", children: column.title }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: chunkTPGAXYFU_cjs.cx("klun-kanban__count", full && "klun-kanban__count--full"), children: [
+        column.cards.length,
+        column.limit !== void 0 ? ` / ${column.limit}` : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setNodeRef, className: "klun-kanban__list", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        sortable.SortableContext,
+        {
+          items: column.cards.map((c) => c.id),
+          strategy: sortable.verticalListSortingStrategy,
+          children: column.cards.map((card) => /* @__PURE__ */ jsxRuntime.jsx(
+            KanbanCardView,
+            {
+              card,
+              columnId: column.id,
+              dropBefore: isOver && over?.cardId === card.id && over?.after === false,
+              dropAfter: isOver && over?.cardId === card.id && over?.after === true,
+              onCardClick,
+              renderCard
+            },
+            card.id
+          ))
+        }
+      ),
+      column.cards.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__empty", children: "Drop a card here" }) : null
+    ] }),
+    columnFooter ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__footer", children: columnFooter(column) }) : null
+  ] });
+}
+function KanbanCardView({
+  card,
+  columnId,
+  dropBefore,
+  dropAfter,
+  onCardClick,
+  renderCard
+}) {
+  const {
+    attributes,
+    listeners: listeners2,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({ id: card.id });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "article",
+    {
+      ref: setNodeRef,
+      ...attributes,
+      ...listeners2,
+      onClick: () => onCardClick?.(card, columnId),
+      className: chunkTPGAXYFU_cjs.cx(
+        "klun-kanban__card",
+        isDragging && "klun-kanban__card--dragging",
+        dropBefore && "klun-kanban__card--dropbefore",
+        dropAfter && "klun-kanban__card--dropafter"
+      ),
+      style: {
+        transform: utilities.CSS.Transform.toString(transform),
+        transition,
+        ...card.accent ? { boxShadow: `inset 3px 0 0 ${card.accent}` } : null
+      },
+      children: renderCard ? renderCard(card, columnId) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__card-title", children: card.title }),
+        card.description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__card-desc", children: card.description }) : null,
+        card.tags?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__card-tags", children: card.tags.map((t, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: t }, i)) }) : null,
+        card.meta ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__card-meta", children: card.meta }) : null
+      ] })
+    }
+  );
+}
 function VirtualTable({
   rows = [],
   columns = [],
@@ -4036,6 +4125,16 @@ function rowsToCsv(columns, rows) {
   const body = rows.map((r) => cols.map((c) => csvCell(c.copyValue ? c.copyValue(r) : r[c.key])).join(",")).join("\n");
   return head + "\n" + body;
 }
+function reorderRows(rows, fromId, toId, getRowId) {
+  const ids = rows.map(getRowId);
+  const from = ids.indexOf(fromId);
+  const to = ids.indexOf(toId);
+  if (from < 0 || to < 0 || from === to) return null;
+  const next = rows.slice();
+  const [moved] = next.splice(from, 1);
+  next.splice(to, 0, moved);
+  return { next, from, to };
+}
 function downloadCsv(filename, csv) {
   const blob = new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8;" });
   const url = URL.createObjectURL(blob);
@@ -4598,351 +4697,387 @@ function TableHead({
     })
   ] }) });
 }
-function TableBody({
-  loading,
-  loadingRows,
+function TableRow(props) {
+  if (!props.dragCol) return /* @__PURE__ */ jsxRuntime.jsx(RowBase, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(SortableRow, { ...props });
+}
+function SortableRow(props) {
+  const {
+    attributes,
+    listeners: listeners2,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({ id: props.node.id });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RowBase,
+    {
+      ...props,
+      sortable: {
+        attributes,
+        listeners: listeners2,
+        setNodeRef,
+        setActivatorNodeRef,
+        isDragging,
+        style: { transform: utilities.CSS.Transform.toString(transform), transition }
+      }
+    }
+  );
+}
+function RowBase({
+  sortable,
+  node,
+  index,
   dragCol,
-  expandCol,
-  selectable,
-  visibleColumns,
-  pageRows,
-  colCount,
-  empty,
-  displayRows,
-  treeOpen,
-  setTreeOpen,
+  tree,
+  indentSize,
+  zebra,
   selected,
+  rowStatus,
   onRowClick,
   rowHref,
+  expandCol,
+  expandable,
   expanded,
   setExpanded,
-  expandable,
-  rowStatus,
-  drag,
-  setDrag,
-  reorder,
-  zebra,
-  contextMenu,
-  copyable,
-  copyRow,
-  setMenu,
-  leftFixed,
-  vBorderClass,
+  treeOpen,
+  setTreeOpen,
+  selectable,
   selectionType,
   onSelectRow,
+  visibleColumns,
+  leftFixed,
+  vBorderClass,
   fixedCell,
   editing,
   setEditing,
   startEdit,
   commitEdit,
   cancelEdit,
-  tree,
-  indentSize,
+  contextMenu,
+  copyable,
+  copyRow,
+  setMenu,
+  colCount,
   onCopy
 }) {
   const { table } = useLocale();
-  const skel = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-table__skel" });
-  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? Array.from({ length: loadingRows }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: i ? "klun-table__row--bordered" : void 0, children: [
-    dragCol ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "klun-table__td" }) : null,
-    expandCol ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "klun-table__td", children: skel }) : null,
-    selectable ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "klun-table__td", children: skel }) : null,
-    visibleColumns.map((c) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "klun-table__td", children: skel }, c.key))
-  ] }, "sk" + i)) : pageRows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: colCount, className: "klun-table__empty-cell", children: empty != null ? empty : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "klun-table__empty", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-inbox-line klun-table__empty-icon" }),
-    table.noData
-  ] }) }) }) : displayRows.map((node, i) => {
-    const row = node.row;
-    const id = node.id;
-    const depth = node.depth;
-    const treeHasKids = node.hasChildren;
-    const treeIsOpen = treeOpen.has(id);
-    const toggleTree = () => {
-      const n = new Set(treeOpen);
-      n.has(id) ? n.delete(id) : n.add(id);
-      setTreeOpen(n);
-    };
-    const on = selected.includes(id);
-    const clickable = !!(onRowClick || rowHref);
-    const isOpen = expanded.has(id);
-    const canExpand = expandCol && (!expandable.rowExpandable || expandable.rowExpandable(row));
-    const toggleRow = () => {
-      const next = new Set(expanded);
-      next.has(id) ? next.delete(id) : next.add(id);
-      setExpanded(next);
-      expandable?.onExpand?.(row, !isOpen);
-    };
-    const st = rowStatus ? rowStatus(row) : null;
-    const dragging = !!(drag && drag.id === id);
-    const dropOver = !!(drag && drag.overId === id && drag.id !== id);
-    const borderTop = i > 0;
-    const tdBorder = borderTop ? "klun-table__td--bordered" : "";
-    return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "tr",
-        {
-          className: chunkTPGAXYFU_cjs.cx(
-            "klun-table__row",
-            on && "klun-table__row--selected",
-            zebra && i % 2 === 1 && "klun-table__row--zebra",
-            st && `klun-table__row--status-${st}`,
-            clickable && "klun-table__row--clickable",
-            dragging && "klun-table__row--dragging",
-            dropOver && "klun-table__row--dropover",
-            dropOver && drag.after && "klun-table__row--dropover-after"
-          ),
-          onClick: clickable ? () => rowHref ? window.location.href = rowHref(row) : onRowClick(row) : void 0,
-          onDragOver: dragCol && drag ? (e) => {
-            e.preventDefault();
-            const r = e.currentTarget.getBoundingClientRect();
-            const after = e.clientY - r.top > r.height / 2;
-            if (drag.overId !== id || drag.after !== after)
-              setDrag((dd) => dd ? { ...dd, overId: id, after } : dd);
-          } : void 0,
-          onDrop: dragCol && drag ? (e) => {
+  const row = node.row;
+  const id = node.id;
+  const depth = node.depth;
+  const treeHasKids = node.hasChildren;
+  const treeIsOpen = treeOpen.has(id);
+  const toggleTree = () => {
+    const n = new Set(treeOpen);
+    n.has(id) ? n.delete(id) : n.add(id);
+    setTreeOpen(n);
+  };
+  const on = selected.includes(id);
+  const clickable = !!(onRowClick || rowHref);
+  const isOpen = expanded.has(id);
+  const canExpand = expandCol && (!expandable.rowExpandable || expandable.rowExpandable(row));
+  const toggleRow = () => {
+    const next = new Set(expanded);
+    next.has(id) ? next.delete(id) : next.add(id);
+    setExpanded(next);
+    expandable?.onExpand?.(row, !isOpen);
+  };
+  const st = rowStatus ? rowStatus(row) : null;
+  const tdBorder = index > 0 ? "klun-table__td--bordered" : "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "tr",
+      {
+        ref: sortable?.setNodeRef,
+        style: sortable?.style,
+        className: chunkTPGAXYFU_cjs.cx(
+          "klun-table__row",
+          on && "klun-table__row--selected",
+          zebra && index % 2 === 1 && "klun-table__row--zebra",
+          st && `klun-table__row--status-${st}`,
+          clickable && "klun-table__row--clickable",
+          sortable?.isDragging && "klun-table__row--dragging"
+        ),
+        onClick: clickable ? () => rowHref ? window.location.href = rowHref(row) : onRowClick(row) : void 0,
+        onContextMenu: contextMenu || copyable ? (e) => {
+          const custom = contextMenu ? contextMenu(row, { copyRow, copyText }) : null;
+          const items2 = custom && custom.length ? custom : [
+            {
+              label: table.copyRow,
+              icon: "ri-file-copy-line",
+              onClick: () => copyRow(row)
+            }
+          ];
+          if (items2 && items2.length) {
             e.preventDefault();
-            reorder(drag.id, id, drag.after);
-            setDrag(null);
-          } : void 0,
-          onContextMenu: contextMenu || copyable ? (e) => {
-            const custom = contextMenu ? contextMenu(row, { copyRow, copyText }) : null;
-            const items2 = custom && custom.length ? custom : [
-              {
-                label: table.copyRow,
-                icon: "ri-file-copy-line",
-                onClick: () => copyRow(row)
-              }
-            ];
-            if (items2 && items2.length) {
-              e.preventDefault();
-              setMenu({ x: e.clientX, y: e.clientY, items: items2 });
+            setMenu({ x: e.clientX, y: e.clientY, items: items2 });
+          }
+        } : void 0,
+        children: [
+          dragCol ? /* @__PURE__ */ jsxRuntime.jsx(
+            "td",
+            {
+              ref: sortable?.setActivatorNodeRef,
+              ...sortable?.attributes,
+              ...sortable?.listeners,
+              onClick: (e) => e.stopPropagation(),
+              "aria-label": table.dragToReorder,
+              title: table.dragToReorder,
+              className: chunkTPGAXYFU_cjs.cx("klun-table__td", "klun-table__td--util", tdBorder),
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-table__draghandle", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-draggable" }) })
             }
-          } : void 0,
-          children: [
-            dragCol ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: chunkTPGAXYFU_cjs.cx("klun-table__td", "klun-table__td--util", tdBorder), children: /* @__PURE__ */ jsxRuntime.jsx(
+          ) : null,
+          expandCol ? /* @__PURE__ */ jsxRuntime.jsx(
+            "td",
+            {
+              className: chunkTPGAXYFU_cjs.cx(
+                "klun-table__td",
+                "klun-table__td--lead",
+                tdBorder,
+                (leftFixed.length || selectable) && "klun-table__cell--fixed klun-table__cell--fixed-body"
+              ),
+              style: leftFixed.length || selectable ? { left: 0 } : void 0,
+              children: canExpand ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": isOpen ? table.collapse : table.expand,
+                  "aria-expanded": isOpen,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    toggleRow();
+                  },
+                  className: "klun-table__expand-btn",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "i",
+                    {
+                      className: chunkTPGAXYFU_cjs.cx(
+                        "ri-arrow-right-s-line",
+                        "klun-table__chevron",
+                        isOpen && "klun-table__chevron--open"
+                      )
+                    }
+                  )
+                }
+              ) : null
+            }
+          ) : null,
+          selectable ? /* @__PURE__ */ jsxRuntime.jsx(
+            "td",
+            {
+              className: chunkTPGAXYFU_cjs.cx(
+                "klun-table__td",
+                tdBorder,
+                vBorderClass,
+                leftFixed.length && "klun-table__cell--fixed klun-table__cell--fixed-body"
+              ),
+              style: leftFixed.length ? { left: expandCol ? 44 : 0 } : void 0,
+              children: selectionType === "radio" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "radio",
+                  "aria-checked": on,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onSelectRow?.(id);
+                  },
+                  className: chunkTPGAXYFU_cjs.cx("klun-table__radio", on && "klun-table__radio--on"),
+                  children: on ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-table__radio-dot" }) : null
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(Check, { checked: on, onChange: () => onSelectRow?.(id) })
+            }
+          ) : null,
+          visibleColumns.map((c, ci) => {
+            const fx = fixedCell(c, false);
+            const last = ci === visibleColumns.length - 1;
+            const content = c.render ? c.render(row) : row[c.key];
+            const inner = c.copyable ? /* @__PURE__ */ jsxRuntime.jsxs(
               "span",
               {
-                draggable: true,
-                onDragStart: (e) => {
-                  e.stopPropagation();
-                  setDrag({ id, overId: id, after: false });
-                  try {
-                    e.dataTransfer.effectAllowed = "move";
-                    e.dataTransfer.setData("text/plain", String(id));
-                  } catch (x) {
-                  }
+                className: "klun-table__copycell",
+                onMouseEnter: (e) => {
+                  const b = e.currentTarget.querySelector(
+                    "[data-copy]"
+                  );
+                  if (b) b.style.opacity = "1";
                 },
-                onDragEnd: () => setDrag(null),
+                onMouseLeave: (e) => {
+                  const b = e.currentTarget.querySelector(
+                    "[data-copy]"
+                  );
+                  if (b) b.style.opacity = "0";
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: c.ellipsis ? "klun-table__ellipsis" : void 0, children: content }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-copy": true,
+                      "aria-label": table.copy,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        copyText(c.copyValue ? c.copyValue(row) : row[c.key]);
+                        onCopy?.("cell", row, c.key);
+                      },
+                      className: "klun-table__copybtn",
+                      children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-file-copy-line" })
+                    }
+                  )
+                ]
+              }
+            ) : content;
+            const isEditing = editing && editing.id === id && editing.key === c.key;
+            const editor = isEditing ? c.editor === "select" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
+              {
+                autoFocus: true,
+                value: editing.value ?? "",
                 onClick: (e) => e.stopPropagation(),
-                "aria-label": table.dragToReorder,
-                title: table.dragToReorder,
-                className: "klun-table__draghandle",
-                children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-draggable" })
+                onChange: (e) => setEditing((ed) => ed ? { ...ed, value: e.target.value } : ed),
+                onBlur: commitEdit,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") commitEdit();
+                  if (e.key === "Escape") cancelEdit();
+                },
+                className: "klun-table__editor",
+                children: (c.options || []).map((o) => {
+                  const ov = typeof o === "object" ? o.value : o;
+                  const ol = typeof o === "object" ? o.label : o;
+                  return /* @__PURE__ */ jsxRuntime.jsx("option", { value: ov, children: ol }, ov);
+                })
               }
-            ) }) : null,
-            expandCol ? /* @__PURE__ */ jsxRuntime.jsx(
-              "td",
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
               {
-                className: chunkTPGAXYFU_cjs.cx(
-                  "klun-table__td",
-                  "klun-table__td--lead",
-                  tdBorder,
-                  (leftFixed.length || selectable) && "klun-table__cell--fixed klun-table__cell--fixed-body"
-                ),
-                style: leftFixed.length || selectable ? { left: 0 } : void 0,
-                children: canExpand ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": isOpen ? table.collapse : table.expand,
-                    "aria-expanded": isOpen,
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      toggleRow();
-                    },
-                    className: "klun-table__expand-btn",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "i",
-                      {
-                        className: chunkTPGAXYFU_cjs.cx(
-                          "ri-arrow-right-s-line",
-                          "klun-table__chevron",
-                          isOpen && "klun-table__chevron--open"
-                        )
-                      }
-                    )
-                  }
-                ) : null
+                autoFocus: true,
+                type: c.editor === "number" ? "number" : "text",
+                value: editing.value ?? "",
+                onClick: (e) => e.stopPropagation(),
+                onChange: (e) => setEditing((ed) => ed ? { ...ed, value: e.target.value } : ed),
+                onBlur: commitEdit,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") commitEdit();
+                  if (e.key === "Escape") cancelEdit();
+                },
+                className: "klun-table__editor",
+                style: { textAlign: c.align || "left" }
               }
-            ) : null,
-            selectable ? /* @__PURE__ */ jsxRuntime.jsx(
+            ) : null;
+            return /* @__PURE__ */ jsxRuntime.jsx(
               "td",
               {
+                onDoubleClick: c.editable && !isEditing ? (e) => {
+                  e.stopPropagation();
+                  startEdit(id, c, row);
+                } : void 0,
                 className: chunkTPGAXYFU_cjs.cx(
                   "klun-table__td",
                   tdBorder,
-                  vBorderClass,
-                  leftFixed.length && "klun-table__cell--fixed klun-table__cell--fixed-body"
+                  isEditing && "klun-table__td--editing",
+                  (c.nowrap || c.ellipsis) && "klun-table__td--nowrap",
+                  c.ellipsis && "klun-table__td--ellipsis",
+                  c.editable && !isEditing && "klun-table__td--editable",
+                  !last && vBorderClass,
+                  fx.cls
                 ),
-                style: leftFixed.length ? { left: expandCol ? 44 : 0 } : void 0,
-                children: selectionType === "radio" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    role: "radio",
-                    "aria-checked": on,
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      onSelectRow?.(id);
-                    },
-                    className: chunkTPGAXYFU_cjs.cx("klun-table__radio", on && "klun-table__radio--on"),
-                    children: on ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-table__radio-dot" }) : null
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(Check, { checked: on, onChange: () => onSelectRow?.(id) })
-              }
-            ) : null,
-            visibleColumns.map((c, ci) => {
-              const fx = fixedCell(c, false);
-              const last = ci === visibleColumns.length - 1;
-              const content = c.render ? c.render(row) : row[c.key];
-              const inner = c.copyable ? /* @__PURE__ */ jsxRuntime.jsxs(
-                "span",
-                {
-                  className: "klun-table__copycell",
-                  onMouseEnter: (e) => {
-                    const b = e.currentTarget.querySelector(
-                      "[data-copy]"
-                    );
-                    if (b) b.style.opacity = "1";
-                  },
-                  onMouseLeave: (e) => {
-                    const b = e.currentTarget.querySelector(
-                      "[data-copy]"
-                    );
-                    if (b) b.style.opacity = "0";
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: c.ellipsis ? "klun-table__ellipsis" : void 0, children: content }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        "data-copy": true,
-                        "aria-label": table.copy,
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          copyText(c.copyValue ? c.copyValue(row) : row[c.key]);
-                          onCopy?.("cell", row, c.key);
-                        },
-                        className: "klun-table__copybtn",
-                        children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-file-copy-line" })
-                      }
-                    )
-                  ]
-                }
-              ) : content;
-              const isEditing = editing && editing.id === id && editing.key === c.key;
-              const editor = isEditing ? c.editor === "select" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "select",
-                {
-                  autoFocus: true,
-                  value: editing.value ?? "",
-                  onClick: (e) => e.stopPropagation(),
-                  onChange: (e) => setEditing((ed) => ed ? { ...ed, value: e.target.value } : ed),
-                  onBlur: commitEdit,
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter") commitEdit();
-                    if (e.key === "Escape") cancelEdit();
-                  },
-                  className: "klun-table__editor",
-                  children: (c.options || []).map((o) => {
-                    const ov = typeof o === "object" ? o.value : o;
-                    const ol = typeof o === "object" ? o.label : o;
-                    return /* @__PURE__ */ jsxRuntime.jsx("option", { value: ov, children: ol }, ov);
-                  })
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  autoFocus: true,
-                  type: c.editor === "number" ? "number" : "text",
-                  value: editing.value ?? "",
-                  onClick: (e) => e.stopPropagation(),
-                  onChange: (e) => setEditing((ed) => ed ? { ...ed, value: e.target.value } : ed),
-                  onBlur: commitEdit,
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter") commitEdit();
-                    if (e.key === "Escape") cancelEdit();
-                  },
-                  className: "klun-table__editor",
-                  style: { textAlign: c.align || "left" }
-                }
-              ) : null;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "td",
-                {
-                  onDoubleClick: c.editable && !isEditing ? (e) => {
-                    e.stopPropagation();
-                    startEdit(id, c, row);
-                  } : void 0,
-                  className: chunkTPGAXYFU_cjs.cx(
-                    "klun-table__td",
-                    tdBorder,
-                    isEditing && "klun-table__td--editing",
-                    (c.nowrap || c.ellipsis) && "klun-table__td--nowrap",
-                    c.ellipsis && "klun-table__td--ellipsis",
-                    c.editable && !isEditing && "klun-table__td--editable",
-                    !last && vBorderClass,
-                    fx.cls
-                  ),
-                  style: {
-                    textAlign: c.align || "left",
-                    ...c.ellipsis ? { maxWidth: c.width || 200 } : null,
-                    ...fx.style
-                  },
-                  title: c.editable && !isEditing ? table.editHint : c.ellipsis && typeof content === "string" ? content : void 0,
-                  children: isEditing ? editor : tree && ci === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "klun-table__tree-cell", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        className: "klun-table__tree-indent",
-                        style: { width: depth * indentSize }
-                      }
-                    ),
-                    treeHasKids ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        "aria-label": treeIsOpen ? table.collapse : table.expand,
-                        "aria-expanded": treeIsOpen,
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          toggleTree();
-                        },
-                        className: "klun-table__tree-toggle",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          "i",
-                          {
-                            className: chunkTPGAXYFU_cjs.cx(
-                              "ri-arrow-right-s-line",
-                              "klun-table__chevron",
-                              treeIsOpen && "klun-table__chevron--open"
-                            )
-                          }
-                        )
-                      }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-table__tree-spacer" }),
-                    inner
-                  ] }) : inner
+                style: {
+                  textAlign: c.align || "left",
+                  ...c.ellipsis ? { maxWidth: c.width || 200 } : null,
+                  ...fx.style
                 },
-                c.key
-              );
-            })
-          ]
-        }
-      ),
-      expandCol && isOpen ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "klun-table__expand-row", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: colCount, className: "klun-table__expand-cell", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-table__expand-panel", children: expandable.render(row) }) }) }) : null
-    ] }, id);
-  }) });
+                title: c.editable && !isEditing ? table.editHint : c.ellipsis && typeof content === "string" ? content : void 0,
+                children: isEditing ? editor : tree && ci === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "klun-table__tree-cell", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "klun-table__tree-indent",
+                      style: { width: depth * indentSize }
+                    }
+                  ),
+                  treeHasKids ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": treeIsOpen ? table.collapse : table.expand,
+                      "aria-expanded": treeIsOpen,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        toggleTree();
+                      },
+                      className: "klun-table__tree-toggle",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "i",
+                        {
+                          className: chunkTPGAXYFU_cjs.cx(
+                            "ri-arrow-right-s-line",
+                            "klun-table__chevron",
+                            treeIsOpen && "klun-table__chevron--open"
+                          )
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-table__tree-spacer" }),
+                  inner
+                ] }) : inner
+              },
+              c.key
+            );
+          })
+        ]
+      }
+    ),
+    expandCol && isOpen ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "klun-table__expand-row", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: colCount, className: "klun-table__expand-cell", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-table__expand-panel", children: expandable.render(row) }) }) }) : null
+  ] });
+}
+function TableBody({
+  loading,
+  loadingRows,
+  pageRows,
+  empty,
+  displayRows,
+  dragCol,
+  expandCol,
+  selectable,
+  visibleColumns,
+  colCount,
+  ...row
+}) {
+  const { table } = useLocale();
+  const skel = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-table__skel" });
+  const bodyRows = displayRows.map((node, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    TableRow,
+    {
+      node,
+      index,
+      dragCol,
+      expandCol,
+      selectable,
+      visibleColumns,
+      colCount,
+      ...row
+    },
+    node.id
+  ));
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? Array.from({ length: loadingRows }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: i ? "klun-table__row--bordered" : void 0, children: [
+    dragCol ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "klun-table__td" }) : null,
+    expandCol ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "klun-table__td", children: skel }) : null,
+    selectable ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "klun-table__td", children: skel }) : null,
+    visibleColumns.map((c) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "klun-table__td", children: skel }, c.key))
+  ] }, "sk" + i)) : pageRows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: colCount, className: "klun-table__empty-cell", children: empty != null ? empty : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "klun-table__empty", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-inbox-line klun-table__empty-icon" }),
+    table.noData
+  ] }) }) }) : dragCol ? /* @__PURE__ */ jsxRuntime.jsx(
+    sortable.SortableContext,
+    {
+      items: displayRows.map((n) => n.id),
+      strategy: sortable.verticalListSortingStrategy,
+      children: bodyRows
+    }
+  ) : bodyRows });
 }
 function TableFooter({
   summary,
@@ -5145,28 +5280,6 @@ function useExpandedRows({
   }, [tree, pageRows, treeOpen, childrenKey, getRowId]);
   return { treeOpen, setTreeOpen, expanded, setExpanded, displayRows };
 }
-function useRowReorder({
-  rows,
-  getRowId,
-  onReorder
-}) {
-  const [drag, setDrag] = react.useState(null);
-  const reorder = (fromId, toId, after) => {
-    if (fromId === toId) return;
-    const ids = rows.map(getRowId);
-    const from = ids.indexOf(fromId);
-    const to = ids.indexOf(toId);
-    if (from < 0 || to < 0) return;
-    const next = rows.slice();
-    const [moved] = next.splice(from, 1);
-    let insert = rows.findIndex((r, i) => getRowId(r, i) === toId);
-    if (after) insert += 1;
-    if (from < insert) insert -= 1;
-    next.splice(insert, 0, moved);
-    onReorder?.(next, from, insert);
-  };
-  return { drag, setDrag, reorder };
-}
 function useCellEdit({
   columns,
   rows,
@@ -5190,6 +5303,27 @@ function useCellEdit({
   const cancelEdit = () => setEditing(null);
   return { editing, setEditing, startEdit, commitEdit, cancelEdit };
 }
+var dragModifiers = [({ transform }) => ({ ...transform, x: 0 })];
+function RowsDnd({
+  enabled,
+  sensors,
+  onDragEnd,
+  instructions,
+  children
+}) {
+  if (!enabled) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.DndContext,
+    {
+      sensors,
+      collisionDetection: core.closestCenter,
+      modifiers: dragModifiers,
+      onDragEnd,
+      accessibility: { screenReaderInstructions: { draggable: instructions } },
+      children
+    }
+  );
+}
 var DENSITY = {
   compact: "klun-table--compact",
   comfortable: "klun-table--comfortable",
@@ -5203,7 +5337,7 @@ function Table({
   selected = [],
   onSelectRow,
   onSelectAll,
-  sortable = false,
+  sortable: sortable$1 = false,
   sort,
   onSortChange,
   defaultSort = null,
@@ -5336,7 +5470,16 @@ function Table({
   );
   const showToolbar = title != null || toolbar != null || !!exportable || columnSettings;
   const clearSelection = () => onSelectAll && onSelectAll([]);
-  const { drag, setDrag, reorder } = useRowReorder({ rows, getRowId, onReorder });
+  const { table: t } = useLocale();
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor, { activationConstraint: { distance: 4 } }),
+    core.useSensor(core.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
+  );
+  const handleDragEnd = ({ active, over }) => {
+    if (!over) return;
+    const moved = reorderRows(rows, active.id, over.id, getRowId);
+    if (moved) onReorder?.(moved.next, moved.from, moved.to);
+  };
   const { editing, setEditing, startEdit, commitEdit, cancelEdit } = useCellEdit({
     columns,
     rows,
@@ -5379,113 +5522,119 @@ function Table({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          RowsDnd,
           {
-            className: "klun-table__scroller",
-            style: stickyHeader ? {
-              ["--klun-table-max-height"]: `${style && style.maxHeight || 420}${typeof (style && style.maxHeight) === "number" ? "px" : ""}`
-            } : void 0,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "table",
+            enabled: dragCol,
+            sensors,
+            onDragEnd: handleDragEnd,
+            instructions: t.dragToReorder,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
               {
-                className: chunkTPGAXYFU_cjs.cx(
-                  "klun-table__table",
-                  Object.keys(colW).length && "klun-table__table--fixed-layout"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
-                    dragCol ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "klun-table__col-util" }) : null,
-                    expandCol ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "klun-table__col-lead" }) : null,
-                    selectable ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "klun-table__col-lead" }) : null,
-                    columns.map((c) => {
-                      const w = widthOf(c);
-                      return hiddenCols.has(c.key) ? null : /* @__PURE__ */ jsxRuntime.jsx("col", { style: w ? { width: w } : void 0 }, c.key);
-                    })
-                  ] }),
-                  caption ? /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "klun-table__caption", children: caption }) : null,
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TableHead,
-                    {
-                      dragCol,
-                      expandCol,
-                      selectable,
-                      leftFixed,
-                      vBorderClass,
-                      selectionType,
-                      allOn,
-                      someOn,
-                      toggleAll,
-                      visibleColumns,
-                      sortable,
-                      activeSort,
-                      resizable,
-                      widthOf,
-                      fixedCell,
-                      setSort,
-                      activeFilters,
-                      setFilter,
-                      startResize
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TableBody,
-                    {
-                      loading,
-                      loadingRows,
-                      dragCol,
-                      expandCol,
-                      selectable,
-                      visibleColumns,
-                      pageRows,
-                      colCount,
-                      empty,
-                      displayRows,
-                      treeOpen,
-                      setTreeOpen,
-                      selected,
-                      onRowClick,
-                      rowHref,
-                      expanded,
-                      setExpanded,
-                      expandable,
-                      rowStatus,
-                      drag,
-                      setDrag,
-                      reorder,
-                      zebra,
-                      contextMenu,
-                      copyable,
-                      copyRow,
-                      setMenu,
-                      leftFixed,
-                      vBorderClass,
-                      selectionType,
-                      onSelectRow,
-                      fixedCell,
-                      editing,
-                      setEditing,
-                      startEdit,
-                      commitEdit,
-                      cancelEdit,
-                      tree,
-                      indentSize,
-                      onCopy
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TableFooter,
-                    {
-                      summary,
-                      expandCol,
-                      selectable,
-                      pageRows,
-                      visibleColumns,
-                      vBorderClass,
-                      footer,
-                      colCount
-                    }
-                  )
-                ]
+                className: "klun-table__scroller",
+                style: stickyHeader ? {
+                  ["--klun-table-max-height"]: `${style && style.maxHeight || 420}${typeof (style && style.maxHeight) === "number" ? "px" : ""}`
+                } : void 0,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "table",
+                  {
+                    className: chunkTPGAXYFU_cjs.cx(
+                      "klun-table__table",
+                      Object.keys(colW).length && "klun-table__table--fixed-layout"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
+                        dragCol ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "klun-table__col-util" }) : null,
+                        expandCol ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "klun-table__col-lead" }) : null,
+                        selectable ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "klun-table__col-lead" }) : null,
+                        columns.map((c) => {
+                          const w = widthOf(c);
+                          return hiddenCols.has(c.key) ? null : /* @__PURE__ */ jsxRuntime.jsx("col", { style: w ? { width: w } : void 0 }, c.key);
+                        })
+                      ] }),
+                      caption ? /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "klun-table__caption", children: caption }) : null,
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        TableHead,
+                        {
+                          dragCol,
+                          expandCol,
+                          selectable,
+                          leftFixed,
+                          vBorderClass,
+                          selectionType,
+                          allOn,
+                          someOn,
+                          toggleAll,
+                          visibleColumns,
+                          sortable: sortable$1,
+                          activeSort,
+                          resizable,
+                          widthOf,
+                          fixedCell,
+                          setSort,
+                          activeFilters,
+                          setFilter,
+                          startResize
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        TableBody,
+                        {
+                          loading,
+                          loadingRows,
+                          dragCol,
+                          expandCol,
+                          selectable,
+                          visibleColumns,
+                          pageRows,
+                          colCount,
+                          empty,
+                          displayRows,
+                          treeOpen,
+                          setTreeOpen,
+                          selected,
+                          onRowClick,
+                          rowHref,
+                          expanded,
+                          setExpanded,
+                          expandable,
+                          rowStatus,
+                          zebra,
+                          contextMenu,
+                          copyable,
+                          copyRow,
+                          setMenu,
+                          leftFixed,
+                          vBorderClass,
+                          selectionType,
+                          onSelectRow,
+                          fixedCell,
+                          editing,
+                          setEditing,
+                          startEdit,
+                          commitEdit,
+                          cancelEdit,
+                          tree,
+                          indentSize,
+                          onCopy
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        TableFooter,
+                        {
+                          summary,
+                          expandCol,
+                          selectable,
+                          pageRows,
+                          visibleColumns,
+                          vBorderClass,
+                          footer,
+                          colCount
+                        }
+                      )
+                    ]
+                  }
+                )
               }
             )
           }
@@ -12256,5 +12405,5 @@ exports.useSize = useSize;
 exports.viVN = viVN;
 exports.zhCN = zhCN;
 exports.zhTW = zhTW;
-//# sourceMappingURL=chunk-XLK6BYW3.cjs.map
-//# sourceMappingURL=chunk-XLK6BYW3.cjs.map
+//# sourceMappingURL=chunk-IETPQZRQ.cjs.map
+//# sourceMappingURL=chunk-IETPQZRQ.cjs.map