Data · Onaris Design System

Table

Tabla de datos con cabecera ordenable, selección múltiple y acciones por fila. Las columnas numéricas se alinean a la derecha con tabular-nums para que los dígitos cuadren verticalmente. Dos densidades: normal (40px de fila) y compacta (32px).

Tabla completa toolbar + orden + selección + acciones + footer

Artículo	SKU	Estado	Precio	Stock
Camiseta algodón orgánico	SKU-00458	Publicado	29,95 €	120
Pantalón chino slim fit	SKU-00312	Borrador	54,00 €	38
Sudadera capucha unisex	SKU-00877	Publicado	72,50 €	6
Gorra bordada logo	SKU-01204	Archivado	18,00 €	0

Densidad compactafilas de 32px para listados largos

Artículo	SKU	Precio	Stock
Camiseta algodón orgánico	SKU-00458	29,95 €	120
Pantalón chino slim fit	SKU-00312	54,00 €	38
Sudadera capucha unisex	SKU-00877	72,50 €	6
Gorra bordada logo	SKU-01204	18,00 €	0

<Table
  columns={[
    { key: 'name',  label: 'Artículo', sortable: true },
    { key: 'sku',   label: 'SKU', mono: true },
    { key: 'state', label: 'Estado', render: r => <Pill variant={r.tone}>{r.state}</Pill> },
    { key: 'price', label: 'Precio', align: 'right', numeric: true },
  ]}
  data={items}
  selectable
  density="compact"
  onRowClick={openDetail}
/>

Prop	Tipo	Default	Descripción
columns	Column[]	—	Definición de columnas (ver abajo).
data	T[]	[]	Filas a renderizar.
density	'default' \| 'compact'	'default'	Alto de fila: 40px ó 32px.
striped	boolean	false	Bandas alternas en las filas.
selectable	boolean	false	Añade columna de checkbox y selección múltiple.
selectedKeys	string[]	—	Filas seleccionadas (controlado).
onSelectionChange	(keys) => void	—	Cambio de selección.
sort	{ key, dir }	—	Estado de ordenación.
onSortChange	(sort) => void	—	Click en cabecera ordenable.
onRowClick	(row) => void	—	Click en fila.
loading	boolean	false	Muestra filas Skeleton.
empty	ReactNode	—	Contenido cuando no hay datos (usar `Empty`).
Column
key	string	—	Campo del dato.
label	string	—	Texto de cabecera.
align	'left' \| 'right' \| 'center'	'left'	Alineación. Numéricas siempre a la derecha.
numeric	boolean	false	Aplica fuente mono y `tabular-nums`.
sortable	boolean	false	Cabecera clicable para ordenar.
width	string \| number	auto	Ancho fijo de la columna.
render	(row) => ReactNode	—	Render personalizado de la celda.

Card

Contenedor de contenido agrupado. Las cards se separan por borde, nunca por sombra: la elevación se reserva para elementos que flotan sobre el contenido. Tres composiciones: básica, interactiva (clicable) y de métrica.

Básicaheader + body + footer

Temporada Primavera 2026

Distribuciones García S.L.

Activo

248 artículos en 12 familias. Última sincronización con el ERP hace 3 minutos.

Interactiva con mediacard de artículo · estados default / hover / selected

SKU-00458

Camiseta algodón

29,95 €

Default

SKU-00312

Pantalón chino

54,00 €

Hover

SKU-00877

Sudadera capucha

72,50 €

Selected

Métricapara dashboards · MetricCard

Artículos activos

1.284

+12,4% vs. mes anterior

Pedidos del mes

342

−3,1% vs. mes anterior

Valor de catálogo

48,2K €

Sin cambios

<Card>
  <Card.Header title="Temporada Primavera 2026" subtitle="Distribuciones García" />
  <Card.Body>248 artículos en 12 familias.</Card.Body>
  <Card.Footer><Button size="sm">Abrir</Button></Card.Footer>
</Card>

<MetricCard label="Artículos activos" value="1.284"
  delta={{ value: '+12,4%', direction: 'up' }} />

Prop	Tipo	Default	Descripción
interactive	boolean	false	Cursor pointer y hover de borde.
selected	boolean	false	Borde accent.
onClick	() => void	—	Handler de click (implica interactive).
padding	'none' \| 'sm' \| 'md'	'md'	Padding del body.
MetricCard
label	string	—	Etiqueta superior en mayúsculas.
value	string \| number	—	Cifra principal.
delta	{ value, direction }	—	direction: 'up' \| 'down' \| 'flat'.

Avatar

Representación de una persona o entidad. Prioriza imagen; si no hay, cae a iniciales; si tampoco, a icono. Admite indicador de estado y agrupación con solapamiento.

Tiposimagen · iniciales · icono

MG JL AP DG

Tamañossm (24) · md (32) · lg (40)

MG MG MG

Con estado

MG JL AP DG

Gruposolapado, con contador de resto

MG JL AP +7

<Avatar src={user.photo} name="María García" size="md" />
<Avatar name="María García" status="online" />

<AvatarGroup max={3}>
  {users.map(u => <Avatar key={u.id} name={u.name} src={u.photo} />)}
</AvatarGroup>

Prop	Tipo	Default	Descripción
src	string	—	URL de la imagen. Si falla, cae a iniciales.
name	string	—	Nombre completo. Genera las iniciales y el `alt`.
size	'sm' \| 'md' \| 'lg'	'md'	24 / 32 / 40 px.
shape	'circle' \| 'square'	'circle'	Forma del contenedor.
tone	'leading' \| 'accent' \| 'soft' \| 'neutral'	'leading'	Color de fondo cuando no hay imagen.
status	'online' \| 'busy' \| 'away' \| 'offline'	—	Punto indicador en la esquina.
AvatarGroup
max	number	4	Avatares visibles antes del contador.
size	AvatarSize	'sm'	Tamaño aplicado a todos los hijos.