PatternDisponible

Data Table

Tabla local con búsqueda, ordenación, paginación y estado vacío.

Workspace component usage
	Status
Atlas	Active	12
Bloom	Draft	4
Cedar	Active	18

Page 1 / 2

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/data-table.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

import { DataTable } from '@/components/ui/data-table';

export default function Demo() {
  const rows = [
    { name: 'Atlas', status: 'Active', count: 12 },
    { name: 'Bloom', status: 'Draft', count: 4 },
    { name: 'Cedar', status: 'Active', count: 18 },
    { name: 'Delta', status: 'Active', count: 7 },
    { name: 'Echo', status: 'Draft', count: 2 },
  ];
  return (
    <DataTable
      data={rows}
      columns={[
        {
          id: 'name',
          header: 'Name',
          value: (row) => row.name,
          sortable: true,
        },
        { id: 'status', header: 'Status', value: (row) => row.status },
        {
          id: 'count',
          header: 'Components',
          value: (row) => row.count,
          sortable: true,
        },
      ]}
      getRowId={(row) => row.name}
      caption="Workspace component usage"
      pageSize={3}
    />
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
data	T[]	—	Rows processed locally.
columns	DataTableColumn<T>[]	—	Columns with accessor, optional cell, and sorting.
getRowId	(row: T) => string	—	Stable unique row identity.
pageSize	number	5	Rows per page, normalized to a positive integer.
labels	object	English labels	Search, empty, pagination, and page labels.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.