@datametria/vue-components 2.3.1 → 2.4.1

package/src/components/DatametriaSortableTable.vue

@@ -1,806 +1,830 @@
-<template>
-  <div class="datametria-sortable-table">
-    <!-- Search Bar -->
-    <div v-if="searchable" class="datametria-sortable-table__search">
-      <input
-        v-model="searchQuery"
-        type="text"
-        placeholder="Buscar..."
-        class="datametria-sortable-table__search-input"
-        aria-label="Buscar na tabela"
-      />
-    </div>
-
-    <!-- Table -->
-    <div class="datametria-sortable-table__wrapper">
-      <table class="datametria-sortable-table__table" role="table">
-        <thead class="datametria-sortable-table__thead">
-          <tr role="row">
-            <!-- Selection Column -->
-            <th 
-              v-if="selectable" 
-              class="datametria-sortable-table__th datametria-sortable-table__th--checkbox"
-              role="columnheader"
-            >
-              <input
-                type="checkbox"
-                :checked="isAllSelected"
-                :indeterminate="isIndeterminate"
-                aria-label="Selecionar todas as linhas"
-                @change="toggleSelectAll"
-              />
-            </th>
-
-            <!-- Data Columns -->
-            <th
-              v-for="column in columns"
-              :key="column.key"
-              class="datametria-sortable-table__th"
-              :class="{ 'datametria-sortable-table__th--sortable': column.sortable !== false }"
-              :style="{ width: column.width }"
-              role="columnheader"
-              :aria-sort="sortKey === column.key ? (sortOrder === 'asc' ? 'ascending' : 'descending') : 'none'"
-              @click="column.sortable !== false && toggleSort(column.key)"
-              @keydown.enter="column.sortable !== false && toggleSort(column.key)"
-              @keydown.space.prevent="column.sortable !== false && toggleSort(column.key)"
-              :tabindex="column.sortable !== false ? 0 : undefined"
-            >
-              <div class="datametria-sortable-table__th-content">
-                <span>{{ column.label }}</span>
-                <span v-if="column.sortable !== false" class="datametria-sortable-table__sort-icon" aria-hidden="true">
-                  <span v-if="sortKey === column.key">
-                    {{ sortOrder === 'asc' ? '↑' : '↓' }}
-                  </span>
-                  <span v-else class="datametria-sortable-table__sort-icon--inactive">↕</span>
-                </span>
-              </div>
-
-              <!-- Column Filter -->
-              <div v-if="filterable && column.filterable !== false" @click.stop>
-                <!-- Select Filter -->
-                <select
-                  v-if="column.filterType === 'select'"
-                  v-model="columnFilters[column.key]"
-                  :aria-label="`Filtrar por ${column.label}`"
-                  class="datametria-sortable-table__filter-input"
-                  @keydown.stop
-                >
-                  <option value="">Todos</option>
-                  <option
-                    v-for="option in getFilterOptions(column)"
-                    :key="option.value"
-                    :value="option.value"
-                  >
-                    {{ option.label }}
-                  </option>
-                </select>
-
-                <!-- Multi-Select Filter -->
-                <div
-                  v-else-if="column.filterType === 'multiselect'"
-                  class="datametria-sortable-table__multiselect"
-                >
-                  <button
-                    type="button"
-                    class="datametria-sortable-table__multiselect-trigger"
-                    @click="toggleMultiselect(column.key)"
-                  >
-                    {{ getMultiselectLabel(column) }}
-                  </button>
-                  <div
-                    v-if="activeMultiselect === column.key"
-                    class="datametria-sortable-table__multiselect-dropdown"
-                  >
-                    <label
-                      v-for="option in getFilterOptions(column)"
-                      :key="option.value"
-                      class="datametria-sortable-table__multiselect-option"
-                    >
-                      <input
-                        type="checkbox"
-                        :value="option.value"
-                        :checked="isMultiselectChecked(column.key, option.value)"
-                        @change="toggleMultiselectOption(column.key, option.value)"
-                      />
-                      {{ option.label }}
-                    </label>
-                  </div>
-                </div>
-
-                <!-- Text/Date Filter -->
-                <input
-                  v-else
-                  v-model="columnFilters[column.key]"
-                  :type="column.filterType || getFilterInputType(column)"
-                  :placeholder="`Filtrar ${column.label}...`"
-                  :aria-label="`Filtrar por ${column.label}`"
-                  class="datametria-sortable-table__filter-input"
-                  @keydown.stop
-                />
-              </div>
-            </th>
-          </tr>
-        </thead>
-
-        <tbody class="datametria-sortable-table__tbody">
-          <tr
-            v-for="(row, index) in paginatedData"
-            :key="row.id || index"
-            class="datametria-sortable-table__tr"
-            :class="{ 'datametria-sortable-table__tr--selected': selectedRows.has(row.id || index) }"
-            role="row"
-          >
-            <!-- Selection Column -->
-            <td 
-              v-if="selectable" 
-              class="datametria-sortable-table__td datametria-sortable-table__td--checkbox"
-              role="cell"
-            >
-              <input
-                type="checkbox"
-                :checked="selectedRows.has(row.id || index)"
-                :aria-label="`Selecionar linha ${index + 1}`"
-                @change="toggleSelectRow(row.id || index)"
-              />
-            </td>
-
-            <!-- Data Columns -->
-            <td
-              v-for="column in columns"
-              :key="column.key"
-              class="datametria-sortable-table__td"
-              role="cell"
-            >
-              <slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]">
-                {{ row[column.key] }}
-              </slot>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <!-- Empty State -->
-      <div v-if="filteredData.length === 0" class="datametria-sortable-table__empty" role="status">
-        <slot name="empty">Nenhum dado encontrado</slot>
-      </div>
-    </div>
-
-    <!-- Pagination -->
-    <div 
-      v-if="paginated && filteredData.length > 0" 
-      class="datametria-sortable-table__pagination"
-      role="navigation"
-      aria-label="Paginação da tabela"
-    >
-      <div class="datametria-sortable-table__pagination-info" aria-live="polite">
-        Mostrando {{ startIndex + 1 }} - {{ endIndex }} de {{ filteredData.length }} registros
-        <span v-if="selectedRows.size > 0">({{ selectedRows.size }} selecionados)</span>
-      </div>
-
-      <div class="datametria-sortable-table__pagination-controls">
-        <select 
-          v-model.number="currentPageSize" 
-          class="datametria-sortable-table__page-size"
-          aria-label="Itens por página"
-        >
-          <option v-for="size in pageSizeOptions" :key="size" :value="size">
-            {{ size }} por página
-          </option>
-        </select>
-
-        <button
-          class="datametria-sortable-table__pagination-btn"
-          :disabled="currentPage === 1"
-          aria-label="Primeira página"
-          @click="currentPage = 1"
-        >
-          ««
-        </button>
-        <button
-          class="datametria-sortable-table__pagination-btn"
-          :disabled="currentPage === 1"
-          aria-label="Página anterior"
-          @click="currentPage--"
-        >
-          ‹
-        </button>
-
-        <span class="datametria-sortable-table__pagination-pages" aria-current="page">
-          Página {{ currentPage }} de {{ totalPages }}
-        </span>
-
-        <button
-          class="datametria-sortable-table__pagination-btn"
-          :disabled="currentPage === totalPages"
-          aria-label="Próxima página"
-          @click="currentPage++"
-        >
-          ›
-        </button>
-        <button
-          class="datametria-sortable-table__pagination-btn"
-          :disabled="currentPage === totalPages"
-          aria-label="Última página"
-          @click="currentPage = totalPages"
-        >
-          »»
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import type { SortableTableProps } from '../types'
-
-const props = withDefaults(defineProps<SortableTableProps>(), {
-  selectable: false,
-  searchable: true,
-  filterable: true,
-  paginated: true,
-  pageSize: 10,
-  pageSizeOptions: () => [5, 10, 25, 50, 100]
-})
-
-// Validação em desenvolvimento
-if (process.env.NODE_ENV === 'development') {
-  if (!props.columns || props.columns.length === 0) {
-    console.warn('[DatametriaSortableTable] No columns provided')
-  }
-  if (!props.data) {
-    console.warn('[DatametriaSortableTable] No data provided')
-  }
-}
-
-const emit = defineEmits<{
-  'selection-change': [selectedIds: (string | number)[]]
-}>()
-
-// Detect filter input type based on column data
-const getFilterInputType = (column: any) => {
-  if (!props.data || props.data.length === 0) return 'text'
-  
-  const sampleValue = props.data[0][column.key]
-  
-  // Check if it's a date
-  if (sampleValue instanceof Date) return 'date'
-  if (typeof sampleValue === 'string' && !isNaN(Date.parse(sampleValue))) {
-    // Check if it looks like a date string (YYYY-MM-DD, DD/MM/YYYY, etc)
-    const datePattern = /^\d{4}-\d{2}-\d{2}|\d{2}\/\d{2}\/\d{4}/
-    if (datePattern.test(sampleValue)) return 'date'
-  }
-  
-  return 'text'
-}
-
-// Get filter options (auto-generate if 'auto')
-const getFilterOptions = (column: any) => {
-  if (column.filterOptions === 'auto') {
-    const uniqueValues = new Set<string>()
-    props.data.forEach(row => {
-      const value = row[column.key]
-      if (value !== null && value !== undefined && value !== '') {
-        uniqueValues.add(String(value))
-      }
-    })
-    return Array.from(uniqueValues)
-      .sort()
-      .map(value => ({ value, label: value }))
-  }
-  return column.filterOptions || []
-}
-
-// Multi-select methods
-const toggleMultiselect = (key: string) => {
-  activeMultiselect.value = activeMultiselect.value === key ? null : key
-}
-
-const getMultiselectLabel = (column: any) => {
-  const selected = columnFilters.value[column.key] as string[] || []
-  if (selected.length === 0) return 'Todos'
-  if (selected.length === 1) {
-    const options = getFilterOptions(column)
-    const option = options.find((o: any) => o.value === selected[0])
-    return option?.label || selected[0]
-  }
-  return `${selected.length} selecionados`
-}
-
-const isMultiselectChecked = (key: string, value: string) => {
-  const selected = columnFilters.value[key] as string[] || []
-  return selected.includes(value)
-}
-
-const toggleMultiselectOption = (key: string, value: string) => {
-  const selected = (columnFilters.value[key] as string[]) || []
-  const index = selected.indexOf(value)
-  
-  if (index > -1) {
-    columnFilters.value[key] = selected.filter(v => v !== value)
-  } else {
-    columnFilters.value[key] = [...selected, value]
-  }
-}
-
-// Search
-const searchQuery = ref('')
-
-// Sorting
-const sortKey = ref<string>('')
-const sortOrder = ref<'asc' | 'desc'>('asc')
-
-// Filtering
-const columnFilters = ref<Record<string, string | string[]>>({})
-const activeMultiselect = ref<string | null>(null)
-
-// Selection
-const selectedRows = ref<Set<string | number>>(new Set())
-
-// Pagination
-const currentPage = ref(1)
-const currentPageSize = ref(props.pageSize)
-
-// Computed: Filtered Data
-const filteredData = computed(() => {
-  let result = [...props.data]
-
-  // Global search
-  if (searchQuery.value) {
-    const query = searchQuery.value.toLowerCase()
-    result = result.filter(row =>
-      Object.values(row).some(value =>
-        String(value).toLowerCase().includes(query)
-      )
-    )
-  }
-
-  // Column filters
-  Object.entries(columnFilters.value).forEach(([key, filterValue]) => {
-    if (filterValue) {
-      // Multi-select filter
-      if (Array.isArray(filterValue) && filterValue.length > 0) {
-        result = result.filter(row =>
-          filterValue.includes(String(row[key]))
-        )
-      }
-      // Text/Date/Select filter
-      else if (typeof filterValue === 'string') {
-        const query = filterValue.toLowerCase()
-        result = result.filter(row =>
-          String(row[key]).toLowerCase().includes(query)
-        )
-      }
-    }
-  })
-
-  // Sorting
-  if (sortKey.value) {
-    result.sort((a, b) => {
-      let aVal = a[sortKey.value]
-      let bVal = b[sortKey.value]
-
-      // Handle null/undefined
-      if (aVal == null && bVal == null) return 0
-      if (aVal == null) return 1
-      if (bVal == null) return -1
-
-      // Convert dates to timestamps for proper comparison
-      if (aVal instanceof Date) aVal = aVal.getTime()
-      if (bVal instanceof Date) bVal = bVal.getTime()
-      
-      // Try to parse as date if string looks like a date
-      if (typeof aVal === 'string' && !isNaN(Date.parse(aVal))) {
-        const datePattern = /^\d{4}-\d{2}-\d{2}|\d{2}\/\d{2}\/\d{4}/
-        if (datePattern.test(aVal)) {
-          aVal = new Date(aVal).getTime()
-        }
-      }
-      if (typeof bVal === 'string' && !isNaN(Date.parse(bVal))) {
-        const datePattern = /^\d{4}-\d{2}-\d{2}|\d{2}\/\d{2}\/\d{4}/
-        if (datePattern.test(bVal)) {
-          bVal = new Date(bVal).getTime()
-        }
-      }
-
-      // Numeric comparison
-      if (typeof aVal === 'number' && typeof bVal === 'number') {
-        return sortOrder.value === 'asc' ? aVal - bVal : bVal - aVal
-      }
-
-      // String comparison (case-insensitive)
-      const aStr = String(aVal).toLowerCase()
-      const bStr = String(bVal).toLowerCase()
-      
-      if (aStr === bStr) return 0
-      const comparison = aStr > bStr ? 1 : -1
-      return sortOrder.value === 'asc' ? comparison : -comparison
-    })
-  }
-
-  return result
-})
-
-// Computed: Pagination
-const totalPages = computed(() =>
-  Math.ceil(filteredData.value.length / currentPageSize.value)
-)
-
-const startIndex = computed(() =>
-  (currentPage.value - 1) * currentPageSize.value
-)
-
-const endIndex = computed(() =>
-  Math.min(startIndex.value + currentPageSize.value, filteredData.value.length)
-)
-
-const paginatedData = computed(() => {
-  if (!props.paginated) return filteredData.value
-  return filteredData.value.slice(startIndex.value, endIndex.value)
-})
-
-// Computed: Selection
-const isAllSelected = computed(() =>
-  paginatedData.value.length > 0 &&
-  paginatedData.value.every(row => selectedRows.value.has(row.id || props.data.indexOf(row)))
-)
-
-const isIndeterminate = computed(() =>
-  selectedRows.value.size > 0 && !isAllSelected.value
-)
-
-// Methods: Sorting
-const toggleSort = (key: string) => {
-  if (sortKey.value === key) {
-    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
-  } else {
-    sortKey.value = key
-    sortOrder.value = 'asc'
-  }
-}
-
-// Methods: Selection
-const toggleSelectRow = (id: string | number) => {
-  if (selectedRows.value.has(id)) {
-    selectedRows.value.delete(id)
-  } else {
-    selectedRows.value.add(id)
-  }
-  emit('selection-change', Array.from(selectedRows.value))
-}
-
-const toggleSelectAll = () => {
-  if (isAllSelected.value) {
-    paginatedData.value.forEach(row => {
-      selectedRows.value.delete(row.id || props.data.indexOf(row))
-    })
-  } else {
-    paginatedData.value.forEach(row => {
-      selectedRows.value.add(row.id || props.data.indexOf(row))
-    })
-  }
-  emit('selection-change', Array.from(selectedRows.value))
-}
-
-// Watch: Reset page on filter change
-watch([searchQuery, columnFilters], () => {
-  currentPage.value = 1
-}, { deep: true })
-
-// Watch: Reset page if current page exceeds total pages
-watch(totalPages, (newTotal) => {
-  if (currentPage.value > newTotal && newTotal > 0) {
-    currentPage.value = newTotal
-  }
-})
-</script>
-
-<style scoped>
-.datametria-sortable-table {
-  width: 100%;
-  background: var(--dm-neutral-50, #ffffff);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  box-shadow: var(--dm-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
-}
-
-.datametria-sortable-table__search {
-  padding: var(--dm-spacing-4, 1rem);
-  border-bottom: 1px solid var(--dm-neutral-100, #f3f4f6);
-}
-
-.datametria-sortable-table__search-input {
-  width: 100%;
-  padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-4, 1rem);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  transition: all 0.2s ease;
-}
-
-.datametria-sortable-table__search-input:focus {
-  outline: none;
-  border-color: var(--dm-primary, #0072CE);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
-}
-
-.datametria-sortable-table__wrapper {
-  overflow-x: auto;
-}
-
-.datametria-sortable-table__table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.datametria-sortable-table__thead {
-  background: var(--dm-neutral-50, #f9fafb);
-  border-bottom: 2px solid var(--dm-neutral-200, #e5e7eb);
-}
-
-.datametria-sortable-table__th {
-  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
-  text-align: left;
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  font-weight: var(--dm-font-weight-semibold, 600);
-  color: var(--dm-neutral-700, #374151);
-  position: relative;
-}
-
-.datametria-sortable-table__th--sortable {
-  cursor: pointer;
-  user-select: none;
-}
-
-.datametria-sortable-table__th--sortable:hover {
-  background: var(--dm-neutral-100, #f3f4f6);
-}
-
-.datametria-sortable-table__th--sortable:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--dm-primary, #0072CE);
-}
-
-.datametria-sortable-table__th--checkbox {
-  width: 40px;
-  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-2, 0.5rem);
-}
-
-.datametria-sortable-table__th-content {
-  display: flex;
-  align-items: center;
-  gap: var(--dm-spacing-2, 0.5rem);
-}
-
-.datametria-sortable-table__sort-icon {
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-primary, #0072CE);
-}
-
-.datametria-sortable-table__sort-icon--inactive {
-  color: var(--dm-neutral-400, #9ca3af);
-  opacity: 0.5;
-}
-
-.datametria-sortable-table__filter-input {
-  width: 100%;
-  margin-top: var(--dm-spacing-2, 0.5rem);
-  padding: var(--dm-spacing-2, 0.5rem);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  font-weight: 400;
-  transition: all 0.2s ease;
-}
-
-.datametria-sortable-table__filter-input:focus {
-  outline: none;
-  border-color: var(--dm-primary, #0072CE);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
-}
-
-.datametria-sortable-table__multiselect {
-  position: relative;
-  margin-top: var(--dm-spacing-2, 0.5rem);
-}
-
-.datametria-sortable-table__multiselect-trigger {
-  width: 100%;
-  padding: var(--dm-spacing-2, 0.5rem);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  font-weight: 400;
-  text-align: left;
-  background: var(--dm-neutral-50, #ffffff);
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.datametria-sortable-table__multiselect-trigger:hover {
-  border-color: var(--dm-primary, #0072CE);
-}
-
-.datametria-sortable-table__multiselect-trigger:focus {
-  outline: none;
-  border-color: var(--dm-primary, #0072CE);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
-}
-
-.datametria-sortable-table__multiselect-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  margin-top: var(--dm-spacing-1, 0.25rem);
-  max-height: 200px;
-  overflow-y: auto;
-  background: var(--dm-neutral-50, #ffffff);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  box-shadow: var(--dm-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
-  z-index: 10;
-}
-
-.datametria-sortable-table__multiselect-option {
-  display: flex;
-  align-items: center;
-  gap: var(--dm-spacing-2, 0.5rem);
-  padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-
-.datametria-sortable-table__multiselect-option:hover {
-  background: var(--dm-neutral-100, #f3f4f6);
-}
-
-.datametria-sortable-table__multiselect-option input[type="checkbox"] {
-  margin: 0;
-}
-
-.datametria-sortable-table__tbody {
-  background: var(--dm-neutral-50, #ffffff);
-}
-
-.datametria-sortable-table__tr {
-  border-bottom: 1px solid var(--dm-neutral-100, #f3f4f6);
-  transition: background-color 0.2s ease;
-}
-
-.datametria-sortable-table__tr:hover {
-  background: var(--dm-neutral-50, #f9fafb);
-}
-
-.datametria-sortable-table__tr--selected {
-  background: color-mix(in srgb, var(--dm-primary, #0072CE) 10%, transparent);
-}
-
-.datametria-sortable-table__td {
-  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-neutral-900, #111827);
-}
-
-.datametria-sortable-table__td--checkbox {
-  width: 40px;
-  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-2, 0.5rem);
-}
-
-.datametria-sortable-table__empty {
-  padding: var(--dm-spacing-4, 1rem);
-  text-align: center;
-  color: var(--dm-neutral-500, #6b7280);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-}
-
-.datametria-sortable-table__pagination {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--dm-spacing-4, 1rem);
-  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
-  flex-wrap: wrap;
-  gap: var(--dm-spacing-4, 1rem);
-}
-
-.datametria-sortable-table__pagination-info {
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-neutral-600, #4b5563);
-}
-
-.datametria-sortable-table__pagination-controls {
-  display: flex;
-  align-items: center;
-  gap: var(--dm-spacing-2, 0.5rem);
-}
-
-.datametria-sortable-table__page-size {
-  padding: var(--dm-spacing-2, 0.5rem);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  background: var(--dm-neutral-50, #ffffff);
-  color: var(--dm-neutral-900, #111827);
-}
-
-.datametria-sortable-table__page-size:focus {
-  outline: none;
-  border-color: var(--dm-primary, #0072CE);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
-}
-
-.datametria-sortable-table__pagination-btn {
-  padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  background: var(--dm-neutral-50, #ffffff);
-  color: var(--dm-neutral-900, #111827);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.datametria-sortable-table__pagination-btn:hover:not(:disabled) {
-  background: var(--dm-neutral-100, #f3f4f6);
-  border-color: var(--dm-primary, #0072CE);
-}
-
-.datametria-sortable-table__pagination-btn:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
-}
-
-.datametria-sortable-table__pagination-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.datametria-sortable-table__pagination-pages {
-  padding: 0 var(--dm-spacing-2, 0.5rem);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-neutral-600, #4b5563);
-}
-
-input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  accent-color: var(--dm-primary, #0072CE);
-}
-
-input[type="checkbox"]:focus-visible {
-  outline: 2px solid var(--dm-primary, #0072CE);
-  outline-offset: 2px;
-}
-
-/* Mobile Responsiveness */
-@media (max-width: 640px) {
-  .datametria-sortable-table__pagination {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .datametria-sortable-table__pagination-controls {
-    justify-content: center;
-  }
-
-  .datametria-sortable-table__th,
-  .datametria-sortable-table__td {
-    padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
-    font-size: calc(var(--dm-font-size-sm, 0.875rem) * 0.9);
+<template>
+  <div class="datametria-sortable-table">
+    <!-- Search Bar -->
+    <div v-if="searchable" class="datametria-sortable-table__search">
+      <input
+        v-model="searchQuery"
+        type="text"
+        placeholder="Buscar..."
+        class="datametria-sortable-table__search-input"
+        aria-label="Buscar na tabela"
+      />
+    </div>
+
+    <!-- Table -->
+    <div class="datametria-sortable-table__wrapper">
+      <table class="datametria-sortable-table__table" role="table">
+        <thead class="datametria-sortable-table__thead">
+          <tr role="row">
+            <!-- Selection Column -->
+            <th 
+              v-if="selectable" 
+              class="datametria-sortable-table__th datametria-sortable-table__th--checkbox"
+              role="columnheader"
+            >
+              <input
+                type="checkbox"
+                :checked="isAllSelected"
+                :indeterminate="isIndeterminate"
+                aria-label="Selecionar todas as linhas"
+                @change="toggleSelectAll"
+              />
+            </th>
+
+            <!-- Data Columns -->
+            <th
+              v-for="column in columns"
+              :key="column.key"
+              class="datametria-sortable-table__th"
+              :class="{ 'datametria-sortable-table__th--sortable': column.sortable !== false }"
+              :style="{ width: column.width }"
+              role="columnheader"
+              :aria-sort="sortKey === column.key ? (sortOrder === 'asc' ? 'ascending' : 'descending') : 'none'"
+              @click="column.sortable !== false && toggleSort(column.key)"
+              @keydown.enter="column.sortable !== false && toggleSort(column.key)"
+              @keydown.space.prevent="column.sortable !== false && toggleSort(column.key)"
+              :tabindex="column.sortable !== false ? 0 : undefined"
+            >
+              <div class="datametria-sortable-table__th-content">
+                <span>{{ column.label }}</span>
+                <span v-if="column.sortable !== false" class="datametria-sortable-table__sort-icon" aria-hidden="true">
+                  <span v-if="sortKey === column.key">
+                    {{ sortOrder === 'asc' ? '↑' : '↓' }}
+                  </span>
+                  <span v-else class="datametria-sortable-table__sort-icon--inactive">↕</span>
+                </span>
+              </div>
+
+              <!-- Column Filter -->
+              <div v-if="filterable && column.filterable !== false" @click.stop>
+                <!-- Select Filter -->
+                <select
+                  v-if="column.filterType === 'select'"
+                  v-model="columnFilters[column.key]"
+                  :aria-label="`Filtrar por ${column.label}`"
+                  class="datametria-sortable-table__filter-input"
+                  @keydown.stop
+                >
+                  <option value="">Todos</option>
+                  <option
+                    v-for="option in getFilterOptions(column)"
+                    :key="option.value"
+                    :value="option.value"
+                  >
+                    {{ option.label }}
+                  </option>
+                </select>
+
+                <!-- Multi-Select Filter -->
+                <div
+                  v-else-if="column.filterType === 'multiselect'"
+                  class="datametria-sortable-table__multiselect"
+                >
+                  <button
+                    type="button"
+                    class="datametria-sortable-table__multiselect-trigger"
+                    @click="toggleMultiselect(column.key)"
+                  >
+                    {{ getMultiselectLabel(column) }}
+                  </button>
+                  <div
+                    v-if="activeMultiselect === column.key"
+                    class="datametria-sortable-table__multiselect-dropdown"
+                  >
+                    <label
+                      v-for="option in getFilterOptions(column)"
+                      :key="option.value"
+                      class="datametria-sortable-table__multiselect-option"
+                    >
+                      <input
+                        type="checkbox"
+                        :value="option.value"
+                        :checked="isMultiselectChecked(column.key, option.value)"
+                        @change="toggleMultiselectOption(column.key, option.value)"
+                      />
+                      {{ option.label }}
+                    </label>
+                  </div>
+                </div>
+
+                <!-- Text/Date Filter -->
+                <input
+                  v-else
+                  v-model="columnFilters[column.key]"
+                  :type="column.filterType || getFilterInputType(column)"
+                  :placeholder="`Filtrar ${column.label}...`"
+                  :aria-label="`Filtrar por ${column.label}`"
+                  class="datametria-sortable-table__filter-input"
+                  @keydown.stop
+                />
+              </div>
+            </th>
+          </tr>
+        </thead>
+
+        <tbody class="datametria-sortable-table__tbody">
+          <tr
+            v-for="(row, index) in paginatedData"
+            :key="row.id || index"
+            class="datametria-sortable-table__tr"
+            :class="{ 'datametria-sortable-table__tr--selected': selectedRows.has(row.id || index) }"
+            role="row"
+          >
+            <!-- Selection Column -->
+            <td 
+              v-if="selectable" 
+              class="datametria-sortable-table__td datametria-sortable-table__td--checkbox"
+              role="cell"
+            >
+              <input
+                type="checkbox"
+                :checked="selectedRows.has(row.id || index)"
+                :aria-label="`Selecionar linha ${index + 1}`"
+                @change="toggleSelectRow(row.id || index)"
+              />
+            </td>
+
+            <!-- Data Columns -->
+            <td
+              v-for="column in columns"
+              :key="column.key"
+              class="datametria-sortable-table__td"
+              role="cell"
+            >
+              <slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]">
+                {{ row[column.key] }}
+              </slot>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Empty State -->
+      <div v-if="filteredData.length === 0" class="datametria-sortable-table__empty" role="status">
+        <slot name="empty">Nenhum dado encontrado</slot>
+      </div>
+    </div>
+
+    <!-- Pagination -->
+    <div 
+      v-if="paginated && filteredData.length > 0" 
+      class="datametria-sortable-table__pagination"
+      role="navigation"
+      aria-label="Paginação da tabela"
+    >
+      <div class="datametria-sortable-table__pagination-info" aria-live="polite">
+        Mostrando {{ startIndex + 1 }} - {{ endIndex }} de {{ filteredData.length }} registros
+        <span v-if="selectedRows.size > 0">({{ selectedRows.size }} selecionados)</span>
+      </div>
+
+      <div class="datametria-sortable-table__pagination-controls">
+        <select 
+          v-model.number="currentPageSize" 
+          class="datametria-sortable-table__page-size"
+          aria-label="Itens por página"
+        >
+          <option v-for="size in pageSizeOptions" :key="size" :value="size">
+            {{ size }} por página
+          </option>
+        </select>
+
+        <button
+          class="datametria-sortable-table__pagination-btn"
+          :disabled="currentPage === 1"
+          aria-label="Primeira página"
+          @click="currentPage = 1"
+        >
+          ««
+        </button>
+        <button
+          class="datametria-sortable-table__pagination-btn"
+          :disabled="currentPage === 1"
+          aria-label="Página anterior"
+          @click="currentPage--"
+        >
+          ‹
+        </button>
+
+        <span class="datametria-sortable-table__pagination-pages" aria-current="page">
+          Página {{ currentPage }} de {{ totalPages }}
+        </span>
+
+        <button
+          class="datametria-sortable-table__pagination-btn"
+          :disabled="currentPage === totalPages"
+          aria-label="Próxima página"
+          @click="currentPage++"
+        >
+          ›
+        </button>
+        <button
+          class="datametria-sortable-table__pagination-btn"
+          :disabled="currentPage === totalPages"
+          aria-label="Última página"
+          @click="currentPage = totalPages"
+        >
+          »»
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import type { SortableTableProps } from '../types'
+
+const props = withDefaults(defineProps<SortableTableProps>(), {
+  selectable: false,
+  searchable: true,
+  filterable: true,
+  paginated: true,
+  pageSize: 10,
+  pageSizeOptions: () => [5, 10, 25, 50, 100]
+})
+
+// Validação em desenvolvimento
+if (process.env.NODE_ENV === 'development') {
+  if (!props.columns || props.columns.length === 0) {
+    console.warn('[DatametriaSortableTable] No columns provided')
+  }
+  if (!props.data) {
+    console.warn('[DatametriaSortableTable] No data provided')
+  }
+}
+
+const emit = defineEmits<{
+  'selection-change': [selectedIds: (string | number)[]]
+}>()
+
+// Detect filter input type based on column data
+const getFilterInputType = (column: any) => {
+  if (!props.data || props.data.length === 0) return 'text'
+  
+  const sampleValue = props.data[0][column.key]
+  
+  // Check if it's a date
+  if (sampleValue instanceof Date) return 'date'
+  if (typeof sampleValue === 'string' && !isNaN(Date.parse(sampleValue))) {
+    // Check if it looks like a date string (YYYY-MM-DD, DD/MM/YYYY, etc)
+    const datePattern = /^\d{4}-\d{2}-\d{2}|\d{2}\/\d{2}\/\d{4}/
+    if (datePattern.test(sampleValue)) return 'date'
+  }
+  
+  return 'text'
+}
+
+// Get filter options (auto-generate if 'auto')
+const getFilterOptions = (column: any) => {
+  if (column.filterOptions === 'auto') {
+    const uniqueValues = new Set<string>()
+    props.data.forEach(row => {
+      const value = row[column.key]
+      if (value !== null && value !== undefined && value !== '') {
+        uniqueValues.add(String(value))
+      }
+    })
+    return Array.from(uniqueValues)
+      .sort()
+      .map(value => ({ value, label: value }))
+  }
+  return column.filterOptions || []
+}
+
+// Multi-select methods
+const toggleMultiselect = (key: string) => {
+  activeMultiselect.value = activeMultiselect.value === key ? null : key
+}
+
+const getMultiselectLabel = (column: any) => {
+  const selected = columnFilters.value[column.key] as string[] || []
+  if (selected.length === 0) return 'Todos'
+  if (selected.length === 1) {
+    const options = getFilterOptions(column)
+    const option = options.find((o: any) => o.value === selected[0])
+    return option?.label || selected[0]
+  }
+  return `${selected.length} selecionados`
+}
+
+const isMultiselectChecked = (key: string, value: string) => {
+  const selected = columnFilters.value[key] as string[] || []
+  return selected.includes(value)
+}
+
+const toggleMultiselectOption = (key: string, value: string) => {
+  const selected = (columnFilters.value[key] as string[]) || []
+  const index = selected.indexOf(value)
+  
+  if (index > -1) {
+    columnFilters.value[key] = selected.filter(v => v !== value)
+  } else {
+    columnFilters.value[key] = [...selected, value]
+  }
+}
+
+// Search
+const searchQuery = ref('')
+
+// Sorting
+const sortKey = ref<string>('')
+const sortOrder = ref<'asc' | 'desc'>('asc')
+
+// Filtering
+const columnFilters = ref<Record<string, string | string[]>>({})
+const activeMultiselect = ref<string | null>(null)
+
+// Selection
+const selectedRows = ref<Set<string | number>>(new Set())
+
+// Pagination
+const currentPage = ref(1)
+const currentPageSize = ref(props.pageSize)
+
+// Computed: Filtered Data
+const filteredData = computed(() => {
+  let result = [...props.data]
+
+  // Global search
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    result = result.filter(row =>
+      Object.values(row).some(value =>
+        String(value).toLowerCase().includes(query)
+      )
+    )
+  }
+
+  // Column filters
+  Object.entries(columnFilters.value).forEach(([key, filterValue]) => {
+    if (filterValue) {
+      // Multi-select filter
+      if (Array.isArray(filterValue) && filterValue.length > 0) {
+        result = result.filter(row =>
+          filterValue.includes(String(row[key]))
+        )
+      }
+      // Text/Date/Select filter
+      else if (typeof filterValue === 'string') {
+        const query = filterValue.toLowerCase()
+        result = result.filter(row =>
+          String(row[key]).toLowerCase().includes(query)
+        )
+      }
+    }
+  })
+
+  // Sorting
+  if (sortKey.value) {
+    result.sort((a, b) => {
+      let aVal = a[sortKey.value]
+      let bVal = b[sortKey.value]
+
+      // Handle null/undefined
+      if (aVal == null && bVal == null) return 0
+      if (aVal == null) return 1
+      if (bVal == null) return -1
+
+      // Convert dates to timestamps for proper comparison
+      if (aVal instanceof Date) aVal = aVal.getTime()
+      if (bVal instanceof Date) bVal = bVal.getTime()
+      
+      // Try to parse as date if string looks like a date
+      if (typeof aVal === 'string' && !isNaN(Date.parse(aVal))) {
+        const datePattern = /^\d{4}-\d{2}-\d{2}|\d{2}\/\d{2}\/\d{4}/
+        if (datePattern.test(aVal)) {
+          aVal = new Date(aVal).getTime()
+        }
+      }
+      if (typeof bVal === 'string' && !isNaN(Date.parse(bVal))) {
+        const datePattern = /^\d{4}-\d{2}-\d{2}|\d{2}\/\d{2}\/\d{4}/
+        if (datePattern.test(bVal)) {
+          bVal = new Date(bVal).getTime()
+        }
+      }
+
+      // Numeric comparison
+      if (typeof aVal === 'number' && typeof bVal === 'number') {
+        return sortOrder.value === 'asc' ? aVal - bVal : bVal - aVal
+      }
+
+      // String comparison (case-insensitive)
+      const aStr = String(aVal).toLowerCase()
+      const bStr = String(bVal).toLowerCase()
+      
+      if (aStr === bStr) return 0
+      const comparison = aStr > bStr ? 1 : -1
+      return sortOrder.value === 'asc' ? comparison : -comparison
+    })
+  }
+
+  return result
+})
+
+// Computed: Pagination
+const totalPages = computed(() =>
+  Math.ceil(filteredData.value.length / currentPageSize.value)
+)
+
+const startIndex = computed(() =>
+  (currentPage.value - 1) * currentPageSize.value
+)
+
+const endIndex = computed(() =>
+  Math.min(startIndex.value + currentPageSize.value, filteredData.value.length)
+)
+
+const paginatedData = computed(() => {
+  if (!props.paginated) return filteredData.value
+  return filteredData.value.slice(startIndex.value, endIndex.value)
+})
+
+// Computed: Selection
+const isAllSelected = computed(() =>
+  paginatedData.value.length > 0 &&
+  paginatedData.value.every(row => selectedRows.value.has(row.id || props.data.indexOf(row)))
+)
+
+const isIndeterminate = computed(() =>
+  selectedRows.value.size > 0 && !isAllSelected.value
+)
+
+// Methods: Sorting
+const toggleSort = (key: string) => {
+  if (sortKey.value === key) {
+    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortKey.value = key
+    sortOrder.value = 'asc'
+  }
+}
+
+// Methods: Selection
+const toggleSelectRow = (id: string | number) => {
+  if (selectedRows.value.has(id)) {
+    selectedRows.value.delete(id)
+  } else {
+    selectedRows.value.add(id)
+  }
+  emit('selection-change', Array.from(selectedRows.value))
+}
+
+const toggleSelectAll = () => {
+  if (isAllSelected.value) {
+    paginatedData.value.forEach(row => {
+      selectedRows.value.delete(row.id || props.data.indexOf(row))
+    })
+  } else {
+    paginatedData.value.forEach(row => {
+      selectedRows.value.add(row.id || props.data.indexOf(row))
+    })
+  }
+  emit('selection-change', Array.from(selectedRows.value))
+}
+
+// Watch: Reset page on filter change
+watch([searchQuery, columnFilters], () => {
+  currentPage.value = 1
+}, { deep: true })
+
+// Watch: Reset page if current page exceeds total pages
+watch(totalPages, (newTotal) => {
+  if (currentPage.value > newTotal && newTotal > 0) {
+    currentPage.value = newTotal
+  }
+})
+</script>
+
+<style scoped>
+.datametria-sortable-table {
+  width: 100%;
+  background: var(--dm-bg-color, #ffffff);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  box-shadow: var(--dm-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
+}
+
+.datametria-sortable-table__search {
+  padding: var(--dm-spacing-4, 1rem);
+  border-bottom: 1px solid var(--dm-border-color, #e5e7eb);
+}
+
+.datametria-sortable-table__search-input {
+  width: 100%;
+  padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-4, 1rem);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  background: var(--dm-bg-color, #ffffff);
+  color: var(--dm-text-primary, #111827);
+  transition: all 0.2s ease;
+}
+
+.datametria-sortable-table__search-input:focus {
+  outline: none;
+  border-color: var(--dm-primary, #0072CE);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
+}
+
+.datametria-sortable-table__wrapper {
+  overflow-x: auto;
+}
+
+.datametria-sortable-table__table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.datametria-sortable-table__thead {
+  background: var(--dm-bg-secondary, #f9fafb);
+  border-bottom: 2px solid var(--dm-border-color, #e5e7eb);
+}
+
+.datametria-sortable-table__th {
+  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
+  text-align: left;
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: var(--dm-font-weight-semibold, 600);
+  color: var(--dm-text-primary, #374151);
+  position: relative;
+}
+
+.datametria-sortable-table__th--sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.datametria-sortable-table__th--sortable:hover {
+  background: var(--dm-bg-hover, #f3f4f6);
+}
+
+.datametria-sortable-table__th--sortable:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--dm-primary, #0072CE);
+}
+
+.datametria-sortable-table__th--checkbox {
+  width: 40px;
+  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-2, 0.5rem);
+}
+
+.datametria-sortable-table__th-content {
+  display: flex;
+  align-items: center;
+  gap: var(--dm-spacing-2, 0.5rem);
+}
+
+.datametria-sortable-table__sort-icon {
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-primary, #0072CE);
+}
+
+.datametria-sortable-table__sort-icon--inactive {
+  color: var(--dm-text-secondary, #9ca3af);
+  opacity: 0.5;
+}
+
+.datametria-sortable-table__filter-input {
+  width: 100%;
+  margin-top: var(--dm-spacing-2, 0.5rem);
+  padding: var(--dm-spacing-2, 0.5rem);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: 400;
+  background: var(--dm-bg-color, #ffffff);
+  color: var(--dm-text-primary, #111827);
+  transition: all 0.2s ease;
+}
+
+.datametria-sortable-table__filter-input:focus {
+  outline: none;
+  border-color: var(--dm-primary, #0072CE);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
+}
+
+.datametria-sortable-table__multiselect {
+  position: relative;
+  margin-top: var(--dm-spacing-2, 0.5rem);
+}
+
+.datametria-sortable-table__multiselect-trigger {
+  width: 100%;
+  padding: var(--dm-spacing-2, 0.5rem);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: 400;
+  text-align: left;
+  background: var(--dm-bg-color, #ffffff);
+  color: var(--dm-text-primary, #111827);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.datametria-sortable-table__multiselect-trigger:hover {
+  border-color: var(--dm-primary, #0072CE);
+}
+
+.datametria-sortable-table__multiselect-trigger:focus {
+  outline: none;
+  border-color: var(--dm-primary, #0072CE);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
+}
+
+.datametria-sortable-table__multiselect-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: var(--dm-spacing-1, 0.25rem);
+  max-height: 200px;
+  overflow-y: auto;
+  background: var(--dm-bg-color, #ffffff);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  box-shadow: var(--dm-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
+  z-index: 10;
+}
+
+.datametria-sortable-table__multiselect-option {
+  display: flex;
+  align-items: center;
+  gap: var(--dm-spacing-2, 0.5rem);
+  padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-text-primary, #111827);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.datametria-sortable-table__multiselect-option:hover {
+  background: var(--dm-bg-hover, #f3f4f6);
+}
+
+.datametria-sortable-table__multiselect-option input[type="checkbox"] {
+  margin: 0;
+}
+
+.datametria-sortable-table__tbody {
+  background: var(--dm-bg-color, #ffffff);
+}
+
+.datametria-sortable-table__tr {
+  border-bottom: 1px solid var(--dm-border-color, #e5e7eb);
+  transition: background-color 0.2s ease;
+}
+
+.datametria-sortable-table__tr:hover {
+  background: var(--dm-bg-hover, #f9fafb);
+}
+
+.datametria-sortable-table__tr--selected {
+  background: color-mix(in srgb, var(--dm-primary, #0072CE) 10%, transparent);
+}
+
+.datametria-sortable-table__td {
+  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-text-primary, #111827);
+}
+
+.datametria-sortable-table__td--checkbox {
+  width: 40px;
+  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-2, 0.5rem);
+}
+
+.datametria-sortable-table__empty {
+  padding: var(--dm-spacing-4, 1rem);
+  text-align: center;
+  color: var(--dm-text-secondary, #6b7280);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+}
+
+.datametria-sortable-table__pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--dm-spacing-4, 1rem);
+  border-top: 1px solid var(--dm-border-color, #e5e7eb);
+  flex-wrap: wrap;
+  gap: var(--dm-spacing-4, 1rem);
+}
+
+.datametria-sortable-table__pagination-info {
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-text-secondary, #4b5563);
+}
+
+.datametria-sortable-table__pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--dm-spacing-2, 0.5rem);
+}
+
+.datametria-sortable-table__page-size {
+  padding: var(--dm-spacing-2, 0.5rem);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: var(--dm-bg-color, #ffffff);
+  color: var(--dm-text-primary, #111827);
+}
+
+.datametria-sortable-table__page-size:focus {
+  outline: none;
+  border-color: var(--dm-primary, #0072CE);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
+}
+
+.datametria-sortable-table__pagination-btn {
+  padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  background: var(--dm-bg-color, #ffffff);
+  color: var(--dm-text-primary, #111827);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.datametria-sortable-table__pagination-btn:hover:not(:disabled) {
+  background: var(--dm-bg-hover, #f3f4f6);
+  border-color: var(--dm-primary, #0072CE);
+}
+
+.datametria-sortable-table__pagination-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
+}
+
+.datametria-sortable-table__pagination-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.datametria-sortable-table__pagination-pages {
+  padding: 0 var(--dm-spacing-2, 0.5rem);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-text-secondary, #4b5563);
+}
+
+input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  accent-color: var(--dm-primary, #0072CE);
+}
+
+input[type="checkbox"]:focus-visible {
+  outline: 2px solid var(--dm-primary, #0072CE);
+  outline-offset: 2px;
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 640px) {
+  .datametria-sortable-table__pagination {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .datametria-sortable-table__pagination-controls {
+    justify-content: center;
+  }
+
+  .datametria-sortable-table__th,
+  .datametria-sortable-table__td {
+    padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
+    font-size: calc(var(--dm-font-size-sm, 0.875rem) * 0.9);
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .datametria-sortable-table__tr,
+  .datametria-sortable-table__pagination-btn,
+  .datametria-sortable-table__search-input,
+  .datametria-sortable-table__filter-input {
+    transition: none;
+  }
+}
+
+/* Dark Mode Support - Hybrid Approach */
+
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .datametria-sortable-table {
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
   }
 }
 
-/* Reduced Motion */
-@media (prefers-reduced-motion: reduce) {
-  .datametria-sortable-table__tr,
-  .datametria-sortable-table__pagination-btn,
-  .datametria-sortable-table__search-input,
-  .datametria-sortable-table__filter-input {
-    transition: none;
-  }
+/* Controle manual via useTheme() */
+[data-theme="dark"] .datametria-sortable-table {
+  background: var(--dm-bg-color-dark, #1e1e1e);
+  color: var(--dm-text-primary-dark, #e0e0e0);
+  border-color: var(--dm-border-color-dark, #404040);
 }
-</style>
+</style>