Table

Componente de tabla con funciones avanzadas para mostrar datos tabulares.

Importación

import { Table } from 'asterui'
import type { ColumnType, RowSelection, ExpandableConfig, PaginationConfig } from 'asterui'

Ejemplos

Tabla Básica

Tabla simple con datos.

</>

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User
Alice Williams	alice@example.com	Editor
Charlie Brown	charlie@example.com	User

import { Table } from 'asterui'

function App() {
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor' },
    { id: '5', name: 'Charlie Brown', email: 'charlie@example.com', role: 'User' },
  ];
  
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name' },
    { key: 'email', title: 'Email', dataIndex: 'email' },
    { key: 'role', title: 'Role', dataIndex: 'role' },
  ];
  
  return (
      <Table columns={columns} dataSource={userData} pagination={false} />
    )
}

export default App

Renderizado Personalizado

Usa funciones de renderizado para etiquetas, botones y contenido personalizado.

</>

Name	Email	Role	Status	Actions
John Doe	john@example.com	Admin	active	EditDelete
Jane Smith	jane@example.com	User	active	EditDelete
Bob Johnson	bob@example.com	User	inactive	EditDelete
Alice Williams	alice@example.com	Editor	active	EditDelete

import { Table, Tag, Button, Space } from 'asterui'

function App() {
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'inactive' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor', status: 'active' },
  ];
  
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name', width: 150 },
    { key: 'email', title: 'Email', dataIndex: 'email' },
    { key: 'role', title: 'Role', dataIndex: 'role', align: 'center' },
    {
      key: 'status',
      title: 'Status',
      dataIndex: 'status',
      align: 'center',
      render: (value) => (
        <Tag color={value === 'active' ? 'success' : 'ghost'} size="sm">
          {String(value)}
        </Tag>
      ),
    },
    {
      key: 'actions',
      title: 'Actions',
      align: 'right',
      render: () => (
        <Space size="xs">
          <Button size="xs" variant="ghost">Edit</Button>
          <Button size="xs" variant="ghost">Delete</Button>
        </Space>
      ),
    },
  ];
  
  return (
      <Table columns={columns} dataSource={userData} pagination={false} />
    )
}

export default App

Filas Alternas

Rayas de cebra para mejor legibilidad.

</>

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User
Alice Williams	alice@example.com	Editor
Charlie Brown	charlie@example.com	User

import { Table } from 'asterui'

function App() {
  return (
      <Table columns={basicColumns} dataSource={userData.slice(0, 5)} striped pagination={false} />
    )
}

export default App

Tabla con Bordes

Añade bordes para una apariencia más definida.

</>

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User
Alice Williams	alice@example.com	Editor
Charlie Brown	charlie@example.com	User

import { Table } from 'asterui'

function App() {
  return (
      <Table columns={basicColumns} dataSource={userData.slice(0, 5)} bordered pagination={false} />
    )
}

export default App

Tamaño Compacto

Tamaño extra pequeño para datos densos.

</>

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User
Alice Williams	alice@example.com	Editor
Charlie Brown	charlie@example.com	User

import { Table } from 'asterui'

function App() {
  return (
      <Table
        columns={basicColumns}
        dataSource={userData.slice(0, 5)}
        size="xs"
        striped
        bordered
        pagination={false}
      />
    )
}

export default App

Tamaño Extra Grande

Tamaño extra grande para énfasis.

</>

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User

import { Table } from 'asterui'

function App() {
  return (
      <Table columns={basicColumns} dataSource={userData.slice(0, 3)} size="xl" pagination={false} />
    )
}

export default App

Estado Vacío

Mensaje de estado vacío personalizable.

</>

Name	Email	Role
No users found

import { Table } from 'asterui'

function App() {
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name' },
    { key: 'email', title: 'Email', dataIndex: 'email' },
    { key: 'role', title: 'Role', dataIndex: 'role' },
  ];
  
  return (
      <Table
        columns={columns}
        dataSource={[]}
        pagination={false}
        locale={{ emptyText: 'No users found' }}
      />
    )
}

export default App

Estado de Carga

Muestra un spinner de carga mientras se obtienen los datos.

</>

Show Loading

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User
Alice Williams	alice@example.com	Editor
Charlie Brown	charlie@example.com	User

import { Table, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [isLoading, setIsLoading] = useState(false);
  
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name' },
    { key: 'email', title: 'Email', dataIndex: 'email' },
    { key: 'role', title: 'Role', dataIndex: 'role' },
  ];
  
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor' },
    { id: '5', name: 'Charlie Brown', email: 'charlie@example.com', role: 'User' },
  ];
  
  return (
      <div className="space-y-4">
        <Button size="sm" onClick={() => setIsLoading(!isLoading)}>
          {isLoading ? 'Hide' : 'Show'} Loading
        </Button>
        <Table columns={columns} dataSource={userData} loading={isLoading} pagination={false} />
      </div>
    )
}

