@byyuurin/ui 0.0.10 → 0.1.0

package/dist/runtime/components/Table.vue

@@ -1,310 +1,452 @@
-<script lang="ts">
-import type { CellContext, ColumnDef, ColumnFiltersOptions, ColumnFiltersState, ColumnOrderState, ColumnPinningOptions, ColumnPinningState, ColumnSizingInfoState, ColumnSizingOptions, ColumnSizingState, CoreOptions, ExpandedOptions, ExpandedState, FacetedOptions, GlobalFilterOptions, GroupingOptions, GroupingState, HeaderContext, PaginationOptions, PaginationState, Row, RowData, RowPinningOptions, RowPinningState, RowSelectionOptions, RowSelectionState, SortingOptions, SortingState, Updater, VisibilityOptions, VisibilityState } from '@tanstack/vue-table'
-import type { PrimitiveProps } from 'reka-ui'
-import type { Ref } from 'vue'
-import type { table } from '../theme'
-import type { ComponentAttrs } from '../types'
-
-type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
-
-type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
-
-export type TableSlots<T> = {
-  expanded?: (props: { row: Row<T> }) => any
-  empty?: any
-  loading?: any
-  caption?: any
-} & DynamicHeaderSlots<T> & DynamicCellSlots<T>
-
-export type TableData = RowData
-export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D> & { title?: string }
-
-export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
-  state?: CoreOptions<T>['state']
-  onStateChange?: CoreOptions<T>['onStateChange']
-  renderFallbackValue?: CoreOptions<T>['renderFallbackValue']
-}
-
-export interface TableProps<T extends TableData> extends ComponentAttrs<typeof table>, TableOptions<T> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: PrimitiveProps['as']
-  data?: T[]
-  columns?: TableColumn<T>[]
-  caption?: string
-  /**
-   * The text to display when the table is empty.
-   * @default t('table.noData')
-   */
-  empty?: string
-  /**
-   * Whether the table should have a sticky header.
-   * @default false
-   */
-  sticky?: boolean
-  /** Whether the table should be in loading state. */
-  loading?: boolean
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering)
-   */
-  globalFilterOptions?: Omit<GlobalFilterOptions<T>, 'onGlobalFilterChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-filtering#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-filtering)
-   */
-  columnFiltersOptions?: Omit<ColumnFiltersOptions<T>, 'getFilteredRowModel' | 'onColumnFiltersChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-pinning#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-pinning)
-   */
-  columnPinningOptions?: Omit<ColumnPinningOptions, 'onColumnPinningChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
-   */
-  columnSizingOptions?: Omit<ColumnSizingOptions, 'onColumnSizingChange' | 'onColumnSizingInfoChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-visibility#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-visibility)
-   */
-  visibilityOptions?: Omit<VisibilityOptions, 'onColumnVisibilityChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
-   */
-  sortingOptions?: Omit<SortingOptions<T>, 'getSortedRowModel' | 'onSortingChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/grouping#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/grouping)
-   */
-  groupingOptions?: Omit<GroupingOptions, 'onGroupingChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/expanding#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/expanding)
-   */
-  expandedOptions?: Omit<ExpandedOptions<T>, 'getExpandedRowModel' | 'onExpandedChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
-   */
-  rowSelectionOptions?: Omit<RowSelectionOptions<T>, 'onRowSelectionChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-pinning#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-pinning)
-   */
-  rowPinningOptions?: Omit<RowPinningOptions<T>, 'onRowPinningChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination)
-   */
-  paginationOptions?: Omit<PaginationOptions, 'onPaginationChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-faceting#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-faceting)
-   */
-  facetedOptions?: FacetedOptions<T>
-}
+<script>
+import theme from "#build/ui/table";
 </script>
 
