Table, List и графики
Замените самописные строки на Table с сортировкой и график, который не сдвигает макет.
В этой главе
- Таблица с сортировкой
- График над таблицей
- Другие компоненты
Замените строки, написанные вручную, компонентами: <Table> с навигацией с клавиатуры и сортировкой, <List> с виртуализированной прокруткой и графиками, нарисованными блоками размером в одну восьмую ячейки и точками в четвертях ячейки.
Таблица с сортировкой
Столбцы задаются массивом объектов. Столбец без width получает долю оставшегося пространства по grow, value задаёт значение для сравнения при сортировке, а render рисует ячейку.
Добавлено: import { Table, type SortState, type TableColumn } from "@textjs/app";Добавлено: Добавлено: const COLUMNS: TableColumn<Deployment>[] = [Добавлено: { key: "status", header: "Status", width: 11, render: (d) => <Status status={d.status} /> },Добавлено: { key: "commit", header: "Commit", grow: 2 },Добавлено: { key: "project", header: "Project", width: 10 },Добавлено: { key: "duration", header: "Build", width: 6, align: "right", value: (d) => d.duration, render: (d) => <Text>{`${d.duration}s`}</Text> },Добавлено: ];export default function DeploymentsPage() {Добавлено: const [sort, setSort] = useState<SortState | null>(null); …Удалено: return rows.map((d) => …);Добавлено: return <Table columns={COLUMNS} rows={rows} getRowKey={(d) => d.id} sortable sort={sort} onSortChange={setSort} autoFocus />;}Когда таблица в фокусе, ↑ ↓ перемещают выделение, s переключает столбец сортировки, S меняет направление, а Enter вызывает onSelect. В длинных таблицах отрисовываются только видимые строки.
График над таблицей
<Sparkline> заполняет свой блок последними точками. <BarChart> выравнивает подписи и значения.
Добавлено: import { BarChart, Sparkline } from "@textjs/app";Добавлено: Добавлено: const [chart, setChart] = useState<"spark" | "bars">("spark");Добавлено: useInput((e) => {Добавлено: if (e.input === "c") setChart((c) => (c === "spark" ? "bars" : "spark"));Добавлено: });Добавлено: return ( <Box className="flex-col grow gap-1">Добавлено: <Box className="flex-col" height={4}>Добавлено: <Text color="subtle">Build time, last 24 deployments</Text>Добавлено: {chart === "spark" ? (Добавлено: <Sparkline data={buildTimes} height={3} color="accent" />Добавлено: ) : (Добавлено: <BarChart data={byProject} formatValue={(v) => `${v}s`} />Добавлено: )}Добавлено: </Box> <Table … /> </Box> );Блок графика имеет фиксированную высоту, поэтому переключение графиков не сдвигает таблицу, а её строки не кодируются повторно.
Другие компоненты
<List>, <Tree>, <Tabs>, <Select>, <Input>, <Modal>, <Toaster>, <CommandPalette>, <ProgressBar>, <LineChart> и другие компоненты описаны в разделе Компоненты.
Попробовать
Это Acme Deploys в конце главы, работающее в DevTools. Нажмите на панель, затем используйте клавиши ниже.
Открыть консоль
Приложение рендерится в DevTools.Сначала включите «Показывать функции для веб-разработчиков» в Safari: «Настройки» → «Дополнения». Затем щёлкните здесь и нажмите s.
Открыть на компьютере
Это приложение рендерится в консоли DevTools, для которой нужен браузер на компьютере.
Тест
2 вопросаОтветьте на все вопросы, чтобы завершить главу.