DataTable

Tabla de datos interactiva con filtrado en vivo, ordenamiento por columna y badges de estado.

// VISTA PREVIA

> DATATABLE FILTER & SORT

CLUSTER_NODES 3 ROWS

FILTER //

// FRAMEWORK:

src/pages/data-table-ejemplo.astro

01 ---

02 import DataTable from '@/components/DataTable.astro';

03 ---

05 <DataTable

06 title="0xCLUSTER // ACTIVE_NODES_GRID"

07 columns={[

08 { key: 'service', label: 'Servicio' },

09 { key: 'endpoint', label: 'Endpoint' },

10 { key: 'uptime', label: 'Uptime' },

11 { key: 'status', label: 'Estado' },

12 ]}

13 rows={[

14 { service: 'PostgreSQL 17', endpoint: 'tcp://5432', uptime: '99.98%', status: 'ONLINE' },

15 { service: 'Cloudflare Pages Edge', endpoint: 'https://ryukami-ui.pages.dev', uptime: '100.0%', status: 'ONLINE' },

16 ]}

17 />

Prop	Tipo TypeScript	Default	Descripción	Variantes
title	`string`	`'0xDATA_GRID // TUI_EXPLORER'`	Título de la ventana de tabla interactiva.	—
columns	`{ key: string; label: string; sortable?: boolean }[]`	`[]`	Definición de columnas con soporte de ordenamiento ascendente/descendente.	—
rows	`Record<string, string \| number>[]`	`[]`	Filas de datos con renderizado automático de Badges en columnas de estado.	—
searchable	`boolean`	`true`	Habilita la barra de filtrado instantáneo en tiempo real.	—

Terminal // Bash BASH

ryukami-ui add data-table

src/pages/data-table-demo.astro ASTRO