Table, List e gráficos
Substitua linhas feitas à mão por uma Table ordenável e um gráfico que nunca desloca o layout.
Neste capítulo
- Uma tabela ordenável
- Um gráfico acima da tabela
- Mais componentes
Substitua as linhas feitas à mão por componentes: <Table> com navegação pelo teclado e ordenação, <List> com rolagem virtualizada e gráficos desenhados com blocos de um oitavo e pontos de quadrante.
Uma tabela ordenável
As colunas são um array de objetos. Uma coluna sem width divide o espaço restante conforme grow, value é o que a ordenação compara, e render desenha a célula.
Adicionado: import { Table, type SortState, type TableColumn } from "@textjs/app";Adicionado: Adicionado: const COLUMNS: TableColumn<Deployment>[] = [Adicionado: { key: "status", header: "Status", width: 11, render: (d) => <Status status={d.status} /> },Adicionado: { key: "commit", header: "Commit", grow: 2 },Adicionado: { key: "project", header: "Project", width: 10 },Adicionado: { key: "duration", header: "Build", width: 6, align: "right", value: (d) => d.duration, render: (d) => <Text>{`${d.duration}s`}</Text> },Adicionado: ];export default function DeploymentsPage() {Adicionado: const [sort, setSort] = useState<SortState | null>(null); …Removido: return rows.map((d) => …);Adicionado: return <Table columns={COLUMNS} rows={rows} getRowKey={(d) => d.id} sortable sort={sort} onSortChange={setSort} autoFocus />;}Com o foco na tabela, ↑ ↓ movem o destaque, s alterna a coluna de ordenação, S inverte a direção e Enter chama onSelect. Tabelas longas desenham apenas as linhas visíveis.
Um gráfico acima da tabela
<Sparkline> preenche sua caixa com os pontos mais recentes. <BarChart> alinha rótulos e valores para você.
Adicionado: import { BarChart, Sparkline } from "@textjs/app";Adicionado: Adicionado: const [chart, setChart] = useState<"spark" | "bars">("spark");Adicionado: useInput((e) => {Adicionado: if (e.input === "c") setChart((c) => (c === "spark" ? "bars" : "spark"));Adicionado: });Adicionado: return ( <Box className="flex-col grow gap-1">Adicionado: <Box className="flex-col" height={4}>Adicionado: <Text color="subtle">Build time, last 24 deployments</Text>Adicionado: {chart === "spark" ? (Adicionado: <Sparkline data={buildTimes} height={3} color="accent" />Adicionado: ) : (Adicionado: <BarChart data={byProject} formatValue={(v) => `${v}s`} />Adicionado: )}Adicionado: </Box> <Table … /> </Box> );A caixa do gráfico tem altura fixa, então alternar entre gráficos nunca move a tabela, e suas linhas não são recodificadas.
Mais componentes
<List>, <Tree>, <Tabs>, <Select>, <Input>, <Modal>, <Toaster>, <CommandPalette>, <ProgressBar>, <LineChart> e outros estão documentados em Componentes.
Experimentar
Este é Acme Deploys ao final do capítulo, rodando no DevTools. Clique na área de entrada e use as teclas abaixo.
Abrir o console
O app renderiza no DevTools.Primeiro ative “Mostrar recursos para desenvolvedores web” em Ajustes do Safari → Avançado. Depois clique aqui e pressione s.
Abrir em um computador
Este app renderiza no console do DevTools, que precisa de um navegador de computador.
Questionário
2 perguntasResponda a todas as perguntas para concluir o capítulo.