-<script setup lang="ts" generic="T extends TableData">
-import { FlexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table'
-import { reactiveOmit } from '@vueuse/core'
-import { Primitive } from 'reka-ui'
-import { upperFirst } from 'scule'
-import { computed } from 'vue'
-import { useLocale } from '../composables/useLocale'
-import { useTheme } from '../composables/useTheme'
-
-const props = defineProps<TableProps<T>>()
-const slots = defineSlots<TableSlots<T>>()
-
-const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
-const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
-const columnOrderState = defineModel<ColumnOrderState>('columnOrder', { default: [] })
-const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: {} })
-const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
-const columnSizingState = defineModel<ColumnSizingState>('columnSizing', { default: {} })
-const columnSizingInfoState = defineModel<ColumnSizingInfoState>('columnSizingInfo', { default: {} })
-const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
-const rowPinningState = defineModel<RowPinningState>('rowPinning', { default: {} })
-const sortingState = defineModel<SortingState>('sorting', { default: [] })
-const groupingState = defineModel<GroupingState>('grouping', { default: [] })
-const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
-const paginationState = defineModel<PaginationState>('pagination', { default: {} })
-
-const data = computed(() => props.data ?? [])
-const columns = computed<TableColumn<T>[]>(
-  () =>
-    props.columns ?? Object.keys(data.value[0] ?? {}).map(
-      (accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) }),
-    ),
-)
-
+<script setup>
+import { FlexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, useVueTable } from "@tanstack/vue-table";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { createReusableTemplate, reactiveOmit } from "@vueuse/core";
+import { defu } from "defu";
+import { Primitive } from "reka-ui";
+import { upperFirst } from "scule";
+import { computed, ref, shallowRef, toRef, watch } from "vue";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { cv, merge } from "../utils/style";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  data: { type: Array, required: false },
+  columns: { type: Array, required: false },
+  caption: { type: String, required: false },
+  meta: { type: Object, required: false },
+  virtualize: { type: [Boolean, Object], required: false, default: false },
+  empty: { type: String, required: false },
+  sticky: { type: [Boolean, String], required: false },
+  loading: { type: Boolean, required: false },
+  loadingColor: { type: null, required: false },
+  loadingAnimation: { type: null, required: false },
+  globalFilter: { type: String, required: false },
+  columnFilters: { type: Array, required: false },
+  columnOrder: { type: Array, required: false },
+  columnVisibility: { type: Object, required: false },
+  columnPinning: { type: Object, required: false },
+  columnSizing: { type: Object, required: false },
+  columnSizingInfo: { type: Object, required: false },
+  rowSelection: { type: Object, required: false },
+  rowPinning: { type: Object, required: false },
+  sorting: { type: Array, required: false },
+  grouping: { type: Array, required: false },
+  expanded: { type: [Boolean, Object], required: false },
+  pagination: { type: Object, required: false },
+  watchOptions: { type: Object, required: false, default: () => ({
+    deep: true
+  }) },
+  globalFilterOptions: { type: Object, required: false },
+  columnFiltersOptions: { type: Object, required: false },
+  columnPinningOptions: { type: Object, required: false },
+  columnSizingOptions: { type: Object, required: false },
+  visibilityOptions: { type: Object, required: false },
+  sortingOptions: { type: Object, required: false },
+  groupingOptions: { type: Object, required: false },
+  expandedOptions: { type: Object, required: false },
+  rowSelectionOptions: { type: Object, required: false },
+  rowPinningOptions: { type: Object, required: false },
+  paginationOptions: { type: Object, required: false },
+  facetedOptions: { type: Object, required: false },
+  onSelect: { type: Function, required: false },
+  onHover: { type: Function, required: false },
+  onContextmenu: { type: [Function, Array], required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
+  state: { type: Object, required: false },
+  onStateChange: { type: Function, required: false },
+  renderFallbackValue: { type: null, required: false },
+  _features: { type: Array, required: false },
+  autoResetAll: { type: Boolean, required: false },
+  debugAll: { type: Boolean, required: false },
+  debugCells: { type: Boolean, required: false },
+  debugColumns: { type: Boolean, required: false },
+  debugHeaders: { type: Boolean, required: false },
+  debugRows: { type: Boolean, required: false },
+  debugTable: { type: Boolean, required: false },
+  defaultColumn: { type: Object, required: false },
+  getRowId: { type: Function, required: false },
+  getSubRows: { type: Function, required: false },
+  initialState: { type: Object, required: false },
+  mergeOptions: { type: Function, required: false }
+});
+const slots = defineSlots();
+const [DefineTableTemplate, ReuseTableTemplate] = createReusableTemplate();
+const [DefineRowTemplate, ReuseRowTemplate] = createReusableTemplate({
+  props: {
+    row: {
+      type: Object,
+      required: true
+    },
+    style: {
+      type: Object,
+      required: false
+    }
+  }
+});
+const globalFilterState = defineModel("globalFilter", { type: String, ...{ default: void 0 } });
+const columnFiltersState = defineModel("columnFilters", { type: Array, ...{ default: [] } });
+const columnOrderState = defineModel("columnOrder", { type: Array, ...{ default: [] } });
+const columnVisibilityState = defineModel("columnVisibility", { type: Object, ...{ default: {} } });
+const columnPinningState = defineModel("columnPinning", { type: Object, ...{ default: {} } });
+const columnSizingState = defineModel("columnSizing", { type: Object, ...{ default: {} } });
+const columnSizingInfoState = defineModel("columnSizingInfo", { type: Object, ...{ default: {} } });
+const rowSelectionState = defineModel("rowSelection", { type: Object, ...{ default: {} } });
+const rowPinningState = defineModel("rowPinning", { type: Object, ...{ default: {} } });
+const sortingState = defineModel("sorting", { type: Array, ...{ default: [] } });
+const groupingState = defineModel("grouping", { type: Array, ...{ default: [] } });
+const expandedState = defineModel("expanded", { type: [Boolean, Object], ...{ default: {} } });
+const paginationState = defineModel("pagination", { type: Object, ...{ default: {} } });
+const rootRef = shallowRef();
+const tableRef = shallowRef(null);
+const data = ref(props.data ?? []);
+const meta = computed(() => props.meta ?? {});
+const columns = computed(
+  () => processColumns(props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey) => ({ accessorKey, header: upperFirst(accessorKey) })))
+);
+function processColumns(columns2) {
+  return columns2.map((column) => {
+    const col = { ...column };
+    if ("columns" in col && col.columns)
+      col.columns = processColumns(col.columns);
+    if (!col.cell) {
+      col.cell = ({ getValue }) => {
+        const value = getValue();
+        if (value === "" || value === null || value === void 0)
+          return "\xA0";
+        return String(value);
+      };
+    }
+    return col;
+  });
+}
+const hasFooter = computed(() => {
+  function hasFooterRecursive(columns2) {
+    for (const column of columns2) {
+      if ("footer" in column)
+        return true;
+      if ("columns" in column && hasFooterRecursive(column.columns))
+        return true;
+    }
+    return false;
+  }
+  return hasFooterRecursive(columns.value);
+});
 const tableApi = useVueTable({
-  ...reactiveOmit(props, 'data', 'columns', 'caption', 'sticky', 'loading', 'class', 'ui'),
+  ...reactiveOmit(props, "as", "data", "columns", "virtualize", "caption", "sticky", "loading", "loadingColor", "loadingAnimation", "class", "ui"),
   data,
-  columns: columns.value,
+  get columns() {
+    return columns.value;
+  },
+  meta: meta.value,
   getCoreRowModel: getCoreRowModel(),
-
   ...props.globalFilterOptions,
   onGlobalFilterChange: (updaterOrValue) => valueUpdater(updaterOrValue, globalFilterState),
-
   ...props.columnFiltersOptions,
   getFilteredRowModel: getFilteredRowModel(),
   onColumnFiltersChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnFiltersState),
   onColumnOrderChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnOrderState),
