nuxt-ui-tools 1.4.0 → 1.6.0

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

@@ -1,19 +1,8 @@
 <script setup>
 import { useVirtualizer } from "@tanstack/vue-virtual";
-import {
-  computed,
-  h,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  shallowRef,
-  TransitionGroup,
-  useTemplateRef,
-  watch
-} from "vue";
+import { computed, h, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
-import { isDefined, isFunction, isNumber, isObject } from "../../../shared/utils/predicate";
+import { 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";
@@ -24,16 +13,20 @@ import {
   SELECT_COLUMN_WIDTH
 } from "../../utils/columns/types";
 import DataListErrorState from "../data-list/data-list-error-state.vue";
+import ProgressLine from "../layout/progress-line.vue";
 import TableCell from "./table-cell";
 import TableColumnHeader from "./table-column-header.vue";
 import TableEmptyState from "./table-empty-state.vue";
+import { columnCellLayout, tableRowCells } from "./table-layout";
 import TableOverlayScrollbars from "./table-overlay-scrollbars.vue";
+import TableRow from "./table-row.vue";
+import TableSkeletonCell from "./table-skeleton-cell";
 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 VIRTUALIZE_COLUMN_THRESHOLD = 12;
+const APPEND_WINDOW = 400;
 const SKELETON_MIN_ROWS = 6;
 const SIZE_TOKENS = {
   lg: { font: 13.5, head: 46, row: 52, x: 16 },
@@ -59,11 +52,12 @@ const { status } = internals.queryContent;
 const rowsMounted = ref(false);
 let rowMountFrame = 0;
 const isFirstLoad = computed(
-  () => status.value.isBooting || (status.value.isPending || status.value.isFetching) && rows.value.length === 0 || !rowsMounted.value && rows.value.length > 0
+  () => status.value.isBooting || (status.value.isPending || status.value.isFetching) && rows.value.length === 0
 );
 const refreshing = computed(
   () => rows.value.length > 0 && (status.value.isFetching || status.value.isRefreshing || status.value.isRevalidating)
 );
+const replacing = computed(() => rows.value.length > 0 && status.value.isReplacing);
 const error = computed(() => rows.value.length === 0 ? internals.queryContent.error.value : null);
 const empty = computed(() => !isFirstLoad.value && !error.value && rows.value.length === 0);
 function refresh() {
@@ -125,13 +119,18 @@ const virtualized = computed(
 );
 const scrollRef = useTemplateRef("scrollRef");
 const rowHeights = /* @__PURE__ */ new Map();
-function measureRowHeight(element) {
+function measureRowHeight(element, entry) {
   const key = element instanceof HTMLElement ? element.dataset.rowId : void 0;
-  const { height } = element.getBoundingClientRect();
+  const known = key === void 0 ? void 0 : rowHeights.get(key);
+  const box = entry?.borderBoxSize?.[0];
+  if (!box) {
+    return known ?? rowHeight.value;
+  }
+  const height = box.blockSize;
   if (key === void 0) {
     return height;
   }
-  const next = Math.max(rowHeights.get(key) ?? 0, height);
+  const next = Math.max(known ?? 0, height);
   rowHeights.set(key, next);
   return next;
 }
@@ -141,20 +140,17 @@ const rowVirtualizer = useVirtualizer(
     estimateSize: () => rowHeight.value,
     getItemKey: (index) => renderRows.value[index] ? getRowId(renderRows.value[index], index) : index,
     getScrollElement: () => scrollRef.value ?? null,
-    measureElement: (element) => measureRowHeight(element),
-    overscan: 8
+    measureElement: (element, entry) => measureRowHeight(element, entry),
+    overscan: 16
   }))
 );
 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,
+  data: renderRows,
   getRowId,
   pinned
 });
@@ -186,6 +182,20 @@ const columnVirtualizer = useVirtualizer(
   }))
 );
 const virtualColumns = computed(() => columnVirtualizer.value.getVirtualItems());
