@devslab/ds-table-solid (英语)
以 TanStack 表格为基础的DDS 声明数据表(以准确数字为准)
版本 9.2.4 看到了吗 docs/decisions.md D-021,为什么是确切的一针). 一个
构成部分, DataTable,加上 Column<T> 财务报告和审定财务报表 DataTableLabels 所用类型
来形容它。 表格本身对语言、路线或
"下页"的意思——每个访问者能读到的字符串都是道具.
pnpm add @devslab/dds-table-solid
此软件包没有自己的样式表-导入 @devslab/dds-css是因为
表格样式在应用程序 shell 中一次, 和符号 CSS 并列
取决于:
import "@devslab/dds-tokens/tokens.css";
import "@devslab/dds-css/components/table.css";
没有它, <DataTable> 制作一个未设置的表格 : fold 无所作为
(文件夹完全为 CSS 媒体查询 table.css页:1
可见隐藏字幕和动作栏头.
import { DataTable, type Column, type DataTableLabels } from "@devslab/dds-table-solid";
type Job = { id: string; name: string; count: number };
const columns: Column<Job>[] = [
{ id: "name", label: "Name", cell: (row) => row.name, sortBy: (row) => row.name, rowHeader: true },
{ id: "count", label: "Count", cell: (row) => String(row.count), sortBy: (row) => row.count, numeric: true, fold: true },
];
const labels: DataTableLabels = {
sortBy: "Sort by {column}",
actions: "Actions",
nextPage: "Next page",
};
<DataTable rows={jobs} columns={columns} caption="Jobs" labels={labels} sort="client" />;
DataTable 道具
| Prop | 类型 | 需要/ 默认 | 含义 |
|---|---|---|---|
rows | readonly T[] | 所需经费 | 数据,为了提供(见谁负责该命令的排序). |
columns | readonly Column<T>[] | 所需经费 | 列声明-见 Column<T> 见下文. |
caption | string | 所需经费 | 该表的可访问名称,可视地隐藏(<caption class="dds-visually-hidden">) (中文(简体) ). |
labels | DataTableLabels | 所需经费 | 组件能制作出的每一字——见下文"标签需要". |
sort | SortMode | 选项, 省略时没有排序按钮或顺序文字 | 客户端排序,服务器命令描述,或控制服务器排序. |
resizing | ColumnResizing | 可选,默认已禁用 | 信头调整了手柄大小,界限,可访问标签,以及承诺/重置回调. |
selection | RowSelection<T> | 可选,默认已禁用 | 稳定行身份,控制选择,和选择回调. |
density | "comfortable" | "dense" | 可选, 默认 "comfortable" (40px行) (中文(简体) ) | "dense" 添加 .dds-table--dense (36px行,更紧的单元格粘贴). 无论哪种方式,单元格中的行动作和小按钮都按到行高(40px行中的32px按钮,36px行中的24px;接触上44px)——参见 docs/components.md Table表. |
scroll | "auto" | "tall" | 可选, 默认 "auto" | "tall" 添加 .dds-table-wrap--tall(单位:千美元) max-block-size: 70vh 以粘相头来滚动身体,为一长页的列表,不应该将其余的页面推倒. |
minWidth | string (a) CSS长度 | 选项 | 设置 <table>是因为 min-inline-size,所以狭义的取景口将表格横向滚动(内侧) .dds-table-wrap而不是压碎它的柱子. |
actions | (row: T) => JSX.Element | 选项 | 每行渲染一个后缀单元格(例如行级按钮); 添加一个可视化隐藏标题单元格 labels.actions。 。 。 . |
detail | (row: T) => JSX.Element | 选项 | 在特定行下绘制可扩展行。 正在返回 null (例如,对于没有扩展的一行)没有细节 <tr> 对于那行——不是空的. |
page | { nextHref?: string } | 选项 | 见下文. |
empty | JSX.Element | 选项 | 改为: <table> 何时 rows 为空。 所声明的顺序文本和页码链接(如果有的话)仍然渲染出——光标所标出列表的一页空页仍然有顺序,仍然需要前进的道路. |
Column<T>
| 外地 | 类型 | 含义 |
|---|---|---|
id | string | 稳定列身份——用于排序键和 data-fold编号 :data-column 属性. |
label | string | 标题文本(和排序按钮的可见标签). |
cell | (row: T) => JSX.Element | 使出出细胞体. 视觉标记仍保留在您身上; 栏目 def TanStack 所看到的只是 排序访问器 . |
sortBy? | (row: T) => string | number | null | 现 —— 该栏可排序( 以 sort="client" )并获得排序按钮。 - 一个普通头条,从不扣. 返回时 null 用于“无值”;这些行排序为最后(sortUndefined: "last"从来没有第一个. |
width? | string | CSS宽度. 设置在任意一列上将整个表格切换到 table-layout: fixed 输出 a <colgroup>。 。 。 . |
resizable? | boolean | 设定为 false 以在启用再大小时省略此列的手柄. |
fold? | boolean | 在狭长的取景口上标出可跳动的列(见下方的Folding). |
numeric? | boolean | 右调整列并应用表格数字. |
rowHeader? | boolean | 将此列的单元格显示为 <th scope="row"> 改为 <td> ——每表只设置一栏. |
排序 : sort
SortMode 导出并接受三种形状:
"client" | { statedOrder: string } | { value: SortValue; onChange: (value: SortValue) => void; statedOrder?: string }
sort="client"——该表保留了全部列表作为记忆. 列数 与sortBy渲染排序按钮;单击一键请 TanStack 表格 重新排序已经手头的行。 这是安全的,正因为"所有 行"和"所显示行"是同一套.sort={{ statedOrder: "…" }}对于一个显示服务器订单的表格, 光标页面切片 。 即使 联合国sortBy设置 : 客户端排序只能重排 当前页面,而表格的真实顺序是后端查询 浏览器从未见过的跨页生产。 做了那个按钮 看起来像它整理了数据 并会错误地报告它。 相反 表格将实际顺序打印为上方文本(.dds-table__order(中文(简体) ) —— 说statedOrder是这句话,例如."Newest first",由 消费者因为DDS不知道后端的订购词汇.
没有第三种模式允许服务器排序的表格选择客户端 排序“仅此列”——失败模式(低声报告 a) 每页的顺序作为整个列表的顺序)是相同的,无论有多少 参赛的有各栏目.
可选的工作空间互动
下面的所有交互都是选入;现有的表格保留其行为.
const [sort, setSort] = createSignal<SortValue>(null);
const [selectedId, setSelectedId] = createSignal<string | null>(null);
<DataTable rows={rows} columns={columns} caption="Jobs" labels={labels}
sort={{ value: sort(), onChange: setSort }}
resizing={{ label: "Resize {column}", minWidth: 80, maxWidth: 1200,
onChange: (widths, reason) => recordLayoutChange(widths, reason) }}
selection={{ rowId: row => row.id, selectedId: selectedId(),
onSelect: row => setSelectedId(row.id) }} />;
导入 SortValue, (中文(简体) ), ColumnResizing,以及 RowSelection 从此软件包中
键入应用程序适配器。 控制排序周期上升,下降,
接下来 null它只要求更改;应用程序必须获取和提供
正确命令的服务器结果。 它从未在本地排序当前页面 .
现有 { statedOrder } 模式仍然是没有排序按钮的描述.
resizing.label 是应用程序所属的可访问标签({column} 实值
改为栏名)。 拖动页眉分隔符以更改其宽度 .
左/右修改宽为12px(Shift:50px);Home/End使用边框.
双击或越狱 全部 宽度覆盖, 恢复已声明
列宽和原始布局。 设定 column.resizable = false 删除
个人手柄。 指针取消恢复了预擦布局;
正在卸载中删除待定的指针听众。 调用大小
或重置,而不是每个指针移动。 此挂载的 Width 覆被
;持久性和应用程序分析仍然属于应用程序.
选择由一个稳定的行ID控制. 单击、输入和空格选择一个 行; 嵌入式按钮, 链接和窗体控件保持自己的行为. 选择本身不会导航、打开对话框或更改商业数据.
呼号 : page
page?: { nextHref?: string }
nextHref 使下一页控件成为 <a class="dds-btn dds-btn--secondary" href="…">,用标签包裹 <nav> 从来没有 <button onClick>. 光标被标注的列表只是具有不同查询字符串的URL,一个真实的链接保留了与JavaScript一起工作被禁用,在水合之前的缓慢连接上,以及在浏览器的本土"在新标签中打开". 选择 nextHref (或整个 page 道具)隐藏了道具 <nav> 而不是做一个禁用控制.
折叠: fold
标记列 fold: true 在固定断点下消失
(单位:千美元)@media (max-width: 56.25rem) 内 dds-css是因为 table.css)通过平地CSS
规则 [data-fold] ——没有JavaScript列可见状态,没有
调整观察者大小, 并且没有每个视图端口重置 。 栏目一直存在
在 DOM; 浏览器决定是否涂入. 这意味着折叠
幸存的 SSR(一个服务器已交出的窄视门已经隐藏了列,
正确的,在任何脚本运行之前),并且没有花费保持同步的成本
排序或呼出状态,因为没有状态保持同步.
需要标签, 不默认
DataTableLabels 没有可选的字段 DataTable 无后退
字符串 :
type DataTableLabels = {
sortBy: string; // "{column}" is replaced with the column's label
actions: string; // header of the trailing actions column (visually hidden)
nextPage: string; // accessible name and text of the next-page link
};
DDS 不选择消费者用户读取的语言,所以它不会 船舶英文(或任何其他)副本供屏幕阅读器宣布。 消费者 忘记标签会得到 TypeScript 错误,而不是默默的英语或 静静无声的控制.
此软件包不导出什么
DataTable 是唯一的组件。 排/细胞原始人 TanStack 表的
自己的文档构建表格来自(a) Th页:1 Td页:1 useDataTable 钩子)是
故意不出口——今天确实有一个消费者,第二个消费者
API表面保持平稳,是在任何需要之前付出的代价. 当a
第二个消费者需要一个表格形状 DataTable道具无法表达,
然后导出原始人.
客户端页码和过滤( TanStack 表的) getPaginationRowModel
等)同样没有电线:此组件的调用者总是
或一个小的内存列表( e)sort="client")或一个已页的服务器
答复page.nextHref)),因此两个特征都不会起火——它只会起火
坐在每个消费者的包.