-
   ...props.visibilityOptions,
   onColumnVisibilityChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnVisibilityState),
-
   ...props.columnPinningOptions,
   onColumnPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnPinningState),
-
   ...props.columnSizingOptions,
   onColumnSizingChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingState),
   onColumnSizingInfoChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingInfoState),
-
   ...props.rowSelectionOptions,
   onRowSelectionChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowSelectionState),
-
   ...props.rowPinningOptions,
   onRowPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowPinningState),
-
   ...props.sortingOptions,
   getSortedRowModel: getSortedRowModel(),
   onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sortingState),
-
   ...props.groupingOptions,
   onGroupingChange: (updaterOrValue) => valueUpdater(updaterOrValue, groupingState),
-
   ...props.expandedOptions,
   getExpandedRowModel: getExpandedRowModel(),
   onExpandedChange: (updaterOrValue) => valueUpdater(updaterOrValue, expandedState),
-
   ...props.paginationOptions,
   onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, paginationState),
-
   ...props.facetedOptions,
   state: {
     get globalFilter() {
-      return globalFilterState.value
+      return globalFilterState.value;
     },
     get columnFilters() {
-      return columnFiltersState.value
+      return columnFiltersState.value;
     },
     get columnOrder() {
-      return columnOrderState.value
+      return columnOrderState.value;
     },
     get columnVisibility() {
-      return columnVisibilityState.value
+      return columnVisibilityState.value;
     },
     get columnPinning() {
-      return columnPinningState.value
+      return columnPinningState.value;
     },
     get expanded() {
-      return expandedState.value
+      return expandedState.value;
     },
     get rowSelection() {
-      return rowSelectionState.value
+      return rowSelectionState.value;
     },
     get sorting() {
-      return sortingState.value
+      return sortingState.value;
     },
     get grouping() {
-      return groupingState.value
+      return groupingState.value;
     },
     get rowPinning() {
-      return rowPinningState.value
+      return rowPinningState.value;
     },
     get columnSizing() {
-      return columnSizingState.value
+      return columnSizingState.value;
     },
     get columnSizingInfo() {
-      return columnSizingInfoState.value
+      return columnSizingInfoState.value;
     },
     get pagination() {
-      return paginationState.value
-    },
+      return paginationState.value;
+    }
+  }
+});
+const rows = computed(() => tableApi.getRowModel().rows);
+const virtualizerProps = toRef(() => defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+  estimateSize: 65,
+  overscan: 12
+}));
+const virtualizer = !!props.virtualize && useVirtualizer({
+  ...virtualizerProps.value,
+  get count() {
+    return rows.value.length;
   },
-})
-
-function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
-  ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
+  getScrollElement: () => rootRef.value?.$el,
+  estimateSize: () => virtualizerProps.value.estimateSize
+});
+function valueUpdater(updaterOrValue, ref2) {
+  ref2.value = typeof updaterOrValue === "function" ? updaterOrValue(ref2.value) : updaterOrValue;
 }