export default App

Paginación Básica

Pagina conjuntos de datos grandes.

</>

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User
Alice Williams	alice@example.com	Editor
Charlie Brown	charlie@example.com	User

«123»

import { Table } from 'asterui'

function App() {
  return (
      <Table columns={basicColumns} dataSource={userData} pagination={{ pageSize: 5 }} />
    )
}

export default App

Paginación Avanzada

Selector de tamaño de página, salto rápido y visualización de total.

</>

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User
Alice Williams	alice@example.com	Editor
Charlie Brown	charlie@example.com	User

1-5 of 12 items5 / page10 / page20 / page

«123»

Go to

import { Table } from 'asterui'

function App() {
  return (
      <Table
        columns={basicColumns}
        dataSource={userData}
        pagination={{
          pageSize: 5,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
          pageSizeOptions: [5, 10, 20],
        }}
      />
    )
}

export default App

Encabezado Fijo

Mantiene el encabezado visible al desplazarse.

</>

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User
Alice Williams	alice@example.com	Editor
Charlie Brown	charlie@example.com	User
David Lee	david@example.com	User
Emma Wilson	emma@example.com	Editor
Frank Miller	frank@example.com	User
Grace Taylor	grace@example.com	Admin
Henry Davis	henry@example.com	User
Iris Martin	iris@example.com	Editor
Jack White	jack@example.com	User

import { Table } from 'asterui'

function App() {
  return (
      <div className="max-h-64 overflow-auto border border-base-content/10 rounded-lg">
        <Table columns={basicColumns} dataSource={userData} pinRows striped pagination={false} />
      </div>
    )
}

export default App

Ordenación de Columnas

Haz clic en los encabezados de columna para ordenar los datos.

</>

Name	Age	Email
Jane Smith	28	jane@example.com
Charlie Brown	29	charlie@example.com
John Doe	32	john@example.com
Alice Williams	35	alice@example.com
David Lee	41	david@example.com
Bob Johnson	45	bob@example.com

import { Table } from 'asterui'

function App() {
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name', sorter: true },
    { key: 'age', title: 'Age', dataIndex: 'age', sorter: true, defaultSortOrder: 'ascend' },
    { key: 'email', title: 'Email', dataIndex: 'email', sorter: true },
  ];
  
  return (
      <Table
        columns={columns}
        dataSource={userData.slice(0, 6)}
        pagination={false}
      />
    )
}

export default App

Ordenación Controlada

Controla el estado de ordenación externamente.

</>

AscendingDescendingNone

Name	Email	Role
Alice Williams	alice@example.com	Editor
Bob Johnson	bob@example.com	User
Charlie Brown	charlie@example.com	User
Jane Smith	jane@example.com	User
John Doe	john@example.com	Admin

import { Table, Button, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [sortOrder, setSortOrder] = useState<'ascend' | 'descend' | null>('ascend');
  
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name', sorter: true, sortOrder },
    { key: 'email', title: 'Email', dataIndex: 'email' },
    { key: 'role', title: 'Role', dataIndex: 'role' },
  ];
  
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor' },
    { id: '5', name: 'Charlie Brown', email: 'charlie@example.com', role: 'User' },
  ];
  
  return (
      <div className="space-y-4">
        <Space size="sm">
          <Button size="sm" variant={sortOrder === 'ascend' ? 'primary' : 'outline'} onClick={() => setSortOrder('ascend')}>
            Ascending
          </Button>
          <Button size="sm" variant={sortOrder === 'descend' ? 'primary' : 'outline'} onClick={() => setSortOrder('descend')}>
            Descending
          </Button>
          <Button size="sm" variant={sortOrder === null ? 'primary' : 'outline'} onClick={() => setSortOrder(null)}>
            None
          </Button>
        </Space>
        <Table
          columns={columns}
          dataSource={userData}
          pagination={false}
          onSortChange={(sorter) => setSortOrder(sorter.order ?? null)}
        />
      </div>
    )
}

export default App

Filtrado de Columnas

Añade desplegables de filtro a las columnas.

</>

Name	Role	Status
John Doe	Admin	active
Jane Smith	User	active
Bob Johnson	User	inactive
Alice Williams	Editor	active
Charlie Brown	User	active
David Lee	User	active

import { Table } from 'asterui'

