# @devslab/dds-table-solid 中文文档 规范地址：https://npmcn.com/package/%40devslab/dds-table-solid/ 版本：0\.33\.0 npm 元数据更新时间：2026-11-11T18:59:10.840Z 中文译文更新时间：2026-11-12T12:45:13.608Z 软件包许可：SEE LICENSE IN LICENSE 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40devslab/dds-table-solid 原文对照：https://npmcn.com/package/%40devslab/dds-table-solid/?lang=original 项目主页：https://devslab.kr/brand/ 源码仓库：https://github.com/devslab-kr/dds ## 关键信息（来自 npm 元数据） - 包体积（解压后）：126 kB，14 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：3 个 - peer 依赖：solid-js 1\.9\.15 - 首次发布：2026-10-17T15:56:44.861Z - 最新版本发布：2026-11-11T18:59:10.437Z - 近 30 天下载量：2477（2026-10-12 至 2026-11-10，npm 官方下载统计） - 已发布版本数：19（近 12 个月 19 个） ## 中文简介 DevsLab 设计系统声明数据表 ## 安装 ```sh npm install @devslab/dds-table-solid ``` 也可以使用：`pnpm add @devslab/dds-table-solid`、`yarn add @devslab/dds-table-solid`、`bun add @devslab/dds-table-solid` ## README # @devslab/ds-table-solid (英语) 以 TanStack 表格为基础的DDS 声明数据表(以准确数字为准) 版本 `9.2.4` 看到了吗 `docs/decisions.md` D-021,为什么是确切的一针). 一个 构成部分, `DataTable`,加上 `Column` 财务报告和审定财务报表 `DataTableLabels` 所用类型 来形容它。 表格本身对语言、路线或 "下页"的意思——每个访问者能读到的字符串都是道具. ```sh pnpm add @devslab/dds-table-solid ``` 此软件包没有自己的样式表-导入 `@devslab/dds-css`是因为 表格样式在应用程序 shell 中一次, 和符号 CSS 并列 取决于: ```ts import "@devslab/dds-tokens/tokens.css"; import "@devslab/dds-css/components/table.css"; ``` 没有它, `` 制作一个未设置的表格 : `fold` 无所作为 (文件夹完全为 CSS 媒体查询 `table.css`页:1 可见隐藏字幕和动作栏头. ```tsx import { DataTable, type Column, type DataTableLabels } from "@devslab/dds-table-solid"; type Job = { id: string; name: string; count: number }; const columns: Column[] = [ { 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` 道具 | Prop | 类型 | 需要/ 默认 | 含义 | | --- | --- | --- | --- | | `rows` | `readonly T[]` | 所需经费 | 数据,为了提供(见谁负责该命令的排序). | | `columns` | `readonly Column[]` | 所需经费 | 列声明-见 `Column` 见下文. | | `caption` | `string` | 所需经费 | 该表的可访问名称,可视地隐藏(``) (中文(简体) ). | | `labels` | `DataTableLabels` | 所需经费 | 组件能制作出的每一字——见下文"标签需要". | | `sort` | `SortMode` | 选项, 省略时没有排序按钮或顺序文字 | 客户端排序,服务器命令描述,或控制服务器排序. | | `resizing` | `ColumnResizing` | 可选,默认已禁用 | 信头调整了手柄大小,界限,可访问标签,以及承诺/重置回调. | | `selection` | `RowSelection` | 可选,默认已禁用 | 稳定行身份,控制选择,和选择回调. | | `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长度 | 选项 | 设置 ``是因为 `min-inline-size`,所以狭义的取景口将表格横向滚动(内侧) `.dds-table-wrap`而不是压碎它的柱子. | | `actions` | `(row: T) => JSX.Element` | 选项 | 每行渲染一个后缀单元格(例如行级按钮); 添加一个可视化隐藏标题单元格 `labels.actions`。 。 。 . | | `detail` | `(row: T) => JSX.Element` | 选项 | 在特定行下绘制可扩展行。 正在返回 `null` (例如,对于没有扩展的一行)没有细节 `` 对于那行——不是空的. | | `page` | `{ nextHref?: string }` | 选项 | 见下文. | | `empty` | `JSX.Element` | 选项 | 改为: `
` 何时 `rows` 为空。 所声明的顺序文本和页码链接(如果有的话)仍然渲染出——光标所标出列表的一页空页仍然有顺序,仍然需要前进的道路. | ## `Column` | 外地 | 类型 | 含义 | | --- | --- | --- | | `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 ``。 。 。 . | | `resizable?` | `boolean` | 设定为 `false` 以在启用再大小时省略此列的手柄. | | `fold?` | `boolean` | 在狭长的取景口上标出可跳动的列(见下方的Folding). | | `numeric?` | `boolean` | 右调整列并应用表格数字. | | `rowHeader?` | `boolean` | 将此列的单元格显示为 `
` 改为 `` ——每表只设置一栏. | ## 排序 : `sort` `SortMode` 导出并接受三种形状: ```ts "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) 每页的顺序作为整个列表的顺序)是相同的,无论有多少 参赛的有各栏目. ## 可选的工作空间互动 下面的所有交互都是选入;现有的表格保留其行为. ```tsx const [sort, setSort] = createSignal(null); const [selectedId, setSelectedId] = createSignal(null); 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` ```ts page?: { nextHref?: string } ``` `nextHref` 使下一页控件成为 ``,用标签包裹 `