-
-const { t } = useLocale()
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('table', props))
-
+function onRowSelect(e, row) {
+  if (!props.onSelect)
+    return;
+  const target = e.target;
+  const isInteractive = target.closest("button") || target.closest("a");
+  if (isInteractive)
+    return;
+  e.preventDefault();
+  e.stopPropagation();
+  props.onSelect(e, row);
+}
+function onRowHover(e, row) {
+  if (!props.onHover)
+    return;
+  props.onHover(e, row);
+}
+function onRowContextmenu(e, row) {
+  if (!props.onContextmenu)
+    return;
+  if (Array.isArray(props.onContextmenu))
+    props.onContextmenu.forEach((fn) => fn(e, row));
+  else
+    props.onContextmenu(e, row);
+}
+function resolveValue(prop, arg) {
+  if (typeof prop === "function") {
+    return prop(arg);
+  }
+  return prop;
+}
+watch(() => props.data, () => {
+  data.value = props.data ? [...props.data] : [];
+}, props.watchOptions);
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.table));
+  return styler({
+    ...props,
+    sticky: props.virtualize ? false : props.sticky,
+    virtualize: !!props.virtualize
+  });
+});
 defineExpose({
-  tableApi,
-})
+  get $el() {
+    return rootRef.value?.$el;
+  },
+  tableRef,
+  tableApi
+});
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
-    <table :class="style.base({ class: props.ui?.base })">
-      <caption v-if="props.caption || slots.caption" :class="style.caption({ class: props.caption })">
+  <DefineRowTemplate v-slot="{ row, style }">
+    <tr
+      :role="props.onSelect ? 'button' : void 0"
+      :tabindex="props.onSelect ? 0 : void 0"
+      :class="ui.tr({
+  class: [
+    props.ui?.tr,
+    resolveValue(tableApi.options.meta?.class?.tr, row)
+  ]
+})"
+      :data-selected="row.getIsSelected()"
+      :data-selectable="!!props.onSelect || !!props.onHover || !!props.onContextmenu"
+      :data-expanded="row.getIsExpanded()"
+      data-part="tr"
+      :style="[resolveValue(tableApi.options.meta?.style?.tr, row), style]"
+      @click="onRowSelect($event, row)"
+      @pointerenter="onRowHover($event, row)"
+      @pointerleave="onRowHover($event, null)"
+      @contextmenu="onRowContextmenu($event, row)"
+    >
+      <td
+        v-for="cell in row.getVisibleCells()"
+        :key="cell.id"
+        :colspan="resolveValue(cell.column.columnDef.meta?.colspan?.td, cell)"
+        :rowspan="resolveValue(cell.column.columnDef.meta?.rowspan?.td, cell)"
+        :class="ui.td({
+  class: [
+    props.ui?.td,
+    resolveValue(cell.column.columnDef.meta?.class?.td, cell)
+  ],
+  pinned: !!cell.column.getIsPinned()
+})"
+        :data-pinned="cell.column.getIsPinned()"
+        data-part="td"
+        :style="resolveValue(cell.column.columnDef.meta?.style?.td, cell)"
+      >
+        <slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
+          <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+        </slot>
+      </td>
+    </tr>
+
+    <tr v-if="row.getIsExpanded()" :class="ui.tr({ class: props.ui?.tr })" data-part="tr">
+      <td :colspan="row.getAllCells().length" :class="ui.td({ class: props.ui?.td })" data-part="td">
+        <slot name="expanded" :row="row"></slot>
+      </td>
+    </tr>
+  </DefineRowTemplate>
+
+  <DefineTableTemplate>
+    <table ref="tableRef" :class="ui.base({ class: props.ui?.base })" data-part="base">
+      <caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })" data-part="caption">
         <slot name="caption">
