@leavepulse/ui 0.77.2 → 0.78.0

package/dist/components/LpTable.vue.js

@@ -1,19 +1,20 @@
-import { defineComponent, computed, useAttrs, ref, shallowRef, watch, onMounted, onBeforeUnmount, useId, h, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, createElementVNode, Transition, renderSlot, mergeProps, normalizeStyle, TransitionGroup, unref, withModifiers, nextTick } from "vue";
+import { defineComponent, computed, useAttrs, ref, shallowRef, watch, onMounted, onBeforeUnmount, useId, h, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, createElementVNode, Transition, renderSlot, mergeProps, normalizeStyle, withModifiers, TransitionGroup, unref, nextTick } from "vue";
 import { usePaletteScope, suppressPaletteDiscovery, usePaletteCommands } from "../composables/usePaletteCommands.js";
 import { menuPaletteCommands } from "./commandPalette.js";
-import { _ as _sfc_main$1 } from "../chunks/LpDataList-Jxyl9H5w.js";
-import { _ as _sfc_main$9 } from "../chunks/LpCheckbox-Cs4SHaHX.js";
-import { _ as _sfc_main$8 } from "../chunks/LpContextMenu-rx2tCjwk.js";
-import { _ as _sfc_main$d } from "../chunks/LpEmptyState-EQHiRYhG.js";
-import { _ as _sfc_main$5 } from "../chunks/LpBadge-wUYLN4U9.js";
-import { _ as _sfc_main$3 } from "../chunks/LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$1 } from "../chunks/LpDataList-DgBeM01y.js";
+import { _ as _sfc_main$9 } from "../chunks/LpCheckbox-D6RuDW4X.js";
+import { _ as _sfc_main$8 } from "../chunks/LpContextMenu--eMGIql6.js";
+import { _ as _sfc_main$e } from "../chunks/LpEditable-DVT0Rh8F.js";
+import { _ as _sfc_main$d } from "../chunks/LpEmptyState-DurPF001.js";
+import { _ as _sfc_main$5 } from "../chunks/LpBadge-D5QQdDQ_.js";
+import { _ as _sfc_main$3 } from "../chunks/LpIcon-C6JpQ5td.js";
 import { _ as _sfc_main$c } from "../chunks/LpSkeleton-BB6XIV-w.js";
-import { _ as _sfc_main$e } from "../chunks/LpPagination-BIIiYHXR.js";
-import { _ as _sfc_main$a } from "../chunks/LpPopover-DmZ3wUtP.js";
-import { _ as _sfc_main$7 } from "../chunks/LpScrollArea-MyEnVB_5.js";
+import { _ as _sfc_main$f } from "../chunks/LpPagination-snQ020xQ.js";
+import { _ as _sfc_main$a } from "../chunks/LpPopover-BQSuxtai.js";
+import { _ as _sfc_main$7 } from "../chunks/LpScrollArea-ay4Xo_hg.js";
 import { _ as _sfc_main$6 } from "../chunks/LpRollingText-B54Pje7P.js";
-import { _ as _sfc_main$4 } from "../chunks/LpShift-CCq7dofl.js";
-import { _ as _sfc_main$b } from "../chunks/LpTableFilter-CiVBpaq0.js";
+import { _ as _sfc_main$4 } from "../chunks/LpShift-DAgS_d2x.js";
+import { _ as _sfc_main$b } from "../chunks/LpTableFilter-DgARTsA1.js";
 import { useKitStorage } from "../composables/usePersisted.js";
 import { useAsyncTask } from "../composables/useAsyncTask.js";
 import { useTableFacets } from "./tableFacets.js";
@@ -22,13 +23,16 @@ import { usePaintSelect } from "../composables/usePaintSelect.js";
 import { useRovingFocus } from "../composables/useRovingFocus.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useResizeObserver } from "../composables/useResizeObserver.js";
-import { compareValues } from "./tableSort.js";
-import { _ as _sfc_main$2 } from "../chunks/LpButton-CFb44IjC.js";
+import { orderPinned, pinOffsets, groupRows, rowWindow, presetHidden, sortByKeys, nextSorts, clampColumnWidth } from "./tableFeatures.js";
+import { devWarn } from "../composables/devWarn.js";
+import { startPointerDrag } from "../composables/pointerDrag.js";
+import { isHTMLElement, nodeWindow } from "../composables/realm.js";
+import { _ as _sfc_main$2 } from "../chunks/LpButton-DSHioIfD.js";
 import { toCsv, downloadFile, fileStem } from "./exportData.js";
 import { toHiddenSets, sameHidden, summarizeShown, parseTableState, mergeRestored, serializeTableState, fromHiddenSets } from "./tableFilter.js";
 import { resolveRowMenu } from "./tableRowMenu.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTable-Bv-EcQs7.css';const _hoisted_1 = {
+import '../assets/LpTable-CCk0ZHo7.css';const _hoisted_1 = {
   key: 0,
   class: "flex justify-end"
 };
@@ -52,22 +56,47 @@ const _hoisted_8 = {
   class: "flex items-center gap-2"
 };
 const _hoisted_9 = { class: "hidden sm:inline" };
-const _hoisted_10 = { class: "border-b border-line bg-surface-soft" };
-const _hoisted_11 = ["inert"];
-const _hoisted_12 = ["aria-sort"];
-const _hoisted_13 = ["onClick"];
-const _hoisted_14 = ["aria-label", "data-lp-filter"];
+const _hoisted_10 = ["aria-rowcount"];
+const _hoisted_11 = { class: "border-b border-line bg-surface-soft" };
+const _hoisted_12 = ["inert"];
+const _hoisted_13 = ["data-lp-col", "aria-sort"];
+const _hoisted_14 = ["onClick"];
 const _hoisted_15 = {
+  key: 1,
+  class: "tabular-nums text-brand"
+};
+const _hoisted_16 = ["aria-label", "data-lp-filter"];
+const _hoisted_17 = ["aria-label", "aria-valuenow", "data-lp-resize", "onPointerdown", "onDblclick", "onKeydown"];
+const _hoisted_18 = {
   key: 0,
   class: "sr-only"
 };