+const filled = computed(
+  () => !columnsOverflow.value && bodyWidth.value > 0 && table.getTotalSize() < bodyWidth.value
+);
+const tableCols = computed(() => {
+  const cols = leafColumns.value.map((leaf) => ({
+    key: leaf.id,
+    width: `${leaf.getSize()}px`
+  }));
+  if (filled.value) {
+    cols.splice(cols.length - table.getEndVisibleLeafColumns().length, 0, { key: "fill" });
+  }
+  return cols;
+});
+const columnCount = computed(() => tableCols.value.length);
 const columnSlots = computed(() => {
   function asSlot(column) {
     return {
@@ -196,7 +206,11 @@ const columnSlots = computed(() => {
   }
   const slots = table.getStartVisibleLeafColumns().map(asSlot);
   if (!columnsOverflow.value) {
-    slots.push(...centerColumns.value.map(asSlot), ...table.getEndVisibleLeafColumns().map(asSlot));
+    slots.push(...centerColumns.value.map(asSlot));
+    if (filled.value) {
+      slots.push({ key: "fill", kind: "fill" });
+    }
+    slots.push(...table.getEndVisibleLeafColumns().map(asSlot));
     return slots;
   }
   const first = virtualColumns.value[0];
@@ -217,23 +231,33 @@ const columnSlots = computed(() => {
   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 headerCellProps = computed(
+  () => new Map(
+    headers.value.map((header) => {
+      const { column } = header;
+      const meta = column.columnDef.meta;
+      return [
+        column.id,
+        {
+          align: meta?.align,
+          icon: meta?.icon,
+          items: internals.tableColumns.getMenuItems({ columnId: column.id }),
+          label: meta?.label ?? "",
+          pinned: Boolean(internals.tableColumns.getPinnedState({ columnId: column.id })),
+          resetSize: () => column.resetSize(),
+          resizable: column.getCanResize(),
+          resize: header.getResizeHandler(),
+          resizing: column.getIsResizing(),
+          sortState: internals.tableColumns.getSortState({ columnId: column.id }),
+          sortable: meta?.sortable
+        }
+      ];
+    })
+  )
+);
+const HEADER_ROW = {};
 const virtualPaddingTop = computed(() => virtualRows.value[0]?.start ?? 0);
 const virtualPaddingBottom = computed(() => {
   if (!virtualized.value || !virtualRows.value.length) {
@@ -241,26 +265,36 @@ const virtualPaddingBottom = computed(() => {
   }
   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);
+  return virtualRows.value.flatMap((item) => {
+    const row = tableRows.value[item.index];
+    return row ? [{ row, virtual: { index: item.index, key: String(item.key) } }] : [];
+  });
 });
-function measureRow(element) {
+const rowCells = computed(
+  () => tableRowCells({
+    layouts: new Map(
+      leafColumns.value.map((column) => [
+        column.id,
+        columnCellLayout({
+          firstEnd: isFirstEnd(column),
+          lastStart: isLastStart(column),
+          meta: column.columnDef.meta,
+          offset: pinnedOffset(column),
+          pinned: column.getIsPinned(),
+          tdClass: mergeDataListUiClass(void 0, void 0, props.ui?.td)
+        })
+      ])
+    ),
+    slots: columnSlots.value
+  })
+);
+const rowClass = computed(() => mergeDataListUiClass(void 0, void 0, props.ui?.tr));
+function measureRow(target) {
+  const element = target instanceof Element ? target : target?.$el;
   if (!(element instanceof HTMLElement)) {
     return;
   }
@@ -335,8 +369,11 @@ const summaryLabel = computed(() => {
   if (label) {
     return isFunction(label) ? String(label()) : String(label);
   }
-  return t("table.summaries.total");
+  return summaries.scope.value === "filtered" ? t("table.summaries.total") : t(`table.summaries.${summaries.scope.value}`);
 });
+const summaryUnit = computed(
+  () => t(summaries.count.value === 1 ? "table.summaries.rowOne" : "table.summaries.rowOther")
+);
 function formatNumber(value) {
   return isNumber(value) ? new Intl.NumberFormat(locale.value.code).format(value).replaceAll("\u202F", "\xA0") : String(value ?? "");
 }
@@ -354,52 +391,9 @@ function renderSummary(columnId) {
   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);
-}
+const appendedFrom = ref(Number.POSITIVE_INFINITY);
+const scrollResetPending = ref(false);
+let appendTimer = 0;
 watch(
   () => [
     internals.pagination.currentPage.value,
@@ -409,75 +403,38 @@ watch(
     internals.filters.searchQuery.value
   ],
   () => {
-    if (!rowsMounted.value || cursorMode.value) {
-      return;
-    }
+    if (!rowsMounted.value || cursorMode.value) return;
     rowHeights.clear();
-    armAnimation();
-    scrollRef.value?.scrollTo({ top: 0 });
+    scrollResetPending.value = true;
   }
 );
-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));
-  };
+function resetScroll() {
+  if (!scrollResetPending.value) return;
+  scrollResetPending.value = false;
+  scrollRef.value?.scrollTo({ top: 0 });
 }
-watch(isFirstLoad, (loading, was) => {
-  if (was && !loading) {
-    armAnimation();
-  }
-});
+watch(rows, resetScroll);
+watch(
+  () => status.value.isFetching,
+  (fetching) => !fetching && resetScroll()
+);
 watch(
   () => rows.value.length,
   (next, previous) => {
-    if (cursorMode.value && previous > 0 && next > previous) {
-      armAnimation(previous);
-    }
+    if (!cursorMode.value || previous === 0 || next <= previous) return;
+    appendedFrom.value = previous;
+    window.clearTimeout(appendTimer);
+    appendTimer = window.setTimeout(() => {
+      appendedFrom.value = Number.POSITIVE_INFINITY;
+    }, APPEND_WINDOW);
   }
 );
+function skeletonColumn(columnId) {
+  const meta = headerByColumnId.value.get(columnId)?.column.columnDef.meta;
+  if (meta?.internal === "selection") return { align: meta.align, skeleton: "check" };
+  if (meta?.internal) return { align: meta.align, skeleton: "none" };
+  return { align: meta?.align, skeleton: meta?.skeleton };
+}
 const cursorMode = computed(() => internals.pagination.mode.value === "cursor");
 const loadingMore = computed(
   () => cursorMode.value && internals.pagination.state.value.isLoadingMore
@@ -539,7 +496,7 @@ defineExpose({ resetColumnSizing });
       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' : '',
+  fill || height ? 'flex flex-1 flex-col' : '',
   mergeDataListUiClass(void 0, void 0, ui?.root)
 ]"
       @scroll.passive="onScrollLoadMore"
@@ -551,16 +508,21 @@ defineExpose({ resetColumnSizing });
       >
         <colgroup>
           <col
-            v-for="leaf in leafColumns"
-            :key="leaf.id"
-            :style="{ width: `${leaf.getSize()}px` }"
+            v-for="col in tableCols"
+            :key="col.key"
+            :style="col.width ? { width: col.width } : void 0"
           />
         </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'"
+                v-if="slot.kind === 'fill'"
+                class="nut-dl-table__fill sticky top-0 z-[3] p-0"
+                aria-hidden="true"
+              />
+              <th
+                v-else-if="slot.kind === 'spacer'"
                 :colspan="slot.colSpan"
                 class="nut-dl-table__spacer sticky top-0 z-[3] p-0"
                 aria-hidden="true"
@@ -593,53 +555,27 @@ defineExpose({ resetColumnSizing });
   headerByColumnId.get(slot.columnId).column.columnDef.meta?.renderHeader
 "
                       :render="
-  () => headerByColumnId.get(slot.columnId).column.columnDef.meta.renderHeader()
+  headerByColumnId.get(slot.columnId).column.columnDef.meta.renderHeader
 "
-                      :row="{}"
+                      :row="HEADER_ROW"
                       :index="-1"
                     />
                   </div>
                 </template>
                 <TableColumnHeader
                   v-else
+                  v-bind="headerCellProps.get(slot.columnId)"
                   :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 class="nut-dl-progress" :data-active="refreshing" 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'"
+        <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'"
+          :data-replacing="replacing"
         >
           <tr
             v-if="virtualPaddingTop"
@@ -647,70 +583,21 @@ defineExpose({ resetColumnSizing });
             :style="{ height: `${virtualPaddingTop}px` }"
             aria-hidden="true"
           >
-            <td :colspan="leafColumns.length" class="p-0" />
+            <td :colspan="columnCount" class="p-0" />
           </tr>
 
-          <tr
+          <TableRow
             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>
+            :row-id="String(row.id)"
+            :original="row.original"
+            :index="virtual.index"
+            :cells="rowCells"
+            :selected="internals.selection.isRowSelected({ rowId: String(row.id) })"
+            :appended="virtual.index >= appendedFrom"
+            :row-class="rowClass"
+          />
 
           <tr
             v-if="virtualPaddingBottom"
@@ -718,7 +605,7 @@ defineExpose({ resetColumnSizing });
             :style="{ height: `${virtualPaddingBottom}px` }"
             aria-hidden="true"
           >
-            <td :colspan="leafColumns.length" class="p-0" />
+            <td :colspan="columnCount" class="p-0" />
           </tr>
           <tr
             v-if="loadingMore"
@@ -726,10 +613,7 @@ defineExpose({ resetColumnSizing });
             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"
-            >
+            <td :colspan="columnCount" 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"
               >
@@ -745,11 +629,11 @@ defineExpose({ resetColumnSizing });
             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-if="slot.kind === 'fill'" class="nut-dl-table__fill p-0" />
+              <td v-else-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"
@@ -762,11 +646,14 @@ defineExpose({ resetColumnSizing });
   headerByColumnId.get(slot.columnId) ? pinnedOffset(headerByColumnId.get(slot.columnId).column) : void 0
 "
               >
-                <component :is="renderSkeletonCell(slot.columnId, placeholder)" />
+                <TableSkeletonCell
+                  v-bind="skeletonColumn(slot.columnId)"
+                  :seed="placeholder * 7 + slot.columnId.length"
+                />
               </td>
             </template>
           </tr>
-        </component>
+        </tbody>
 
         <tfoot
           v-if="summaries.enabled.value && !isFirstLoad && !empty"
@@ -775,7 +662,12 @@ defineExpose({ resetColumnSizing });
           <tr class="nut-dl-table__foot-row">
             <template v-for="slot in columnSlots" :key="`foot-${slot.key}`">
               <td
-                v-if="slot.kind === 'spacer'"
+                v-if="slot.kind === 'fill'"
+                class="nut-dl-table__fill nut-dl-tf sticky bottom-0 z-[3] p-0"
+                aria-hidden="true"
+              />
+              <td
+                v-else-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"
@@ -806,6 +698,9 @@ defineExpose({ resetColumnSizing });
                   <span class="nut-dl-tf__count tabular-nums">{{
                     formatNumber(summaries.count.value)
                   }}</span>
+                  <span class="nut-dl-tf__unit -ml-1 font-normal text-muted">{{
+                    summaryUnit
+                  }}</span>
                 </div>
                 <template v-else-if="summaryColumnIds.has(slot.columnId)">
                   <span
@@ -831,26 +726,37 @@ defineExpose({ resetColumnSizing });
 
       <div
         v-if="error"
-        class="nut-dl-table__error sticky left-0 w-full"
-        :style="{ height: fill ? 'calc(100% - var(--nut-dl-head-h))' : void 0 }"
+        class="nut-dl-table__error sticky left-0 flex w-full flex-col"
+        :class="fill || height ? 'min-h-0 flex-1' : ''"
       >
         <slot name="error" :error="error" :retry="refresh">
           <DataListErrorState
-            :min-height="fill ? '100%' : '16rem'"
+            :min-height="fill || height ? void 0 : '16rem'"
             :size="resolvedSize"
+            class="flex-1"
             @retry="refresh"
           />
         </slot>
       </div>
-      <div v-else-if="empty" class="nut-dl-table__empty sticky left-0 w-full">
+      <div
+        v-else-if="empty"
+        class="nut-dl-table__empty sticky left-0 flex w-full flex-col"
+        :class="fill || height ? 'min-h-0 flex-1' : ''"
+      >
         <slot name="empty">
           <TableEmptyState
-            :min-height="fill ? 'calc(100% - var(--nut-dl-head-h))' : '16rem'"
+            :min-height="fill || height ? void 0 : '16rem'"
             :size="resolvedSize"
+            class="flex-1"
           />
         </slot>
       </div>
     </div>
+    <ProgressLine
+      :active="refreshing"
+      :restart-key="internals.queryContent.refreshes.value"
+      class="absolute inset-x-0 top-[calc(var(--nut-dl-head-h)-1px)] z-[6]"
+    />
     <TableOverlayScrollbars ref="scrollbarsRef" :target="scrollRef" />
   </div>
 </template>
@@ -858,5 +764,5 @@ defineExpose({ resetColumnSizing });
 <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 paused;background:linear-gradient(90deg,transparent,var(--nut-dl-accent),transparent);background-size:40% 100%;height:2px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .12s ease-out}.nut-dl-progress[data-active=true] th span{animation-play-state:running;opacity:1}@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}}
+  );--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__fill,.nut-dl-table__spacer,.nut-dl-th{background:var(--nut-dl-head-bg);border-bottom:1px solid var(--nut-dl-line)}.nut-dl-tf{background:var(--nut-dl-head-bg);border-top:1px solid var(--nut-dl-line);color:var(--ui-text-highlighted);font-weight:var(--nut-dl-table-foot-weight,500);white-space:nowrap}tfoot .nut-dl-table__fill,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)}tbody .nut-dl-table__fill{background:inherit;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-tf[data-col],.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__foot-row>.nut-dl-tf: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__foot-row>.nut-dl-tf: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__foot-row>.nut-dl-tf--actions:last-child,.nut-dl-table__head-row>.nut-dl-th--actions:last-child,.nut-dl-td--actions,.nut-dl-tf--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);contain:paint;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-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 .18s ease .12s both}.nut-dl-row--appended{animation:nut-dl-fade-in .2s ease both}.nut-dl-table__body{transition:opacity .16s ease-out}.nut-dl-table__body[data-replacing=true]{opacity:.55;transition:opacity .2s ease-in .18s}@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}}@media (prefers-reduced-motion:reduce){.nut-dl-row,.nut-dl-table__body{transition:none}.nut-dl-row--appended,.nut-dl-row--skeleton,.nut-dl-skeleton{animation:none}}
 </style>