---
name: DataTable
kind: component
lang: typescript
domain: core
version: "1.0.0"
purity: impure
signature: "DataTable<T>(props: { data: T[]; columns: ColumnDef<T>[]; onRowClick?: (row: T) => void }): JSX.Element"
description: "Tabla de datos generica con soporte para columnas configurables y click en fila."
tags: [table, component, generic, ui]
uses_functions: []
uses_types: []
returns: []
returns_optional: false
error_type: ""
imports: [react]
output: "tabla HTML interactiva con los datos renderizados según las columnas"
tested: false
tests: []
test_file_path: ""
file_path: "frontend/functions/ui/data_table.tsx"
props:
  - name: data
    type: "T[]"
    required: true
    description: "Array de datos a renderizar"
  - name: columns
    type: "ColumnDef<T>[]"
    required: true
    description: "Definicion de columnas"
  - name: onRowClick
    type: "(row: T) => void"
    required: false
    description: "Callback al hacer click en una fila"
emits: [onRowClick]
has_state: true
framework: react
variant: [default, compact, striped]
---

## Ejemplo

```tsx
<DataTable data={users} columns={cols} onRowClick={handleClick} />
```

## Notas

Componente con estado interno para manejar seleccion y scroll.