@shwfed/config 1.0.0

package/dist/runtime/components/table/index.vue

@@ -0,0 +1,895 @@
+<script setup>
+import { useNuxtApp } from "#app";
+import { Icon } from "@iconify/vue";
+import {
+  FlexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useVueTable
+} from "@tanstack/vue-table";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { Effect, Fiber, Option } from "effect";
+import { Fetch } from "fx-fetch";
+import { Pagination } from "reka-ui/namespaced";
+import { computed, defineComponent, h, onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { celBindings, provideCELContext, injectCELContext } from "../../plugins/cel/context";
+import { getLocalizedText } from "../../share/locale";
+import { Button } from "../ui/button";
+import { Markdown } from "../ui/markdown";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { NumberField, NumberFieldInput } from "../ui/number-field";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import ShwfedActions from "../actions/components/group.vue";
+import ShwfedForm from "../form/index.vue";
+import { provideTableHost } from "./utils/host";
+import { findColumn } from "./utils/resolve";
+import { interpolateMarkdown } from "./utils/runtime";
+const config = defineModel("config", { type: Object });
+const rowData = ref([]);
+const serverTotal = ref(void 0);
+const isFetching = ref(false);
+const queryState = ref({});
+const { t, locale } = useI18n({
+  inheritLocale: true,
+  messages: {
+    zh: {
+      "total": "\u5171 {count} \u6761",
+      "pagination-page-size": "\u6BCF\u9875\u6761\u6570",
+      "goto": "\u524D\u5F80 {page} \u9875",
+      "sort-asc": "\u5347\u5E8F",
+      "sort-desc": "\u964D\u5E8F",
+      "sort-unsorted": "\u672A\u6392\u5E8F",
+      "column-tooltip": "\u67E5\u770B\u5217\u63D0\u793A\uFF1A{column}"
+    },
+    en: {
+      "total": "Total {count} items",
+      "pagination-page-size": "Page size",
+      "goto": "Go to page {page}",
+      "sort-asc": "Ascending",
+      "sort-desc": "Descending",
+      "sort-unsorted": "Unsorted",
+      "column-tooltip": "Show column tooltip: {column}"
+    },
+    ja: {
+      "total": "\u5408\u8A08 {count} \u4EF6",
+      "pagination-page-size": "1\u30DA\u30FC\u30B8\u3042\u305F\u308A\u306E\u4EF6\u6570",
+      "goto": "\u30DA\u30FC\u30B8 {page} \u306B\u79FB\u52D5",
+      "sort-asc": "\u6607\u9806",
+      "sort-desc": "\u964D\u9806",
+      "sort-unsorted": "\u672A\u30BD\u30FC\u30C8",
+      "column-tooltip": "\u5217\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u3092\u8868\u793A: {column}"
+    }
+  }
+});
+const { $cel } = useNuxtApp();
+const inheritedContext = injectCELContext();
+const containerRef = ref(null);
+const appliedInitialStateKey = ref("");
+function getLocaleText(value) {
+  return getLocalizedText(value, locale.value);
+}
+function mergeCelContext(local) {
+  return { ...celBindings(inheritedContext), query: queryState.value, ...local };
+}
+function translateColumn(column) {
+  const entry = findColumn(column.type, column.compatibilityDate);
+  if (!entry) {
+    throw new Error(`[shwfed-table] no column registered for ${column.type}@${column.compatibilityDate}`);
+  }
+  const contribution = entry.toColumnDef(column, { getLocaleText, $cel, inheritedContext: celBindings(inheritedContext) });
+  return {
+    ...contribution,
+    id: column.id,
+    cell: (ctx) => h(entry.runtime, { column, ctx })
+  };
+}
+function makeGroupColumn(group, children) {
+  return {
+    id: group.id,
+    header: getLocaleText(group.title) ?? "",
+    columns: children,
+    meta: {
+      tooltip: getLocaleText(group.tooltip),
+      grow: false
+    }
+  };
+}
+const columns = computed(() => {
+  const cfg = config.value;
+  if (!cfg) return [];
+  const groupById = new Map(cfg.groups?.map((g) => [g.id, g]) ?? []);
+  const out = [];
+  let current = null;
+  for (const col of cfg.columns) {
+    const def = translateColumn(col);
+    const group = col.groupId ? groupById.get(col.groupId) : void 0;
+    if (!group) {
+      if (current) {
+        out.push(makeGroupColumn(current.group, current.children));
+        current = null;
+      }
+      out.push(def);
+      continue;
+    }
+    if (current && current.group.id === group.id) {
+      current.children.push(def);
+    } else {
+      if (current) out.push(makeGroupColumn(current.group, current.children));
+      current = { group, children: [def] };
+    }
+  }
+  if (current) out.push(makeGroupColumn(current.group, current.children));
+  return out;
+});
+const tableActionsConfig = computed(() => {
+  const a = config.value?.actions;
+  if (!a) return void 0;
+  if ((a.groups?.length ?? 0) === 0 && (a.items?.length ?? 0) === 0) return void 0;
+  return {
+    kind: "shwfed.component.action",
+    size: a.size ?? "default",
+    gap: a.gap ?? 4,
+    style: a.style,
+    groups: a.groups.map((g) => ({ ...g, variant: g.variant ?? "default" })),
+    items: a.items
+  };
+});
+const isPaginationEnabled = computed(() => config.value?.pagination !== void 0);
+const isManualPagination = computed(() => isPaginationEnabled.value && config.value?.dataSource?.total !== void 0);
+const totalItems = computed(() => isManualPagination.value ? serverTotal.value ?? 0 : rowData.value.length);
+const paginationConfig = computed(() => config.value?.pagination);
+const paginationPageSizes = computed(() => paginationConfig.value?.pageSizes ?? [20, 50, 100, 200]);
+const paginationLeftSource = computed(() => {
+  const source = getLocaleText(paginationConfig.value?.left);
+  if (!source) return "";
+  return interpolateMarkdown(source, $cel, {
+    selected: tableApi.getSelectedRowModel().rows.map((row) => row.original)
+  });
+});
+const paginationRightSource = computed(() => {
+  const source = getLocaleText(paginationConfig.value?.right);
+  if (!source) return "";
+  return interpolateMarkdown(source, $cel, {
+    selected: tableApi.getSelectedRowModel().rows.map((row) => row.original)
+  });
+});
+const TableRowCELContext = defineComponent({
+  name: "TableRowCELContext",
+  props: {
+    row: { type: null, default: void 0 },
+    index: { type: Number, required: true }
+  },
+  setup(props, { slots }) {
+    provideCELContext({
+      row: {
+        type: "dyn",
+        label: "\u5F53\u524D\u884C",
+        description: "\u5F53\u524D\u6E32\u67D3\u7684\u6574\u884C\u6570\u636E\uFF0C\u7C7B\u578B\u5728\u914D\u7F6E\u65F6\u672A\u77E5\uFF08`dyn`\uFF09\uFF0C\u5177\u4F53\u5B57\u6BB5\u53D6\u51B3\u4E8E\u63A5\u5165\u6570\u636E\u6E90\u3002",
+        get value() {
+          return props.row;
+        }
+      },
+      index: {
+        type: "number",
+        label: "\u884C\u5E8F\u53F7",
+        description: "\u5F53\u524D\u884C\u5728\u6240\u6709\u6570\u636E\u4E2D\u7684\u5E8F\u53F7\uFF0C\u4ECE `0` \u5F00\u59CB\u3002",
+        get value() {
+          return props.index;
+        }
+      }
+    });
+    return () => slots.default?.();
+  }
+});
+const tableApi = useVueTable({
+  get columns() {
+    return columns.value;
+  },
+  get data() {
+    return rowData.value;
+  },
+  get manualPagination() {
+    return isManualPagination.value;
+  },
+  get rowCount() {
+    return isManualPagination.value ? serverTotal.value : void 0;
+  },
+  get initialState() {
+    return {
+      pagination: {
+        pageIndex: paginationConfig.value?.pageIndex ?? 0,
+        pageSize: paginationConfig.value?.pageSize ?? 10
+      }
+    };
+  },
+  getCoreRowModel: getCoreRowModel(),
+  getExpandedRowModel: getExpandedRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  getSortedRowModel: getSortedRowModel(),
+  columnResizeMode: "onChange"
+});
+provideCELContext({
+  selected: {
+    type: "list<dyn>",
+    label: "\u5DF2\u9009\u884C",
+    description: "\u5F53\u524D\u5DF2\u52FE\u9009\u7684\u6240\u6709\u884C\uFF08`row` \u7684\u6570\u7EC4\uFF09\u3002",
+    get value() {
+      return tableApi.getSelectedRowModel().rows.map((r) => r.original);
+    }
+  },
+  query: {
+    type: "dyn",
+    label: "\u641C\u7D22\u6761\u4EF6",
+    description: "\u6E32\u67D3\u5728\u8868\u683C\u4E0A\u65B9\u7684\u641C\u7D22\u6761\u4EF6\u8868\u5355\u5F53\u524D\u72B6\u6001\uFF1B\u672A\u914D\u7F6E\u65F6\u4E3A\u7A7A\u5BF9\u8C61\u3002",
+    get value() {
+      return queryState.value;
+    }
+  }
+});
+async function fetchDataSource() {
+  const dataSource = config.value?.dataSource;
+  if (!dataSource) return;
+  const pageIndex = tableApi.getState().pagination.pageIndex;
+  const pageSize = tableApi.getState().pagination.pageSize;
+  const wantsTotal = dataSource.total !== void 0;
+  const effect = Effect.gen(function* () {
+    let jsonOpt = Option.none();
+    if (dataSource.request) {
+      const builder = yield* $cel(
+        dataSource.request,
+        mergeCelContext({ pageIndex, pageSize })
+      );
+      const response = yield* builder.json();
+      jsonOpt = Option.some(response);
+    }
+    const nextRowsRaw = yield* $cel(
+      dataSource.data,
+      mergeCelContext({ json: jsonOpt })
+    );
+    const nextRows = nextRowsRaw ?? [];
+    let nextTotal;
+    if (wantsTotal) {
+      const totalRaw = yield* $cel(
+        dataSource.total,
+        mergeCelContext({ json: jsonOpt })
+      );
+      const total = totalRaw ?? 0;
+      nextTotal = typeof total === "number" ? total : Number(total) || 0;
+    }
+    return { nextRows, nextTotal };
+  });
+  const program = Effect.gen(function* () {
+    const showMaskFiber = yield* Effect.fork(
+      Effect.sync(() => {
+        isFetching.value = true;
+      }).pipe(Effect.delay("30 millis"))
+    );
+    return yield* Effect.ensuring(effect, Fiber.interrupt(showMaskFiber));
+  }).pipe(
+    Effect.ensuring(Effect.sync(() => {
+      isFetching.value = false;
+    }))
+  );
+  try {
+    const result = await Effect.runPromise(Effect.provide(program, Fetch.layer));
+    rowData.value = Array.isArray(result.nextRows) ? result.nextRows : [];
+    serverTotal.value = wantsTotal ? result.nextTotal : void 0;
+  } catch (e) {
+    console.warn("[shwfed-table] dataSource fetch failed", e);
+  }
+}
+provideTableHost({
+  search: async () => {
+    tableApi.setPageIndex(0);
+    await fetchDataSource();
+  },
+  refetch: () => fetchDataSource(),
+  resetQuery: async () => {
+    const initial = config.value?.query?.initial;
+    if (!initial) {
+      queryState.value = {};
+      return;
+    }
+    try {
+      const result = await Effect.runPromise($cel(initial, { query: {} }));
+      queryState.value = result && typeof result === "object" && !Array.isArray(result) ? { ...result } : {};
+    } catch (e) {
+      console.error("[shwfed-table] resetQuery failed", e);
+      queryState.value = {};
+    }
+  }
+});
+const queryRef = ref(null);
+onMounted(async () => {
+  await queryRef.value?.seeded;
+  await fetchDataSource();
+});
+watch(
+  () => {
+    if (!isManualPagination.value) return null;
+    const { pageIndex, pageSize } = tableApi.getState().pagination;
+    return `${pageIndex}:${pageSize}`;
+  },
+  (next, prev) => {
+    if (next !== null && next !== prev) void fetchDataSource();
+  }
+);
+watch(
+  () => {
+    const ds = config.value?.dataSource;
+    if (!ds) return "";
+    return `${ds.request ?? ""}|${ds.data}|${ds.total ?? ""}`;
+  },
+  (next, prev) => {
+    if (next && next !== prev) void fetchDataSource();
+  }
+);
+const sortedRowIndexMap = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  tableApi.getSortedRowModel().flatRows.forEach((row, i) => {
+    map.set(row.id, i);
+  });
+  return map;
+});
+function getDisplayIndex(row) {
+  return sortedRowIndexMap.value.get(row.id) ?? row.index;
+}
+watch(config, (config2) => {
+  if (!config2) return;
+  const initialState = config2.initialState;
+  const nextKey = initialState ? JSON.stringify(initialState) : "";
+  if (appliedInitialStateKey.value === nextKey || !initialState) {
+    appliedInitialStateKey.value = nextKey;
+    syncPaginationPageSize();
+    return;
+  }
+  tableApi.initialState = mergeInitialState(tableApi.initialState, initialState);
+  tableApi.reset();
+  appliedInitialStateKey.value = nextKey;
+  syncPaginationPageSize();
+}, { immediate: true });
+defineExpose(tableApi);
+const rows = computed(() => isPaginationEnabled.value ? tableApi.getRowModel().rows : tableApi.getPrePaginationRowModel().rows);
+const maxPage = computed(() => isPaginationEnabled.value ? Math.max(tableApi.getPageCount(), 1) : 1);
+const rowVirtualizer = useVirtualizer(
+  computed(() => ({
+    count: rows.value.length,
+    estimateSize: () => 33,
+    getScrollElement: () => containerRef.value,
+    overscan: 30
+  }))
+);
+const rowTotalSize = computed(() => rowVirtualizer.value.getTotalSize());
+const rowWindow = computed(() => rowVirtualizer.value.getVirtualItems());
+function measureRow(el) {
+  if (!el || !(el instanceof Element)) return;
+  rowVirtualizer.value.measureElement(el);
+}
+function isStyleRecord(x) {
+  return typeof x === "object" && x !== null && !Array.isArray(x);
+}
+function getCellStyles(ctx) {
+  const expression = config.value?.cellStyle;
+  if (!expression) return {};
+  try {
+    const result = Effect.runSync($cel(expression, mergeCelContext({
+      row: ctx.row.original,
+      index: getDisplayIndex(ctx.row),
+      id: ctx.column.id,
+      selected: ctx.row.getIsSelected(),
+      pinned: ctx.column.getIsPinned()
+    })));
+    return isStyleRecord(result) ? result : {};
+  } catch (e) {
+    console.error("[shwfed-table] cellStyle failed", e);
+    return {};
+  }
+}
+function shouldHaveRightBorder(column) {
+  switch (column.getIsPinned()) {
+    case "left":
+      return true;
+    case "right":
+      return false;
+    case false:
+      return !column.getIsLastColumn("center");
+  }
+}
+function shouldHaveLeftBorder(column) {
+  switch (column.getIsPinned()) {
+    case "left":
+      return false;
+    case "right":
+      return true;
+    case false:
+      return false;
+  }
+}
+function pinnedStyle(column) {
+  const pinned = column.getIsPinned();
+  if (!pinned) return {};
+  const style = {
+    [pinned]: pinned === "left" ? `${column.getStart("left")}px` : `${column.getAfter("right")}px`
+  };
+  if (column.getIsLastColumn("left"))
+    style.boxShadow = "5px 5px 5px #00000005";
+  if (column.getIsFirstColumn("right"))
+    style.boxShadow = "-5px 5px 5px #00000005";
+  return style;
+}
+function shouldShowResizeHandle(column) {
+  const lastVisibleLeafColumn = tableApi.getVisibleLeafColumns().at(-1);
+  if (!lastVisibleLeafColumn) return false;
+  const lastLeafColumn = column.getLeafColumns().at(-1);
+  return lastLeafColumn?.id !== lastVisibleLeafColumn.id;
+}
+const SORT_ICONS = {
+  unsorted: "fluent:arrow-sort-16-regular",
+  asc: "fluent:arrow-sort-up-16-regular",
+  desc: "fluent:arrow-sort-down-16-regular"
+};
+function getSortIcon(column) {
+  const dir = column.getIsSorted();
+  return SORT_ICONS[dir === false ? "unsorted" : dir] ?? SORT_ICONS.unsorted;
+}
+function getSortLabel(column) {
+  const direction = column.getIsSorted();
+  if (direction === "asc") return t("sort-asc");
+  if (direction === "desc") return t("sort-desc");
+  return t("sort-unsorted");
+}
+const currentPageSize = computed({
+  get: () => tableApi.getState().pagination.pageSize,
+  set: (value) => {
+    const nextPageSize = Number(value);
+    if (!Number.isInteger(nextPageSize) || nextPageSize <= 0) return;
+    tableApi.setPageSize(nextPageSize);
+  }
+});
+function syncPaginationPageSize() {
+  if (!isPaginationEnabled.value) return;
+  const currentPageSize2 = tableApi.getState().pagination.pageSize;
+  const pageSizes = paginationPageSizes.value;
+  if (pageSizes.includes(currentPageSize2)) return;
+  const closest = pageSizes.reduce(
+    (prev, curr) => Math.abs(curr - currentPageSize2) < Math.abs(prev - currentPageSize2) ? curr : prev
+  );
+  if (closest !== currentPageSize2) {
+    tableApi.setPageSize(closest);
+  }
+}
+function cloneItems(items) {
+  return items ? [...items] : void 0;
+}
+function normalizeExpandedState(expanded, current) {
+  if (expanded === void 0) return current;
+  if (expanded === true) return true;
+  if (expanded === false) return {};
+  return expanded;
+}
+function mergeInitialState(current, initialState) {
+  return {
+    ...current,
+    columnVisibility: initialState.columnVisibility ?? current.columnVisibility,
+    columnOrder: cloneItems(initialState.columnOrder) ?? current.columnOrder,
+    columnPinning: initialState.columnPinning ? {
+      ...current.columnPinning,
+      left: cloneItems(initialState.columnPinning.left) ?? current.columnPinning.left,
+      right: cloneItems(initialState.columnPinning.right) ?? current.columnPinning.right
+    } : current.columnPinning,
+    rowPinning: initialState.rowPinning ? {
+      ...current.rowPinning,
+      top: cloneItems(initialState.rowPinning.top) ?? current.rowPinning.top,
+      bottom: cloneItems(initialState.rowPinning.bottom) ?? current.rowPinning.bottom
+    } : current.rowPinning,
+    sorting: cloneItems(initialState.sorting) ?? current.sorting,
+    expanded: normalizeExpandedState(initialState.expanded, current.expanded),
+    grouping: cloneItems(initialState.grouping) ?? current.grouping,
+    columnSizing: initialState.columnSizing ?? current.columnSizing,
+    pagination: isPaginationEnabled.value ? {
+      pageIndex: paginationConfig.value?.pageIndex ?? current.pagination.pageIndex,
+      pageSize: paginationConfig.value?.pageSize ?? current.pagination.pageSize
+    } : current.pagination,
+    rowSelection: initialState.rowSelection ?? current.rowSelection
+  };
+}
+</script>
+
+<script>
+export { TableConfig, createTableConfig, getColumnTechnicalKey } from "./schema";
+</script>
+
+<template>
+  <div
+    class="relative flex flex-col overflow-hidden gap-2"
+    :style="config?.style"
+  >
+    <div
+      v-if="config?.query"
+      class="w-full py-1.5"
+    >
+      <ClientOnly>
+        <ShwfedForm
+          ref="queryRef"
+          v-model="queryState"
+          :config="config.query"
+        />
+      </ClientOnly>
+    </div>
+    <nav
+      v-if="tableActionsConfig"
+      class="flex items-center justify-between"
+    >
+      <ShwfedActions
+        :config="tableActionsConfig"
+      />
+    </nav>
+    <div
+      :class="[
+  'flex min-h-0 flex-1 flex-col relative'
+]"
+    >
+      <div
+        v-if="isFetching"
+        class="absolute inset-0 bg-white/20 z-30 pointer-events-auto"
+        aria-hidden="true"
+      />
+      <ClientOnly>
+        <!-- Scrollable table container -->
+        <div
+          ref="containerRef"
+          class="overflow-scroll overscroll-none flex-1 border border-zinc-200 rounded relative"
+        >
+          <div :style="{ height: `${rowTotalSize}px` }">
+            <table class="grid">
+              <!-- Header -->
+              <thead
+                v-if="columns.length > 0"
+                class="grid sticky top-0 z-10 select-none"
+              >
+                <tr
+                  v-for="group in tableApi.getHeaderGroups()"
+                  :key="group.id"
+                  class="flex w-full border-b border-zinc-200"
+                >
+                  <th
+                    v-for="header in group.headers"
+                    :key="header.id"
+                    :colspan="header.colSpan"
+                    :class="[
+  header.column.columnDef.meta?.grow && 'flex-1',
+  'flex items-center gap-2 border-zinc-300 py-2 text-zinc-600',
+  'text-xs flex items-center justify-center relative',
+  'bg-[color-mix(in_srgb,var(--primary)_7%,white)] group',
+  header.column.getIsPinned() && 'sticky z-15',
+  shouldHaveRightBorder(header.column) && 'border-r',
+  shouldHaveLeftBorder(header.column) && 'border-l'
+]"
+                    :style="{
+  width: `${header.getSize()}px`,
+  ...pinnedStyle(header.column)
+}"
+                  >
+                    <!-- Column header with tooltip: dashed underline + Markdown tooltip -->
+                    <Tooltip
+                      v-if="!header.isPlaceholder && header.column.columnDef.meta?.tooltip"
+                      :delay-duration="180"
+                    >
+                      <TooltipTrigger as-child>
+                        <span class="decoration-dashed underline decoration-(--primary) underline-offset-4 px-4 cursor-help">
+                          <FlexRender
+                            :render="header.column.columnDef.header"
+                            :props="header.getContext()"
+                          />
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent
+                        align="center"
+                        side="top"
+                        class="max-w-xs text-xs"
+                      >
+                        <Markdown
+                          :source="header.column.columnDef.meta.tooltip"
+                          class="prose prose-xs prose-zinc"
+                        />
+                      </TooltipContent>
+                    </Tooltip>
+
+                    <!-- Column header without tooltip: plain render -->
+                    <FlexRender
+                      v-else-if="!header.isPlaceholder"
+                      :render="header.column.columnDef.header"
+                      :props="header.getContext()"
+                    />
+
+                    <!-- Sort toggle -->
+                    <Tooltip
+                      v-if="!header.isPlaceholder && header.column.getCanSort()"
+                      :delay-duration="800"
+                    >
+                      <TooltipTrigger as-child>
+                        <Button
+                          variant="ghost"
+                          size="xs"
+                          :class="[
+  'absolute hover:bg-transparent right-1 top-1/2 -translate-y-1/2 transform-3d transition-opacity duration-180',
+  !header.column.getIsSorted() ? 'opacity-30 hover:opacity-60' : 'text-(--primary)/80 hover:text-(--primary)'
+]"
+                          as-child
+                        >
+                          <button
+                            type="button"
+                            :aria-label="getSortLabel(header.column)"
+                            @click="header.column.getToggleSortingHandler()?.($event)"
+                          >
+                            <Icon :icon="getSortIcon(header.column)" />
+                          </button>
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {{ getSortLabel(header.column) }}
+                      </TooltipContent>
+                    </Tooltip>
+
+                    <!-- Resize handle -->
+                    <div
+                      v-if="!header.isPlaceholder && header.column.getCanResize() && shouldShowResizeHandle(header.column)"
+                      :class="[
+  'group',
+  'absolute',
+  'top-0',
+  'bottom-0',
+  'right-0',
+  'px-2',
+  'translate-x-2',
+  'z-5',
+  'opacity-0',
+  'duration-150',
+  'transition-opacity',
+  'ease-out',
+  'hover:opacity-100',
+  'cursor-col-resize'
+]"
+                      @mousedown="header.getResizeHandler()($event)"
+                    >
+                      <div class="w-2pt h-full translate-x-1pt transform-3d bg-[color-mix(in_srgb,var(--primary)_80%,white)]" />
+                    </div>
+                  </th>
+                </tr>
+              </thead>
+
+              <!-- Body -->
+              <tbody
+                v-if="columns.length > 0"
+                class="grid relative"
+                :style="{ height: `${rowTotalSize}px` }"
+              >
+                <tr
+                  v-for="r in rowWindow"
+                  :key="rows[r.index]?.id ?? r.index"
+                  :ref="measureRow"
+                  class="flex absolute w-full border-b border-zinc-300"
+                  :data-index="rows[r.index]?.index"
+                  :style="{ transform: `translate3d(0, ${r.start}px, 0)` }"
+                >
+                  <td
+                    v-for="cell in rows[r.index]?.getVisibleCells() ?? []"
+                    :key="cell.id"
+                    :class="[
+  'border-zinc-300',
+  cell.column.columnDef.meta?.grow && 'flex-1',
+  cell.column.getIsPinned() && 'sticky z-15',
+  shouldHaveRightBorder(cell.column) && 'border-r',
+  shouldHaveLeftBorder(cell.column) && 'border-l'
+]"
+                    :style="{
+  width: `${cell.column.getSize()}px`,
+  ...pinnedStyle(cell.column),
+  ...getCellStyles(cell.getContext())
+}"
+                  >
+                    <TableRowCELContext
+                      :row="cell.row.original"
+                      :index="getDisplayIndex(cell.row)"
+                    >
+                      <FlexRender
+                        :render="cell.column.columnDef.cell"
+                        :props="cell.getContext()"
+                      />
+                    </TableRowCELContext>
+                  </td>
+                </tr>
+              </tbody>
+
+              <!-- Footer -->
+              <tfoot class="hidden has-data-footer:grid sticky bottom-0 z-10 select-none border-t border-zinc-200">
+                <tr
+                  v-for="group in tableApi.getFooterGroups()"
+                  :key="group.id"
+                  class="flex w-full border-zinc-200"
+                >
+                  <th
+                    v-for="header in group.headers"
+                    :key="header.id"
+                    :colspan="header.colSpan"
+                    :class="[
+  header.column.columnDef.meta?.grow && 'flex-1',
+  'flex items-center gap-2 border-zinc-300 text-zinc-600 p-0',
+  'text-xs flex items-center justify-center relative',
+  'bg-[color-mix(in_srgb,var(--primary)_7%,white)] group',
+  header.column.getIsPinned() && 'sticky z-15',
+  shouldHaveRightBorder(header.column) && 'border-r',
+  shouldHaveLeftBorder(header.column) && 'border-l'
+]"
+                    :style="{
+  width: `${header.getSize()}px`,
+  ...pinnedStyle(header.column)
+}"
+                  >
+                    <FlexRender
+                      v-if="!header.isPlaceholder"
+                      :render="header.column.columnDef.footer"
+                      :props="header.getContext()"
+                    />
+                  </th>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+      </ClientOnly>
+
+      <!-- Pagination -->
+      <ClientOnly>
+        <div
+          v-if="isPaginationEnabled"
+          class="flex items-center justify-between w-full py-2 gap-2 text-sm text-zinc-600 @container"
+        >
+          <!-- Left markdown slot -->
+          <div class="relative p-1 flex-1 prose prose-zinc text-xs invisible @lg:visible">
+            <Markdown :source="paginationLeftSource" />
+            &nbsp;
+          </div>
+
+          <div class="flex items-center gap-4">
+            <!-- Total count -->
+            <span class="text-xs hidden @lg:inline">
+              {{ t("total", { count: totalItems }) }}
+            </span>
+
+            <!-- Page size selector -->
+            <label
+              v-if="paginationPageSizes.length > 0"
+              data-slot="table-pagination-page-size"
+              class="items-center gap-2 text-xs text-zinc-500 hidden @lg:flex"
+            >
+              <Select v-model="currentPageSize">
+                <SelectTrigger
+                  size="sm"
+                  :aria-label="t('pagination-page-size')"
+                  class="h-7 w-32 text-xs"
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem
+                    v-for="pageSize in paginationPageSizes"
+                    :key="pageSize"
+                    :value="pageSize"
+                  >
+                    {{ pageSize }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </label>
+
+            <!-- Page navigation -->
+            <Pagination.Root
+              show-edges
+              :total="totalItems"
+              :items-per-page="tableApi.getState().pagination.pageSize"
+              :page="tableApi.getState().pagination.pageIndex + 1"
+              @update:page="(page2) => tableApi.setPageIndex(page2 - 1)"
+            >
+              <Pagination.List
+                v-slot="{ items }"
+                class="flex items-center gap-1"
+              >
+                <Pagination.First
+                  :class="[
+  'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
+  'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
+]"
+                >
+                  <Icon
+                    icon="radix-icons:double-arrow-left"
+                    class="w-4 h-4"
+                  />
+                </Pagination.First>
+                <Pagination.Prev
+                  :class="[
+  'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
+  'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
+]"
+                >
+                  <Icon
+                    icon="radix-icons:chevron-left"
+                    class="w-4 h-4"
+                  />
+                </Pagination.Prev>
+
+                <template
+                  v-for="(page, pageItemIndex) in items"
+                  :key="page.type === 'page' ? `${page.type}-${page.value}` : `${page.type}-${pageItemIndex}`"
+                >
+                  <Pagination.ListItem
+                    v-if="page.type === 'page'"
+                    :class="[
+  'w-7 h-7 items-center justify-center rounded text-xs bg-transparent',
+  'data-selected:text-(--primary) hover:bg-zinc-100 transition cursor-pointer',
+  page.value - 1 === tableApi.getState().pagination.pageIndex ? '' : 'hidden @md:flex'
+]"
+                    :value="page.value"
+                  >
+                    {{ page.value }}
+                  </Pagination.ListItem>
+                  <Pagination.Ellipsis
+                    v-else
+                    class="w-7 h-7 items-center justify-center text-zinc-400 hidden @md:flex"
+                  >
+                    &#8230;
+                  </Pagination.Ellipsis>
+                </template>
+
+                <Pagination.Next
+                  :class="[
+  'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
+  'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
+]"
+                >
+                  <Icon
+                    icon="radix-icons:chevron-right"
+                    class="w-4 h-4"
+                  />
+                </Pagination.Next>
+                <Pagination.Last
+                  :class="[
+  'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
+  'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
+]"
+                >
+                  <Icon
+                    icon="radix-icons:double-arrow-right"
+                    class="w-4 h-4"
+                  />
+                </Pagination.Last>
+              </Pagination.List>
+            </Pagination.Root>
+
+            <!-- Page jump -->
+            <div class="text-xs items-center gap-2 hidden @lg:flex">
+              {{ t("goto", { page: "" }) }}
+              <NumberField
+                :model-value="tableApi.getState().pagination.pageIndex + 1"
+                :min="1"
+                :max="maxPage"
+                @update:model-value="(value) => tableApi.setPageIndex(value - 1)"
+              >
+                <NumberFieldInput class="h-6 w-16 text-xs" />
+              </NumberField>
+            </div>
+          </div>
+
+          <!-- Right markdown slot -->
+          <div class="relative p-1 flex-1 prose prose-zinc text-xs text-right invisible @lg:visible">
+            <Markdown :source="paginationRightSource" />
+            &nbsp;
+          </div>
+        </div>
+      </ClientOnly>
+    </div>
+  </div>
+</template>