Table, List y gráficos
Sustituye las filas hechas a mano por un Table ordenable y un gráfico que nunca desplaza el layout.
En este capítulo
- Una tabla ordenable
- Un gráfico encima de la tabla
- Más componentes
Sustituye las filas hechas a mano por componentes: <Table> con navegación por teclado y ordenación, <List> con desplazamiento virtualizado y gráficos dibujados con bloques de un octavo y puntos de cuadrante.
Una tabla ordenable
Las columnas son un array de objetos. Una columna sin width comparte el espacio restante según grow, value es lo que se compara al ordenar y render dibuja la celda.
Añadido: import { Table, type SortState, type TableColumn } from "@textjs/app";Añadido: Añadido: const COLUMNS: TableColumn<Deployment>[] = [Añadido: { key: "status", header: "Status", width: 11, render: (d) => <Status status={d.status} /> },Añadido: { key: "commit", header: "Commit", grow: 2 },Añadido: { key: "project", header: "Project", width: 10 },Añadido: { key: "duration", header: "Build", width: 6, align: "right", value: (d) => d.duration, render: (d) => <Text>{`${d.duration}s`}</Text> },Añadido: ];export default function DeploymentsPage() {Añadido: const [sort, setSort] = useState<SortState | null>(null); …Eliminado: return rows.map((d) => …);Añadido: return <Table columns={COLUMNS} rows={rows} getRowKey={(d) => d.id} sortable sort={sort} onSortChange={setSort} autoFocus />;}Con el foco en la tabla, ↑ ↓ mueven el resaltado, s cambia cíclicamente la columna de ordenación, S invierte el sentido y Enter llama a onSelect. Las tablas largas solo dibujan las filas visibles.
Un gráfico encima de la tabla
<Sparkline> llena su caja con los puntos más recientes. <BarChart> alinea las etiquetas y los valores por ti.
Añadido: import { BarChart, Sparkline } from "@textjs/app";Añadido: Añadido: const [chart, setChart] = useState<"spark" | "bars">("spark");Añadido: useInput((e) => {Añadido: if (e.input === "c") setChart((c) => (c === "spark" ? "bars" : "spark"));Añadido: });Añadido: return ( <Box className="flex-col grow gap-1">Añadido: <Box className="flex-col" height={4}>Añadido: <Text color="subtle">Build time, last 24 deployments</Text>Añadido: {chart === "spark" ? (Añadido: <Sparkline data={buildTimes} height={3} color="accent" />Añadido: ) : (Añadido: <BarChart data={byProject} formatValue={(v) => `${v}s`} />Añadido: )}Añadido: </Box> <Table … /> </Box> );La caja del gráfico tiene una altura fija, por lo que cambiar de gráfico nunca mueve la tabla ni vuelve a codificar sus filas.
Más componentes
<List>, <Tree>, <Tabs>, <Select>, <Input>, <Modal>, <Toaster>, <CommandPalette>, <ProgressBar>, <LineChart> y otros componentes se documentan en Componentes.
Probar
Esta es Acme Deploys al final del capítulo, ejecutándose en DevTools. Haz clic en el panel y usa las teclas de abajo.
Abrir la consola
La app se renderiza en DevTools.Primero activa «Mostrar funciones para desarrolladores web» en Configuración de Safari → Avanzado. Luego haz clic aquí y pulsa s.
Abrir en un equipo de escritorio
Esta app se renderiza en la consola de DevTools, que requiere un navegador de escritorio.
Cuestionario
2 preguntasResponde todas las preguntas para completar el capítulo.