Table, List i wykresy
Zastąp ręcznie tworzone wiersze sortowalnym komponentem Table i wykresem, który nigdy nie przesuwa layoutu.
W tym rozdziale
- Tabela z sortowaniem
- Wykres nad tabelą
- Więcej komponentów
Zastąp ręcznie tworzone wiersze komponentami: <Table> z nawigacją klawiaturą i sortowaniem, <List> z wirtualizowanym przewijaniem oraz wykresami rysowanymi za pomocą bloków o wysokości jednej ósmej komórki i kropek kwadrantowych.
Tabela z sortowaniem
Kolumny to tablica obiektów. Kolumna bez width dzieli pozostałą przestrzeń według grow, value określa wartość porównywaną przy sortowaniu, a render rysuje komórkę.
Dodano: import { Table, type SortState, type TableColumn } from "@textjs/app";Dodano: Dodano: const COLUMNS: TableColumn<Deployment>[] = [Dodano: { key: "status", header: "Status", width: 11, render: (d) => <Status status={d.status} /> },Dodano: { key: "commit", header: "Commit", grow: 2 },Dodano: { key: "project", header: "Project", width: 10 },Dodano: { key: "duration", header: "Build", width: 6, align: "right", value: (d) => d.duration, render: (d) => <Text>{`${d.duration}s`}</Text> },Dodano: ];export default function DeploymentsPage() {Dodano: const [sort, setSort] = useState<SortState | null>(null); …Usunięto: return rows.map((d) => …);Dodano: return <Table columns={COLUMNS} rows={rows} getRowKey={(d) => d.id} sortable sort={sort} onSortChange={setSort} autoFocus />;}Gdy tabela ma fokus, ↑ ↓ przesuwają podświetlenie, s przełącza kolumnę sortowania, S odwraca kierunek, a Enter wywołuje onSelect. Długie tabele rysują tylko widoczne wiersze.
Wykres nad tabelą
<Sparkline> wypełnia swój obszar najnowszymi punktami. <BarChart> wyrównuje etykiety i wartości za ciebie.
Dodano: import { BarChart, Sparkline } from "@textjs/app";Dodano: Dodano: const [chart, setChart] = useState<"spark" | "bars">("spark");Dodano: useInput((e) => {Dodano: if (e.input === "c") setChart((c) => (c === "spark" ? "bars" : "spark"));Dodano: });Dodano: return ( <Box className="flex-col grow gap-1">Dodano: <Box className="flex-col" height={4}>Dodano: <Text color="subtle">Build time, last 24 deployments</Text>Dodano: {chart === "spark" ? (Dodano: <Sparkline data={buildTimes} height={3} color="accent" />Dodano: ) : (Dodano: <BarChart data={byProject} formatValue={(v) => `${v}s`} />Dodano: )}Dodano: </Box> <Table … /> </Box> );Obszar wykresu ma stałą wysokość, więc przełączanie wykresów nigdy nie przesuwa tabeli, a jej wiersze nie są ponownie kodowane.
Więcej komponentów
<List>, <Tree>, <Tabs>, <Select>, <Input>, <Modal>, <Toaster>, <CommandPalette>, <ProgressBar>, <LineChart> i inne opisano w sekcji Komponenty.
Wypróbuj
To Acme Deploys na końcu rozdziału, uruchomiona w DevTools. Kliknij panel, a potem użyj poniższych klawiszy.
Otwórz konsolę
Aplikacja renderuje się w DevTools.Najpierw włącz „Pokazuj funkcje dla deweloperów witryn” w Safari: Ustawienia → Zaawansowane. Potem kliknij tutaj i naciśnij s.
Otwórz na komputerze
Ta aplikacja renderuje się w konsoli DevTools, która wymaga przeglądarki na komputerze.
Quiz
2 pytaniaOdpowiedz na wszystkie pytania, aby ukończyć rozdział.