@sabrenski/spire-ui 0.0.1

package/src/components/DataTable/DataTable.vue

@@ -0,0 +1,1415 @@
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, onUnmounted } from 'vue'
+import Checkbox from '../Checkbox/Checkbox.vue'
+import EmptyState from '../EmptyState/EmptyState.vue'
+import Skeleton from '../Skeleton/Skeleton.vue'
+import Pagination from '../Pagination/Pagination.vue'
+import Select from '../Select/Select.vue'
+import Text from '../Text/Text.vue'
+import Input from '../Input/Input.vue'
+import { getNestedValue } from '../../utils/object'
+import { useInternalIcon } from '../../config/icons'
+import { useId } from '../../composables'
+
+const skeletonWidths = ['60%', '75%', '90%', '70%', '85%', '65%', '80%', '55%']
+function getSkeletonWidth(rowIndex: number, colIndex: number): string {
+  return skeletonWidths[(rowIndex * 3 + colIndex) % skeletonWidths.length]
+}
+
+const SortAscIcon = useInternalIcon('sortAsc')
+const SortDescIcon = useInternalIcon('sortDesc')
+const SortNeutralIcon = useInternalIcon('sortNeutral')
+const ExpandIcon = useInternalIcon('expand')
+const CollapseIcon = useInternalIcon('collapse')
+const SearchIcon = useInternalIcon('search')
+const ClearIcon = useInternalIcon('close')
+
+export type SortDirection = 'asc' | 'desc' | null
+export type ColumnAlign = 'left' | 'center' | 'right'
+export type FilterFn = (value: unknown, filterValue: string, row: Record<string, unknown>) => boolean
+
+export interface DataTableColumn {
+  /** Key path (supports dot notation: 'user.email') */
+  key: string
+  /** Header label */
+  label: string
+  /** Text alignment */
+  align?: ColumnAlign
+  /** Fixed width (e.g., '80px') */
+  width?: string
+  /** Minimum width for resizable columns */
+  minWidth?: string
+  /** Enable sorting */
+  sortable?: boolean
+  /** Enable filtering for this column */
+  filterable?: boolean
+  /** Custom filter function */
+  filterFn?: FilterFn
+  /** Enable resizing for this column */
+  resizable?: boolean
+}
+
+export interface SortState {
+  key: string | null
+  direction: SortDirection
+}
+
+export interface PaginationConfig {
+  /** Default page size */
+  pageSize?: number
+  /** Available page size options */
+  pageSizeOptions?: number[]
+  /** Number of sibling pages to show */
+  siblingCount?: number
+  /** Show first/last page numbers */
+  showEdges?: boolean
+}
+
+export interface DataTableProps {
+  /** Data array */
+  data: Record<string, unknown>[]
+  /** Column definitions */
+  columns: DataTableColumn[]
+  /** Enable row selection */
+  selectable?: boolean
+  /** Selected row IDs (v-model:selectedIds) */
+  selectedIds?: (string | number)[]
+  /** Row identifier key (default: 'id') */
+  rowKey?: string
+  /** Loading state */
+  loading?: boolean
+  /** Skeleton rows count (default: 5) */
+  skeletonRows?: number
+  /** Striped rows */
+  striped?: boolean
+  /** Row hover effect */
+  hoverable?: boolean
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg'
+  /** Empty state message */
+  emptyMessage?: string
+  /** Show cell borders */
+  bordered?: boolean
+  /** Sticky header */
+  stickyHeader?: boolean
+  /** Enable pagination (boolean or config object) */
+  pagination?: boolean | PaginationConfig
+  /** Current page for controlled pagination (v-model:page) */
+  page?: number
+  /** Page size for controlled pagination (v-model:pageSize) */
+  pageSize?: number
+  /** Total items count (required for server-side pagination) */
+  total?: number
+  /** Server-side mode: disables client-side slicing, emits events for parent to handle */
+  serverSide?: boolean
+  /** Enable global search */
+  searchable?: boolean
+  /** Search query (v-model:search) */
+  search?: string
+  /** Placeholder for search input */
+  searchPlaceholder?: string
+  /** Enable column filters (shows filter inputs below headers) */
+  filterable?: boolean
+  /** Current filter values (v-model:filters) */
+  filters?: Record<string, string>
+  /** Enable column resizing */
+  resizable?: boolean
+  /** Enable expandable rows */
+  expandable?: boolean
+  /** Expanded row IDs (v-model:expandedIds) */
+  expandedIds?: (string | number)[]
+}
+
+const props = withDefaults(defineProps<DataTableProps>(), {
+  selectable: false,
+  selectedIds: () => [],
+  rowKey: 'id',
+  loading: false,
+  skeletonRows: 5,
+  striped: false,
+  hoverable: true,
+  size: 'md',
+  emptyMessage: 'No data available',
+  bordered: false,
+  stickyHeader: false,
+  pagination: false,
+  page: 1,
+  pageSize: 10,
+  serverSide: false,
+  searchable: false,
+  search: '',
+  searchPlaceholder: 'Search...',
+  filterable: false,
+  filters: () => ({}),
+  resizable: false,
+  expandable: false,
+  expandedIds: () => []
+})
+
+const emit = defineEmits<{
+  (e: 'update:selectedIds', value: (string | number)[]): void
+  (e: 'sort-change', value: SortState): void
+  (e: 'row-click', row: Record<string, unknown>, index: number): void
+  (e: 'update:page', value: number): void
+  (e: 'update:pageSize', value: number): void
+  (e: 'pagination-change', value: { page: number; pageSize: number }): void
+  (e: 'update:search', value: string): void
+  (e: 'update:filters', value: Record<string, string>): void
+  (e: 'filter-change', value: { search: string; filters: Record<string, string> }): void
+  (e: 'update:expandedIds', value: (string | number)[]): void
+  (e: 'row-expand', row: Record<string, unknown>, expanded: boolean): void
+  (e: 'column-resize', columnKey: string, width: number): void
+}>()
+
+const currentSort = ref<SortState>({ key: null, direction: null })
+const uid = useId('datatable')
+
+const isPaginationEnabled = computed(() => !!props.pagination)
+
+const paginationConfig = computed<PaginationConfig>(() => {
+  if (typeof props.pagination === 'object') {
+    return props.pagination
+  }
+  return {}
+})
+
+const defaultPageSizeOptions = [10, 20, 50, 100]
+const pageSizeOptions = computed(() => {
+  return paginationConfig.value.pageSizeOptions || defaultPageSizeOptions
+})
+
+const currentPage = ref(props.page)
+const currentPageSize = ref(
+  paginationConfig.value.pageSize || props.pageSize
+)
+
+watch(() => props.page, (newPage) => {
+  currentPage.value = newPage
+})
+
+watch(() => props.pageSize, (newSize) => {
+  currentPageSize.value = newSize
+})
+
+const totalItems = computed(() => {
+  if (props.serverSide && props.total !== undefined) return props.total
+  return filteredData.value.length
+})
+
+const totalPages = computed(() => {
+  if (totalItems.value <= 0 || currentPageSize.value <= 0) return 0
+  return Math.ceil(totalItems.value / currentPageSize.value)
+})
+
+function handlePageChange(page: number) {
+  currentPage.value = page
+  emit('update:page', page)
+  emit('pagination-change', { page, pageSize: currentPageSize.value })
+}
+
+function handlePageSizeChange(size: string | number | null) {
+  if (size === null) return
+  const newSize = typeof size === 'string' ? parseInt(size, 10) : size
+  currentPageSize.value = newSize
+  currentPage.value = 1
+  emit('update:pageSize', newSize)
+  emit('update:page', 1)
+  emit('pagination-change', { page: 1, pageSize: newSize })
+}
+
+const pageSizeSelectOptions = computed(() => {
+  return pageSizeOptions.value.map(size => ({
+    label: String(size),
+    value: size
+  }))
+})
+
+const paginationStart = computed(() => {
+  if (totalItems.value === 0) return 0
+  return (currentPage.value - 1) * currentPageSize.value + 1
+})
+
+const paginationEnd = computed(() => {
+  return Math.min(currentPage.value * currentPageSize.value, totalItems.value)
+})
+
+function getRowId(row: Record<string, unknown>): string | number {
+  const id = row[props.rowKey]
+  if (typeof id === 'string' || typeof id === 'number') {
+    return id
+  }
+  console.warn(`DataTable: Row key "${props.rowKey}" must be string or number`)
+  return String(id)
+}
+
+function getCellValue(row: Record<string, unknown>, key: string): unknown {
+  return getNestedValue(row, key)
+}
+
+const allSelected = computed(() => {
+  if (props.data.length === 0) return false
+  return props.data.every(row => props.selectedIds.includes(getRowId(row)))
+})
+
+const someSelected = computed(() => {
+  if (props.data.length === 0) return false
+  return props.selectedIds.length > 0 && !allSelected.value
+})
+
+function toggleAll(checked: boolean) {
+  if (checked) {
+    const allIds = props.data.map(row => getRowId(row))
+    emit('update:selectedIds', allIds)
+  } else {
+    emit('update:selectedIds', [])
+  }
+}
+
+function toggleRow(row: Record<string, unknown>, checked: boolean) {
+  const id = getRowId(row)
+  if (checked) {
+    emit('update:selectedIds', [...props.selectedIds, id])
+  } else {
+    emit('update:selectedIds', props.selectedIds.filter(sid => sid !== id))
+  }
+}
+
+function isRowSelected(row: Record<string, unknown>): boolean {
+  return props.selectedIds.includes(getRowId(row))
+}
+
+function handleSort(column: DataTableColumn) {
+  if (!column.sortable) return
+
+  let newDirection: SortDirection
+
+  if (currentSort.value.key !== column.key) {
+    newDirection = 'asc'
+  } else {
+    const cycle: SortDirection[] = [null, 'asc', 'desc']
+    const currentIndex = cycle.indexOf(currentSort.value.direction)
+    newDirection = cycle[(currentIndex + 1) % 3]
+  }
+
+  currentSort.value = {
+    key: newDirection ? column.key : null,
+    direction: newDirection
+  }
+
+  emit('sort-change', currentSort.value)
+}
+
+function handleKeydownSort(event: KeyboardEvent, column: DataTableColumn) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    handleSort(column)
+  }
+}
+
+const currentSearch = ref(props.search)
+const currentFilters = ref<Record<string, string>>({ ...props.filters })
+
+watch(() => props.search, (newSearch) => {
+  currentSearch.value = newSearch
+})
+
+watch(() => props.filters, (newFilters) => {
+  currentFilters.value = { ...newFilters }
+}, { deep: true })
+
+function handleSearchChange(value: string | number | null) {
+  const searchValue = value === null ? '' : String(value)
+  currentSearch.value = searchValue
+  currentPage.value = 1
+  emit('update:search', searchValue)
+  emit('update:page', 1)
+  emit('filter-change', { search: searchValue, filters: currentFilters.value })
+}
+
+function clearSearch() {
+  handleSearchChange('')
+}
+
+function handleFilterChange(columnKey: string, value: string) {
+  const newFilters = { ...currentFilters.value, [columnKey]: value }
+  if (!value) {
+    delete newFilters[columnKey]
+  }
+  currentFilters.value = newFilters
+  currentPage.value = 1
+  emit('update:filters', newFilters)
+  emit('update:page', 1)
+  emit('filter-change', { search: currentSearch.value, filters: newFilters })
+}
+
+function clearFilters() {
+  currentFilters.value = {}
+  emit('update:filters', {})
+  emit('filter-change', { search: currentSearch.value, filters: {} })
+}
+
+function defaultFilterFn(value: unknown, filterValue: string): boolean {
+  if (!filterValue) return true
+  const stringValue = String(value ?? '').toLowerCase()
+  return stringValue.includes(filterValue.toLowerCase())
+}
+
+const hasActiveFilters = computed(() => {
+  return currentSearch.value !== '' || Object.keys(currentFilters.value).length > 0
+})
+
+const filterableColumns = computed(() => {
+  if (!props.filterable) return []
+  return props.columns.filter(col => col.filterable !== false)
+})
+
+const columnWidths = ref<Record<string, number>>({})
+const resizingColumn = ref<string | null>(null)
+const resizeStartX = ref(0)
+const resizeStartWidth = ref(0)
+const tableRef = ref<HTMLElement | null>(null)
+
+function getColumnWidth(column: DataTableColumn): string | undefined {
+  if (columnWidths.value[column.key]) {
+    return `${columnWidths.value[column.key]}px`
+  }
+  return column.width
+}
+
+function startResize(event: MouseEvent, column: DataTableColumn) {
+  if (!props.resizable || column.resizable === false) return
+
+  event.preventDefault()
+  resizingColumn.value = column.key
+  resizeStartX.value = event.clientX
+
+  const th = (event.target as HTMLElement).closest('th')
+  if (th) {
+    resizeStartWidth.value = th.offsetWidth
+  }
+
+  document.addEventListener('mousemove', handleResize)
+  document.addEventListener('mouseup', stopResize)
+  document.body.style.cursor = 'col-resize'
+  document.body.style.userSelect = 'none'
+}
+
+function handleResize(event: MouseEvent) {
+  if (!resizingColumn.value) return
+
+  const column = props.columns.find(c => c.key === resizingColumn.value)
+  const minWidth = column?.minWidth ? parseInt(column.minWidth) : 50
+  const delta = event.clientX - resizeStartX.value
+  const newWidth = Math.max(minWidth, resizeStartWidth.value + delta)
+
+  columnWidths.value = {
+    ...columnWidths.value,
+    [resizingColumn.value]: newWidth
+  }
+}
+
+function stopResize() {
+  if (resizingColumn.value) {
+    emit('column-resize', resizingColumn.value, columnWidths.value[resizingColumn.value])
+  }
+  resizingColumn.value = null
+  document.removeEventListener('mousemove', handleResize)
+  document.removeEventListener('mouseup', stopResize)
+  document.body.style.cursor = ''
+  document.body.style.userSelect = ''
+}
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', handleResize)
+  document.removeEventListener('mouseup', stopResize)
+})
+
+function isRowExpanded(row: Record<string, unknown>): boolean {
+  return props.expandedIds.includes(getRowId(row))
+}
+
+function toggleRowExpand(row: Record<string, unknown>) {
+  const id = getRowId(row)
+  const isExpanded = props.expandedIds.includes(id)
+
+  if (isExpanded) {
+    emit('update:expandedIds', props.expandedIds.filter(eid => eid !== id))
+  } else {
+    emit('update:expandedIds', [...props.expandedIds, id])
+  }
+
+  emit('row-expand', row, !isExpanded)
+}
+
+function getTypePrecedence(val: unknown): number {
+  if (val == null) return 4
+  if (typeof val === 'number') return 1
+  if (typeof val === 'string') return 2
+  if (typeof val === 'boolean') return 3
+  return 5
+}
+
+const filteredData = computed(() => {
+  if (props.serverSide) return props.data
+
+  let result = [...props.data]
+
+  if (currentSearch.value) {
+    const searchLower = currentSearch.value.toLowerCase()
+    result = result.filter(row => {
+      return props.columns.some(column => {
+        const value = getCellValue(row, column.key)
+        return String(value ?? '').toLowerCase().includes(searchLower)
+      })
+    })
+  }
+
+  if (Object.keys(currentFilters.value).length > 0) {
+    result = result.filter(row => {
+      return Object.entries(currentFilters.value).every(([columnKey, filterValue]) => {
+        if (!filterValue) return true
+        const column = props.columns.find(c => c.key === columnKey)
+        const value = getCellValue(row, columnKey)
+        const filterFn = column?.filterFn || defaultFilterFn
+        return filterFn(value, filterValue, row)
+      })
+    })
+  }
+
+  return result
+})
+
+const sortedData = computed(() => {
+  if (!currentSort.value.key || !currentSort.value.direction) {
+    return filteredData.value
+  }
+
+  const key = currentSort.value.key
+  const dir = currentSort.value.direction === 'asc' ? 1 : -1
+
+  return [...filteredData.value].sort((a, b) => {
+    const aVal = getCellValue(a, key)
+    const bVal = getCellValue(b, key)
+
+    const aType = getTypePrecedence(aVal)
+    const bType = getTypePrecedence(bVal)
+
+    if (aType !== bType) {
+      return (aType - bType) * dir
+    }
+
+    if (aVal == null && bVal == null) return 0
+
+    if (typeof aVal === 'string' && typeof bVal === 'string') {
+      return aVal.localeCompare(bVal) * dir
+    }
+
+    if (typeof aVal === 'number' && typeof bVal === 'number') {
+      return (aVal - bVal) * dir
+    }
+
+    if (typeof aVal === 'boolean' && typeof bVal === 'boolean') {
+      return (aVal === bVal ? 0 : aVal ? -1 : 1) * dir
+    }
+
+    return (String(aVal) < String(bVal) ? -1 : String(aVal) > String(bVal) ? 1 : 0) * dir
+  })
+})
+
+const paginatedData = computed(() => {
+  if (!isPaginationEnabled.value || props.serverSide) {
+    return sortedData.value
+  }
+
+  const start = (currentPage.value - 1) * currentPageSize.value
+  const end = start + currentPageSize.value
+  return sortedData.value.slice(start, end)
+})
+
+function handleRowClick(row: Record<string, unknown>, index: number) {
+  emit('row-click', row, index)
+}
+
+const totalColumns = computed(() => {
+  let count = props.columns.length
+  if (props.selectable) count++
+  if (props.expandable) count++
+  return count
+})
+
+const filteredTotalItems = computed(() => {
+  if (props.serverSide && props.total !== undefined) return props.total
+  return filteredData.value.length
+})
+
+const skeletonArray = computed(() => Array.from({ length: props.skeletonRows }))
+</script>
+
+<template>
+  <div
+    ref="tableRef"
+    class="ui-table"
+    :class="[
+      `ui-table--${size}`,
+      {
+        'ui-table--striped': striped,
+        'ui-table--hoverable': hoverable,
+        'ui-table--bordered': bordered,
+        'ui-table--loading': loading,
+        'ui-table--sticky-header': stickyHeader,
+        'ui-table--resizable': resizable,
+        'ui-table--resizing': resizingColumn !== null
+      }
+    ]"
+  >
+    <div v-if="searchable" class="ui-table__toolbar">
+      <div class="ui-table__search">
+        <Input
+          :model-value="currentSearch"
+          :placeholder="searchPlaceholder"
+          size="sm"
+          type="search"
+          @update:model-value="handleSearchChange"
+        >
+          <template #left>
+            <component :is="SearchIcon" class="ui-table__search-icon" />
+          </template>
+          <template v-if="currentSearch" #right>
+            <button
+              type="button"
+              class="ui-table__search-clear"
+              aria-label="Clear search"
+              @click="clearSearch"
+            >
+              <component :is="ClearIcon" class="ui-table__search-clear-icon" />
+            </button>
+          </template>
+        </Input>
+      </div>
+      <slot name="toolbar" />
+    </div>
+
+    <div class="ui-table__wrapper">
+      <table class="ui-table__table" :aria-busy="loading || undefined">
+        <thead class="ui-table__header">
+          <tr class="ui-table__header-row">
+            <th
+              v-if="expandable"
+              class="ui-table__header-cell ui-table__header-cell--expand"
+            >
+              <span class="ui-table__header-text sr-only">Expand</span>
+            </th>
+            <th
+              v-if="selectable"
+              class="ui-table__header-cell ui-table__header-cell--checkbox"
+            >
+              <Checkbox
+                :model-value="allSelected"
+                :indeterminate="someSelected"
+                size="sm"
+                aria-label="Select all rows"
+                @update:model-value="toggleAll"
+              />
+            </th>
+            <th
+              v-for="(column, colIndex) in columns"
+              :key="column.key"
+              class="ui-table__header-cell"
+              :class="[
+                `ui-table__header-cell--${column.align || 'left'}`,
+                {
+                  'ui-table__header-cell--sortable': column.sortable,
+                  'ui-table__header-cell--sorted': currentSort.key === column.key,
+                  'ui-table__header-cell--resizable': resizable && column.resizable !== false
+                }
+              ]"
+              :style="getColumnWidth(column) ? { width: getColumnWidth(column) } : undefined"
+              :aria-sort="
+                column.sortable
+                  ? currentSort.key === column.key
+                    ? currentSort.direction === 'asc'
+                      ? 'ascending'
+                      : currentSort.direction === 'desc'
+                        ? 'descending'
+                        : 'none'
+                    : 'none'
+                  : undefined
+              "
+              :tabindex="column.sortable ? 0 : undefined"
+              :role="column.sortable ? 'button' : undefined"
+              @click="handleSort(column)"
+              @keydown="handleKeydownSort($event, column)"
+            >
+              <div class="ui-table__header-content">
+                <slot :name="`header-${column.key}`" :column="column">
+                  <span class="ui-table__header-text">{{ column.label }}</span>
+                </slot>
+                <span
+                  v-if="column.sortable"
+                  class="ui-table__sort-icon"
+                  :class="{
+                    'ui-table__sort-icon--asc': currentSort.key === column.key && currentSort.direction === 'asc',
+                    'ui-table__sort-icon--desc': currentSort.key === column.key && currentSort.direction === 'desc'
+                  }"
+                  aria-hidden="true"
+                >
+                  <component
+                    v-if="currentSort.key !== column.key || !currentSort.direction"
+                    :is="SortNeutralIcon"
+                    class="ui-table__sort-svg ui-table__sort-svg--neutral"
+                  />
+                  <component
+                    v-else-if="currentSort.direction === 'asc'"
+                    :is="SortAscIcon"
+                    class="ui-table__sort-svg"
+                  />
+                  <component
+                    v-else
+                    :is="SortDescIcon"
+                    class="ui-table__sort-svg"
+                  />
+                </span>
+              </div>
+              <div
+                v-if="resizable && column.resizable !== false && colIndex < columns.length - 1"
+                class="ui-table__resize-handle"
+                @mousedown="startResize($event, column)"
+              />
+            </th>
+          </tr>
+          <tr v-if="filterable && filterableColumns.length > 0" class="ui-table__filter-row">
+            <th v-if="expandable" class="ui-table__filter-cell" />
+            <th v-if="selectable" class="ui-table__filter-cell" />
+            <th
+              v-for="column in columns"
+              :key="`filter-${column.key}`"
+              class="ui-table__filter-cell"
+            >
+              <Input
+                v-if="column.filterable !== false"
+                :model-value="currentFilters[column.key] || ''"
+                :placeholder="`Filter ${column.label}...`"
+                size="sm"
+                @update:model-value="handleFilterChange(column.key, String($event ?? ''))"
+              />
+            </th>
+          </tr>
+        </thead>
+
+        <tbody class="ui-table__body">
+          <template v-if="loading">
+            <tr
+              v-for="(_, skeletonIndex) in skeletonArray"
+              :key="`skeleton-${skeletonIndex}`"
+              class="ui-table__row ui-table__row--skeleton"
+            >
+              <td v-if="expandable" class="ui-table__cell ui-table__cell--expand">
+                <Skeleton variant="rect" :width="16" :height="16" />
+              </td>
+              <td v-if="selectable" class="ui-table__cell ui-table__cell--checkbox">
+                <Skeleton variant="rect" :width="16" :height="16" />
+              </td>
+              <td
+                v-for="(column, colIndex) in columns"
+                :key="column.key"
+                class="ui-table__cell"
+                :class="[`ui-table__cell--${column.align || 'left'}`]"
+              >
+                <Skeleton
+                  variant="text"
+                  :width="getSkeletonWidth(skeletonIndex, colIndex)"
+                  :height="16"
+                />
+              </td>
+            </tr>
+          </template>
+
+          <template v-else-if="paginatedData.length === 0">
+            <tr class="ui-table__row ui-table__row--empty">
+              <td :colspan="totalColumns" class="ui-table__cell ui-table__cell--empty">
+                <slot name="empty">
+                  <EmptyState
+                    :title="hasActiveFilters ? 'No matching results' : emptyMessage"
+                    :description="hasActiveFilters ? 'Try adjusting your search or filters' : undefined"
+                    compact
+                  />
+                </slot>
+              </td>
+            </tr>
+          </template>
+
+          <template v-else>
+            <template v-for="(row, rowIndex) in paginatedData" :key="getRowId(row)">
+              <tr
+                class="ui-table__row"
+                :class="{
+                  'ui-table__row--selected': isRowSelected(row),
+                  'ui-table__row--clickable': $attrs.onRowClick,
+                  'ui-table__row--expanded': expandable && isRowExpanded(row)
+                }"
+                @click="handleRowClick(row, rowIndex)"
+              >
+                <td
+                  v-if="expandable"
+                  class="ui-table__cell ui-table__cell--expand"
+                  @click.stop
+                >
+                  <button
+                    type="button"
+                    class="ui-table__expand-button"
+                    :class="{ 'ui-table__expand-button--expanded': isRowExpanded(row) }"
+                    :aria-expanded="isRowExpanded(row)"
+                    :aria-label="isRowExpanded(row) ? 'Collapse row' : 'Expand row'"
+                    @click="toggleRowExpand(row)"
+                  >
+                    <component
+                      :is="isRowExpanded(row) ? CollapseIcon : ExpandIcon"
+                      class="ui-table__expand-icon"
+                    />
+                  </button>
+                </td>
+                <td
+                  v-if="selectable"
+                  class="ui-table__cell ui-table__cell--checkbox"
+                  @click.stop
+                >
+                  <Checkbox
+                    :model-value="isRowSelected(row)"
+                    size="sm"
+                    :aria-label="`Select row ${rowIndex + 1}`"
+                    @update:model-value="toggleRow(row, $event)"
+                  />
+                </td>
+                <td
+                  v-for="column in columns"
+                  :key="column.key"
+                  class="ui-table__cell"
+                  :class="[`ui-table__cell--${column.align || 'left'}`]"
+                  :data-label="column.label"
+                  :style="getColumnWidth(column) ? { width: getColumnWidth(column) } : undefined"
+                >
+                  <slot
+                    :name="`cell-${column.key}`"
+                    :value="getCellValue(row, column.key)"
+                    :row="row"
+                    :column="column"
+                    :index="rowIndex"
+                  >
+                    {{ getCellValue(row, column.key) ?? '' }}
+                  </slot>
+                </td>
+              </tr>
+              <tr
+                v-if="expandable && isRowExpanded(row)"
+                :key="`expanded-${getRowId(row)}`"
+                class="ui-table__row ui-table__row--expansion"
+              >
+                <td :colspan="totalColumns" class="ui-table__cell ui-table__cell--expansion">
+                  <slot name="expanded" :row="row" :index="rowIndex">
+                    <div class="ui-table__expansion-content">
+                      <pre>{{ JSON.stringify(row, null, 2) }}</pre>
+                    </div>
+                  </slot>
+                </td>
+              </tr>
+            </template>
+          </template>
+        </tbody>
+      </table>
+    </div>
+
+    <div v-if="isPaginationEnabled && totalPages > 0" class="ui-table__footer">
+      <div class="ui-table__footer-summary">
+        <Text size="sm" muted>
+          Showing {{ paginationStart }} to {{ paginationEnd }} of {{ totalItems }} results
+        </Text>
+      </div>
+
+      <div class="ui-table__footer-controls">
+        <div class="ui-table__page-size">
+          <Text size="sm" muted as="label" :for="`${uid}-page-size`">
+            Rows per page
+          </Text>
+          <Select
+            :id="`${uid}-page-size`"
+            :model-value="currentPageSize"
+            :options="pageSizeSelectOptions"
+            size="sm"
+            @update:model-value="handlePageSizeChange"
+          />
+        </div>
+
+        <Pagination
+          :model-value="currentPage"
+          :total="totalItems"
+          :page-size="currentPageSize"
+          :sibling-count="paginationConfig.siblingCount ?? 1"
+          :show-edges="paginationConfig.showEdges ?? true"
+          :size="size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md'"
+          @update:model-value="handlePageChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ui-table {
+  font-family: var(--font-sans);
+  width: 100%;
+}
+
+.ui-table__wrapper {
+  overflow-x: auto;
+  border: 1px solid var(--table-border);
+  border-radius: var(--radius-lg);
+  background: var(--table-bg);
+}
+
+.ui-table__table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+}
+
+.ui-table__header {
+  background: var(--table-header-bg);
+}
+
+.ui-table__header-row {
+  border-bottom: 1px solid var(--table-border);
+}
+
+.ui-table__header-cell {
+  padding: var(--space-3) var(--space-4);
+  text-align: left;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--table-header-text);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.ui-table__header-cell--center {
+  text-align: center;
+}
+
+.ui-table__header-cell--right {
+  text-align: right;
+}
+
+.ui-table__header-cell--checkbox {
+  width: 48px;
+  text-align: center;
+}
+
+.ui-table__header-cell--sortable {
+  cursor: pointer;
+  transition: color var(--duration-fast) var(--ease-default);
+}
+
+.ui-table__header-cell--sortable:hover {
+  color: var(--table-sort-icon-active);
+}
+
+.ui-table__header-cell--sortable:focus-visible {
+  outline: 2px solid var(--ring-color);
+  outline-offset: -2px;
+}
+
+.ui-table__header-content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.ui-table__header-cell--center .ui-table__header-content {
+  justify-content: center;
+}
+
+.ui-table__header-cell--right .ui-table__header-content {
+  justify-content: flex-end;
+}
+
+.ui-table__sort-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  color: var(--table-sort-icon);
+  transition: color var(--duration-fast) var(--ease-default);
+}
+
+.ui-table__sort-svg {
+  width: 100%;
+  height: 100%;
+}
+
+.ui-table__sort-svg--neutral {
+  opacity: 0.5;
+}
+
+.ui-table__sort-icon--asc,
+.ui-table__sort-icon--desc {
+  color: var(--table-sort-icon-active);
+}
+
+.ui-table__sort-icon--asc .ui-table__sort-svg--neutral,
+.ui-table__sort-icon--desc .ui-table__sort-svg--neutral {
+  opacity: 1;
+}
+
+.ui-table__header-cell--sortable:hover .ui-table__sort-icon {
+  color: var(--table-sort-icon-active);
+}
+
+.ui-table__header-cell--sortable:hover .ui-table__sort-svg--neutral {
+  opacity: 1;
+}
+
+.ui-table__body {
+  background: var(--table-bg);
+}
+
+.ui-table__row {
+  border-bottom: 1px solid var(--table-border);
+  transition: background-color var(--duration-fast) var(--ease-default);
+}
+
+.ui-table__row:last-child {
+  border-bottom: none;
+}
+
+.ui-table--hoverable .ui-table__row:not(.ui-table__row--empty):not(.ui-table__row--skeleton):hover {
+  background-color: var(--table-row-hover);
+}
+
+.ui-table__row--selected {
+  background-color: var(--table-row-selected);
+}
+
+.ui-table--hoverable .ui-table__row--selected:hover {
+  background-color: var(--table-row-selected);
+}
+
+.ui-table__row--clickable {
+  cursor: pointer;
+}
+
+.ui-table--striped .ui-table__row:nth-child(even):not(.ui-table__row--selected) {
+  background-color: var(--table-row-striped);
+}
+
+.ui-table__cell {
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--text-sm);
+  color: var(--table-cell-text);
+  vertical-align: middle;
+}
+
+.ui-table__cell--center {
+  text-align: center;
+}
+
+.ui-table__cell--right {
+  text-align: right;
+}
+
+.ui-table__cell--checkbox {
+  width: 48px;
+  text-align: center;
+}
+
+.ui-table__cell--empty {
+  padding: 0;
+  text-align: center;
+}
+
+.ui-table--bordered .ui-table__cell {
+  border-right: 1px solid var(--table-border);
+}
+
+.ui-table--bordered .ui-table__cell:last-child {
+  border-right: none;
+}
+
+.ui-table--bordered .ui-table__header-cell {
+  border-right: 1px solid var(--table-border);
+}
+
+.ui-table--bordered .ui-table__header-cell:last-child {
+  border-right: none;
+}
+
+.ui-table--sm .ui-table__header-cell,
+.ui-table--sm .ui-table__cell {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-xs);
+}
+
+.ui-table--lg .ui-table__header-cell,
+.ui-table--lg .ui-table__cell {
+  padding: var(--space-4) var(--space-5);
+  font-size: var(--text-md);
+}
+
+.ui-table--sticky-header .ui-table__wrapper {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.ui-table--sticky-header .ui-table__header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+@media (max-width: 768px) {
+  .ui-table__wrapper {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  .ui-table__header {
+    display: none;
+  }
+
+  .ui-table__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .ui-table__row {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--table-border);
+    border-radius: var(--radius-lg);
+    background: var(--table-bg);
+    padding: var(--space-3);
+  }
+
+  .ui-table__row--empty {
+    padding: var(--space-6);
+  }
+
+  .ui-table__row--skeleton {
+    min-height: 120px;
+  }
+
+  .ui-table__cell {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-2) 0;
+    border-bottom: 1px solid var(--table-border);
+  }
+
+  .ui-table__cell:last-child {
+    border-bottom: none;
+  }
+
+  .ui-table__cell::before {
+    content: attr(data-label);
+    font-weight: var(--font-medium);
+    color: var(--table-header-text);
+    margin-right: var(--space-4);
+    flex-shrink: 0;
+  }
+
+  .ui-table__cell--checkbox {
+    justify-content: flex-start;
+    border-bottom: 1px solid var(--table-border);
+  }
+
+  .ui-table__cell--checkbox::before {
+    content: 'Select';
+  }
+
+  .ui-table__cell--empty {
+    border-bottom: none;
+  }
+
+  .ui-table__cell--empty::before {
+    display: none;
+  }
+
+  .ui-table--bordered .ui-table__cell {
+    border-right: none;
+  }
+
+  .ui-table__footer {
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-3);
+  }
+
+  .ui-table__footer-controls {
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .ui-table__page-size {
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+
+.ui-table__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--table-border);
+  border-top: none;
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  background: var(--table-bg);
+  flex-wrap: wrap;
+}
+
+.ui-table__footer-summary {
+  flex-shrink: 0;
+}
+
+.ui-table__footer-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+
+.ui-table__page-size {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.ui-table__page-size :deep(.ui-select) {
+  min-width: 70px;
+}
+
+.ui-table__toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--table-border);
+  border-bottom: none;
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  background: var(--table-bg);
+}
+
+.ui-table__toolbar + .ui-table__wrapper {
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+}
+
+.ui-table__toolbar + .ui-table__wrapper + .ui-table__footer {
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+}
+
+.ui-table__search {
+  flex: 1;
+  max-width: 300px;
+}
+
+.ui-table__search-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--foreground-muted);
+}
+
+.ui-table__search-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--foreground-muted);
+  transition: color var(--duration-fast) var(--ease-default);
+}
+
+.ui-table__search-clear:hover {
+  color: var(--foreground);
+}
+
+.ui-table__search-clear-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.ui-table__filter-row {
+  border-bottom: 1px solid var(--table-border);
+  background: var(--table-header-bg);
+}
+
+.ui-table__filter-cell {
+  padding: var(--space-2) var(--space-4);
+  vertical-align: middle;
+}
+
+.ui-table__filter-cell :deep(.ui-input) {
+  min-width: 0;
+}
+
+.ui-table__header-cell--expand,
+.ui-table__cell--expand {
+  width: 48px;
+  text-align: center;
+}
+
+.ui-table__expand-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--foreground-muted);
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-default);
+}
+
+.ui-table__expand-button:hover {
+  background: var(--ghost-hover);
+  color: var(--foreground);
+}
+
+.ui-table__expand-button:focus-visible {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 2px;
+}
+
+.ui-table__expand-icon {
+  width: 16px;
+  height: 16px;
+  transition: transform var(--duration-fast) var(--ease-default);
+}
+
+.ui-table__expand-button--expanded .ui-table__expand-icon {
+  transform: rotate(90deg);
+}
+
+.ui-table__row--expanded {
+  background-color: var(--subtle);
+}
+
+.ui-table__row--expansion {
+  background-color: var(--subtle);
+}
+
+.ui-table--hoverable .ui-table__row--expansion:hover {
+  background-color: var(--subtle);
+}
+
+.ui-table__cell--expansion {
+  padding: var(--space-4);
+}
+
+.ui-table__expansion-content {
+  padding: var(--space-2);
+  background: var(--surface);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+}
+
+.ui-table__expansion-content pre {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.ui-table__header-cell--resizable {
+  position: relative;
+}
+
+.ui-table__resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 4px;
+  cursor: col-resize;
+  background: transparent;
+  transition: background-color var(--duration-fast) var(--ease-default);
+}
+
+.ui-table__resize-handle:hover {
+  background: var(--primary);
+}
+
+.ui-table--resizing .ui-table__resize-handle {
+  background: var(--primary);
+}
+
+.ui-table--resizable .ui-table__table {
+  table-layout: fixed;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+@media (max-width: 768px) {
+  .ui-table__toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-2);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--table-border);
+    margin-bottom: var(--space-3);
+  }
+
+  .ui-table__toolbar + .ui-table__wrapper {
+    border-radius: 0;
+  }
+
+  .ui-table__search {
+    max-width: none;
+  }
+
+  .ui-table__filter-row {
+    display: none;
+  }
+
+  .ui-table__cell--expand {
+    justify-content: flex-start;
+  }
+
+  .ui-table__cell--expand::before {
+    content: 'Expand';
+  }
+
+  .ui-table__row--expansion {
+    margin-top: calc(-1 * var(--space-3));
+    padding-top: 0;
+    border-top: none;
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  }
+
+  .ui-table__cell--expansion {
+    padding: var(--space-3);
+  }
+
+  .ui-table__cell--expansion::before {
+    display: none;
+  }
+}
+</style>