Table, List ve grafikler
Elle oluşturulan satırların yerine sıralanabilir bir Table ve layout’u kaydırmayan bir grafik kullanın.
Bu bölümde
- Sıralanabilir tablo
- Tablonun üstünde bir grafik
- Diğer bileşenler
Elle oluşturduğunuz satırları bileşenlerle değiştirin: klavyeyle gezinme ve sıralama sunan <Table>, sanallaştırılmış kaydırma sunan <List> ve sekizlik bloklar ile çeyrek noktalarla çizilen grafikler.
Sıralanabilir tablo
Sütunlar bir nesne dizisidir. width belirtilmeyen bir sütun, kalan alanı grow değerine göre paylaşır, sıralama value değerini karşılaştırır ve render hücreyi çizer.
Eklenen: import { Table, type SortState, type TableColumn } from "@textjs/app";Eklenen: Eklenen: const COLUMNS: TableColumn<Deployment>[] = [Eklenen: { key: "status", header: "Status", width: 11, render: (d) => <Status status={d.status} /> },Eklenen: { key: "commit", header: "Commit", grow: 2 },Eklenen: { key: "project", header: "Project", width: 10 },Eklenen: { key: "duration", header: "Build", width: 6, align: "right", value: (d) => d.duration, render: (d) => <Text>{`${d.duration}s`}</Text> },Eklenen: ];export default function DeploymentsPage() {Eklenen: const [sort, setSort] = useState<SortState | null>(null); …Kaldırılan: return rows.map((d) => …);Eklenen: return <Table columns={COLUMNS} rows={rows} getRowKey={(d) => d.id} sortable sort={sort} onSortChange={setSort} autoFocus />;}Odak tablod ayken ↑ ↓ vurguyu taşır, s sıralama sütununu döngüsel olarak değiştirir, S yönü tersine çevirir ve Enter, onSelect işlevini çağırır. Uzun tablolar yalnızca görünür satırları çizer.
Tablonun üstünde bir grafik
<Sparkline> kutusunu en son noktalarla doldurur. <BarChart> etiketleri ve değerleri sizin için hizalar.
Eklenen: import { BarChart, Sparkline } from "@textjs/app";Eklenen: Eklenen: const [chart, setChart] = useState<"spark" | "bars">("spark");Eklenen: useInput((e) => {Eklenen: if (e.input === "c") setChart((c) => (c === "spark" ? "bars" : "spark"));Eklenen: });Eklenen: return ( <Box className="flex-col grow gap-1">Eklenen: <Box className="flex-col" height={4}>Eklenen: <Text color="subtle">Build time, last 24 deployments</Text>Eklenen: {chart === "spark" ? (Eklenen: <Sparkline data={buildTimes} height={3} color="accent" />Eklenen: ) : (Eklenen: <BarChart data={byProject} formatValue={(v) => `${v}s`} />Eklenen: )}Eklenen: </Box> <Table … /> </Box> );Grafik kutusunun yüksekliği sabittir, bu nedenle grafikler arasında geçiş yapmak tabloyu hiçbir zaman hareket ettirmez ve satırları yeniden kodlanmaz.
Diğer bileşenler
<List>, <Tree>, <Tabs>, <Select>, <Input>, <Modal>, <Toaster>, <CommandPalette>, <ProgressBar>, <LineChart> ve diğer bileşenler Bileşenler bölümünde belgelenmiştir.
Dene
Bu, Acme Deploys uygulamasının bölüm sonundaki hâli; DevTools’ta çalışıyor. Odak alanına tıklayın, ardından aşağıdaki tuşları kullanın.
Konsolu açın
Uygulama DevTools’ta render edilir.Önce Safari Ayarlar → İleri Düzey bölümünde “Web geliştiricileri için özellikleri göster” seçeneğini açın. Sonra buraya tıklayın ve s tuşuna basın.
Masaüstünde açın
Bu uygulama DevTools konsolunda render edilir; bunun için masaüstü tarayıcısı gerekir.
Test
2 soruBölümü tamamlamak için tüm soruları yanıtlayın.