-          {{ props.caption }}
+          {{ caption }}
         </slot>
       </caption>
 
-      <thead :class="style.thead({ class: props.ui?.thead })">
-        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="style.tr({ class: props.ui?.tr })">
+      <thead :class="ui.thead({ class: [props.ui?.thead] })" data-part="thead">
+        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })" data-part="tr">
           <th
             v-for="header in headerGroup.headers"
             :key="header.id"
             :data-pinned="header.column.getIsPinned()"
-            :class="style.th({ class: props.ui?.th, pinned: !!header.column.getIsPinned() })"
+            :scope="header.colSpan > 1 ? 'colgroup' : 'col'"
+            :colspan="header.colSpan > 1 ? header.colSpan : void 0"
+            :rowspan="header.rowSpan > 1 ? header.rowSpan : void 0"
+            :class="ui.th({
+  class: [
+    props.ui?.th,
+    resolveValue(header.column.columnDef.meta?.class?.th, header)
+  ],
+  pinned: !!header.column.getIsPinned()
+})"
+            data-part="th"
           >
             <slot :name="`${header.id}-header`" v-bind="header.getContext()">
-              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext" />
+              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
             </slot>
           </th>
         </tr>
+
+        <tr :class="ui.separator({ class: [props.ui?.separator] })" data-part="separator"></tr>
       </thead>
 
