Table, List et graphiques
Remplacez les lignes faites à la main par une Table triable et un graphique qui ne décale jamais le layout.
Dans ce chapitre
- Un tableau triable
- Un graphique au-dessus du tableau
- D’autres composants
Remplacez les lignes écrites à la main par des composants : <Table> avec navigation au clavier et tri, <List> avec défilement virtualisé, et des graphiques tracés avec des huitièmes de bloc et des points de quadrant.
Un tableau triable
Les colonnes forment un tableau d’objets. Une colonne sans width partage l’espace restant selon grow, value est la valeur comparée lors du tri et render dessine la cellule.
Ajouté : import { Table, type SortState, type TableColumn } from "@textjs/app";Ajouté : Ajouté : const COLUMNS: TableColumn<Deployment>[] = [Ajouté : { key: "status", header: "Status", width: 11, render: (d) => <Status status={d.status} /> },Ajouté : { key: "commit", header: "Commit", grow: 2 },Ajouté : { key: "project", header: "Project", width: 10 },Ajouté : { key: "duration", header: "Build", width: 6, align: "right", value: (d) => d.duration, render: (d) => <Text>{`${d.duration}s`}</Text> },Ajouté : ];export default function DeploymentsPage() {Ajouté : const [sort, setSort] = useState<SortState | null>(null); …Supprimé : return rows.map((d) => …);Ajouté : return <Table columns={COLUMNS} rows={rows} getRowKey={(d) => d.id} sortable sort={sort} onSortChange={setSort} autoFocus />;}Lorsque le tableau a le focus, ↑ ↓ déplacent la surbrillance, s passe à la colonne de tri suivante, S inverse le sens du tri et Enter appelle onSelect. Les longs tableaux ne dessinent que les lignes visibles.
Un graphique au-dessus du tableau
<Sparkline> remplit sa boîte avec les points les plus récents. <BarChart> aligne les libellés et les valeurs pour vous.
Ajouté : import { BarChart, Sparkline } from "@textjs/app";Ajouté : Ajouté : const [chart, setChart] = useState<"spark" | "bars">("spark");Ajouté : useInput((e) => {Ajouté : if (e.input === "c") setChart((c) => (c === "spark" ? "bars" : "spark"));Ajouté : });Ajouté : return ( <Box className="flex-col grow gap-1">Ajouté : <Box className="flex-col" height={4}>Ajouté : <Text color="subtle">Build time, last 24 deployments</Text>Ajouté : {chart === "spark" ? (Ajouté : <Sparkline data={buildTimes} height={3} color="accent" />Ajouté : ) : (Ajouté : <BarChart data={byProject} formatValue={(v) => `${v}s`} />Ajouté : )}Ajouté : </Box> <Table … /> </Box> );La boîte du graphique a une hauteur fixe, donc changer de graphique ne déplace jamais le tableau, et ses lignes ne sont pas réencodées.
D’autres composants
<List>, <Tree>, <Tabs>, <Select>, <Input>, <Modal>, <Toaster>, <CommandPalette>, <ProgressBar>, <LineChart> et d’autres composants sont documentés dans Composants.
Essayer
Voici Acme Deploys en fin de chapitre, en cours d’exécution dans DevTools. Cliquez sur le pavé, puis utilisez les touches ci-dessous.
Ouvrir la console
L’application s’affiche dans DevTools.Activez d’abord « Afficher les fonctionnalités pour les développeurs web » dans Safari Réglages → Avancés. Puis cliquez ici et appuyez sur s.
Ouvrir sur ordinateur
Cette application s’affiche dans la console DevTools, qui nécessite un navigateur sur ordinateur.
Quiz
2 questionsRépondez à toutes les questions pour terminer le chapitre.