Datos

Table para filas ordenables (cebra / hover / vacío). LineChart, BarChart y DoughnutChart son SVG ligeros monocromo (--brand-fg), con tooltip al pasar el ratón.

Preview principal

TABLE · CHARTS5 filas · SVG

	Plan	Estado		Desde
Acme Inc.	Plus	Activo	$1,240	12 mar
Bolt Ltd.	Light	En pruebas	$620	8 abr
Crypto Labs	Basic	Activo	$2,310	2 may
Delta Apps	Light	Suspendido	$95	21 may
Ember Co.	Basic	Activo	$880	3 jun

Estado de clientes

Activo60%En pruebas25%Suspendido15%

Ingresos por año

pasa el ratón por el gráfico → etiqueta + valor

Gráficos

SVG sin dependencias; tokens de marca (--brand-fg).

LINE · BAR · DOUGHNUT

Líneas

Barras

Dona

Activo60%En pruebas25%Suspendido15%

hover en punto / barra / segmento → tooltip

Tabla

card / flush, cebra, hover y vacío.

TABLE

variant=card · zebra

	Plan	Estado		Desde
Acme Inc.	Plus	Activo	$1,240	12 mar
Bolt Ltd.	Light	En pruebas	$620	8 abr
Crypto Labs	Basic	Activo	$2,310	2 may

vacío

	Plan	Estado		Desde
Sin clientes en este periodo

Uso

import { Table, LineChart, BarChart, DoughnutChart } from "devsoftec-ui";

const columns = [
  { header: "Cliente", sortable: true, sortValue: (c) => c.name, cell: (c) => c.name },
  { header: "Gasto", align: "right", sortable: true, sortValue: (c) => c.spent, cell: (c) => `$${c.spent}` },
];

<Table columns={columns} data={rows} keyField={(c) => c.id} variant="card" zebra />
<LineChart data={[8, 14, 11]} labels={["E", "F", "M"]} height={150} />
<BarChart data={[{ label: "Ene", value: 40 }, { label: "Feb", value: 62 }]} />
<DoughnutChart data={[{ label: "A", value: 60 }, { label: "B", value: 40 }]} />

Props

Table

Prop	Tipo	Default	Descripción
`columns`	`ColumnDef<T>[]`	—	`header`, `cell`, `sortable`, `sortValue`, `align`, `width`
`data`	`T[]`	—	Filas
`keyField`	`(row) => key`	—	Clave única
`variant`	`card` \| `flush`	`card`	Contenedor con borde o solo líneas
`zebra`	`boolean`	`false`	Filas alternas
`hover`	`boolean`	`true`	Resaltado al pasar
`empty`	`string`	`Sin resultados`	Mensaje sin filas

LineChart · BarChart · DoughnutChart

Componente	Props
`LineChart`	`data: number[]`, `labels?`, `height?`, `ariaLabel?`
`BarChart`	`data: { label, value }[]`, `height?`, `ariaLabel?`
`DoughnutChart`	`data: { label, value }[]`, `size?`, `thickness?`, `ariaLabel?`

Comportamiento

Table: clic en cabecera ordenable → asc → desc → sin orden; aria-sort en <th>
Vacía: una celda con empty
Gráficos: hover muestra etiqueta + valor (línea: guía vertical; barras/dona: atenúa el resto)
Dona: tonos de --brand-fg (claro/oscuro)