Table, List & grafik
Ganti baris buatan sendiri dengan Table yang bisa diurutkan dan grafik yang tidak menggeser layout.
Dalam bab ini
- Tabel yang bisa diurutkan
- Grafik di atasnya
- Komponen lainnya
Ganti baris buatan sendiri dengan komponen: <Table> dengan navigasi keyboard dan pengurutan, <List> dengan pengguliran tervirtualisasi, serta grafik yang digambar dengan blok seperdelapan dan titik kuadran.
Tabel yang bisa diurutkan
Kolom berupa array objek. Kolom tanpa width berbagi ruang tersisa berdasarkan grow, value menjadi nilai yang dibandingkan saat pengurutan, dan render menggambar sel.
Ditambahkan: import { Table, type SortState, type TableColumn } from "@textjs/app";Ditambahkan: Ditambahkan: const COLUMNS: TableColumn<Deployment>[] = [Ditambahkan: { key: "status", header: "Status", width: 11, render: (d) => <Status status={d.status} /> },Ditambahkan: { key: "commit", header: "Commit", grow: 2 },Ditambahkan: { key: "project", header: "Project", width: 10 },Ditambahkan: { key: "duration", header: "Build", width: 6, align: "right", value: (d) => d.duration, render: (d) => <Text>{`${d.duration}s`}</Text> },Ditambahkan: ];export default function DeploymentsPage() {Ditambahkan: const [sort, setSort] = useState<SortState | null>(null); …Dihapus: return rows.map((d) => …);Ditambahkan: return <Table columns={COLUMNS} rows={rows} getRowKey={(d) => d.id} sortable sort={sort} onSortChange={setSort} autoFocus />;}Saat tabel mendapat fokus, ↑ ↓ memindahkan sorotan, s menggilir kolom pengurutan, S membalik arah pengurutan dan Enter memanggil onSelect. Tabel panjang hanya menggambar baris yang terlihat.
Grafik di atasnya
<Sparkline> mengisi kotaknya dengan titik terbaru. <BarChart> menyelaraskan label dan nilai untuk Anda.
Ditambahkan: import { BarChart, Sparkline } from "@textjs/app";Ditambahkan: Ditambahkan: const [chart, setChart] = useState<"spark" | "bars">("spark");Ditambahkan: useInput((e) => {Ditambahkan: if (e.input === "c") setChart((c) => (c === "spark" ? "bars" : "spark"));Ditambahkan: });Ditambahkan: return ( <Box className="flex-col grow gap-1">Ditambahkan: <Box className="flex-col" height={4}>Ditambahkan: <Text color="subtle">Build time, last 24 deployments</Text>Ditambahkan: {chart === "spark" ? (Ditambahkan: <Sparkline data={buildTimes} height={3} color="accent" />Ditambahkan: ) : (Ditambahkan: <BarChart data={byProject} formatValue={(v) => `${v}s`} />Ditambahkan: )}Ditambahkan: </Box> <Table … /> </Box> );Kotak grafik memiliki tinggi tetap, sehingga pergantian grafik tidak pernah menggeser tabel, dan barisnya tidak dikodekan ulang.
Komponen lainnya
<List>, <Tree>, <Tabs>, <Select>, <Input>, <Modal>, <Toaster>, <CommandPalette>, <ProgressBar>, <LineChart> dan lainnya didokumentasikan di Komponen.
Coba
Ini Acme Deploys di akhir bab, berjalan di DevTools. Klik pad, lalu gunakan tombol di bawah.
Buka konsol
Aplikasi ini di-render di DevTools.Aktifkan dahulu “Tampilkan fitur untuk pengembang web” di Setelan Safari → Lanjutan. Lalu klik di sini dan tekan s.
Buka di desktop
Aplikasi ini di-render di konsol DevTools, yang memerlukan browser desktop.
Kuis
2 pertanyaanJawab semua pertanyaan untuk menyelesaikan bab.