Table, List e grafici
Sostituisci le righe scritte a mano con un Table ordinabile e un grafico che non sposta mai il layout.
In questo capitolo
- Una tabella ordinabile
- Un grafico sopra la tabella
- Altri componenti
Sostituisci le righe scritte a mano con i componenti: <Table> con navigazione da tastiera e ordinamento, <List> con scorrimento virtualizzato e grafici disegnati con blocchi da un ottavo e punti a quadranti.
Una tabella ordinabile
Le colonne sono un array di oggetti. Una colonna senza width condivide lo spazio rimanente in base a grow, value è ciò che l’ordinamento confronta e render disegna la cella.
Aggiunto: import { Table, type SortState, type TableColumn } from "@textjs/app";Aggiunto: Aggiunto: const COLUMNS: TableColumn<Deployment>[] = [Aggiunto: { key: "status", header: "Status", width: 11, render: (d) => <Status status={d.status} /> },Aggiunto: { key: "commit", header: "Commit", grow: 2 },Aggiunto: { key: "project", header: "Project", width: 10 },Aggiunto: { key: "duration", header: "Build", width: 6, align: "right", value: (d) => d.duration, render: (d) => <Text>{`${d.duration}s`}</Text> },Aggiunto: ];export default function DeploymentsPage() {Aggiunto: const [sort, setSort] = useState<SortState | null>(null); …Rimosso: return rows.map((d) => …);Aggiunto: return <Table columns={COLUMNS} rows={rows} getRowKey={(d) => d.id} sortable sort={sort} onSortChange={setSort} autoFocus />;}Quando la tabella ha il focus, ↑ ↓ spostano l’evidenziazione, s passa alla colonna di ordinamento successiva, S inverte la direzione ed Enter chiama onSelect. Le tabelle lunghe disegnano solo le righe visibili.
Un grafico sopra la tabella
<Sparkline> riempie il proprio riquadro con i punti più recenti. <BarChart> allinea etichette e valori per te.
Aggiunto: import { BarChart, Sparkline } from "@textjs/app";Aggiunto: Aggiunto: const [chart, setChart] = useState<"spark" | "bars">("spark");Aggiunto: useInput((e) => {Aggiunto: if (e.input === "c") setChart((c) => (c === "spark" ? "bars" : "spark"));Aggiunto: });Aggiunto: return ( <Box className="flex-col grow gap-1">Aggiunto: <Box className="flex-col" height={4}>Aggiunto: <Text color="subtle">Build time, last 24 deployments</Text>Aggiunto: {chart === "spark" ? (Aggiunto: <Sparkline data={buildTimes} height={3} color="accent" />Aggiunto: ) : (Aggiunto: <BarChart data={byProject} formatValue={(v) => `${v}s`} />Aggiunto: )}Aggiunto: </Box> <Table … /> </Box> );Il riquadro del grafico ha un’altezza fissa, quindi cambiare grafico non sposta mai la tabella e le sue righe non vengono ricodificate.
Altri componenti
<List>, <Tree>, <Tabs>, <Select>, <Input>, <Modal>, <Toaster>, <CommandPalette>, <ProgressBar>, <LineChart> e altri sono documentati nella sezione Componenti.
Provala
Questa è Acme Deploys alla fine del capitolo, in esecuzione in DevTools. Fai clic sul pannello del focus, poi usa i tasti qui sotto.
Apri la console
L’app viene renderizzata in DevTools.Prima attiva «Mostra funzionalità per sviluppatori web» in Safari Impostazioni → Avanzate. Poi fai clic qui e premi s.
Aprire su desktop
Questa app viene renderizzata nella console DevTools, che richiede un browser desktop.
Quiz
2 domandeRispondi a tutte le domande per completare il capitolo.