function App() {
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name' },
    {
      key: 'role',
      title: 'Role',
      dataIndex: 'role',
      filters: [
        { text: 'Admin', value: 'Admin' },
        { text: 'User', value: 'User' },
        { text: 'Editor', value: 'Editor' },
      ],
      onFilter: (value, record) => record.role === value,
    },
    {
      key: 'status',
      title: 'Status',
      dataIndex: 'status',
      filters: [
        { text: 'Active', value: 'active' },
        { text: 'Inactive', value: 'inactive' },
      ],
      onFilter: (value, record) => record.status === value,
    },
  ];
  
  return (
      <Table
        columns={columns}
        dataSource={userData.slice(0, 6)}
        pagination={false}
      />
    )
}

export default App

Selección con Checkbox

Habilita la selección de filas con checkboxes.

</>

Selected: None

	Name	Email	Role
	John Doe	john@example.com	Admin
	Jane Smith	jane@example.com	User
	Bob Johnson	bob@example.com	User
	Alice Williams	alice@example.com	Editor
	Charlie Brown	charlie@example.com	User

import { Table } from 'asterui'
import { useState } from 'react'

function App() {
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
  
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name' },
    { key: 'email', title: 'Email', dataIndex: 'email' },
    { key: 'role', title: 'Role', dataIndex: 'role' },
  ];
  
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor' },
    { id: '5', name: 'Charlie Brown', email: 'charlie@example.com', role: 'User' },
  ];
  
  return (
      <div className="space-y-4">
        <div className="text-sm">Selected: {selectedKeys.join(', ') || 'None'}</div>
        <Table
          columns={columns}
          dataSource={userData}
          rowSelection={{
            selectedRowKeys: selectedKeys,
            onChange: (keys) => setSelectedKeys(keys),
          }}
          pagination={false}
        />
      </div>
    )
}

export default App

Selección con Radio

Selección de una sola fila con botones de radio.

</>

Selected: None

	Name	Email	Role
	John Doe	john@example.com	Admin
	Jane Smith	jane@example.com	User
	Bob Johnson	bob@example.com	User
	Alice Williams	alice@example.com	Editor
	Charlie Brown	charlie@example.com	User

import { Table } from 'asterui'
import { useState } from 'react'

function App() {
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
  
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name' },
    { key: 'email', title: 'Email', dataIndex: 'email' },
    { key: 'role', title: 'Role', dataIndex: 'role' },
  ];
  
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor' },
    { id: '5', name: 'Charlie Brown', email: 'charlie@example.com', role: 'User' },
  ];
  
  return (
      <div className="space-y-4">
        <div className="text-sm">Selected: {selectedKeys.join(', ') || 'None'}</div>
        <Table
          columns={columns}
          dataSource={userData}
          rowSelection={{
            type: 'radio',
            selectedRowKeys: selectedKeys,
            onChange: (keys) => setSelectedKeys(keys),
          }}
          pagination={false}
        />
      </div>
    )
}

export default App

Filas Expandibles

Expande filas para mostrar contenido adicional.

</>

Expand	Name	Email	Role
	John Doe	john@example.com	Admin
	Jane Smith	jane@example.com	User
	Bob Johnson	bob@example.com	User
	Alice Williams	alice@example.com	Editor
	Charlie Brown	charlie@example.com	User

import { Table } from 'asterui'

function App() {
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name' },
    { key: 'email', title: 'Email', dataIndex: 'email' },
    { key: 'role', title: 'Role', dataIndex: 'role' },
  ];
  
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active', age: 32, description: 'Senior administrator' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active', age: 28, description: 'Regular user' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'inactive', age: 45, description: 'Account suspended' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor', status: 'active', age: 35, description: 'Content editor' },
    { id: '5', name: 'Charlie Brown', email: 'charlie@example.com', role: 'User', status: 'active', age: 29, description: 'New user' },
  ];
  
  const expandable = {
    expandedRowRender: (record) => (
      <div className="p-2">
        <p className="text-sm"><strong>Description:</strong> {record.description}</p>
        <p className="text-sm"><strong>Age:</strong> {record.age}</p>
      </div>
    ),
    rowExpandable: (record) => record.status === 'active',
  };
  
  return (
      <Table
        columns={columns}
        dataSource={userData}
        expandable={expandable}
        pagination={false}
      />
    )
}

export default App

Texto con Elipsis

Trunca texto largo con elipsis.

</>

Name	Email	Description
John Doe	john@example.com	Senior administrator with full system access
Jane Smith	jane@example.com	Regular user account
Bob Johnson	bob@example.com	Account currently suspended
Alice Williams	alice@example.com	Content editor with publishing rights