-      <tbody :class="style.tbody({ class: props.ui?.tbody })">
-        <template v-if="tableApi.getRowModel().rows.length > 0">
-          <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
-            <tr :data-selected="row.getIsSelected()" :data-expanded="row.getIsExpanded()" :class="style.tr({ class: props.ui?.tr })">
-              <td
-                v-for="cell in row.getVisibleCells()"
-                :key="cell.id"
-                :data-pinned="cell.column.getIsPinned()"
-                :class="style.td({ class: props.ui?.td, pinned: !!cell.column.getIsPinned() })"
-              >
-                <slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
-                  <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
-                </slot>
-              </td>
-            </tr>
-            <tr v-if="row.getIsExpanded()" :class="style.tr({ class: props.ui?.tr, expanded: true })">
-              <td :colspan="row.getAllCells().length" :class="style.td({ class: props.ui?.td })">
-                <slot name="expanded" :row="row"></slot>
-              </td>
-            </tr>
+      <tbody :class="ui.tbody({ class: [props.ui?.tbody] })" data-part="tbody">
+        <slot name="body-top"></slot>
+
+        <template v-if="rows.length">
+          <template v-if="virtualizer">
+            <template v-for="(virtualRow, index) in virtualizer.getVirtualItems()" :key="rows[virtualRow.index]?.id">
+              <ReuseRowTemplate
+                :row="rows[virtualRow.index]"
+                :style="{
+  height: `${virtualRow.size}px`,
+  transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`
+}"
+              />
+            </template>
+          </template>
+
+          <template v-else>
+            <ReuseRowTemplate v-for="row in rows" :key="row.id" :row="row" />
           </template>
         </template>
 
-        <tr v-else-if="props.loading && slots.loading">
-          <td :colspan="columns.length" :class="style.loading({ class: props.ui?.loading })">
+        <tr v-else-if="props.loading && !!slots.loading">
+          <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.loading({ class: props.ui?.loading })" data-part="loading">
             <slot name="loading"></slot>
           </td>
         </tr>
 
-        <tr v-else :class="style.tr({ class: props.ui?.tr })">
-          <td :colspan="columns.length" :class="style.empty({ class: props.ui?.empty })">
+        <tr v-else>
+          <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.empty({ class: props.ui?.empty })" data-part="empty">
             <slot name="empty">
-              {{ props.empty || t('table.noData') }}
+              {{ props.empty || t("table.noData") }}
             </slot>
           </td>
         </tr>
+
+        <slot name="body-bottom"></slot>
       </tbody>
+
+      <tfoot
+        v-if="hasFooter"
+        :class="ui.tfoot({ class: props.ui?.tfoot })"
+        data-part="tfoot"
+        :style="virtualizer ? {
+  transform: `translateY(${virtualizer.getTotalSize() - virtualizer.getVirtualItems().length * virtualizerProps.estimateSize}px)`
+} : void 0"
+      >
+        <tr :class="ui.separator({ class: props.ui?.separator })" data-part="separator"></tr>
+
+        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" :class="ui.tr({ class: props.ui?.tr })" data-part="tr">
+          <th
+            v-for="header in footerGroup.headers"
+            :key="header.id"
+            :data-pinned="header.column.getIsPinned()"
+            :colspan="header.colSpan > 1 ? header.colSpan : void 0"
+            :rowspan="header.rowSpan > 1 ? header.rowSpan : void 0"
+            :class="ui.th({
+  class: [
+    props.ui?.th,
+    resolveValue(header.column.columnDef.meta?.class?.th, header)
+  ],
+  pinned: !!header.column.getIsPinned()
+})"
+            data-part="th"
+            :style="resolveValue(header.column.columnDef.meta?.style?.th, header)"
+          >
+            <slot :name="`${header.id}-footer`" v-bind="header.getContext()">
+              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.footer" :props="header.getContext()" />
+            </slot>
+          </th>
+        </tr>
+      </tfoot>
     </table>
+  </DefineTableTemplate>
+
+  <Primitive ref="rootRef" :as="props.as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <div v-if="virtualizer" :style="{ height: `${virtualizer.getTotalSize()}px` }">
+      <ReuseTableTemplate />
+    </div>
+    <ReuseTableTemplate v-else />
   </Primitive>
 </template>