-const _hoisted_16 = {
+const _hoisted_19 = {
   key: "lp-table-empty",
   class: "lp-row-empty"
 };
-const _hoisted_17 = ["colspan"];
-const _hoisted_18 = ["onContextmenu", "data-paint-key", "data-lp-context-row", "onClick", "onPointerdown"];
-const _hoisted_19 = ["onPointerdown"];
+const _hoisted_20 = ["colspan"];
+const _hoisted_21 = {
+  key: "lp-virtual-before",
+  "aria-hidden": "true"
+};
+const _hoisted_22 = ["colspan"];
+const _hoisted_23 = ["colspan"];
+const _hoisted_24 = ["aria-expanded", "aria-label", "onClick"];
+const _hoisted_25 = {
+  key: 1,
+  class: "border-b border-line/60 last:border-0",
+  "data-lp-row-detail": ""
+};
+const _hoisted_26 = ["colspan"];
+const _hoisted_27 = ["onContextmenu", "aria-rowindex", "data-paint-key", "data-lp-context-row", "onClick", "onPointerdown"];
+const _hoisted_28 = ["aria-expanded", "aria-label", "onClick"];
+const _hoisted_29 = ["onPointerdown"];
+const _hoisted_30 = {
+  key: "lp-virtual-after",
+  "aria-hidden": "true"
+};
+const _hoisted_31 = ["colspan"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -105,9 +134,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     density: { default: "comfortable" },
     summary: { type: Boolean, default: false },
     persist: {},
-    allMatching: { type: Boolean, default: false }
+    allMatching: { type: Boolean, default: false },
+    selectionToken: { type: Boolean },
+    multiSort: { type: Boolean },
+    sorts: { default: void 0 },
+    resizableColumns: { type: Boolean },
+    columnWidths: { default: void 0 },
+    columnPresets: {},
+    columnPreset: { default: void 0 },
+    groupBy: { type: [String, Function], default: void 0 },
+    groupLabel: {},
+    collapsedGroups: { default: void 0 },
+    expandable: { type: [Boolean, Function] },
+    expanded: { default: void 0 },
+    virtualRowHeight: { default: void 0 },
+    virtualOverscan: { default: 6 }
   },
-  emits: ["update:selected", "update:sort", "update:filters", "resetFilters", "update:allMatching", "rowClick"],
+  emits: ["update:selected", "update:sort", "update:filters", "resetFilters", "update:allMatching", "update:selectionToken", "update:sorts", "update:columnWidths", "update:columnPreset", "update:collapsedGroups", "update:expanded", "cellEdit", "rowClick"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const labelSet = useLabels(
@@ -145,7 +188,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         clearSelection: "Clear selection",
         pageSelected: "All {count} on this page are selected.",
         selectAllMatching: "Select all {total}",
-        allMatchingSelected: "All {total} are selected."
+        allMatchingSelected: "All {total} are selected.",
+        columnPresets: "Column presets",
+        resizeColumn: "Resize {column}",
+        expandRow: "Expand row",
+        collapseRow: "Collapse row",
+        groupCount: "{label} ({count})",
+        expandGroup: "Expand {label}",
+        collapseGroup: "Collapse {label}"
       },
       () => props.labels
     );
@@ -184,10 +234,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function openRowMenu(event) {
       const button = event.currentTarget;
-      if (!(button instanceof HTMLElement)) return;
+      if (!isHTMLElement(button)) return;
       const rect = button.getBoundingClientRect();
+      const win = nodeWindow(button);
       button.dispatchEvent(
-        new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: rect.left, clientY: rect.bottom })
+        new win.MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: rect.left, clientY: rect.bottom })
       );
     }
     const rowMenuFor = computed(
@@ -206,7 +257,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return [...row, { ...table[0], separatorBefore: true }, ...table.slice(1)];
     });
     const ownSort = ref(null);
-    const activeSort = computed(() => props.sort !== void 0 ? props.sort : ownSort.value);
+    const ownSorts = ref([]);
+    const activeSort = computed(() => {
+      if (props.multiSort) return (props.sorts ?? ownSorts.value)[0] ?? null;
+      return props.sort !== void 0 ? props.sort : ownSort.value;
+    });
+    const sortList = computed(() => {
+      if (props.multiSort) return props.sorts ?? ownSorts.value;
+      return activeSort.value ? [activeSort.value] : [];
+    });
+    const sortOf = (col) => sortList.value.find((sort) => sort.key === col.key);
     const loaded = shallowRef([]);
     const total = ref(0);
     const facets = ref({});
@@ -216,6 +276,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const busy = computed(() => props.loading || task.pending.value);
     const sourceRows = computed(() => props.load ? loaded.value : props.rows);
     const sourceIndex = computed(() => new Map(sourceRows.value.map((row, i) => [row, i])));
+    let warnedRowKey = false;
+    watch(sourceRows, () => {
+      if (warnedRowKey || props.rowKey || !props.selected.length) return;
+      warnedRowKey = true;
+      devWarn("LpTable: rows were replaced while some are selected, and without `rowKey` the selection now points at positions, not rows. Set `rowKey`.");
+    });
     const frameEl = ref(null);
     const floor = ref(0);
     async function holdHeight() {
@@ -237,12 +303,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("update:filters", fromHiddenSets(next));
     }
     const animating = ref(false);
+    const MOTION_WINDOW_MS = 600;
     let motionTimer;
     function withMotion(change) {
       if (!props.load) {
         animating.value = true;
         if (motionTimer) clearTimeout(motionTimer);
-        motionTimer = setTimeout(() => animating.value = false, 600);
+        motionTimer = setTimeout(() => animating.value = false, MOTION_WINDOW_MS);
       }
       change();
     }
@@ -259,6 +326,89 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         (c) => !hiddenColumns.value.has(c.key) && !(c.hideBelow && tableWidth.value < c.hideBelow)
       )
     );