import { Table } from 'asterui'

function App() {
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name', width: 100 },
    { key: 'email', title: 'Email', dataIndex: 'email', width: 150, ellipsis: true },
    { key: 'description', title: 'Description', dataIndex: 'description', ellipsis: true },
  ];
  
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', description: 'Senior administrator with full system access' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', description: 'Regular user account' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', description: 'Account currently suspended' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', description: 'Content editor with publishing rights' },
  ];
  
  return (
      <Table
        columns={columns}
        dataSource={userData}
        pagination={false}
      />
    )
}

export default App

Configuración de Desplazamiento

Establece ancho y alto máximo con desplazamiento.

</>

Name	Email	Role	Status	Age	Description
John Doe	john@example.com	Admin	active	32	Senior administrator
Jane Smith	jane@example.com	User	active	28	Regular user
Bob Johnson	bob@example.com	User	inactive	45	Account suspended
Alice Williams	alice@example.com	Editor	active	35	Content editor
Charlie Brown	charlie@example.com	User	active	29	New user

import { Table } from 'asterui'

function App() {
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name', width: 150 },
    { key: 'email', title: 'Email', dataIndex: 'email', width: 200 },
    { key: 'role', title: 'Role', dataIndex: 'role', width: 100 },
    { key: 'status', title: 'Status', dataIndex: 'status', width: 100 },
    { key: 'age', title: 'Age', dataIndex: 'age', width: 80 },
    { key: 'description', title: 'Description', dataIndex: 'description', width: 300 },
  ];
  
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active', age: 32, description: 'Senior administrator' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active', age: 28, description: 'Regular user' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'inactive', age: 45, description: 'Account suspended' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor', status: 'active', age: 35, description: 'Content editor' },
    { id: '5', name: 'Charlie Brown', email: 'charlie@example.com', role: 'User', status: 'active', age: 29, description: 'New user' },
  ];
  
  return (
      <Table
        columns={columns}
        dataSource={userData}
        scroll={{ x: 800, y: 200 }}
        pagination={false}
      />
    )
}

export default App

Ejemplo Completo

Tabla con múltiples funciones combinadas.

</>

Name	Email	Role	Status	Actions
John Doe	john@example.com	Admin	active	EditDelete
Jane Smith	jane@example.com	User	active	EditDelete
Bob Johnson	bob@example.com	User	inactive	EditDelete
Alice Williams	alice@example.com	Editor	active	EditDelete
Charlie Brown	charlie@example.com	User	active	EditDelete

«123»

import { Table, Tag, Button, Space } from 'asterui'

function App() {
  return (
      <Table
        columns={columnsWithRender}
        dataSource={userData}
        size="sm"
        striped
        bordered
        pagination={{ pageSize: 5 }}
      />
    )
}

export default App

API

Table

Propiedad	Descripción	Tipo	Predeterminado
columns	Configuración de columnas de la tabla	ColumnType<T>[]	-
dataSource	Datos a mostrar en la tabla	T[]	-
rowKey	Clave única para cada fila	keyof T | ((record: T) => string)	'id'
loading	Estado de carga	boolean	false
size	Tamaño de la tabla	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
bordered	Añadir borde alrededor de la tabla	boolean	false
hoverable	Resaltar fila al pasar el cursor	boolean	true
striped	Colores de fila alternos (rayas de cebra)	boolean	false
pinRows	Fijar filas de encabezado al desplazarse	boolean	false
pinCols	Fijar columnas al desplazarse	boolean	false
pagination	Configuración de paginación o false para deshabilitar	false | PaginationConfig	{ pageSize: 10 }
rowSelection	Configuración de selección de filas	RowSelection<T>	-
expandable	Configuración de filas expandibles	ExpandableConfig<T>	-
scroll	Configuración de desplazamiento para dimensiones fijas	ScrollConfig	-
className	Clases CSS adicionales	string	-
onRow	Manejadores de eventos de fila	(record: T, index: number) => HTMLAttributes	-
onChange	Callback unificado para paginación, ordenación y filtrado	(pagination, filters, sorter, extra) => void	-
onSortChange	Callback cuando cambia la ordenación	(sorter: SorterResult<T>) => void	-
onFilterChange	Callback cuando cambia el filtro	(filters: Record<string, ...>) => void	-
locale	Configuración de localización para texto vacío, etiquetas de filtro	{ emptyText?, filterConfirm?, filterReset?, selectAll? }	-
data-testid	ID de prueba para el componente	string	'table'
aria-label	Etiqueta accesible para la tabla	string	-

ColumnType

