Table, List & Diagramme
Ersetze selbst gebaute Zeilen durch eine sortierbare Table und ein Diagramm, das das Layout nie verschiebt.
In diesem Kapitel
- Eine sortierbare Tabelle
- Ein Diagramm darüber
- Weitere Komponenten
Ersetze die selbst geschriebenen Zeilen durch Komponenten: <Table> mit Tastaturnavigation und Sortierung, <List> mit virtualisiertem Scrollen und Diagramme aus Achtelblöcken und Quadrantenpunkten.
Eine sortierbare Tabelle
Spalten sind ein Array von Objekten. Eine Spalte ohne width erhält ihren Anteil am verbleibenden Platz gemäß grow, value liefert den Vergleichswert für die Sortierung und render zeichnet die Zelle.
Hinzugefügt: import { Table, type SortState, type TableColumn } from "@textjs/app";Hinzugefügt: Hinzugefügt: const COLUMNS: TableColumn<Deployment>[] = [Hinzugefügt: { key: "status", header: "Status", width: 11, render: (d) => <Status status={d.status} /> },Hinzugefügt: { key: "commit", header: "Commit", grow: 2 },Hinzugefügt: { key: "project", header: "Project", width: 10 },Hinzugefügt: { key: "duration", header: "Build", width: 6, align: "right", value: (d) => d.duration, render: (d) => <Text>{`${d.duration}s`}</Text> },Hinzugefügt: ];export default function DeploymentsPage() {Hinzugefügt: const [sort, setSort] = useState<SortState | null>(null); …Entfernt: return rows.map((d) => …);Hinzugefügt: return <Table columns={COLUMNS} rows={rows} getRowKey={(d) => d.id} sortable sort={sort} onSortChange={setSort} autoFocus />;}Wenn die Tabelle den Fokus hat, verschieben ↑ ↓ die Hervorhebung, s wechselt durch die Sortierspalten, S kehrt die Richtung um und Enter ruft onSelect auf. Lange Tabellen zeichnen nur die sichtbaren Zeilen.
Ein Diagramm darüber
<Sparkline> füllt seine Box mit den neuesten Punkten. <BarChart> richtet Beschriftungen und Werte für dich aus.
Hinzugefügt: import { BarChart, Sparkline } from "@textjs/app";Hinzugefügt: Hinzugefügt: const [chart, setChart] = useState<"spark" | "bars">("spark");Hinzugefügt: useInput((e) => {Hinzugefügt: if (e.input === "c") setChart((c) => (c === "spark" ? "bars" : "spark"));Hinzugefügt: });Hinzugefügt: return ( <Box className="flex-col grow gap-1">Hinzugefügt: <Box className="flex-col" height={4}>Hinzugefügt: <Text color="subtle">Build time, last 24 deployments</Text>Hinzugefügt: {chart === "spark" ? (Hinzugefügt: <Sparkline data={buildTimes} height={3} color="accent" />Hinzugefügt: ) : (Hinzugefügt: <BarChart data={byProject} formatValue={(v) => `${v}s`} />Hinzugefügt: )}Hinzugefügt: </Box> <Table … /> </Box> );Die Diagramm-Box hat eine feste Höhe, sodass ein Diagrammwechsel die Tabelle nie verschiebt und ihre Zeilen nicht erneut kodiert werden.
Weitere Komponenten
<List>, <Tree>, <Tabs>, <Select>, <Input>, <Modal>, <Toaster>, <CommandPalette>, <ProgressBar>, <LineChart> und weitere sind unter Komponenten dokumentiert.
Ausprobieren
Das ist Acme Deploys am Ende des Kapitels, ausgeführt in DevTools. Klicke auf das Pad und nutze dann die Tasten unten.
Die Konsole öffnen
Die App rendert in DevTools.Aktiviere zuerst „Funktionen für Webentwickler anzeigen“ unter Safari Einstellungen → Erweitert. Klicke dann hier und drücke s.
Auf einem Desktop öffnen
Diese App rendert in der DevTools-Konsole, die einen Desktop-Browser benötigt.
Quiz
2 FragenBeantworte jede Frage, um das Kapitel abzuschließen.