+    const shownColumns = computed(() => orderPinned(visibleColumns.value));
+    const RESIZE_STEP_PX = 16;
+    const UNSET_COLUMN_PX = 120;
+    const TICK_COLUMN_WIDTH = "3.25rem";
+    const EXPAND_COLUMN_WIDTH = "2.5rem";
+    const ownWidths = ref({});
+    const widths = computed(() => props.columnWidths ?? ownWidths.value);
+    const fixedLayout = computed(() => !!props.resizableColumns && Object.keys(widths.value).length > 0);
+    const tableStyle = computed(() => {
+      if (!fixedLayout.value) return void 0;
+      const sum = shownColumns.value.reduce((room, col) => room + (widths.value[col.key] ?? UNSET_COLUMN_PX), 0);
+      return { minWidth: `${sum}px` };
+    });
+    function writeWidths(next) {
+      ownWidths.value = next;
+      emit("update:columnWidths", next);
+    }
+    const canResize = (col) => !!props.resizableColumns && col.resizable !== false && !!col.label;
+    const measuredCol = (col) => props.resizableColumns || col.pin ? col.key : void 0;
+    function headerWidths() {
+      const measured = {};
+      for (const cell of frameEl.value?.querySelectorAll("th[data-lp-col]") ?? []) {
+        measured[cell.dataset.lpCol] = cell.offsetWidth;
+      }
+      return measured;
+    }
+    function setWidth(col, width) {
+      writeWidths({ ...widths.value, [col.key]: clampColumnWidth(width, col.minWidth, col.maxWidth) });
+    }
+    function clearWidth(col) {
+      const { [col.key]: _gone, ...rest } = widths.value;
+      writeWidths(rest);
+    }
+    function startResize(event, col) {
+      const handle = event.currentTarget;
+      if (!isHTMLElement(handle) || event.button !== 0) return;
+      event.stopPropagation();
+      const measured = headerWidths();
+      if (!fixedLayout.value) writeWidths(measured);
+      const from = measured[col.key] ?? handle.parentElement?.offsetWidth ?? 0;
+      const startX = event.clientX;
+      startPointerDrag(event, { move: (e) => setWidth(col, from + e.clientX - startX), end: () => {
+      } });
+    }
+    function onResizeKey(event, col) {
+      const step = event.key === "ArrowRight" ? RESIZE_STEP_PX : event.key === "ArrowLeft" ? -RESIZE_STEP_PX : 0;
+      if (!step) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const measured = headerWidths();
+      if (!fixedLayout.value) writeWidths(measured);
+      setWidth(col, (widths.value[col.key] ?? measured[col.key] ?? UNSET_COLUMN_PX) + step);
+    }
+    const pinWidths = ref({});
+    const pinOffset = computed(() => pinOffsets(shownColumns.value, pinWidths.value));
+    function measurePins() {
+      if (shownColumns.value.some((col) => col.pin)) pinWidths.value = headerWidths();
+    }
+    watch([shownColumns, widths, tableWidth], measurePins, { flush: "post" });
+    onMounted(measurePins);
+    const PIN_HEAD = "sticky z-[11] bg-surface-soft";
+    const PIN_CELL = "sticky z-[1] bg-surface";
+    const pinStyle = (col) => col.pin ? { [col.pin]: `${pinOffset.value[col.key] ?? 0}px` } : void 0;
+    function headStyle(col) {
+      const width = props.resizableColumns ? widths.value[col.key] : void 0;
+      const size = width != null ? `${width}px` : col.width;
+      if (!size && !col.pin) return void 0;
+      return { ...size ? { width: size } : {}, ...pinStyle(col) };
+    }
+    const ownPreset = ref(null);
+    const activePreset = computed(() => props.columnPreset !== void 0 ? props.columnPreset : ownPreset.value);
+    function showPreset(id) {
+      const preset = props.columnPresets?.find((p) => p.id === id);
+      if (!preset) return;
+      hiddenColumns.value = presetHidden(preset, props.columns);
+      if (preset.widths && props.resizableColumns) writeWidths({ ...widths.value, ...preset.widths });
+    }
+    function choosePreset(id) {
+      ownPreset.value = id;
+      emit("update:columnPreset", id);
+      showPreset(id);
+    }
+    watch(() => props.columnPreset, showPreset, { immediate: true });
     const facetColumns = computed(() => props.columns.filter((col) => col.filterable).map((col) => col.key));
     const localFacets = useTableFacets({
       rows: () => props.load ? [] : props.rows,
@@ -322,6 +472,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (next.has(key)) next.delete(key);
       else next.add(key);
       hiddenColumns.value = next;
+      if (activePreset.value != null) {
+        ownPreset.value = null;
+        emit("update:columnPreset", null);
+      }
     }
     const filteredRows = computed(() => {
       if (props.load) return sourceRows.value;
@@ -332,48 +486,47 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       );
     });
     function sortRows(rows) {
-      const s = activeSort.value;
-      if (!s || props.load) return rows;
-      const col = props.columns.find((c) => c.key === s.key);
-      if (!col?.sortable) return rows;
-      const factor = s.dir === "asc" ? 1 : -1;
-      const own = col.compare;
-      const value = col.sortValue ?? ((row) => row[s.key]);
-      return [...rows].sort((a, b) => (own ? own(a, b) : compareValues(value(a), value(b))) * factor);
+      if (!sortList.value.length || props.load) return rows;
+      return sortByKeys(rows, sortList.value, props.columns);
     }
     const displayRows = computed(() => sortRows(filteredRows.value));