Propiedad	Descripción	Tipo	Predeterminado
key	Clave única para la columna	string	-
title	Título del encabezado de columna	ReactNode	-
dataIndex	Nombre del campo en el registro de datos	keyof T	-
render	Función de renderizado personalizada para el contenido de la celda	(value, record, index) => ReactNode	-
width	Ancho de columna	string | number	-
align	Alineación del texto	'left' | 'center' | 'right'	'left'
fixed	Fijar columna a izquierda o derecha	'left' | 'right'	-
sorter	Habilitar ordenación o función de ordenación personalizada	boolean | ((a: T, b: T) => number)	-
sortOrder	Orden de ordenación controlado	'ascend' | 'descend' | null	-
defaultSortOrder	Orden de ordenación predeterminado	'ascend' | 'descend'	-
filters	Configuración de desplegable de filtro	FilterConfig[]	-
filteredValue	Valores filtrados controlados	(string | number | boolean)[]	-
defaultFilteredValue	Valores filtrados predeterminados	(string | number | boolean)[]	-
onFilter	Función de filtro	(value, record) => boolean	-
ellipsis	Truncar texto con elipsis	boolean	false
hidden	Ocultar columna	boolean	false

RowSelection

Propiedad	Descripción	Tipo	Predeterminado
type	Tipo de selección	'checkbox' | 'radio'	'checkbox'
selectedRowKeys	Claves de fila seleccionadas controladas	React.Key[]	-
onChange	Callback cuando cambia la selección	(selectedRowKeys, selectedRows) => void	-
getCheckboxProps	Función para personalizar propiedades del checkbox	(record) => { disabled?, name? }	-

ExpandableConfig

Propiedad	Descripción	Tipo	Predeterminado
expandedRowRender	Función de renderizado para contenido expandido	(record, index, expanded) => ReactNode	-
expandedRowKeys	Claves de fila expandidas controladas	React.Key[]	-
defaultExpandedRowKeys	Claves de fila expandidas predeterminadas	React.Key[]	-
rowExpandable	Función para determinar si la fila es expandible	(record) => boolean	-
onExpand	Callback cuando cambia el estado de expansión	(expanded, record) => void	-
onExpandedRowsChange	Callback cuando cambian las claves expandidas	(expandedKeys) => void	-
expandRowByClick	Expandir fila al hacer clic en la fila	boolean	false
expandIcon	Icono de expansión personalizado	(props) => ReactNode	-

PaginationConfig

Propiedad	Descripción	Tipo	Predeterminado
current	Número de página actual	number	1
pageSize	Número de elementos por página	number	10
total	Número total de elementos (para paginación del lado del servidor)	number	-
showSizeChanger	Mostrar desplegable de tamaño de página	boolean	false
showQuickJumper	Mostrar entrada de salto rápido de página	boolean	false
showTotal	Función para renderizar texto del total	(total, range) => ReactNode	-
pageSizeOptions	Opciones de tamaño de página	number[]	[10, 20, 50, 100]
position	Posición de la paginación	'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight'	'bottomRight'
onChange	Callback cuando cambia la página	(page, pageSize) => void	-
onShowSizeChange	Callback cuando cambia el tamaño de página	(current, size) => void	-

Accesibilidad

• Usa <table> semántica con role="grid"
• Los encabezados de columna incluyen role="columnheader" y aria-sort para columnas ordenables
• Los checkboxes de selección de fila tienen aria-label adecuado
• Los controles de ordenación son accesibles por teclado (Enter/Space para alternar)
• Los desplegables de filtro soportan la tecla Escape para cerrar
• Los botones de paginación incluyen aria-label y aria-current
• Los botones de expandir/contraer incluyen aria-expanded
• Estado de checkbox indeterminado para selección parcial

Pruebas

El componente expone atributos data-testid:

• {baseTestId} - Contenedor raíz
• {baseTestId}-table - Elemento de tabla
• {baseTestId}-header-{columnKey} - Encabezados de columna
• {baseTestId}-row-{index} - Filas de tabla
• {baseTestId}-row-{index}-{columnKey} - Celdas de tabla
• {baseTestId}-row-{index}-select - Checkbox de selección de fila
• {baseTestId}-row-{index}-expanded - Contenido de fila expandida
• {baseTestId}-select-all - Checkbox de seleccionar todo
• {baseTestId}-pagination - Contenedor de paginación
• {baseTestId}-prev, {baseTestId}-next - Botones de paginación
• {baseTestId}-{columnKey}-filter-button - Botón de filtro
• {baseTestId}-empty - Estado vacío
• {baseTestId}-loading - Estado de carga

Atributos de datos:

• data-state="selected" - En filas seleccionadas