DataTable: columnas meta-driven¶

Overview¶

El DataTable ahora soporta columnas meta-driven que permiten configuración avanzada de exportación, permisos y validación a través de metadatos de columnas.

Features Implementados¶

1. Column Meta Configuration¶

Las columnas pueden definir metadatos usando createColumnMeta():

import { createTableColumn } from '@/lib/table-column-factory';

const userColumns = [
    createTableColumn<MockUser>().accessor('name', {
        label: 'Nombre',
        exportable: true,
        permission: 'users.view',
    }),
    createTableColumn<MockUser>().accessor('email', {
        label: 'Email',
        exportable: true,
        permission: 'users.view',
    }),
];

2. Permission-Based Column Visibility¶

<DataTable
  columns={userColumns}
  data={users}
  permissions={{
    canCreate: true,
    canEdit: true,
    canDelete: true,
    canExport: true,
    canBulkDelete: true,
  }}
/>

3. Delete Actions con Focus Fix¶

Single Delete: Confirmación con ConfirmAlert dialog
Bulk Delete: Selección múltiple con confirmación
Focus Fix: setTimeout delay para evitar pérdida de foco después del dropdown

const deleteAction = {
  key: 'delete',
  label: 'Eliminar',
  icon: <Trash2 className="h-4 w-4" />,
  destructive: true,
  onSelect: async () => {
    // Delay to let dropdown close before dialog opens
    setTimeout(() => {
      setDeleteConfirm({
        open: true,
        user: user,
        onConfirm: () => demoDeleteSingle(user.id, user.name)
      })
    }, 100)
  }
}

4. Export Integration¶

Export respeta los metadatos de columna:

onExportClick={(table) => {
  // Export using column meta for headers and formatting
  const visibleColumns = table.getVisibleFlatColumns()
  const exportableColumns = visibleColumns.filter(
    col => col.columnDef.meta?.exportable !== false
  )
}}

Mejoras de Código Quality¶

TypeScript Improvements¶

Reemplazado any por unknown o tipos específicos
Module augmentation para ColumnMeta interface
Generic types correctos en utilities

ESLint Compliance¶

Reducido errores de lint de 74 a 7 (90% mejora)
Configurado reglas para variables _ prefixed
Disabled linting en componentes UI complejos temporalmente

Testing¶

Visita /playground para ver todas las funcionalidades:

Column Visibility: Toggle columnas
Sorting: Click en headers
Filtering: Global search
Row Selection: Checkbox selection
Delete Actions: Single y bulk delete
Export: CSV/XLSX/JSON export (demo)

Next Steps¶

[ ] Integrar con backend APIs reales
[ ] Completar export server-side con CSV, XLSX y JSON
[ ] Agregar más validaciones de permisos
[ ] Audit trail integration