-    function toggleSort(col) {
-      if (!col.sortable) return;
-      const s = activeSort.value;
-      let next;
-      if (!s || s.key !== col.key) next = { key: col.key, dir: "asc" };
-      else if (s.dir === "asc") next = { key: col.key, dir: "desc" };
-      else next = null;
+    function writeSorts(next) {
       withMotion(() => {
-        ownSort.value = next;
-        emit("update:sort", next);
+        ownSorts.value = next;
+        ownSort.value = next[0] ?? null;
+        if (props.multiSort) emit("update:sorts", next);
+        emit("update:sort", next[0] ?? null);
       });
     }
+    function toggleSort(col, event) {
+      if (!col.sortable) return;
+      writeSorts(nextSorts(sortList.value, col.key, !!(props.multiSort && event?.shiftKey)));
+    }
     function sortIcon(col) {
-      const s = activeSort.value;
-      if (s?.key !== col.key) return "lucide:chevrons-up-down";
+      const s = sortOf(col);
+      if (!s) return "lucide:chevrons-up-down";
       return s.dir === "asc" ? "lucide:arrow-up" : "lucide:arrow-down";
     }
+    function sortPosition(col) {
+      if (sortList.value.length < 2) return void 0;
+      const at = sortList.value.findIndex((sort) => sort.key === col.key);
+      return at < 0 ? void 0 : at + 1;
+    }
+    const MENU_CLOSE_LIMIT_MS = 600;
+    const FOCUS_RETURN_MS = 30;
     function openFilter(key) {
       const open = () => frameEl.value?.querySelector(`[data-lp-filter="${CSS.escape(key)}"]`)?.click();
       const started = performance.now();
+      const closing = [...(frameEl.value?.ownerDocument ?? document).querySelectorAll("[data-reka-menu-content]")];
       const wait = () => {
-        if (!document.querySelector("[data-reka-menu-content]") || performance.now() - started > 600) setTimeout(open, 30);
+        if (!closing.some((menu) => menu.isConnected) || performance.now() - started > MENU_CLOSE_LIMIT_MS) setTimeout(open, FOCUS_RETURN_MS);
         else requestAnimationFrame(wait);
       };
       requestAnimationFrame(wait);
     }
     function headerMenu(col) {
       const s = activeSort.value;
-      const set = (next) => () => withMotion(() => {
-        ownSort.value = next;
-        emit("update:sort", next);
-      });
+      const set = (next) => () => writeSorts(next ? [next] : []);
       const items = [];
       if (col.sortable) {
         items.push(
@@ -420,8 +573,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const offered = props.columns.filter((c) => !c.alwaysVisible && c.label);
       const exportItem = props.exportable ? [{ label: text.value.exportCsv, icon: "lucide:download", onSelect: () => exportCsv() }] : [];
       if (!offered.length) return exportItem;
+      const presets = props.columnPresets?.length ? [{
+        label: text.value.columnPresets,
+        icon: "lucide:layout-template",
+        children: props.columnPresets.map((preset) => ({
+          label: preset.label,
+          checked: activePreset.value === preset.id,
+          onSelect: () => choosePreset(preset.id)
+        }))
+      }] : [];
       return [
         ...exportItem,
+        ...presets,
         {
           label: text.value.columns,
           icon: "lucide:columns-3",
@@ -443,6 +606,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         Object.entries(hiddenValues.value).filter(([, set]) => set.size).map(([key, set]) => [key, [...set]])
       );
       const query = { page: page.value, pageSize: props.pageSize, sort: activeSort.value, hidden };
+      if (props.multiSort) query.sorts = sortList.value;
       task.run((signal) => load(query, signal), {
         delay,
         apply: (result) => {
@@ -462,7 +626,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       });
     }
-    watch([activeSort, hiddenValues, () => props.pageSize], () => {
+    watch([sortList, hiddenValues, () => props.pageSize], () => {
       if (!props.load) return;
       if (page.value !== 1) page.value = 1;
       else fetchPage(props.debounce);
@@ -477,6 +641,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (state) {
           if (state.sort !== void 0) {
             ownSort.value = state.sort;
+            ownSorts.value = state.sort ? [state.sort] : [];
             emit("update:sort", state.sort);
           }
           if (state.hidden) writeHidden(mergeRestored(hiddenValues.value, state.hidden));
@@ -510,20 +675,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }));
       const csv = toCsv(rows, columns, options);
       if (options.download !== false) {
-        downloadFile(`${fileStem(options.filename ?? props.exportFilename, "table")}.csv`, csv, "text/csv;charset=utf-8");
+        downloadFile(`${fileStem(options.filename ?? props.exportFilename, "table")}.csv`, csv, "text/csv;charset=utf-8", tableEl.value?.ownerDocument);
       }
       return csv;
     }
     __expose({ reload: () => fetchPage(), exportCsv });
     const selectedSet = computed(() => new Set(props.selected));
+    const excluded = ref(/* @__PURE__ */ new Set());
+    const tokenActive = computed(() => !!props.selectionToken && !!props.load && props.allMatching);
+    const isSelected = (key) => tokenActive.value ? !excluded.value.has(key) : selectedSet.value.has(key);
     const allKeys = computed(() => filteredRows.value.map((r, i) => keyFor(r, i)));
     const allChecked = computed(
-      () => allKeys.value.length > 0 && allKeys.value.every((k) => selectedSet.value.has(k))
+      () => allKeys.value.length > 0 && allKeys.value.every(isSelected)
     );
     const someChecked = computed(
-      () => !allChecked.value && allKeys.value.some((k) => selectedSet.value.has(k))
+      () => !allChecked.value && allKeys.value.some(isSelected)
     );
     function toggleAll(checked) {
+      if (tokenActive.value) {
+        if (checked) excluded.value = /* @__PURE__ */ new Set();
+        else clearSelection();
+        return;
+      }
       const next = new Set(selectedSet.value);
       for (const key of allKeys.value) {
         if (checked) next.add(key);
@@ -532,6 +705,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("update:selected", [...next]);
     }
     function toggleRow(key, checked) {
+      if (tokenActive.value) {
+        const out = new Set(excluded.value);
+        if (checked) out.delete(key);
+        else out.add(key);
+        if (out.size >= total.value) clearSelection();
+        else excluded.value = out;
+        return;
+      }
       const next = new Set(selectedSet.value);
       if (checked) next.add(key);
       else next.delete(key);
@@ -542,7 +723,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const paint = usePaintSelect({
       root: frameEl,
-      enabled: () => !!props.selectable,
+      enabled: () => !!props.selectable && !tokenActive.value,
       selection: () => props.selected,
       set: (keys) => emit("update:selected", keys),
       resolve: (raw) => keyByText.value.get(raw),
@@ -556,7 +737,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function clearSelection() {
       emit("update:selected", []);
       if (props.allMatching) emit("update:allMatching", false);
+      excluded.value = /* @__PURE__ */ new Set();
     }
+    watch([tokenActive, sortList, excluded, total], () => {
+      if (!tokenActive.value) {
+        if (excluded.value.size) excluded.value = /* @__PURE__ */ new Set();
+        emit("update:selectionToken", null);
+        return;
+      }
+      emit("update:selectionToken", {
+        sorts: sortList.value,
+        hidden: Object.fromEntries(
+          Object.entries(hiddenValues.value).filter(([, set]) => set.size).map(([key, set]) => [key, [...set]])
+        ),
+        excluded: [...excluded.value],
+        total: total.value
+      });
+    });
+    watch(hiddenValues, () => {
+      if (tokenActive.value) clearSelection();
+    });
     const OWN_CLICKS = "a,button,input,select,textarea,label,[role=button],[role=checkbox],[contenteditable=true]";
     function onRowPointerDown(event, key) {
       if (!holdMode.value) return;
@@ -564,7 +764,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       paint.onPointerDown(event, key, { hold: 420 });
     }
     function onRowClick(row, key) {
-      if (holdMode.value && props.selected.length) toggleRow(key, !selectedSet.value.has(key));
+      if (holdMode.value && props.selected.length) toggleRow(key, !isSelected(key));
       else emit("rowClick", row);
     }
     useHotkeys(
@@ -582,10 +782,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => pageKeys.value.length > 0 && pageKeys.value.every((k) => selectedSet.value.has(k))
     );
     watch(pageAllSelected, (all) => {
-      if (!all && props.allMatching) emit("update:allMatching", false);
+      if (!all && props.allMatching && !props.selectionToken) emit("update:allMatching", false);
     });
     const statusText = computed(() => {
       if (!(props.selectable && props.selected.length)) return countText.value;
+      if (tokenActive.value && excluded.value.size) {
+        return text.value.selectedCount.replace("{count}", String(total.value - excluded.value.size));
+      }
       return props.allMatching ? text.value.allMatchingSelected.replace("{total}", String(total.value)) : text.value.selectedCount.replace("{count}", String(props.selected.length));
     });
     const countText = computed(() => {
@@ -610,12 +813,87 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function skeletonWidth(row, col) {
       return `${SKELETON_WIDTHS[(row * 3 + col * 2) % SKELETON_WIDTHS.length]}%`;
     }
-    const colSpan = computed(() => visibleColumns.value.length + (props.selectable ? 1 : 0));
+    const VIEWPORT = "[data-reka-scroll-area-viewport]";
+    const expansionOn = computed(() => !!props.expandable && !props.virtualRowHeight);
+    const ownExpanded = ref([]);
+    const expandedKeys = computed(() => new Set(props.expanded ?? ownExpanded.value));
+    const canExpand = (row) => typeof props.expandable === "function" ? props.expandable(row) : !!props.expandable;
+    function toggleExpanded(key) {
+      const next = new Set(expandedKeys.value);
+      if (!next.delete(key)) next.add(key);
+      ownExpanded.value = [...next];
+      emit("update:expanded", ownExpanded.value);
+    }
+    const ownCollapsed = ref([]);
+    const collapsedSet = computed(() => new Set(props.collapsedGroups ?? ownCollapsed.value));
+    function toggleGroup(id) {
+      const next = new Set(collapsedSet.value);
+      if (!next.delete(id)) next.add(id);
+      ownCollapsed.value = [...next];
+      emit("update:collapsedGroups", ownCollapsed.value);
+    }
+    function groupValue(row) {
+      return typeof props.groupBy === "function" ? props.groupBy(row) : row[props.groupBy];
+    }
+    const allEntries = computed(() => {
+      const rows = displayRows.value;
+      const indexes = props.groupBy !== void 0 ? new Map(rows.map((row, i) => [row, i])) : null;
+      const entries = [];
+      const pushRow = (row, index) => {
+        const key = keyFor(row, index);
+        entries.push({ kind: "row", id: String(key), row, index });
+        if (expansionOn.value && expandedKeys.value.has(key) && canExpand(row)) {
+          entries.push({ kind: "detail", id: `lp-detail:${key}`, row, index });
+        }
+      };
+      if (!indexes) {
+        rows.forEach((row, index) => pushRow(row, index));
+        return entries;
+      }
+      for (const group of groupRows(rows, groupValue)) {
+        const collapsed = collapsedSet.value.has(group.id);
+        const name = props.groupLabel?.(group.value, group.rows) ?? group.id;
+        const label = text.value.groupCount.replace("{label}", name).replace("{count}", String(group.rows.length));
+        entries.push({ kind: "group", id: `lp-group:${group.id}`, group: group.id, value: group.value, rows: group.rows, label, collapsed });
+        if (!collapsed) for (const row of group.rows) pushRow(row, indexes.get(row) ?? 0);
+      }
+      return entries;
+    });
+    const viewportEl = shallowRef(null);
+    const scrollTop = ref(0);
+    const viewportHeight = ref(0);
+    const onViewportScroll = () => scrollTop.value = viewportEl.value?.scrollTop ?? 0;
+    onMounted(() => {
+      if (props.virtualRowHeight) viewportEl.value = frameEl.value?.querySelector(VIEWPORT) ?? null;
+    });
+    watch(viewportEl, (el, _, onCleanup) => {
+      if (!el) return;
+      el.addEventListener("scroll", onViewportScroll, { passive: true });
+      onCleanup(() => el.removeEventListener("scroll", onViewportScroll));
+    });
+    useResizeObserver(viewportEl, (_, el) => viewportHeight.value = el.clientHeight, { immediate: true });
+    const rowWindowed = computed(
+      () => props.virtualRowHeight ? rowWindow(scrollTop.value, viewportHeight.value, props.virtualRowHeight, allEntries.value.length, props.virtualOverscan) : null
+    );
+    const viewEntries = computed(
+      () => rowWindowed.value ? allEntries.value.slice(rowWindowed.value.start, rowWindowed.value.end) : allEntries.value
+    );
+    const rowOffset = (entry) => (rowWindowed.value?.start ?? 0) + viewEntries.value.indexOf(entry) + 2;
+    const rowStyle = computed(() => props.virtualRowHeight ? { height: `${props.virtualRowHeight}px` } : void 0);
+    function isEditable(col, row) {
+      return typeof col.editable === "function" ? col.editable(row) : !!col.editable;
+    }
+    function saveCell(col, row, value) {
+      const parsed = col.parseEdit ? col.parseEdit(value, row) : value;
+      emit("cellEdit", { row, key: col.key, value: parsed, previous: row[col.key] });
+    }
+    const colSpan = computed(
+      () => visibleColumns.value.length + (props.selectable ? 1 : 0) + (expansionOn.value ? 1 : 0)
+    );
     const rovingItems = computed(
-      () => displayRows.value.map((row, index) => ({
-        id: String(keyFor(row, index)),
-        label: String(row[props.columns[0]?.key ?? ""] ?? "")
-      }))
+      () => viewEntries.value.flatMap(
+        (entry) => entry.kind === "row" ? [{ id: entry.id, label: String(entry.row[props.columns[0]?.key ?? ""] ?? "") }] : []
+      )
     );
     const rowByKey = computed(() => {
       const map = /* @__PURE__ */ new Map();
@@ -636,7 +914,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         const row = rowByKey.value.get(key);
         if (row) {
           const rowKey = keyFor(row, displayRows.value.indexOf(row));
-          toggleRow(rowKey, !selectedSet.value.has(rowKey));
+          toggleRow(rowKey, !isSelected(rowKey));
         }
         return;
       }
@@ -827,17 +1105,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createElementVNode("table", {
                   ref_key: "tableEl",
                   ref: tableEl,
-                  class: "w-full border-collapse text-sm"
+                  class: normalizeClass(["w-full border-collapse text-sm", fixedLayout.value ? "table-fixed" : ""]),
+                  style: normalizeStyle(tableStyle.value),
+                  "aria-rowcount": __props.virtualRowHeight ? allEntries.value.length + 1 : void 0
                 }, [
                   createElementVNode("thead", {
                     ref_key: "headEl",
                     ref: headEl,
                     class: normalizeClass(__props.stickyHeader ? "sticky top-0 z-10 bg-surface-soft" : "")
                   }, [
-                    createElementVNode("tr", _hoisted_10, [
-                      __props.selectable ? (openBlock(), createElementBlock("th", {
+                    createElementVNode("tr", _hoisted_11, [
+                      expansionOn.value ? (openBlock(), createElementBlock("th", {
                         key: 0,
-                        class: normalizeClass(["w-px p-0", cellY.value])
+                        class: normalizeClass(["w-px p-0", cellY.value]),
+                        style: normalizeStyle(fixedLayout.value ? { width: EXPAND_COLUMN_WIDTH } : void 0)
+                      }, null, 6)) : createCommentVNode("", true),
+                      __props.selectable ? (openBlock(), createElementBlock("th", {
+                        key: 1,
+                        class: normalizeClass(["w-px p-0", cellY.value]),
+                        style: normalizeStyle(fixedLayout.value ? { width: ticksShown.value ? TICK_COLUMN_WIDTH : "0" } : void 0)
                       }, [
                         createElementVNode("div", {
                           class: normalizeClass(["lp-tick lp-tick-open", ticksShown.value ? "" : "lp-tick-hidden"]),
@@ -848,14 +1134,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             indeterminate: someChecked.value,
                             "onUpdate:modelValue": toggleAll
                           }, null, 8, ["model-value", "indeterminate"])
-                        ], 10, _hoisted_11)
-                      ], 2)) : createCommentVNode("", true),
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (col) => {
+                        ], 10, _hoisted_12)
+                      ], 6)) : createCommentVNode("", true),
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(shownColumns.value, (col) => {
                         return openBlock(), createElementBlock("th", {
                           key: col.key,
-                          style: normalizeStyle(col.width ? { width: col.width } : void 0),
-                          class: normalizeClass(["px-4 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted", [alignClass(col.align), cellY.value]]),
-                          "aria-sort": activeSort.value?.key === col.key ? activeSort.value.dir === "asc" ? "ascending" : "descending" : void 0
+                          style: normalizeStyle(headStyle(col)),
+                          class: normalizeClass(["px-4 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted", [alignClass(col.align), cellY.value, col.pin ? PIN_HEAD : "", canResize(col) && !col.pin ? "relative" : ""]]),
+                          "data-lp-col": measuredCol(col),
+                          "aria-sort": sortOf(col) ? sortOf(col).dir === "asc" ? "ascending" : "descending" : void 0
                         }, [
                           col.sortable || col.filterable ? (openBlock(), createBlock(_sfc_main$8, {
                             key: 0,
@@ -866,9 +1153,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 type: "button",
                                 class: normalizeClass(["group/sort -mx-1 inline-flex items-center gap-1 rounded-small px-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring", [
                                   col.align === "right" ? "flex-row-reverse" : "",
-                                  activeSort.value?.key === col.key ? "text-ink" : ""
+                                  sortOf(col) ? "text-ink" : ""
                                 ]]),
-                                onClick: ($event) => toggleSort(col)
+                                onClick: ($event) => toggleSort(col, $event)
                               }, [
                                 createTextVNode(toDisplayString(col.label) + " ", 1),
                                 col.sortable ? (openBlock(), createBlock(_sfc_main$3, {
@@ -877,10 +1164,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                   size: 13,
                                   class: normalizeClass([
                                     "shrink-0 transition-[transform,opacity] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)]",
-                                    activeSort.value?.key === col.key ? "opacity-100" : "opacity-40 group-hover/sort:opacity-70"
+                                    sortOf(col) ? "opacity-100" : "opacity-40 group-hover/sort:opacity-70"
                                   ])
-                                }, null, 8, ["name", "class"])) : createCommentVNode("", true)
-                              ], 10, _hoisted_13)
+                                }, null, 8, ["name", "class"])) : createCommentVNode("", true),
+                                sortPosition(col) ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(sortPosition(col)), 1)) : createCommentVNode("", true)
+                              ], 10, _hoisted_14)
                             ]),
                             _: 2
                           }, 1032, ["items"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
@@ -903,7 +1191,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                   name: hiddenValues.value[col.key]?.size ? "lucide:filter-x" : "lucide:filter",
                                   size: 12
                                 }, null, 8, ["name"])
-                              ], 10, _hoisted_14)
+                              ], 10, _hoisted_16)
                             ]),
                             default: withCtx(() => [
                               createVNode(_sfc_main$b, {
@@ -914,15 +1202,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               }, null, 8, ["options", "hidden", "labels", "onUpdate:hidden"])
                             ]),
                             _: 2
-                          }, 1032, ["aria-label"])) : createCommentVNode("", true)
-                        ], 14, _hoisted_12);
+                          }, 1032, ["aria-label"])) : createCommentVNode("", true),
+                          canResize(col) ? (openBlock(), createElementBlock("span", {
+                            key: 3,
+                            role: "separator",
+                            "aria-orientation": "vertical",
+                            tabindex: "0",
+                            "aria-label": text.value.resizeColumn.replace("{column}", col.label),
+                            "aria-valuenow": widths.value[col.key],
+                            class: "absolute inset-y-0 right-0 w-1.5 cursor-col-resize touch-none outline-none transition-colors duration-fast hover:bg-brand focus-visible:bg-brand",
+                            "data-lp-resize": col.key,
+                            onPointerdown: ($event) => startResize($event, col),
+                            onClick: _cache[2] || (_cache[2] = withModifiers(() => {
+                            }, ["stop"])),
+                            onDblclick: withModifiers(($event) => clearWidth(col), ["stop"]),
+                            onKeydown: ($event) => onResizeKey($event, col)
+                          }, null, 40, _hoisted_17)) : createCommentVNode("", true)
+                        ], 14, _hoisted_13);
                       }), 128))
                     ])
                   ], 2),
                   createVNode(TransitionGroup, {
                     tag: "tbody",
                     name: "lp-row",
-                    css: animating.value,
+                    css: animating.value && !__props.virtualRowHeight,
                     class: normalizeClass(busy.value && displayRows.value.length ? "opacity-60 transition-opacity" : "transition-opacity"),
                     "aria-busy": busy.value || void 0,
                     ref: (el) => unref(roving).setContainer(el?.$el ?? null)
@@ -933,11 +1236,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           key: `lp-table-skeleton-${n}`,
                           class: "lp-row-empty border-b border-line/60 last:border-0"
                         }, [
-                          __props.selectable ? (openBlock(), createElementBlock("td", {
+                          expansionOn.value ? (openBlock(), createElementBlock("td", {
                             key: 0,
                             class: normalizeClass(["w-px p-0", cellY.value])
                           }, null, 2)) : createCommentVNode("", true),
-                          (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (col, ci) => {
+                          __props.selectable ? (openBlock(), createElementBlock("td", {
+                            key: 1,
+                            class: normalizeClass(["w-px p-0", cellY.value])
+                          }, null, 2)) : createCommentVNode("", true),
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(shownColumns.value, (col, ci) => {
                             return openBlock(), createElementBlock("td", {
                               key: col.key,
                               class: normalizeClass(["px-4", [alignClass(col.align), cellY.value]])
@@ -946,11 +1253,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 class: "inline-block h-3 align-middle",
                                 style: normalizeStyle({ width: skeletonWidth(n, ci) })
                               }, null, 8, ["style"]),
-                              n === 1 && ci === 0 ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(text.value.loading), 1)) : createCommentVNode("", true)
+                              n === 1 && ci === 0 ? (openBlock(), createElementBlock("span", _hoisted_18, toDisplayString(text.value.loading), 1)) : createCommentVNode("", true)
                             ], 2);
                           }), 128))
                         ]);
