@gcsa/console-vue 0.1.0

package/src/components/GcsaDataTable.vue

@@ -0,0 +1,1183 @@
+<template>
+  <div class="gcsa-data-table" :class="{ 'gcsa-data-table--cards': mobileMode === 'cards' }">
+    <div v-if="showToolbar" class="gcsa-data-table__toolbar">
+      <div class="gcsa-data-table__toolbar-meta">
+        <span v-if="showCount && !loading" class="gcsa-data-table__count">{{ totalCountText }}</span>
+        <span v-if="selectedCount" class="gcsa-data-table__selected">{{ selectedCountText }}</span>
+      </div>
+      <div v-if="$slots.toolbar" class="gcsa-data-table__toolbar-actions">
+        <slot name="toolbar" />
+      </div>
+      <div v-if="$slots.columns" class="gcsa-data-table__columns-control">
+        <slot name="columns" :columns="columnOptions" :visibility="columnVisibility" :toggle="toggleColumn" />
+      </div>
+    </div>
+
+    <div ref="tableWrap" class="gcsa-table-wrap gcsa-ui-surface" :style="tableWrapStyle">
+      <div v-if="loading" class="gcsa-data-table__state gcsa-data-table__state--loading" role="status" aria-live="polite">
+        <div class="gcsa-data-table__loading-label">
+          <GcsaSpin />
+          <span>{{ messages.dataTableLoading }}</span>
+        </div>
+      </div>
+      <div v-else-if="error" class="gcsa-data-table__state gcsa-data-table__state--error" role="alert">
+        <span>{{ error }}</span>
+        <GcsaButton size="sm" variant="secondary" @click="emit('retry')">{{ resolvedRetryLabel }}</GcsaButton>
+      </div>
+      <table v-else class="gcsa-table" :class="tableClass">
+        <thead class="gcsa-table__head">
+          <tr v-for="(headerGroup, headerGroupIndex) in table.getHeaderGroups()" :key="headerGroup.id">
+            <th v-if="headerGroupIndex === 0 && (effectiveExpandable || treeData)" class="gcsa-table__col-expand" scope="col" :style="expandColumnStyle" :rowspan="table.getHeaderGroups().length" />
+            <th
+              v-if="headerGroupIndex === 0 && effectiveSelectable"
+              class="gcsa-table__col-check"
+              scope="col"
+              :style="selectionColumnStyle"
+              :rowspan="table.getHeaderGroups().length"
+            >
+              <GcsaCheckbox
+                :model-value="allSelected"
+                :disabled="!selectableRows.length"
+                label=""
+                :aria-label="messages.dataTableSelectAll"
+                @update:model-value="toggleAll"
+              />
+            </th>
+              <th
+                v-for="header in headerGroup.headers"
+                :key="header.id"
+                scope="col"
+                :colspan="header.colSpan"
+                :rowspan="header.rowSpan > 1 ? header.rowSpan : undefined"
+                :class="alignClass(columnMeta(header.column.columnDef).align)"
+                :style="columnStyle(columnMeta(header.column.columnDef), header.column.id)"
+                @click="handleHeaderClick($event, header.column.id, header.column.columnDef)"
+                :aria-sort="childColumns(header.column.columnDef).length ? undefined : ariaSort(header.column.getIsSorted())"
+              >
+              <button
+                v-if="!header.isPlaceholder && !childColumns(header.column.columnDef).length && header.column.getCanSort()"
+                type="button"
+                class="gcsa-table__sort"
+                :class="{ 'gcsa-table__sort--active': header.column.getIsSorted() }"
+                @click="header.column.getToggleSortingHandler()?.($event)"
+              >
+                <span class="gcsa-table__sort-label">
+                  <slot
+                    :name="headerSlotName(headerSlotKey(header.column))"
+                    :column="header.column.id"
+                    :title="headerTitle(header)"
+                  >
+                    <FlexRender
+                      v-if="!header.isPlaceholder"
+                      :render="header.column.columnDef.header"
+                      :props="header.getContext()"
+                    />
+                  </slot>
+                </span>
+                <span class="gcsa-table__sort-icon" aria-hidden="true">
+                <span
+                  class="gcsa-table__sort-chevron gcsa-table__sort-chevron--up"
+                  :class="{ 'gcsa-table__sort-chevron--on': header.column.getIsSorted() === 'asc' }"
+                >
+                  <GcsaIcon name="chevronUp" size="sm" />
+                </span>
+                <span
+                  class="gcsa-table__sort-chevron gcsa-table__sort-chevron--down"
+                  :class="{ 'gcsa-table__sort-chevron--on': header.column.getIsSorted() === 'desc' }"
+                >
+                  <GcsaIcon name="chevronDown" size="sm" />
+                </span>
+                </span>
+              </button>
+              <span v-else-if="!header.isPlaceholder && !childColumns(header.column.columnDef).length" class="gcsa-table__head-text">
+                <slot
+                  :name="headerSlotName(headerSlotKey(header.column))"
+                  :column="header.column.id"
+                  :title="headerTitle(header)"
+                >
+                  <FlexRender
+                    :render="header.column.columnDef.header"
+                    :props="header.getContext()"
+                  />
+                </slot>
+              </span>
+              <span v-else-if="!header.isPlaceholder" class="gcsa-table__head-text">
+                <slot
+                  :name="headerSlotName(headerSlotKey(header.column))"
+                  :column="header.column.id"
+                  :title="headerTitle(header)"
+                >
+                  <FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
+                </slot>
+              </span>
+              <div v-if="!header.isPlaceholder && !childColumns(header.column.columnDef).length && columnMeta(header.column.columnDef).filter" class="gcsa-table__filter">
+                <GcsaInput
+                  v-if="columnMeta(header.column.columnDef).filter?.type === 'text'"
+                  :model-value="filterValue(header.column.id)"
+                  :placeholder="columnMeta(header.column.columnDef).filter?.placeholder ?? messages.dataTableFilter"
+                  @update:model-value="value => updateFilter(header.column.id, value)"
+                />
+                <GcsaSelect
+                  v-else
+                  :model-value="filterValue(header.column.id)"
+                  :options="columnMeta(header.column.columnDef).filter?.options ?? []"
+                  :placeholder="columnMeta(header.column.columnDef).filter?.placeholder ?? messages.dataTableFilter"
+                  :portalled="true"
+                  :same-width="false"
+                  @update:model-value="value => updateFilter(header.column.id, value)"
+                />
+              </div>
+              <span
+                v-if="resizable && !header.isPlaceholder && !childColumns(header.column.columnDef).length"
+                class="gcsa-table__resize-handle"
+                role="separator"
+                :aria-label="messages.dataTableResizeColumn"
+                @pointerdown.stop.prevent="startColumnResize($event, header.column.id)"
+              />
+            </th>
+          </tr>
+        </thead>
+        <tbody v-if="tableData.length" class="gcsa-table__body">
+          <template v-for="(row, rowIndex) in table.getRowModel().rows" :key="row.id">
+          <tr
+            class="gcsa-table__row"
+            :class="[rowIndex % 2 === 1 ? 'gcsa-table__row--striped' : undefined, rowClass(row.original, row.index)]"
+            :data-selected="row.getIsSelected() || undefined"
+              :data-current="isCurrentRow(row.original, row.index) || undefined"
+              @click="handleRowClick($event, row.original, row.index)"
+              @dblclick="handleRowDblClick($event, row.original, row.index)"
+            @contextmenu.prevent="handleRowContextMenu($event, row.original, row.index)"
+          >
+            <td v-if="effectiveExpandable || treeData" class="gcsa-table__col-expand" :style="expandColumnStyle" @click.stop>
+              <button v-if="!treeData || row.getCanExpand()" type="button" class="gcsa-table__expand gcsa-focus-ring" :disabled="treeLoading(row.id)" :aria-label="expandRowAriaLabel(row.id)" :aria-expanded="isExpanded(row.id)" @click="toggleExpanded(row)">
+                <GcsaIcon name="chevronDown" size="sm" :class="{ 'gcsa-table__expand-icon--open': isExpanded(row.id) }" />
+              </button>
+              <span v-if="treeLoading(row.id)" class="gcsa-table__tree-state" role="status">{{ resolvedTreeLoadingText }}</span>
+              <button v-else-if="treeError(row.id)" type="button" class="gcsa-table__tree-retry" @click="toggleExpanded(row)">{{ resolvedTreeLoadErrorText }}</button>
+            </td>
+            <td v-if="effectiveSelectable" class="gcsa-table__col-check" :style="selectionColumnStyle" @click.stop>
+              <GcsaCheckbox
+                :model-value="row.getIsSelected()"
+                :disabled="!row.getCanSelect()"
+                label=""
+                :aria-label="messages.dataTableSelectRow"
+                @update:model-value="v => handleRowSelection(row.original, row.id, v)"
+              />
+            </td>
+            <td
+              v-for="(cell, cellIndex) in row.getVisibleCells()"
+              :key="cell.id"
+              :class="alignClass(columnMeta(cell.column.columnDef).align)"
+              :style="columnStyle(columnMeta(cell.column.columnDef), cell.column.id)"
+              :data-label="headerTitleFromColumn(cell.column.columnDef)"
+              :title="columnMeta(cell.column.columnDef).showOverflowTooltip ? formatGcsaTableCellValue(cell.getValue()) : undefined"
+              :data-column-id="cell.column.id"
+              @click.stop="handleCellClick($event, row.original, cell.column.id, cell.getValue(), row.index)"
+              @dblclick.stop="handleCellDblClick($event, row.original, cell.column.id, cell.getValue(), row.index)"
+              @contextmenu.stop.prevent="handleCellContextMenu($event, row.original, cell.column.id, cell.getValue(), row.index)"
+            >
+              <div class="gcsa-table__cell" :style="treeData && cellIndex === 0 ? { paddingInlineStart: `${row.depth * 18}px` } : undefined">
+                <slot
+                  :name="cellSlotName(cellSlotKey(cell.column))"
+                  :row="row.original"
+                  :value="cell.getValue()"
+                  :index="row.index"
+                  :column="cell.column.id"
+                >
+                  <slot
+                    name="cell"
+                    :row="row.original"
+                    :value="cell.getValue()"
+                    :index="row.index"
+                    :column="cell.column.id"
+                  >
+                    <FlexRender
+                      v-if="hasCustomCell(cell.column.columnDef)"
+                      :render="cell.column.columnDef.cell"
+                      :props="cell.getContext()"
+                    />
+                    <span v-else>{{ formatGcsaTableCellValue(cell.getValue()) }}</span>
+                  </slot>
+                </slot>
+              </div>
+            </td>
+          </tr>
+          <tr v-if="effectiveExpandable && isExpanded(row.id)" :key="`${row.id}-expanded`" class="gcsa-table__expanded-row">
+            <td :colspan="visibleColumnCount">
+              <slot name="expanded-row" :row="row.original" :index="row.index" />
+            </td>
+          </tr>
+          </template>
+        </tbody>
+        <tfoot v-if="summaryValues" class="gcsa-table__foot">
+          <tr class="gcsa-table__summary-row">
+            <th v-if="effectiveExpandable || treeData" class="gcsa-table__col-expand" scope="row" :style="expandColumnStyle" />
+            <th v-if="effectiveSelectable" class="gcsa-table__col-check" scope="row" :style="selectionColumnStyle" />
+            <td v-for="(column, summaryIndex) in visibleColumns" :key="column.id" :class="alignClass(columnMeta(column).align)" :style="columnStyle(columnMeta(column), column.id ?? '')">
+              {{ summaryValues[column.id ?? ''] ?? (summaryIndex === 0 ? resolvedSummaryLabel : '') }}
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+
+      <div v-if="!loading && !error && !tableRows.length" class="gcsa-data-table__empty">
+        <slot name="empty">
+          <GcsaEmpty :title="messages.dataTableEmpty" />
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="pagination && total > 0 && !loading && !error" class="gcsa-data-table__footer">
+      <div v-if="showTotal" class="gcsa-data-table__footer-meta">
+        {{ rangeText }}
+      </div>
+      <GcsaPagination
+        class="gcsa-data-table__pagination"
+        :page="page"
+        :total="total"
+        :page-size="pageSize"
+        :page-size-options="pageSizeOptions"
+        :show-page-size="showPageSize"
+        :show-jumper="showJumper"
+        :page-size-label="resolvedPageSizeLabel"
+        :jumper-label="resolvedJumperLabel"
+        :layout="paginationLayout"
+        :align="paginationAlign"
+        @update:page="onPageChange"
+        @update:page-size="onPageSizeChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+import { computed, ref, watch } from 'vue';
+import {
+  FlexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  getExpandedRowModel,
+  useVueTable,
+  type ColumnDef,
+  type Header,
+  type SortingState,
+  type ColumnFiltersState,
+  type ExpandedState,
+  type Row
+} from '@tanstack/vue-table';
+import type {
+  GcsaLegacyTableColumn,
+  GcsaTableColumn,
+  GcsaTableColumnAlign,
+  GcsaTableColumnFixed,
+  GcsaTableColumnInfo
+} from '@gcsa/console-core';
+import {
+  GCSA_TABLE_EXPAND_COLUMN_WIDTH,
+  GCSA_TABLE_SELECTION_COLUMN_WIDTH,
+  formatGcsaLocaleMessage,
+  getGcsaTableFixedOffset,
+  getGcsaTableDefaultExpandedKeys,
+  getGcsaTableRowId,
+  getGcsaTableSortChange,
+  getGcsaTableSorting,
+  normalizeGcsaTableColumns
+} from '@gcsa/console-core';
+import GcsaButton from './GcsaButton.vue';
+import GcsaCheckbox from './GcsaCheckbox.vue';
+import GcsaEmpty from './GcsaEmpty.vue';
+import GcsaIcon from './GcsaIcon.vue';
+import GcsaInput from './GcsaInput.vue';
+import GcsaPagination from './GcsaPagination.vue';
+import GcsaSelect from './GcsaSelect.vue';
+import GcsaSpin from './GcsaSpin.vue';
+import {
+  formatGcsaTableCellValue,
+  gcsaTableCellSlotName,
+  gcsaTableHeaderSlotName,
+  resolveGcsaTableColumns
+} from '../utils/gcsaTableColumns';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+import { useGcsaComponentSize } from '../composables/useGcsaComponentSize';
+import type { GcsaDataTableProps } from '../types/componentProps';
+import type { GcsaDataTableApi } from './gcsaDataTableTypes';
+
+defineOptions({ name: 'GcsaDataTable' });
+
+const props = withDefaults(
+  defineProps<GcsaDataTableProps<T>>(),
+  {
+    pagination: true,
+    pageSize: 10,
+    pageSizeOptions: () => [10, 20, 50, 100],
+    showPageSize: false,
+    showJumper: false,
+    showTotal: true,
+    page: 1,
+    showToolbar: true,
+    showCount: true,
+    total: undefined,
+    serverSide: false,
+    defaultSorting: () => [],
+    defaultFilters: () => ({}),
+    loading: false,
+    error: undefined,
+    treeData: false,
+    childrenKey: 'children' as keyof T & string,
+    treeLazy: false,
+    treeHasChildrenKey: 'hasChildren' as keyof T & string,
+    defaultExpandAll: false,
+    selectionColumnWidth: undefined,
+    expandColumnWidth: undefined,
+    mobileMode: 'scroll',
+    stripe: false,
+    bordered: false,
+    highlightCurrentRow: false,
+    data: () => [] as T[]
+  }
+);
+
+const messages = useGcsaLocaleMessages();
+
+const resolvedPageSizeLabel = computed(() => props.pageSizeLabel ?? messages.value.paginationPageSize);
+const resolvedJumperLabel = computed(() => props.jumperLabel ?? messages.value.paginationJumper);
+const resolvedRetryLabel = computed(() => props.retryLabel ?? messages.value.retry);
+const resolvedTreeLoadingText = computed(() => props.treeLoadingText ?? messages.value.dataTableTreeLoading);
+const resolvedTreeLoadErrorText = computed(() => props.treeLoadErrorText ?? messages.value.dataTableTreeLoadError);
+const resolvedSummaryLabel = computed(() => props.summaryLabel ?? messages.value.dataTableSummary);
+
+function expandRowAriaLabel(key: string) {
+  if (treeLoading(key)) return messages.value.dataTableLoadChildren;
+  if (treeError(key)) return messages.value.dataTableRetryChildren;
+  if (isExpanded(key)) return messages.value.dataTableCollapseRow;
+  return messages.value.dataTableExpandRow;
+}
+
+const tableData = computed(() => props.data ?? []);
+
+const emit = defineEmits<{
+  'update:page': [page: number];
+  'update:pageSize': [pageSize: number];
+  'update:sorting': [sorting: SortingState];
+  'sort-change': [change: ReturnType<typeof getGcsaTableSortChange>];
+  'update:filters': [filters: Record<string, string>];
+  'filter-change': [filters: Record<string, string>];
+  'update:selectedRows': [rows: T[]];
+  'update:selectedRowKeys': [keys: string[]];
+  'selection-change': [rows: T[]];
+  'select': [rows: T[], row: T];
+  'select-all': [rows: T[]];
+  'update:columnVisibility': [visibility: Record<string, boolean>];
+  'update:columnWidths': [widths: Record<string, number>];
+  'update:expandedRowKeys': [keys: string[]];
+  'update:currentRowKey': [key: string | undefined];
+  'tree-load-error': [error: unknown, row: T, index: number];
+  retry: [];
+  'row-click': [row: T, index: number];
+  'row-dblclick': [row: T, index: number, event: MouseEvent];
+  'cell-click': [row: T, column: string, value: unknown, index: number];
+  'cell-dblclick': [row: T, column: string, value: unknown, index: number, event: MouseEvent];
+  'header-click': [column: GcsaTableColumnInfo, event: MouseEvent];
+  'row-context-menu': [event: MouseEvent, row: T, index: number];
+  'cell-context-menu': [event: MouseEvent, row: T, column: string, value: unknown, index: number];
+  'legacy-row-click': [row: T, column: GcsaTableColumnInfo, event: MouseEvent];
+  'legacy-cell-click': [row: T, column: GcsaTableColumnInfo, cell: HTMLElement, event: MouseEvent];
+  'legacy-row-context-menu': [row: T, column: GcsaTableColumnInfo, event: MouseEvent];
+  'legacy-cell-context-menu': [row: T, column: GcsaTableColumnInfo, cell: HTMLElement, event: MouseEvent];
+  'current-change': [current: T | undefined, previous: T | undefined];
+  'expand-change': [row: T, expanded: boolean, expandedRows: T[]];
+}>();
+
+const page = ref(props.page);
+const pageSize = ref(props.pageSize);
+const legacyMigration = computed(() => props.legacyColumns?.length
+  ? normalizeGcsaTableColumns(props.legacyColumns, { page: page.value, pageSize: pageSize.value })
+  : undefined);
+const effectiveSelectable = computed(() => legacyMigration.value?.selectable ?? props.selectable ?? false);
+const effectiveExpandable = computed(() => legacyMigration.value?.expandable ?? props.expandable ?? false);
+const effectiveFixedSelection = computed(() => props.fixedSelection ?? legacyMigration.value?.fixedSelection ?? false);
+const effectiveSelectionColumnWidth = computed(() => props.selectionColumnWidth ?? legacyMigration.value?.selectionColumnWidth ?? GCSA_TABLE_SELECTION_COLUMN_WIDTH);
+const effectiveExpandColumnWidth = computed(() => props.expandColumnWidth ?? legacyMigration.value?.expandColumnWidth ?? GCSA_TABLE_EXPAND_COLUMN_WIDTH);
+const resolvedColumns = computed(() => resolveGcsaTableColumns(legacyMigration.value?.columns ?? props.columns ?? []));
+const sorting = ref<SortingState>([...(props.sorting ?? props.defaultSorting)]);
+const columnFilters = ref<ColumnFiltersState>(toColumnFilters(props.filters ?? props.defaultFilters));
+const rowSelection = ref<Record<string, boolean>>(selectionMap(props.selectedRowKeys));
+const columnVisibility = ref<Record<string, boolean>>({ ...(props.columnVisibility ?? {}) });
+const columnWidths = ref<Record<string, number>>({ ...(props.columnWidths ?? {}) });
+const expandedKeys = ref<ExpandedState>(selectionMap(props.expandedRowKeys ?? (props.defaultExpandAll ? collectDefaultExpandedKeys(tableData.value) : undefined)));
+const currentRowKey = ref(props.currentRowKey);
+const tableWrap = ref<HTMLElement>();
+const treeChildren = ref<Record<string, T[]>>({});
+const treeLoadingKeys = ref<Record<string, boolean>>({});
+const treeErrors = ref<Record<string, unknown>>({});
+const treeObjectIds = new WeakMap<object, string>();
+let treeObjectSequence = 0;
+const total = computed(() => props.total ?? tableData.value.length);
+const tableColumns = computed(() => filterColumnTree(resolvedColumns.value));
+const visibleColumns = computed(() => flattenColumns(tableColumns.value));
+const columnOptions = computed(() => visibleColumns.value.filter(column => !columnMeta(column).hidden).map(column => ({ id: column.id ?? '', title: headerTitleFromColumn(column), visible: columnVisibility.value[column.id ?? ''] !== false })));
+const visibleColumnCount = computed(() => visibleColumns.value.length + (effectiveSelectable.value ? 1 : 0) + (effectiveExpandable.value || props.treeData ? 1 : 0));
+const fixedControlColumns = computed(() => Boolean(effectiveSelectable.value && effectiveFixedSelection.value));
+const expandColumnStyle = computed(() => ({
+  width: `${effectiveExpandColumnWidth.value}px`,
+  minWidth: `${effectiveExpandColumnWidth.value}px`,
+  maxWidth: `${effectiveExpandColumnWidth.value}px`,
+  ...(fixedControlColumns.value ? { position: 'sticky' as const, left: '0' } : {})
+}));
+const selectionColumnStyle = computed(() => ({
+  width: `${effectiveSelectionColumnWidth.value}px`,
+  minWidth: `${effectiveSelectionColumnWidth.value}px`,
+  maxWidth: `${effectiveSelectionColumnWidth.value}px`,
+  ...(fixedControlColumns.value ? {
+    position: 'sticky' as const,
+    left: effectiveExpandable.value || props.treeData ? `${effectiveExpandColumnWidth.value}px` : '0'
+  } : {})
+}));
+const tableWrapStyle = computed(() => {
+  const style: Record<string, string> = {};
+  if (props.height !== undefined) style.height = typeof props.height === 'number' ? `${props.height}px` : props.height;
+  if (props.maxHeight !== undefined) style.maxHeight = typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight;
+  return style;
+});
+const treeDataRows = computed(() => {
+  if (!props.treeData || !Object.keys(treeChildren.value).length) return tableData.value;
+  const merge = (rows: T[]): T[] => rows.map((row, index) => {
+    const key = treeNodeKey(row, index);
+    const loaded = treeChildren.value[key];
+    const inline = (row as Record<string, unknown>)[props.childrenKey as string] as T[] | undefined;
+    const children = loaded ?? inline;
+    if (!children) return row;
+    const clone = { ...row, [props.childrenKey as string]: merge(children) } as T;
+    treeObjectIds.set(clone as object, key);
+    return clone;
+  });
+  return merge(tableData.value);
+});
+
+const table = useVueTable({
+  get data() {
+    return treeDataRows.value;
+  },
+  get columns() {
+    return tableColumns.value;
+  },
+  getRowId: (row, index, parent) => rowId(row, index, parent?.id),
+  getSubRows: row => props.treeData ? (((row as Record<string, unknown>)[props.childrenKey as string] as T[] | undefined) ?? []) : undefined,
+  getRowCanExpand: row => props.treeData ? canExpandTreeRow(row.original, row.index) : false,
+  state: {
+    get sorting() {
+      return sorting.value;
+    },
+    get columnFilters() {
+      return columnFilters.value;
+    },
+    get rowSelection() {
+      return rowSelection.value;
+    },
+    get pagination() {
+      return {
+        pageIndex: page.value - 1,
+        pageSize: pageSize.value
+      };
+    },
+    get expanded() {
+      return expandedKeys.value;
+    }
+  },
+  enableRowSelection: row => typeof effectiveSelectable.value === 'function' ? effectiveSelectable.value(row.original, row.index) : effectiveSelectable.value,
+  onSortingChange: updater => {
+    const next = typeof updater === 'function' ? updater(sorting.value) : updater;
+    sorting.value = next;
+    emit('sort-change', getGcsaTableSortChange(next));
+  },
+  onColumnFiltersChange: updater => {
+    columnFilters.value = typeof updater === 'function' ? updater(columnFilters.value) : updater;
+  },
+  onRowSelectionChange: updater => {
+    const next = typeof updater === 'function' ? updater(rowSelection.value) : updater;
+    emitSelection(next);
+  },
+  onExpandedChange: updater => {
+    const next = typeof updater === 'function' ? updater(expandedKeys.value) : updater;
+    expandedKeys.value = next;
+    emit('update:expandedRowKeys', next === true ? table.getRowModel().flatRows.map(row => row.id) : Object.keys(next).filter(key => next[key]));
+  },
+  getCoreRowModel: getCoreRowModel(),
+  getFilteredRowModel: props.serverSide ? undefined : getFilteredRowModel(),
+  getSortedRowModel: props.serverSide ? undefined : getSortedRowModel(),
+  getExpandedRowModel: props.treeData ? getExpandedRowModel() : undefined,
+  getPaginationRowModel: props.serverSide ? undefined : getPaginationRowModel(),
+  manualPagination: props.serverSide,
+  manualSorting: props.serverSide,
+  manualFiltering: props.serverSide,
+  get pageCount() {
+    return props.serverSide ? Math.ceil(total.value / pageSize.value) : undefined;
+  }
+});
+
+const resolvedSize = useGcsaComponentSize(() => props.size);
+const sizeClass = computed(() => (resolvedSize.value === 'sm' ? 'gcsa-table--sm' : undefined));
+const tableClass = computed(() => ({
+  [sizeClass.value ?? '']: Boolean(sizeClass.value),
+  'gcsa-table--striped': props.stripe,
+  'gcsa-table--bordered': props.bordered
+}));
+const summaryValues = computed(() => props.summary?.(tableData.value));
+
+const selectedCount = computed(() => table.getSelectedRowModel().rows.length);
+const tableRows = computed(() => table.getRowModel().rows);
+
+const allSelected = computed(() => {
+  return selectableRows.value.length > 0 && selectableRows.value.every(row => row.getIsSelected());
+});
+
+const selectableRows = computed(() => table.getRowModel().rows.filter(row => row.getCanSelect()));
+
+const rangeStart = computed(() => {
+  if (!total.value) return 0;
+  return (page.value - 1) * pageSize.value + 1;
+});
+
+const rangeEnd = computed(() => Math.min(page.value * pageSize.value, total.value));
+
+const totalCountText = computed(() =>
+  formatGcsaLocaleMessage(messages.value.dataTableTotal, { count: total.value })
+);
+
+const selectedCountText = computed(() =>
+  formatGcsaLocaleMessage(messages.value.dataTableSelected, { count: selectedCount.value })
+);
+
+const rangeText = computed(() =>
+  formatGcsaLocaleMessage(messages.value.dataTableRange, {
+    start: rangeStart.value,
+    end: rangeEnd.value,
+    total: total.value
+  })
+);
+
+function toggleAll(value: boolean) {
+  if (!selectableRows.value.length) return;
+  table.toggleAllPageRowsSelected(value);
+  const next = { ...rowSelection.value };
+  selectableRows.value.forEach(row => { next[row.id] = value; });
+  emit('select-all', rowsForSelection(next));
+}
+
+function rowsForSelection(selection: Record<string, boolean>) {
+  return table.getCoreRowModel().flatRows
+    .filter(row => selection[row.id] && row.getCanSelect())
+    .map(row => row.original);
+}
+
+function handleRowSelection(row: T, rowIdValue: string, selected: boolean) {
+  const next = { ...rowSelection.value, [rowIdValue]: selected };
+  const selectedRows = rowsForSelection(next);
+  table.getCoreRowModel().flatRows.find(candidate => candidate.id === rowIdValue)?.toggleSelected(selected);
+  emit('select', selectedRows, row);
+}
+
+function emitSelection(next: Record<string, boolean>) {
+  rowSelection.value = next;
+  const keys = Object.keys(next).filter(key => next[key]);
+  emit('update:selectedRowKeys', keys);
+  const rows = rowsForSelection(next);
+  emit('update:selectedRows', rows);
+  emit('selection-change', rows);
+}
+
+function clearSorting() {
+  sorting.value = [];
+  emit('sort-change', getGcsaTableSortChange([]));
+}
+
+function clearFilters() {
+  columnFilters.value = [];
+  emit('update:filters', {});
+  emit('filter-change', {});
+}
+
+function clearFilter(columnKeys?: string | string[]) {
+  if (columnKeys === undefined) {
+    clearFilters();
+    return;
+  }
+    const keys = new Set(Array.isArray(columnKeys) ? columnKeys : [columnKeys]);
+    columnFilters.value = columnFilters.value.filter(filter => !keys.has(filter.id));
+    const filters = filterRecord(columnFilters.value);
+    emit('update:filters', filters);
+    emit('filter-change', filters);
+}
+
+function sort(prop: string, order: 'ascending' | 'descending' | null) {
+  sorting.value = getGcsaTableSorting(prop, order);
+  emit('sort-change', getGcsaTableSortChange(sorting.value));
+}
+
+function clearSelection() {
+  emitSelection({});
+}
+
+function clearExpanded() {
+  expandedKeys.value = {};
+  emit('update:expandedRowKeys', []);
+}
+
+function setRowSelected(key: string, selected = true) {
+  const row = table.getCoreRowModel().flatRows.find(candidate => candidate.id === key);
+  if (!row || !row.getCanSelect()) return;
+  emitSelection({ ...rowSelection.value, [key]: selected });
+}
+
+function toggleRowSelection(row: T, selected?: boolean) {
+  const tableRow = findTableRow(row);
+  if (!tableRow || !tableRow.getCanSelect()) return;
+  setRowSelected(tableRow.id, selected ?? !tableRow.getIsSelected());
+}
+
+function toggleAllSelection() {
+  toggleAll(!allSelected.value);
+}
+
+async function setRowExpanded(key: string, expanded = true) {
+  const row = table.getCoreRowModel().flatRows.find(candidate => candidate.id === key);
+  if (!row) return;
+  if (props.treeData) {
+    if (isExpanded(key) === expanded) return;
+    if (expanded) await toggleExpanded(row);
+    else applyExpanded(row, false);
+    return;
+  }
+  const next = { ...(expandedKeys.value === true ? {} : expandedKeys.value), [key]: expanded };
+  expandedKeys.value = next;
+  emit('update:expandedRowKeys', Object.keys(next).filter(value => next[value]));
+}
+
+async function toggleRowExpansion(row: T, expanded?: boolean) {
+  const tableRow = findTableRow(row);
+  if (!tableRow) return;
+  await setRowExpanded(tableRow.id, expanded ?? !isExpanded(tableRow.id));
+}
+
+function setCurrentRow(row?: T) {
+  const tableRow = row ? findTableRow(row) : undefined;
+  currentRowKey.value = tableRow?.id;
+  emit('update:currentRowKey', tableRow?.id);
+}
+
+function findTableRow(row: T) {
+  const rows = table.getCoreRowModel().flatRows;
+  const byReference = rows.find(candidate => candidate.original === row);
+  if (byReference) return byReference;
+  if (props.rowKey) {
+    const key = rowId(row, 0);
+    return rows.find(candidate => candidate.id === key);
+  }
+  return undefined;
+}
+
+function getSelectionRows() {
+  return table.getCoreRowModel().flatRows.filter(row => row.getIsSelected()).map(row => row.original);
+}
+
+function setScrollTop(top: number) {
+  tableWrap.value?.scrollTo({ top });
+}
+
+function scrollTo(options: ScrollToOptions | number, y?: number) {
+  if (!tableWrap.value) return;
+  if (typeof options === 'number') tableWrap.value.scrollTo(options, y ?? 0);
+  else tableWrap.value.scrollTo(options);
+}
+
+function onPageChange(next: number) {
+  page.value = next;
+  table.setPageIndex(next - 1);
+  emit('update:page', next);
+}
+
+function onPageSizeChange(next: number) {
+  if (!props.pageSizeOptions.includes(next) || next === pageSize.value) return;
+  pageSize.value = next;
+  page.value = 1;
+  emit('update:pageSize', next);
+  emit('update:page', 1);
+}
+
+function rowId(row: T, index: number, parentId?: string) {
+  return getGcsaTableRowId(row, index, props.rowKey, parentId);
+}
+
+function selectionMap(keys?: string[]) {
+  return Object.fromEntries((keys ?? []).map(key => [key, true]));
+}
+
+function toColumnFilters(filters?: Record<string, string>): ColumnFiltersState {
+  return Object.entries(filters ?? {}).filter(([, value]) => value !== '').map(([id, value]) => ({ id, value }));
+}
+
+function filterRecord(filters: ColumnFiltersState) {
+  return Object.fromEntries(filters.map(filter => [filter.id, String(filter.value)]));
+}
+
+function collectDefaultExpandedKeys(rows: T[]) {
+  return getGcsaTableDefaultExpandedKeys(rows, props.treeData, props.childrenKey as keyof T & string, props.rowKey);
+}
+
+function collectExpandedRows(expanded: ExpandedState) {
+  const expandedSet = expanded === true ? undefined : new Set(Object.keys(expanded).filter(key => expanded[key]));
+  const result: T[] = [];
+  const visit = (rows: T[], parentId?: string) => rows.forEach((row, index) => {
+    const key = rowId(row, index, parentId);
+    if (!expandedSet || expandedSet.has(key)) result.push(row);
+    if (props.treeData) {
+      const children = (row as Record<string, unknown>)[props.childrenKey as string];
+      if (Array.isArray(children)) visit(children as T[], key);
+    }
+  });
+  visit(treeDataRows.value);
+  return result;
+}
+
+function headerTitleFromColumn(column: ColumnDef<T, unknown>) {
+  return typeof column.header === 'string' ? column.header : column.id ?? '';
+}
+
+function toggleColumn(id: string) {
+  const visible = visibleColumns.value.length;
+  const next = { ...columnVisibility.value, [id]: columnVisibility.value[id] === false };
+  if (!next[id] && visible <= 1) return;
+  columnVisibility.value = next;
+  emit('update:columnVisibility', next);
+}
+
+function isExpanded(key: string) {
+  return expandedKeys.value === true || expandedKeys.value[key] === true;
+}
+
+function applyExpanded(row: Row<T>, expanded: boolean) {
+  const current = expandedKeys.value === true ? {} : expandedKeys.value;
+  const next = { ...current, [row.id]: expanded };
+  expandedKeys.value = next;
+  emit('update:expandedRowKeys', Object.keys(next).filter(key => next[key]));
+  emitExpandChange(row.original, expanded, next);
+}
+
+async function toggleExpanded(row: Row<T>) {
+  if (props.treeData && props.treeLazy && !isExpanded(row.id)) {
+    const key = treeNodeKey(row.original, row.index);
+    if (!Object.prototype.hasOwnProperty.call(treeChildren.value, key) && props.loadChildren && canExpandTreeRow(row.original, row.index)) {
+      treeLoadingKeys.value = { ...treeLoadingKeys.value, [key]: true };
+      const nextErrors = { ...treeErrors.value };
+      delete nextErrors[key];
+      treeErrors.value = nextErrors;
+      try {
+        const children = await props.loadChildren(row.original, row.index);
+        treeChildren.value = { ...treeChildren.value, [key]: children ?? [] };
+        if (children?.length) {
+          applyExpanded(row, true);
+        }
+      } catch (error) {
+        treeErrors.value = { ...treeErrors.value, [key]: error };
+        emit('tree-load-error', error, row.original, row.index);
+        props.onTreeLoadError?.(error, row.original, row.index);
+      } finally {
+        const nextLoading = { ...treeLoadingKeys.value };
+        delete nextLoading[key];
+        treeLoadingKeys.value = nextLoading;
+      }
+    } else if (Object.prototype.hasOwnProperty.call(treeChildren.value, key)) {
+      applyExpanded(row, !isExpanded(row.id));
+    }
+    return;
+  }
+  applyExpanded(row, !isExpanded(row.id));
+}
+
+function emitExpandChange(row: T, expanded: boolean, state: ExpandedState = expandedKeys.value) {
+  const expandedRows = collectExpandedRows(state);
+  emit('expand-change', row, expanded, expandedRows);
+  props.onExpandChange?.(row, expanded, expandedRows);
+}
+
+function treeNodeKey(row: T, index: number) {
+  const objectRow = row as object;
+  const existing = treeObjectIds.get(objectRow);
+  if (existing) return existing;
+  const key = props.rowKey ? rowId(row, index) : `tree-${treeObjectSequence++}`;
+  treeObjectIds.set(objectRow, key);
+  return key;
+}
+
+function treeChildrenFor(row: T) {
+  const key = treeNodeKey(row, 0);
+  if (Object.prototype.hasOwnProperty.call(treeChildren.value, key)) return treeChildren.value[key];
+  return ((row as Record<string, unknown>)[props.childrenKey as string] as T[] | undefined) ?? [];
+}
+
+function canExpandTreeRow(row: T, index: number) {
+  const key = treeNodeKey(row, index);
+  if (Object.prototype.hasOwnProperty.call(treeChildren.value, key)) return treeChildren.value[key].length > 0;
+  const children = (row as Record<string, unknown>)[props.childrenKey as string];
+  if (Array.isArray(children) && children.length) return true;
+  if (!props.treeLazy) return false;
+  if (props.treeHasChildren) return props.treeHasChildren(row, index);
+  return (row as Record<string, unknown>)[props.treeHasChildrenKey as string] === true;
+}
+
+function treeLoading(key: string) {
+  const row = table.getRowModel().flatRows.find(candidate => candidate.id === key);
+  return Boolean(row && treeLoadingKeys.value[treeNodeKey(row.original, row.index)]);
+}
+
+function treeError(key: string) {
+  const row = table.getRowModel().flatRows.find(candidate => candidate.id === key);
+  return Boolean(row && treeErrors.value[treeNodeKey(row.original, row.index)]);
+}
+
+function columnInfo(columnId: string, columnDef?: ColumnDef<T, unknown>): GcsaTableColumnInfo {
+  const meta = columnDef ? columnMeta(columnDef) : {};
+  return {
+    id: columnId,
+    prop: columnId,
+    label: columnDef ? headerTitleFromColumn(columnDef) : columnId,
+    width: meta.width,
+    minWidth: meta.minWidth,
+    fixed: meta.fixed
+  };
+}
+
+function handleHeaderClick(event: MouseEvent, columnId: string, columnDef: ColumnDef<T, unknown>) {
+  const info = columnInfo(columnId, columnDef);
+  emit('header-click', info, event);
+}
+
+function handleRowClick(event: MouseEvent, row: T, index: number) {
+  if (props.highlightCurrentRow) {
+    const previous = table.getCoreRowModel().flatRows.find(candidate => candidate.id === currentRowKey.value)?.original;
+    currentRowKey.value = rowId(row, index);
+    emit('update:currentRowKey', currentRowKey.value);
+    emit('current-change', row, previous);
+    props.onCurrentChange?.(row, previous);
+  }
+  emit('row-click', row, index);
+  props.onRowClick?.(row, index);
+  const firstCell = table.getRowModel().rows.find(candidate => candidate.original === row)?.getVisibleCells()[0];
+  const info = columnInfo(firstCell?.column.id ?? '', firstCell?.column.columnDef);
+  emit('legacy-row-click', row, info, event);
+  props.onLegacyRowClick?.(row, info, event);
+}
+
+function handleRowDblClick(event: MouseEvent, row: T, index: number) {
+  emit('row-dblclick', row, index, event);
+}
+
+function isCurrentRow(row: T, index: number) {
+  return props.highlightCurrentRow && currentRowKey.value === rowId(row, index);
+}
+
+function rowClass(row: T, index: number) {
+  return typeof props.rowClassName === 'function' ? props.rowClassName(row, index) : props.rowClassName;
+}
+
+function handleCellClick(event: MouseEvent, row: T, column: string, value: unknown, index: number) {
+  if (props.highlightCurrentRow) {
+    const previous = table.getCoreRowModel().flatRows.find(candidate => candidate.id === currentRowKey.value)?.original;
+    currentRowKey.value = rowId(row, index);
+    emit('update:currentRowKey', currentRowKey.value);
+    emit('current-change', row, previous);
+    props.onCurrentChange?.(row, previous);
+  }
+  emit('cell-click', row, column, value, index);
+  props.onCellClick?.(row, column, value, index);
+  const info = columnInfo(column, table.getAllLeafColumns().find(candidate => candidate.id === column)?.columnDef);
+  const cell = event.currentTarget as HTMLElement;
+  emit('legacy-cell-click', row, info, cell, event);
+  props.onLegacyCellClick?.(row, info, cell, event);
+}
+
+function handleCellDblClick(event: MouseEvent, row: T, column: string, value: unknown, index: number) {
+  emit('cell-dblclick', row, column, value, index, event);
+}
+
+function childColumns(column: ColumnDef<T, unknown>): ColumnDef<T, unknown>[] {
+  return 'columns' in column && Array.isArray(column.columns)
+    ? column.columns as ColumnDef<T, unknown>[]
+    : [];
+}
+
+function flattenColumns(columns: ColumnDef<T, unknown>[]): ColumnDef<T, unknown>[] {
+  return columns.flatMap(column => {
+    const children = childColumns(column);
+    return children.length ? flattenColumns(children) : [column];
+  });
+}
+
+function filterColumnTree(columns: ColumnDef<T, unknown>[]): ColumnDef<T, unknown>[] {
+  return columns.flatMap(column => {
+    const meta = columnMeta(column);
+    if (meta.hidden || columnVisibility.value[column.id ?? ''] === false) return [];
+    const columnChildren = childColumns(column);
+    if (!columnChildren.length) return [column];
+    const children = filterColumnTree(columnChildren);
+    return children.length ? [{ ...column, columns: children }] : [];
+  });
+}
+
+function handleRowContextMenu(event: MouseEvent, row: T, index: number) {
+  emit('row-context-menu', event, row, index);
+  props.onRowContextMenu?.(event, row, index);
+  const firstCell = table.getRowModel().rows.find(candidate => candidate.original === row)?.getVisibleCells()[0];
+  const info = columnInfo(firstCell?.column.id ?? '', firstCell?.column.columnDef);
+  emit('legacy-row-context-menu', row, info, event);
+  props.onLegacyRowContextMenu?.(row, info, event);
+}
+
+function handleCellContextMenu(event: MouseEvent, row: T, column: string, value: unknown, index: number) {
+  emit('cell-context-menu', event, row, column, value, index);
+  props.onCellContextMenu?.(event, row, column, value, index);
+  const info = columnInfo(column, table.getAllLeafColumns().find(candidate => candidate.id === column)?.columnDef);
+  const cell = event.currentTarget as HTMLElement;
+  emit('legacy-cell-context-menu', row, info, cell, event);
+  props.onLegacyCellContextMenu?.(row, info, cell, event);
+}
+
+function alignClass(align?: GcsaTableColumnAlign) {
+  if (align === 'center') return 'gcsa-table__align-center';
+  if (align === 'right') return 'gcsa-table__align-right';
+  return undefined;
+}
+
+function ariaSort(state: false | 'asc' | 'desc') {
+  if (state === 'asc') return 'ascending';
+  if (state === 'desc') return 'descending';
+  return 'none';
+}
+
+function cellSlotKey(column: { id: string; columnDef: ColumnDef<T, unknown> }) {
+  return columnMeta(column.columnDef).slotKey ?? column.id;
+}
+
+function columnMeta(columnDef: ColumnDef<T, unknown>) {
+  return (columnDef.meta ?? {}) as {
+    width?: string;
+    minWidth?: string;
+    align?: GcsaTableColumnAlign;
+    slotKey?: string;
+    fixed?: GcsaTableColumnFixed;
+    hidden?: boolean;
+    filter?: { type: 'text' | 'select'; placeholder?: string; options?: Array<{ label: string; value: string; disabled?: boolean }> };
+    resizable?: boolean;
+    showOverflowTooltip?: boolean;
+  };
+}
+
+function columnStyle(meta: ReturnType<typeof columnMeta>, id: string) {
+  const style: Record<string, string> = {};
+  const override = columnWidths.value[id];
+  if (override) style.width = `${override}px`;
+  else if (meta.width) style.width = meta.width;
+  if (override) style.minWidth = `${override}px`;
+  else if (meta.minWidth ?? meta.width) style.minWidth = meta.minWidth ?? meta.width!;
+  if (meta.fixed) {
+    style.position = 'sticky';
+    const fixedDirection = meta.fixed === true ? 'left' : meta.fixed;
+    const offset = getGcsaTableFixedOffset(
+      visibleColumns.value.map(column => ({ id: column.id ?? '', ...columnMeta(column) })),
+      id,
+      fixedDirection,
+      {
+        expandable: effectiveExpandable.value || props.treeData,
+        selectable: Boolean(effectiveSelectable.value),
+        fixedSelection: effectiveFixedSelection.value,
+        expandColumnWidth: effectiveExpandColumnWidth.value,
+        selectionColumnWidth: effectiveSelectionColumnWidth.value,
+        columnWidths: columnWidths.value
+      }
+    );
+    style[fixedDirection] = `${offset}px`;
+  }
+  return Object.keys(style).length ? style : undefined;
+}
+
+function startColumnResize(event: PointerEvent, id: string) {
+  const handle = event.currentTarget as HTMLElement;
+  const cell = handle.parentElement;
+  const initialWidth = cell?.getBoundingClientRect().width ?? parseColumnWidth(columnMeta(visibleColumns.value.find(column => column.id === id) ?? {} as ColumnDef<T, unknown>));
+  const minWidth = Math.max(64, parseColumnWidth(columnMeta(visibleColumns.value.find(column => column.id === id) ?? {} as ColumnDef<T, unknown>)) || 64);
+  const startX = event.clientX;
+  const onMove = (moveEvent: PointerEvent) => {
+    const next = Math.max(minWidth, Math.round(initialWidth + moveEvent.clientX - startX));
+    columnWidths.value = { ...columnWidths.value, [id]: next };
+  };
+  const onUp = () => {
+    emit('update:columnWidths', { ...columnWidths.value });
+    document.removeEventListener('pointermove', onMove);
+    document.removeEventListener('pointerup', onUp);
+  };
+  document.addEventListener('pointermove', onMove);
+  document.addEventListener('pointerup', onUp, { once: true });
+}
+
+function parseColumnWidth(meta: ReturnType<typeof columnMeta>) {
+  const value = meta.width ?? meta.minWidth;
+  const parsed = value ? Number.parseFloat(value) : Number.NaN;
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+function filterValue(id: string) {
+  return String(columnFilters.value.find(filter => filter.id === id)?.value ?? '');
+}
+
+function updateFilter(id: string, value: string) {
+  const next = columnFilters.value.filter(filter => filter.id !== id);
+  if (value) next.push({ id, value });
+  columnFilters.value = next;
+  const filters = filterRecord(next);
+  emit('update:filters', filters);
+  emit('filter-change', filters);
+}
+
+function columnSizingStyle(meta: ReturnType<typeof columnMeta>) {
+  if (!meta.width && !meta.minWidth) return undefined;
+  return {
+    width: meta.width,
+    minWidth: meta.minWidth ?? meta.width
+  };
+}
+
+function headerSlotKey(column: { id: string; columnDef: ColumnDef<T, unknown> }) {
+  return cellSlotKey(column);
+}
+
+function cellSlotName(slotKey: string) {
+  return gcsaTableCellSlotName(slotKey);
+}
+
+function headerSlotName(slotKey: string) {
+  return gcsaTableHeaderSlotName(slotKey);
+}
+
+function hasCustomCell(columnDef: ColumnDef<T, unknown>) {
+  return typeof columnDef.cell === 'function';
+}
+
+function headerTitle(header: Header<T, unknown>) {
+  const headerDef = header.column.columnDef.header;
+  if (typeof headerDef === 'string') return headerDef;
+  return header.column.id;
+}
+
+defineExpose<GcsaDataTableApi<T>>({
+  clearSorting,
+  clearFilters,
+  clearSelection,
+  clearExpanded,
+  setRowSelected,
+  setRowExpanded,
+  clearSort: clearSorting,
+  clearFilter,
+  sort,
+  toggleRowSelection,
+  toggleAllSelection,
+  toggleRowExpansion,
+  setCurrentRow,
+  getSelectionRows,
+  setScrollTop,
+  scrollTo
+});
+
+watch(
+  () => tableData.value.length,
+  () => {
+    page.value = 1;
+  }
+);
+
+watch(
+  () => props.page,
+  value => {
+    if (value !== undefined && value !== page.value) page.value = value;
+  }
+);
+
+watch(
+  () => props.pageSize,
+  value => {
+    if (value !== undefined && value !== pageSize.value) pageSize.value = value;
+  }
+);
+
+watch(
+  () => props.selectedRowKeys,
+  value => {
+    if (value) rowSelection.value = selectionMap(value);
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.columnVisibility,
+  value => {
+    if (value) columnVisibility.value = { ...value };
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.columnWidths,
+  value => {
+    if (value) columnWidths.value = { ...value };
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.expandedRowKeys,
+  value => {
+    if (value) expandedKeys.value = selectionMap(value);
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.currentRowKey,
+  value => {
+    currentRowKey.value = value;
+  }
+);
+
+watch(
+  () => props.sorting,
+  value => {
+    if (value) sorting.value = [...value];
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.filters,
+  value => {
+    if (value) columnFilters.value = toColumnFilters(value);
+  },
+  { deep: true }
+);
+
+watch(
+  () => tableData.value,
+  value => {
+    treeChildren.value = {};
+    treeLoadingKeys.value = {};
+    treeErrors.value = {};
+    if (props.defaultExpandAll && !props.expandedRowKeys) {
+      expandedKeys.value = selectionMap(collectDefaultExpandedKeys(value));
+    }
+  }
+);
+
+watch(sorting, value => {
+  emit('update:sorting', value);
+});
+</script>