nuxt-ui-tools 0.1.2 → 1.0.0

package/dist/runtime/table/components/table/table-renderer.vue

@@ -0,0 +1,844 @@
+<script setup>
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import {
+  computed,
+  h,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  TransitionGroup,
+  useTemplateRef,
+  watch
+} from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isDefined, isFunction, isNumber, isObject } from "../../../shared/utils/predicate";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { useTableInternals } from "../../composables/use-table-internals";
+import { useTanstackTable } from "../../composables/use-tanstack-table";
+import { mergeDataListUiClass } from "../../utils";
+import {
+  ROW_ACTIONS_COLUMN_ID,
+  SELECT_COLUMN_ID,
+  SELECT_COLUMN_WIDTH
+} from "../../utils/columns/types";
+import TableCell from "./table-cell";
+import TableColumnHeader from "./table-column-header.vue";
+import TableEmptyState from "./table-empty-state.vue";
+import TableOverlayScrollbars from "./table-overlay-scrollbars.vue";
+const LOAD_MORE_THRESHOLD = 6;
+const PREFETCH_VIEWPORTS = 3;
+const VIRTUALIZE_ROW_THRESHOLD = 40;
+const VIRTUALIZE_CELL_THRESHOLD = 240;
+const VIRTUALIZE_COLUMN_THRESHOLD = 32;
+const ANIMATION_WINDOW = 600;
+const SKELETON_MIN_ROWS = 6;
+const SIZE_TOKENS = {
+  lg: { font: 13.5, head: 46, row: 52, x: 16 },
+  md: { font: 13, head: 42, row: 44, x: 14 },
+  sm: { font: 12.5, head: 38, row: 36, x: 10 },
+  xl: { font: 14, head: 48, row: 60, x: 16 },
+  xs: { font: 12, head: 34, row: 32, x: 8 }
+};
+const props = defineProps({
+  gutter: { type: Number, required: false },
+  height: { type: String, required: false },
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const { locale, t } = useUiToolsLocale();
+const rows = computed(
+  () => internals.queryContent.error.value ? [] : internals.queryContent.data.value.rows
+);
+const { status } = internals.queryContent;
+const rowsMounted = ref(false);
+let rowMountFrame = 0;
+const isFirstLoad = computed(
+  () => status.value.isBooting || status.value.isPending && rows.value.length === 0 || !rowsMounted.value && rows.value.length > 0
+);
+const refreshing = computed(
+  () => rows.value.length > 0 && (status.value.isFetching || status.value.isRefreshing)
+);
+const empty = computed(() => !isFirstLoad.value && rows.value.length === 0);
+const resolvedSize = computed(
+  () => props.size ?? dataListUi.ui.value.table?.size ?? dataListUi.controlSize.value
+);
+const tokens = computed(() => SIZE_TOKENS[resolvedSize.value]);
+const rowHeight = computed(() => tokens.value.row);
+const gutter = computed(() => props.gutter ?? dataListUi.ui.value.table?.gutter ?? tokens.value.x);
+const gutterExtra = computed(() => Math.max(0, gutter.value - tokens.value.x));
+const tokenStyle = computed(() => ({
+  "--nut-dl-cell-x": `${tokens.value.x}px`,
+  "--nut-dl-font": `${tokens.value.font}px`,
+  "--nut-dl-foot-h": `${tokens.value.head - 2}px`,
+  "--nut-dl-gutter": `${gutter.value}px`,
+  "--nut-dl-head-h": `${tokens.value.head}px`,
+  "--nut-dl-row-h": `${tokens.value.row}px`
+}));
+const { columnDefs } = internals.tableColumns;
+const columnState = internals.tableColumns.tableState;
+const columnSizing = computed({
+  get: () => {
+    const sizing = columnState.value.columnSizing ?? {};
+    if (!gutterExtra.value) {
+      return sizing;
+    }
+    const ids = new Set(columnDefs.value.map((def) => def.id));
+    const next = { ...sizing };
+    if (ids.has(SELECT_COLUMN_ID) && !(SELECT_COLUMN_ID in sizing)) {
+      next[SELECT_COLUMN_ID] = SELECT_COLUMN_WIDTH + gutterExtra.value;
+    }
+    return next;
+  },
+  set: (columnSizing2) => {
+    columnState.value = { ...columnState.value, columnSizing: columnSizing2 };
+  }
+});
+const pinned = computed(() => {
+  const ids = new Set(columnDefs.value.map((def) => def.id));
+  const left = (columnState.value.columnPinning?.left ?? []).filter(
+    (id) => ids.has(id) && id !== SELECT_COLUMN_ID
+  );
+  const right = (columnState.value.columnPinning?.right ?? []).filter(
+    (id) => ids.has(id) && id !== ROW_ACTIONS_COLUMN_ID
+  );
+  return {
+    end: ids.has(ROW_ACTIONS_COLUMN_ID) ? [...right, ROW_ACTIONS_COLUMN_ID] : right,
+    start: ids.has(SELECT_COLUMN_ID) ? [SELECT_COLUMN_ID, ...left] : left
+  };
+});
+function getRowId(row, index) {
+  return internals.selection.getRowId({ index, row });
+}
+const renderRows = computed(() => rowsMounted.value ? rows.value : []);
+const virtualized = computed(
+  () => renderRows.value.length >= VIRTUALIZE_ROW_THRESHOLD || renderRows.value.length * columnDefs.value.length >= VIRTUALIZE_CELL_THRESHOLD
+);
+const scrollRef = useTemplateRef("scrollRef");
+const rowHeights = /* @__PURE__ */ new Map();
+function measureRowHeight(element) {
+  const key = element instanceof HTMLElement ? element.dataset.rowId : void 0;
+  const { height } = element.getBoundingClientRect();
+  if (key === void 0) {
+    return height;
+  }
+  const next = Math.max(rowHeights.get(key) ?? 0, height);
+  rowHeights.set(key, next);
+  return next;
+}
+const rowVirtualizer = useVirtualizer(
+  computed(() => ({
+    count: virtualized.value ? renderRows.value.length : 0,
+    estimateSize: () => rowHeight.value,
+    getItemKey: (index) => renderRows.value[index] ? getRowId(renderRows.value[index], index) : index,
+    getScrollElement: () => scrollRef.value ?? null,
+    measureElement: (element) => measureRowHeight(element),
+    overscan: 8
+  }))
+);
+const virtualRows = computed(
+  () => virtualized.value ? rowVirtualizer.value.getVirtualItems() : []
+);
+const materializedRows = computed(
+  () => virtualized.value ? virtualRows.value.map((item) => renderRows.value[item.index]).filter(isDefined) : renderRows.value
+);
+const { table, resetColumnSizing } = useTanstackTable({
+  columnSizing,
+  columns: columnDefs,
+  data: materializedRows,
+  getRowId,
+  pinned
+});
+const tableRows = computed(() => table.getRowModel().rows);
+const leafColumns = computed(() => table.getVisibleLeafColumns());
+const centerColumns = computed(() => table.getCenterVisibleLeafColumns());
+const bodyWidth = ref(0);
+const bodyHeight = ref(0);
+const columnsOverflow = computed(
+  () => bodyWidth.value > 0 && table.getTotalSize() > bodyWidth.value && centerColumns.value.length > VIRTUALIZE_COLUMN_THRESHOLD
+);
+const columnVirtualizer = useVirtualizer(
+  computed(() => ({
+    count: columnsOverflow.value ? centerColumns.value.length : 0,
+    estimateSize: (index) => centerColumns.value[index]?.getSize() ?? 0,
+    getItemKey: (index) => centerColumns.value[index]?.id ?? index,
+    getScrollElement: () => scrollRef.value ?? null,
+    horizontal: true,
+    initialRect: { height: 0, width: bodyWidth.value },
+    onChange: (instance) => {
+      const width = instance.scrollRect?.width;
+      if (width && width !== bodyWidth.value) {
+        bodyWidth.value = width;
+      }
+    },
+    overscan: 2,
+    paddingEnd: table.getEndTotalSize(),
+    paddingStart: table.getStartTotalSize()
+  }))
+);
+const virtualColumns = computed(() => columnVirtualizer.value.getVirtualItems());
+const columnSlots = computed(() => {
+  function asSlot(column) {
+    return {
+      columnId: column.id,
+      key: column.id,
+      kind: "column"
+    };
+  }
+  const slots = table.getStartVisibleLeafColumns().map(asSlot);
+  if (!columnsOverflow.value) {
+    slots.push(...centerColumns.value.map(asSlot), ...table.getEndVisibleLeafColumns().map(asSlot));
+    return slots;
+  }
+  const first = virtualColumns.value[0];
+  const last = virtualColumns.value.at(-1);
+  if (first?.index) {
+    slots.push({ colSpan: first.index, key: "pad-start", kind: "spacer" });
+  }
+  slots.push(
+    ...virtualColumns.value.flatMap((item) => {
+      const column = centerColumns.value[item.index];
+      return column ? [asSlot(column)] : [];
+    })
+  );
+  const trailing = last ? centerColumns.value.length - last.index - 1 : centerColumns.value.length;
+  if (trailing) {
+    slots.push({ colSpan: trailing, key: "pad-end", kind: "spacer" });
+  }
+  slots.push(...table.getEndVisibleLeafColumns().map(asSlot));
+  return slots;
+});
+function rowColumnSlots(row) {
+  const cells = new Map(row.getVisibleCells().map((cell) => [cell.column.id, cell]));
+  const slots = [];
+  for (const slot of columnSlots.value) {
+    if (slot.kind === "spacer") {
+      slots.push(slot);
+      continue;
+    }
+    const cell = cells.get(slot.columnId);
+    if (cell) {
+      slots.push({ cell, key: cell.id, kind: "cell" });
+    }
+  }
+  return slots;
+}
+const headers = computed(() => table.getHeaderGroups()[0]?.headers ?? []);
+const headerByColumnId = computed(() => new Map(headers.value.map((h2) => [h2.column.id, h2])));
+const virtualPaddingTop = computed(() => virtualRows.value[0]?.start ?? 0);
+const virtualPaddingBottom = computed(() => {
+  if (!virtualized.value || !virtualRows.value.length) {
+    return 0;
+  }
+  return rowVirtualizer.value.getTotalSize() - (virtualRows.value.at(-1)?.end ?? 0);
+});
+const virtualRowByKey = computed(() => {
+  const byKey = /* @__PURE__ */ new Map();
+  for (const item of virtualRows.value) {
+    const row = renderRows.value[item.index];
+    if (row) {
+      byKey.set(getRowId(row, item.index), { index: item.index, key: String(item.key) });
+    }
+  }
+  return byKey;
+});
+const renderedRows = computed(() => {
+  if (!virtualized.value) {
+    return tableRows.value.map((row, index) => ({ row, virtual: { index, key: String(row.id) } }));
+  }
+  return tableRows.value.map((row) => {
+    const virtual = virtualRowByKey.value.get(String(row.id));
+    return virtual ? { row, virtual } : void 0;
+  }).filter(isDefined);
+});
+function measureRow(element) {
+  if (!(element instanceof HTMLElement)) {
+    return;
+  }
+  if (element.isConnected) {
+    rowVirtualizer.value.measureElement(element);
+  } else {
+    nextTick().then(() => element.isConnected && rowVirtualizer.value.measureElement(element));
+  }
+}
+const scrollbarsRef = useTemplateRef("scrollbarsRef");
+const totalWidth = computed(() => table.getTotalSize());
+const skeletonRows = computed(() => {
+  const usable = bodyHeight.value - tokens.value.head;
+  if (usable <= 0) {
+    return SKELETON_MIN_ROWS;
+  }
+  return Math.max(SKELETON_MIN_ROWS, Math.ceil(usable / rowHeight.value));
+});
+function measureBody() {
+  bodyHeight.value = scrollRef.value?.clientHeight ?? 0;
+  bodyWidth.value = scrollRef.value?.clientWidth ?? 0;
+}
+let resizeObserver;
+onMounted(() => {
+  measureBody();
+  if (scrollRef.value) {
+    resizeObserver = new ResizeObserver(measureBody);
+    resizeObserver.observe(scrollRef.value);
+  }
+  rowMountFrame = requestAnimationFrame(() => rowsMounted.value = true);
+});
+onBeforeUnmount(() => {
+  cancelAnimationFrame(rowMountFrame);
+  resizeObserver?.disconnect();
+});
+watch(
+  [totalWidth, () => rows.value.length],
+  () => nextTick().then(() => {
+    columnVirtualizer.value.measure();
+    scrollbarsRef.value?.measure();
+  })
+);
+watch(
+  () => internals.pagination.currentPage.value,
+  () => scrollRef.value?.scrollTo({ top: 0 })
+);
+const openMenuId = ref(null);
+function pinnedOffset(column) {
+  const side = column.getIsPinned();
+  if (side === "start") {
+    return { left: `${column.getStart("start")}px` };
+  }
+  if (side === "end") {
+    return { right: `${column.getAfter("end")}px` };
+  }
+}
+function isLastStart(column) {
+  return table.getStartVisibleLeafColumns().at(-1)?.id === column.id;
+}
+function isFirstEnd(column) {
+  return table.getEndVisibleLeafColumns()[0]?.id === column.id;
+}
+const { summaries } = internals;
+const summaryColumnIds = computed(() => new Set(summaries.columns.value.map((column) => column.id)));
+const summaryLabelColumnId = computed(
+  () => leafColumns.value.find(
+    (column) => !column.columnDef.meta?.internal && !summaryColumnIds.value.has(column.id)
+  )?.id
+);
+const summaryLabel = computed(() => {
+  const label = summaries.label.value;
+  if (label) {
+    return isFunction(label) ? String(label()) : String(label);
+  }
+  return t("table.summaries.total");
+});
+function formatNumber(value) {
+  return isNumber(value) ? new Intl.NumberFormat(locale.value.code).format(value).replaceAll("\u202F", "\xA0") : String(value ?? "");
+}
+function isSummaryConfig(summary) {
+  return isObject(summary);
+}
+function renderSummary(columnId) {
+  const column = summaries.columns.value.find((entry) => entry.id === columnId);
+  const cell = summaries.cell(columnId);
+  const summary = column?.summary;
+  const render = isSummaryConfig(summary) ? summary.render : void 0;
+  if (render) {
+    return () => render({ loading: cell.loading, scope: summaries.scope.value, value: cell.value });
+  }
+  const value = summaries.format(columnId);
+  return () => h("span", formatNumber(value));
+}
+const animateEpoch = ref(false);
+const enterFrom = ref(Number.POSITIVE_INFINITY);
+const previousIds = shallowRef(/* @__PURE__ */ new Set());
+const flipPositions = /* @__PURE__ */ new Map();
+watch(
+  rows,
+  () => {
+    previousIds.value = new Set(rows.value.map((row, index) => getRowId(row, index)));
+    flipPositions.clear();
+    const elements = scrollRef.value?.querySelectorAll("tr.nut-dl-row[data-row-id]") ?? [];
+    for (const element of elements) {
+      flipPositions.set(element.dataset.rowId ?? "", element.getBoundingClientRect().top);
+    }
+  },
+  { flush: "pre" }
+);
+watch(rows, () => nextTick().then(flipRows), { flush: "post" });
+function flipRows() {
+  if (!flipPositions.size) {
+    return;
+  }
+  const elements = scrollRef.value?.querySelectorAll("tr.nut-dl-row[data-row-id]") ?? [];
+  for (const element of elements) {
+    const previous = flipPositions.get(element.dataset.rowId ?? "");
+    if (previous === void 0) {
+      continue;
+    }
+    const delta = previous - element.getBoundingClientRect().top;
+    if (Math.abs(delta) > 1) {
+      element.animate([{ transform: `translateY(${delta}px)` }, { transform: "none" }], {
+        duration: 240,
+        easing: "cubic-bezier(0.2, 0.9, 0.3, 1)"
+      });
+    }
+  }
+  flipPositions.clear();
+}
+let animateTimer = 0;
+function armAnimation(from = Number.POSITIVE_INFINITY) {
+  enterFrom.value = from;
+  animateEpoch.value = true;
+  window.clearTimeout(animateTimer);
+  animateTimer = window.setTimeout(() => {
+    animateEpoch.value = false;
+  }, ANIMATION_WINDOW);
+}
+watch(
+  () => [
+    internals.pagination.currentPage.value,
+    internals.pagination.pageSize.value,
+    JSON.stringify(internals.tableColumns.sortingState.value),
+    JSON.stringify(internals.queryState.filters.value),
+    internals.filters.searchQuery.value
+  ],
+  () => {
+    if (!rowsMounted.value || cursorMode.value) {
+      return;
+    }
+    rowHeights.clear();
+    armAnimation();
+    scrollRef.value?.scrollTo({ top: 0 });
+  }
+);
+const SKELETON_WIDTHS = [62, 44, 78, 54, 70, 38, 66, 48];
+function skeletonWidth(seed) {
+  return SKELETON_WIDTHS[seed % SKELETON_WIDTHS.length];
+}
+function renderSkeletonCell(columnId, rowIndex) {
+  const meta = headerByColumnId.value.get(columnId)?.column.columnDef.meta;
+  const kind = meta?.internal === "selection" ? "check" : meta?.internal ? "none" : meta?.skeleton ?? "text";
+  const seed = rowIndex * 7 + columnId.length;
+  function line(width, extra = "") {
+    return h("span", {
+      class: `nut-dl-skeleton block h-3 rounded ${extra}`,
+      style: { width: `${width}%` }
+    });
+  }
+  return () => {
+    if (kind === "none") {
+      return null;
+    }
+    if (kind === "check") {
+      return h("span", { class: "nut-dl-skeleton block size-4 rounded-[4px]" });
+    }
+    if (kind === "dot") {
+      return h("span", { class: "flex items-center gap-2" }, [
+        h("span", { class: "nut-dl-skeleton size-[7px] rounded-full" }),
+        line(skeletonWidth(seed) - 10)
+      ]);
+    }
+    if (kind === "avatar") {
+      return h("span", { class: "flex items-center gap-2.5" }, [
+        h("span", { class: "nut-dl-skeleton size-7 shrink-0 rounded-md" }),
+        h("span", { class: "grid flex-1 gap-1.5" }, [
+          line(skeletonWidth(seed)),
+          line(skeletonWidth(seed + 3) - 20, "h-2.5")
+        ])
+      ]);
+    }
+    if (kind === "badge") {
+      return h("span", { class: "nut-dl-skeleton inline-block h-5 w-16 rounded-full" });
+    }
+    if (kind === "number") {
+      return h("span", {
+        class: "nut-dl-skeleton ml-auto block h-3 rounded",
+        style: { width: "36%" }
+      });
+    }
+    return line(skeletonWidth(seed));
+  };
+}
+watch(isFirstLoad, (loading, was) => {
+  if (was && !loading) {
+    armAnimation();
+  }
+});
+watch(
+  () => rows.value.length,
+  (next, previous) => {
+    if (cursorMode.value && previous > 0 && next > previous) {
+      armAnimation(previous);
+    }
+  }
+);
+const cursorMode = computed(() => internals.pagination.mode.value === "cursor");
+const loadingMore = computed(
+  () => cursorMode.value && internals.pagination.state.value.isLoadingMore
+);
+const hasNextPage = computed(() => cursorMode.value && internals.pagination.state.value.hasNextPage);
+watch(
+  () => [
+    virtualRows.value.at(-1)?.index ?? renderRows.value.length - 1,
+    renderRows.value.length,
+    hasNextPage.value,
+    loadingMore.value
+  ],
+  ([lastIndex, count, more, loading]) => {
+    if (!more || loading || !count) {
+      return;
+    }
+    const threshold = Math.max(LOAD_MORE_THRESHOLD, virtualRows.value.length * PREFETCH_VIEWPORTS);
+    if (lastIndex >= count - 1 - threshold) {
+      void internals.pagination.loadMore();
+    }
+  }
+);
+function onScrollLoadMore() {
+  if (!hasNextPage.value || loadingMore.value || virtualized.value) {
+    return;
+  }
+  const element = scrollRef.value;
+  if (!element) {
+    return;
+  }
+  const threshold = Math.max(320, element.clientHeight * PREFETCH_VIEWPORTS);
+  if (element.scrollHeight - element.scrollTop - element.clientHeight < threshold) {
+    void internals.pagination.loadMore();
+  }
+}
+watch(
+  () => [renderRows.value.length, loadingMore.value],
+  async () => {
+    await nextTick();
+    onScrollLoadMore();
+  }
+);
+defineExpose({ resetColumnSizing });
+</script>
+
+<template>
+  <div
+    class="nut-dl-table relative min-h-0"
+    :class="[
+  fill ? 'flex h-full flex-col' : '',
+  mergeDataListUiClass(void 0, void 0, ui?.wrapper)
+]"
+    :style="{ ...tokenStyle, height: !fill && height ? height : void 0 }"
+    :data-size="resolvedSize"
+    :data-virtualized="virtualized"
+    :data-loading="isFirstLoad"
+  >
+    <div
+      ref="scrollRef"
+      class="nut-dl-table__scroll relative min-h-0 overflow-auto overscroll-x-contain bg-[var(--nut-dl-surface)]"
+      :class="[
+  fill || height ? 'flex-1' : '',
+  mergeDataListUiClass(void 0, void 0, ui?.root)
+]"
+      @scroll.passive="onScrollLoadMore"
+    >
+      <table
+        class="nut-dl-table__table w-full table-fixed border-separate border-spacing-0 text-[length:var(--nut-dl-font)]"
+        :class="mergeDataListUiClass(void 0, void 0, ui?.base)"
+        :style="{ minWidth: `${totalWidth}px` }"
+      >
+        <colgroup>
+          <col
+            v-for="leaf in leafColumns"
+            :key="leaf.id"
+            :style="{ width: `${leaf.getSize()}px` }"
+          />
+        </colgroup>
+        <thead :class="mergeDataListUiClass('nut-dl-table__head', void 0, ui?.thead)">
+          <tr class="nut-dl-table__head-row">
+            <template v-for="slot in columnSlots" :key="slot.key">
+              <th
+                v-if="slot.kind === 'spacer'"
+                :colspan="slot.colSpan"
+                class="nut-dl-table__spacer sticky top-0 z-[3] p-0"
+                aria-hidden="true"
+              />
+              <th
+                v-else-if="headerByColumnId.get(slot.columnId)"
+                class="nut-dl-th sticky top-0 z-[3] h-[var(--nut-dl-head-h)] p-0 text-left align-middle"
+                :class="[
+  headerByColumnId.get(slot.columnId).column.getIsPinned() === 'start' ? 'nut-dl-pin nut-dl-pin--start z-[4]' : '',
+  headerByColumnId.get(slot.columnId).column.getIsPinned() === 'end' ? 'nut-dl-pin nut-dl-pin--end z-[4]' : '',
+  isLastStart(headerByColumnId.get(slot.columnId).column) ? 'nut-dl-pin--last-start' : '',
+  isFirstEnd(headerByColumnId.get(slot.columnId).column) ? 'nut-dl-pin--first-end' : '',
+  headerByColumnId.get(slot.columnId).column.columnDef.meta?.internal ? `nut-dl-th--internal nut-dl-th--${headerByColumnId.get(slot.columnId).column.columnDef.meta?.internal}` : '',
+  mergeDataListUiClass(void 0, void 0, ui?.th)
+]"
+                :data-col="slot.columnId"
+                :style="pinnedOffset(headerByColumnId.get(slot.columnId).column)"
+              >
+                <template
+                  v-if="headerByColumnId.get(slot.columnId).column.columnDef.meta?.internal"
+                >
+                  <div
+                    class="nut-dl-th__static flex h-full items-center"
+                    :class="
+  headerByColumnId.get(slot.columnId).column.columnDef.meta?.align === 'right' ? 'justify-end' : ''
+"
+                  >
+                    <TableCell
+                      v-if="
+  headerByColumnId.get(slot.columnId).column.columnDef.meta?.renderHeader
+"
+                      :render="
+  () => headerByColumnId.get(slot.columnId).column.columnDef.meta.renderHeader()
+"
+                      :row="{}"
+                      :index="-1"
+                    />
+                  </div>
+                </template>
+                <TableColumnHeader
+                  v-else
+                  :open="openMenuId === slot.columnId"
+                  :label="headerByColumnId.get(slot.columnId).column.columnDef.meta.label"
+                  :icon="headerByColumnId.get(slot.columnId).column.columnDef.meta.icon"
+                  :align="headerByColumnId.get(slot.columnId).column.columnDef.meta.align"
+                  :sortable="headerByColumnId.get(slot.columnId).column.columnDef.meta.sortable"
+                  :sort-state="internals.tableColumns.getSortState({ columnId: slot.columnId })"
+                  :pinned="
+  Boolean(internals.tableColumns.getPinnedState({ columnId: slot.columnId }))
+"
+                  :items="internals.tableColumns.getMenuItems({ columnId: slot.columnId })"
+                  :resizable="headerByColumnId.get(slot.columnId).column.getCanResize()"
+                  :resizing="headerByColumnId.get(slot.columnId).column.getIsResizing()"
+                  :reset-size="() => headerByColumnId.get(slot.columnId).column.resetSize()"
+                  :resize="headerByColumnId.get(slot.columnId).getResizeHandler()"
+                  @update:open="openMenuId = $event ? slot.columnId : null"
+                />
+              </th>
+            </template>
+          </tr>
+          <tr v-if="refreshing" class="nut-dl-progress" aria-hidden="true">
+            <th
+              :colspan="leafColumns.length"
+              class="sticky top-[var(--nut-dl-head-h)] z-[3] h-0 p-0"
+            >
+              <span />
+            </th>
+          </tr>
+        </thead>
+
+        <component
+          :is="virtualized ? 'tbody' : TransitionGroup"
+          :key="virtualized ? 'virtual' : 'rows'"
+          :tag="virtualized ? void 0 : 'tbody'"
+          :class="mergeDataListUiClass('nut-dl-table__body', void 0, ui?.tbody)"
+          :move-class="virtualized ? void 0 : 'nut-dl-row--moving'"
+          :enter-active-class="virtualized ? void 0 : 'nut-dl-row--settling'"
+          :enter-from-class="virtualized ? void 0 : 'nut-dl-row--from'"
+          :leave-active-class="virtualized ? void 0 : 'hidden'"
+        >
+          <tr
+            v-if="virtualPaddingTop"
+            key="pad-top"
+            :style="{ height: `${virtualPaddingTop}px` }"
+            aria-hidden="true"
+          >
+            <td :colspan="leafColumns.length" class="p-0" />
+          </tr>
+
+          <tr
+            v-for="{ row, virtual } in renderedRows"
+            :key="virtual.key"
+            :ref="measureRow"
+            class="nut-dl-row group/row"
+            :class="[
+  internals.selection.isRowSelected({ rowId: String(row.id) }) ? 'nut-dl-row--selected' : '',
+  mergeDataListUiClass(void 0, void 0, ui?.tr)
+]"
+            :data-index="virtual.index"
+            :data-row-id="row.id"
+            :style="
+  virtualized && animateEpoch && (virtual.index >= enterFrom || !previousIds.has(String(row.id))) ? {
+    '--nut-dl-i': Math.min(
+      virtual.index - Math.max(enterFrom, virtualRows[0]?.index ?? 0),
+      24
+    )
+  } : void 0
+"
+          >
+            <template v-for="slot in rowColumnSlots(row)" :key="slot.key">
+              <td
+                v-if="slot.kind === 'spacer'"
+                :colspan="slot.colSpan"
+                class="nut-dl-table__spacer p-0"
+                aria-hidden="true"
+              />
+              <td
+                v-else
+                class="nut-dl-td h-[var(--nut-dl-row-h)] py-0 align-middle"
+                :class="[
+  slot.cell.column.getIsPinned() === 'start' ? 'nut-dl-pin nut-dl-pin--start z-[2]' : '',
+  slot.cell.column.getIsPinned() === 'end' ? 'nut-dl-pin nut-dl-pin--end z-[2]' : '',
+  isLastStart(slot.cell.column) ? 'nut-dl-pin--last-start' : '',
+  isFirstEnd(slot.cell.column) ? 'nut-dl-pin--first-end' : '',
+  slot.cell.column.columnDef.meta?.align === 'right' ? 'text-right' : slot.cell.column.columnDef.meta?.align === 'center' ? 'text-center' : '',
+  slot.cell.column.columnDef.meta?.internal ? `nut-dl-td--${slot.cell.column.columnDef.meta.internal}` : '',
+  slot.cell.column.columnDef.meta?.ellipsis ? 'nut-dl-td--ellipsis' : '',
+  mergeDataListUiClass(void 0, void 0, ui?.td)
+]"
+                :data-col="slot.cell.column.id"
+                :style="[
+  pinnedOffset(slot.cell.column),
+  slot.cell.column.columnDef.meta?.lines ? { '--nut-dl-lines': slot.cell.column.columnDef.meta.lines } : void 0
+]"
+              >
+                <div
+                  class="nut-dl-td__inner min-w-0"
+                  :class="
+  slot.cell.column.columnDef.meta?.align === 'right' ? 'justify-end' : slot.cell.column.columnDef.meta?.align === 'center' ? 'justify-center' : ''
+"
+                >
+                  <TableCell
+                    :index="virtual.index"
+                    :render="slot.cell.column.columnDef.meta.render"
+                    :row="row.original"
+                  />
+                </div>
+              </td>
+            </template>
+          </tr>
+
+          <tr
+            v-if="virtualPaddingBottom"
+            key="pad-bottom"
+            :style="{ height: `${virtualPaddingBottom}px` }"
+            aria-hidden="true"
+          >
+            <td :colspan="leafColumns.length" class="p-0" />
+          </tr>
+          <tr
+            v-if="loadingMore"
+            key="loading-more"
+            class="nut-dl-row nut-dl-row--loading-more"
+            aria-hidden="true"
+          >
+            <td
+              :colspan="leafColumns.length"
+              class="nut-dl-td h-[var(--nut-dl-row-h)] py-0 align-middle"
+            >
+              <div
+                class="nut-dl-loading-more flex items-center gap-2.5 px-[var(--nut-dl-gutter)] text-[12.5px] text-muted"
+              >
+                <span
+                  class="nut-dl-spinner size-3.5 rounded-full border-2 border-accented border-t-primary"
+                />
+                <span>{{ t("table.controls.loadingMore") }}</span>
+              </div>
+            </td>
+          </tr>
+
+          <tr
+            v-for="placeholder in isFirstLoad ? skeletonRows : 0"
+            :key="`skeleton-${placeholder}`"
+            class="nut-dl-row nut-dl-row--skeleton"
+            :style="{ '--nut-dl-i': placeholder }"
+            aria-hidden="true"
+          >
+            <template v-for="slot in columnSlots" :key="slot.key">
+              <td v-if="slot.kind === 'spacer'" :colspan="slot.colSpan" class="p-0" />
+              <td
+                v-else
+                class="nut-dl-td h-[var(--nut-dl-row-h)] py-0 align-middle"
+                :class="[
+  headerByColumnId.get(slot.columnId)?.column.getIsPinned() === 'start' ? 'nut-dl-pin nut-dl-pin--start z-[2]' : '',
+  headerByColumnId.get(slot.columnId)?.column.getIsPinned() === 'end' ? 'nut-dl-pin nut-dl-pin--end z-[2]' : '',
+  headerByColumnId.get(slot.columnId)?.column.columnDef.meta?.align === 'right' ? 'text-right' : ''
+]"
+                :style="
+  headerByColumnId.get(slot.columnId) ? pinnedOffset(headerByColumnId.get(slot.columnId).column) : void 0
+"
+              >
+                <component :is="renderSkeletonCell(slot.columnId, placeholder)" />
+              </td>
+            </template>
+          </tr>
+        </component>
+
+        <tfoot
+          v-if="summaries.enabled.value && !isFirstLoad && !empty"
+          :class="mergeDataListUiClass('nut-dl-table__foot', void 0, ui?.tfoot)"
+        >
+          <tr class="nut-dl-table__foot-row">
+            <template v-for="slot in columnSlots" :key="`foot-${slot.key}`">
+              <td
+                v-if="slot.kind === 'spacer'"
+                :colspan="slot.colSpan"
+                class="nut-dl-table__spacer nut-dl-tf sticky bottom-0 z-[3] p-0"
+                aria-hidden="true"
+              />
+              <td
+                v-else-if="headerByColumnId.get(slot.columnId)"
+                class="nut-dl-tf sticky bottom-0 z-[3] h-[var(--nut-dl-foot-h)] py-0 align-middle"
+                :class="[
+  headerByColumnId.get(slot.columnId).column.getIsPinned() === 'start' ? 'nut-dl-pin nut-dl-pin--start z-[4]' : '',
+  headerByColumnId.get(slot.columnId).column.getIsPinned() === 'end' ? 'nut-dl-pin nut-dl-pin--end z-[4]' : '',
+  isLastStart(headerByColumnId.get(slot.columnId).column) ? 'nut-dl-pin--last-start' : '',
+  isFirstEnd(headerByColumnId.get(slot.columnId).column) ? 'nut-dl-pin--first-end' : '',
+  headerByColumnId.get(slot.columnId).column.columnDef.meta?.align === 'right' ? 'text-right' : headerByColumnId.get(slot.columnId).column.columnDef.meta?.align === 'center' ? 'text-center' : '',
+  headerByColumnId.get(slot.columnId).column.columnDef.meta?.internal ? `nut-dl-tf--${headerByColumnId.get(slot.columnId).column.columnDef.meta?.internal}` : ''
+]"
+                :data-col="slot.columnId"
+                :style="pinnedOffset(headerByColumnId.get(slot.columnId).column)"
+              >
+                <div
+                  v-if="slot.columnId === summaryLabelColumnId"
+                  class="nut-dl-tf__label flex items-center gap-2 whitespace-nowrap"
+                >
+                  <span
+                    class="nut-dl-tf__caption text-[10.5px] tracking-[0.08em] text-muted uppercase"
+                  >
+                    {{ summaryLabel }}
+                  </span>
+                  <span class="nut-dl-tf__count tabular-nums">{{
+                    formatNumber(summaries.count.value)
+                  }}</span>
+                </div>
+                <template v-else-if="summaryColumnIds.has(slot.columnId)">
+                  <span
+                    v-if="summaries.cell(slot.columnId).loading"
+                    class="nut-dl-skeleton nut-dl-tf__skeleton inline-block h-3 w-12 rounded-full align-middle"
+                    aria-hidden="true"
+                  />
+                  <span v-else class="nut-dl-tf__value tabular-nums">
+                    <component :is="renderSummary(slot.columnId)" />
+                  </span>
+                </template>
+              </td>
+            </template>
+          </tr>
+        </tfoot>
+        <tfoot
+          v-else-if="$slots.footer"
+          :class="mergeDataListUiClass('nut-dl-table__foot', void 0, ui?.tfoot)"
+        >
+          <slot name="footer" :column-slots="columnSlots" :leaf-columns="leafColumns" />
+        </tfoot>
+      </table>
+
+      <div v-if="empty" class="nut-dl-table__empty sticky left-0 w-full">
+        <slot name="empty">
+          <TableEmptyState
+            :min-height="fill ? 'calc(100% - var(--nut-dl-head-h))' : '16rem'"
+            :size="resolvedSize"
+          />
+        </slot>
+      </div>
+    </div>
+    <TableOverlayScrollbars ref="scrollbarsRef" :target="scrollRef" />
+  </div>
+</template>
+
+<style>
+.nut-dl-table{--nut-dl-surface:var(--nut-dl-table-surface,var(--ui-bg-elevated));--nut-dl-line:var(--nut-dl-table-line,var(--ui-border));--nut-dl-line-soft:var(--nut-dl-table-line-soft,var(--ui-border-muted));--nut-dl-head-bg:var(--nut-dl-table-head-bg,var(--ui-bg-muted));--nut-dl-head-fg:var(--nut-dl-table-head-fg,var(--ui-text-muted));--nut-dl-head-font:var(--nut-dl-table-head-font,11px);--nut-dl-head-weight:var(--nut-dl-table-head-weight,600);--nut-dl-head-tracking:var(--nut-dl-table-head-tracking,0.04em);--nut-dl-head-transform:var(--nut-dl-table-head-transform,none);--nut-dl-row-hover:var(--nut-dl-table-row-hover,var(--ui-bg-muted));--nut-dl-row-selected:var(
+    --nut-dl-table-row-selected,color-mix(in srgb,var(--ui-primary) 10%,var(--nut-dl-surface))
+  );--nut-dl-accent:var(--ui-primary);--nut-dl-cell-fg:var(--nut-dl-table-cell-fg,var(--ui-text-toned));--nut-dl-pin-line:var(--nut-dl-table-pin-line,var(--nut-dl-line))}.nut-dl-table__scroll{overflow-anchor:none;scrollbar-width:none}.nut-dl-table__scroll::-webkit-scrollbar{display:none}.nut-dl-th{color:var(--nut-dl-head-fg);font-size:var(--nut-dl-head-font);font-weight:var(--nut-dl-head-weight);letter-spacing:var(--nut-dl-head-tracking);text-transform:var(--nut-dl-head-transform);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.nut-dl-table__spacer,.nut-dl-th{border-bottom:1px solid var(--nut-dl-line)}.nut-dl-table__spacer,.nut-dl-tf,.nut-dl-th{background:var(--nut-dl-head-bg);border-top:1px solid var(--nut-dl-line)}.nut-dl-tf{color:var(--ui-text-highlighted);font-weight:var(--nut-dl-table-foot-weight,500);white-space:nowrap}tfoot .nut-dl-table__spacer{border-bottom:0;border-top:1px solid var(--nut-dl-line)}.nut-dl-spinner{animation:nut-dl-spin .8s linear infinite}@keyframes nut-dl-spin{to{transform:rotate(1turn)}}tbody .nut-dl-table__spacer{background:var(--nut-dl-surface);border-bottom:1px solid var(--nut-dl-line-soft)}.nut-dl-th__btn--open{background:color-mix(in srgb,var(--nut-dl-head-fg) 8%,transparent)}.nut-dl-rz:after{background:var(--ui-border-accented);bottom:10px;content:"";opacity:0;position:absolute;right:0;top:10px;transition:opacity .12s;width:1px}.nut-dl-rz:hover:after,.nut-dl-th:hover .nut-dl-rz:after{opacity:1}.nut-dl-rz--active:after,.nut-dl-rz:hover:after{background:var(--nut-dl-accent);bottom:6px;left:2.5px;opacity:1;top:6px;width:2px}.nut-dl-row{background:var(--nut-dl-surface);transition:background-color .1s}.nut-dl-row:hover{background:var(--nut-dl-row-hover)}.nut-dl-row--selected,.nut-dl-row--selected:hover{background:var(--nut-dl-row-selected)}.nut-dl-td,.nut-dl-th__btn,.nut-dl-th__static{padding-left:var(--nut-dl-cell-l,var(--nut-dl-cell-x));padding-right:var(--nut-dl-cell-r,var(--nut-dl-cell-x))}.nut-dl-row>.nut-dl-td:first-child,.nut-dl-table__head-row>.nut-dl-th:first-child{--nut-dl-cell-l:var(--nut-dl-gutter)}.nut-dl-row>.nut-dl-td:last-child,.nut-dl-table__head-row>.nut-dl-th:last-child{--nut-dl-cell-r:var(--nut-dl-gutter)}.nut-dl-row>.nut-dl-td--actions:last-child,.nut-dl-table__head-row>.nut-dl-th--actions:last-child,.nut-dl-td--actions{--nut-dl-cell-l:var(--nut-dl-cell-x);--nut-dl-cell-r:var(--nut-dl-cell-x)}.nut-dl-td--actions .nut-dl-td__inner{justify-content:flex-end}.nut-dl-td{background:inherit;border-bottom:1px solid var(--nut-dl-line-soft);box-sizing:border-box;color:var(--nut-dl-cell-fg);overflow:hidden;overflow-wrap:anywhere;padding-block:var(--nut-dl-cell-y,6px);white-space:normal}.nut-dl-td__inner{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--nut-dl-lines,3);line-clamp:var(--nut-dl-lines,3);max-height:calc(var(--nut-dl-lines, 3)*1.5em);overflow:hidden}.nut-dl-td--ellipsis{--nut-dl-lines:1;white-space:nowrap}.nut-dl-td--ellipsis .nut-dl-td__inner{display:block;text-overflow:ellipsis}.nut-dl-td--actions .nut-dl-td__inner,.nut-dl-td--selection .nut-dl-td__inner{align-items:center;display:flex}.nut-dl-td--actions,.nut-dl-td--selection{white-space:nowrap}.nut-dl-td--actions .nut-dl-td__inner>*{opacity:.55;transition:opacity .12s}.nut-dl-row:hover .nut-dl-td--actions .nut-dl-td__inner>*{opacity:1}.nut-dl-pin{position:sticky}.nut-dl-pin--first-end:before,.nut-dl-pin--last-start:after{background:var(--nut-dl-line);bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:1px}.nut-dl-pin--last-start:after{right:0}.nut-dl-pin--first-end:before{left:0}.nut-dl-pin--first-end:before,.nut-dl-pin--last-start:after{background:var(--nut-dl-pin-line)}.nut-dl-td--actions.nut-dl-pin--first-end:before,.nut-dl-th--actions.nut-dl-pin--first-end:before{display:none}.nut-dl-progress th{overflow:hidden}.nut-dl-progress th span{animation:nut-dl-progress 1s ease-in-out infinite;background:linear-gradient(90deg,transparent,var(--nut-dl-accent),transparent);background-size:40% 100%;height:2px;left:0;position:absolute;right:0}@keyframes nut-dl-progress{0%{background-position:-40% 0}to{background-position:140% 0}}.nut-dl-skeleton{animation:nut-dl-shimmer 1.6s ease-in-out infinite;animation-delay:calc(var(--nut-dl-i, 0)*-90ms);background:linear-gradient(90deg,var(--ui-bg-accented) 0,var(--ui-bg-muted) 45%,var(--ui-bg-accented) 100%);background-size:200% 100%}.nut-dl-row--skeleton{animation:nut-dl-fade-in .2s ease both;animation-delay:calc(var(--nut-dl-i, 0)*18ms)}@keyframes nut-dl-fade-in{0%{opacity:0}to{opacity:1}}@keyframes nut-dl-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.nut-dl-table[data-virtualized=true] .nut-dl-row[style*="--nut-dl-i"]{animation:nut-dl-row-in .22s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--nut-dl-i)*10ms)}@keyframes nut-dl-row-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.nut-dl-row--moving{transition:transform .24s cubic-bezier(.2,.9,.3,1)}.nut-dl-row--settling{transition:opacity .18s ease,transform .24s cubic-bezier(.2,.9,.3,1)}.nut-dl-row--from{opacity:0;transform:translateY(4px)}@media (prefers-reduced-motion:reduce){.nut-dl-row,.nut-dl-row--moving,.nut-dl-row--settling{transition:none}.nut-dl-progress th span,.nut-dl-skeleton,.nut-dl-table[data-virtualized=true] .nut-dl-row[style*="--nut-dl-i"]{animation:none}}
+</style>