-                      }), 128)) : displayRows.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_16, [
+                      }), 128)) : displayRows.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_19, [
                         createElementVNode("td", {
                           colspan: colSpan.value,
                           class: "p-0"
@@ -975,66 +1282,171 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             ]),
                             _: 1
                           }, 8, ["icon", "title"])
-                        ], 8, _hoisted_17)
+                        ], 8, _hoisted_20)
                       ])) : createCommentVNode("", true),
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, index) => {
-                        return openBlock(), createElementBlock("tr", mergeProps({
-                          key: keyFor(row, index),
-                          onContextmenu: ($event) => onRowContextMenu(row),
-                          class: ["group border-b border-line/60 outline-none transition-colors last:border-0 hover:bg-surface-soft/60 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring data-[active]:bg-surface-soft/40", selectedSet.value.has(keyFor(row, index)) ? "bg-brand-soft/40" : ""]
-                        }, { ref_for: true }, unref(roving).itemProps(String(keyFor(row, index))), {
-                          "data-paint-key": __props.selectable ? String(keyFor(row, index)) : void 0,
-                          "data-lp-context-row": __props.rowMenu ? "" : void 0,
-                          onClick: ($event) => onRowClick(row, keyFor(row, index)),
-                          onPointerdown: ($event) => onRowPointerDown($event, keyFor(row, index)),
-                          onKeydown: onRowKeydown
-                        }), [
-                          __props.selectable ? (openBlock(), createElementBlock("td", {
+                      rowWindowed.value?.before ? (openBlock(), createElementBlock("tr", _hoisted_21, [
+                        createElementVNode("td", {
+                          colspan: colSpan.value,
+                          class: "p-0",
+                          style: normalizeStyle({ height: `${rowWindowed.value.before}px` })
+                        }, null, 12, _hoisted_22)
+                      ])) : createCommentVNode("", true),
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(viewEntries.value, (entry) => {
+                        return openBlock(), createElementBlock(Fragment, {
+                          key: entry.id
+                        }, [
+                          entry.kind === "group" ? (openBlock(), createElementBlock("tr", {
                             key: 0,
-                            class: normalizeClass(["w-px cursor-pointer p-0 select-none", cellY.value]),
-                            onClick: _cache[2] || (_cache[2] = withModifiers(() => {
-                            }, ["stop"])),
-                            onPointerdown: withModifiers(($event) => unref(paint).onPointerDown($event, keyFor(row, index)), ["stop"])
+                            class: "border-b border-line/60 bg-surface-soft/60",
+                            style: normalizeStyle(rowStyle.value)
                           }, [
-                            createElementVNode("div", {
-                              class: normalizeClass(["lp-tick lp-tick-open", ticksShown.value ? "" : "lp-tick-cue"])
-                            }, [
-                              createVNode(_sfc_main$9, {
-                                "model-value": selectedSet.value.has(keyFor(row, index)),
-                                "onUpdate:modelValue": (v) => toggleRow(keyFor(row, index), v)
-                              }, null, 8, ["model-value", "onUpdate:modelValue"])
-                            ], 2)
-                          ], 42, _hoisted_19)) : createCommentVNode("", true),
-                          (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (col, ci) => {
-                            return openBlock(), createElementBlock("td", {
-                              key: col.key,
-                              class: normalizeClass(["px-4 text-ink", [alignClass(col.align), cellY.value, col.nowrap ? "whitespace-nowrap" : ""]])
+                            createElementVNode("td", {
+                              colspan: colSpan.value,
+                              class: normalizeClass(["px-4 text-xs font-medium text-muted", cellY.value])
                             }, [
-                              renderSlot(_ctx.$slots, `cell-${col.key}`, {
-                                row,
-                                value: row[col.key],
-                                openMenu: openRowMenu
+                              renderSlot(_ctx.$slots, "group", {
+                                value: entry.value,
+                                rows: entry.rows,
+                                label: entry.label,
+                                collapsed: entry.collapsed,
+                                toggle: () => toggleGroup(entry.group)
                               }, () => [
-                                createTextVNode(toDisplayString(row[col.key]), 1)
+                                createElementVNode("button", {
+                                  type: "button",
+                                  class: "inline-flex items-center gap-1 rounded-small outline-none transition-colors duration-fast hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+                                  "aria-expanded": !entry.collapsed,
+                                  "aria-label": (entry.collapsed ? text.value.expandGroup : text.value.collapseGroup).replace("{label}", entry.label),
+                                  onClick: ($event) => toggleGroup(entry.group)
+                                }, [
+                                  createVNode(_sfc_main$3, {
+                                    name: "lucide:chevron-right",
+                                    size: 14,
+                                    class: normalizeClass(["transition-transform duration-fast motion-reduce:transition-none", entry.collapsed ? "" : "rotate-90"])
+                                  }, null, 8, ["class"]),
+                                  createTextVNode(" " + toDisplayString(entry.label), 1)
+                                ], 8, _hoisted_24)
                               ], true)
-                            ], 2);
-                          }), 128))
-                        ], 16, _hoisted_18);
-                      }), 128))
+                            ], 10, _hoisted_23)
+                          ], 4)) : entry.kind === "detail" ? (openBlock(), createElementBlock("tr", _hoisted_25, [
+                            createElementVNode("td", {
+                              colspan: colSpan.value,
+                              class: "px-4 py-3"
+                            }, [
+                              renderSlot(_ctx.$slots, "expanded", {
+                                row: entry.row,
+                                close: () => toggleExpanded(keyFor(entry.row, entry.index))
+                              }, void 0, true)
+                            ], 8, _hoisted_26)
+                          ])) : (openBlock(), createElementBlock("tr", mergeProps({
+                            key: 2,
+                            onContextmenu: ($event) => onRowContextMenu(entry.row),
+                            class: ["group border-b border-line/60 outline-none transition-colors last:border-0 hover:bg-surface-soft/60 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring data-[active]:bg-surface-soft/40", isSelected(keyFor(entry.row, entry.index)) ? "bg-brand-soft/40" : ""],
+                            style: rowStyle.value,
+                            "aria-rowindex": __props.virtualRowHeight ? rowOffset(entry) : void 0
+                          }, { ref_for: true }, unref(roving).itemProps(String(keyFor(entry.row, entry.index))), {
+                            "data-paint-key": __props.selectable ? String(keyFor(entry.row, entry.index)) : void 0,
+                            "data-lp-context-row": __props.rowMenu ? "" : void 0,
+                            onClick: ($event) => onRowClick(entry.row, keyFor(entry.row, entry.index)),
+                            onPointerdown: ($event) => onRowPointerDown($event, keyFor(entry.row, entry.index)),
+                            onKeydown: onRowKeydown
+                          }), [
+                            expansionOn.value ? (openBlock(), createElementBlock("td", {
+                              key: 0,
+                              class: normalizeClass(["w-px p-0 text-center", cellY.value]),
+                              onClick: _cache[3] || (_cache[3] = withModifiers(() => {
+                              }, ["stop"])),
+                              onKeydown: _cache[4] || (_cache[4] = withModifiers(() => {
+                              }, ["stop"]))
+                            }, [
+                              canExpand(entry.row) ? (openBlock(), createElementBlock("button", {
+                                key: 0,
+                                type: "button",
+                                class: "inline-grid size-6 place-items-center rounded-small text-muted outline-none transition-colors duration-fast hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+                                "aria-expanded": expandedKeys.value.has(keyFor(entry.row, entry.index)),
+                                "aria-label": expandedKeys.value.has(keyFor(entry.row, entry.index)) ? text.value.collapseRow : text.value.expandRow,
+                                onClick: ($event) => toggleExpanded(keyFor(entry.row, entry.index))
+                              }, [
+                                createVNode(_sfc_main$3, {
+                                  name: "lucide:chevron-right",
+                                  size: 14,
+                                  class: normalizeClass(["transition-transform duration-fast motion-reduce:transition-none", expandedKeys.value.has(keyFor(entry.row, entry.index)) ? "rotate-90" : ""])
+                                }, null, 8, ["class"])
+                              ], 8, _hoisted_28)) : createCommentVNode("", true)
+                            ], 34)) : createCommentVNode("", true),
+                            __props.selectable ? (openBlock(), createElementBlock("td", {
+                              key: 1,
+                              class: normalizeClass(["w-px cursor-pointer p-0 select-none", cellY.value]),
+                              onClick: _cache[5] || (_cache[5] = withModifiers(() => {
+                              }, ["stop"])),
+                              onPointerdown: withModifiers(($event) => unref(paint).onPointerDown($event, keyFor(entry.row, entry.index)), ["stop"])
+                            }, [
+                              createElementVNode("div", {
+                                class: normalizeClass(["lp-tick lp-tick-open", ticksShown.value ? "" : "lp-tick-cue"])
+                              }, [
+                                createVNode(_sfc_main$9, {
+                                  "model-value": isSelected(keyFor(entry.row, entry.index)),
+                                  "onUpdate:modelValue": (v) => toggleRow(keyFor(entry.row, entry.index), v)
+                                }, null, 8, ["model-value", "onUpdate:modelValue"])
+                              ], 2)
+                            ], 42, _hoisted_29)) : createCommentVNode("", true),
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(shownColumns.value, (col) => {
+                              return openBlock(), createElementBlock("td", {
+                                key: col.key,
+                                class: normalizeClass(["px-4 text-ink", [alignClass(col.align), cellY.value, col.nowrap ? "whitespace-nowrap" : "", col.pin ? PIN_CELL : ""]]),
+                                style: normalizeStyle(pinStyle(col))
+                              }, [
+                                renderSlot(_ctx.$slots, `cell-${col.key}`, {
+                                  row: entry.row,
+                                  value: entry.row[col.key],
+                                  openMenu: openRowMenu
+                                }, () => [
+                                  isEditable(col, entry.row) ? (openBlock(), createElementBlock("span", {
+                                    key: 0,
+                                    class: "inline-block",
+                                    onClick: _cache[6] || (_cache[6] = withModifiers(() => {
+                                    }, ["stop"])),
+                                    onPointerdown: _cache[7] || (_cache[7] = withModifiers(() => {
+                                    }, ["stop"])),
+                                    onKeydown: _cache[8] || (_cache[8] = withModifiers(() => {
+                                    }, ["stop"]))
+                                  }, [
+                                    createVNode(_sfc_main$e, {
+                                      "model-value": String(entry.row[col.key] ?? ""),
+                                      label: col.label,
+                                      size: "sm",
+                                      validate: (value) => col.validateEdit?.(value, entry.row),
+                                      save: (value) => saveCell(col, entry.row, value)
+                                    }, null, 8, ["model-value", "label", "validate", "save"])
+                                  ], 32)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                                    createTextVNode(toDisplayString(entry.row[col.key]), 1)
+                                  ], 64))
+                                ], true)
+                              ], 6);
+                            }), 128))
+                          ], 16, _hoisted_27))
+                        ], 64);
+                      }), 128)),
+                      rowWindowed.value?.after ? (openBlock(), createElementBlock("tr", _hoisted_30, [
+                        createElementVNode("td", {
+                          colspan: colSpan.value,
+                          class: "p-0",
+                          style: normalizeStyle({ height: `${rowWindowed.value.after}px` })
+                        }, null, 12, _hoisted_31)
+                      ])) : createCommentVNode("", true)
                     ]),
                     _: 3
                   }, 8, ["css", "class", "aria-busy"])
-                ], 512)
+                ], 14, _hoisted_10)
               ]),
               _: 3
             }, 8, ["items", "no-hint", "title", "subtitle", "title-icon", "title-image"])
           ]),
           _: 3
         }, 16, ["style", "bar-inset-top"]),
-        __props.load && total.value > __props.pageSize ? (openBlock(), createBlock(_sfc_main$e, {
+        __props.load && total.value > __props.pageSize ? (openBlock(), createBlock(_sfc_main$f, {
           key: 1,
           page: page.value,
-          "onUpdate:page": _cache[3] || (_cache[3] = ($event) => page.value = $event),
+          "onUpdate:page": _cache[9] || (_cache[9] = ($event) => page.value = $event),
           total: total.value,
           "page-size": __props.pageSize,
           disabled: busy.value
@@ -1043,7 +1455,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d2bafc29"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-48ad51fc"]]);
 export {
   LpTable as default
 };