# DataTable

先阅读 [完整 LICENSE](https://snowui.dev/LICENSE)；同任务、同版本、同范围去重。

统一管理数据的查询、排序与分页状态，可自由组合工具栏、表格和分页器，构建完整的数据浏览界面。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

包：@snowui-design-system/components；类别：component；运行：全部可免费使用；来源指纹：dfbba3104fe62527

## 使用选择

文件或记录列表需要搜索、筛选、排序、分页、勾选或操作列时使用。DataTable 协调数据状态，内部组合 TableToolbar、Table 系列与 Pagination；纯展示用 Table。选择需显式启用 selection，并使用稳定 rowKey 与行 rowId；操作列通过 actions 配置。业务请求函数与数据格式化由页面提供。

- client 模式在本地处理数据，server 模式由页面请求与提供结果；children 接收当前渲染状态。
- 显式启用 selection / actions；rowKey 默认是索引，排序或更新数据时应改用稳定业务 ID，并让 TableRow.rowId 与其一致。
- 页码从 1 开始；首次 loading、后台 refreshing 和追加 loadMore 是不同状态。

## Import

```ts
import { DataTable } from '@snowui-design-system/components';
```

## 按需读取

- [快速开始代码](https://snowui.dev/llms/components/data-table/quick-start.svelte)
- [API](https://snowui.dev/llms/components/data-table/api.md)：公开属性、默认值、事件和 Snippet
- [类型与状态](https://snowui.dev/llms/components/data-table/types.md)：必填项、可绑定属性、继承与数据结构
- [完整使用边界](https://snowui.dev/llms/components/data-table/reference.md)：使用复杂组合前读取相应章节
- [样式覆盖](https://snowui.dev/llms/components/data-table/styles.md)：本组件实际消费的公开变量
- [示例与变体](https://snowui.dev/llms/components/data-table/examples.md)
- [本组件截图索引](https://snowui.dev/llms/components/data-table/images.json)：只在外观不确定时读取对应图片
- [AI 截图命令与索引说明](https://snowui.dev/llms/screenshots.md)：生成命令、路径与有效性检查
- [设计使用指南](https://snowui.dev/llms/design-system.md)：按任务还原设计与查找参数
- [样式选择与改写顺序](https://snowui.dev/llms/styling.md#%E6%A0%B7%E5%BC%8F%E9%80%89%E6%8B%A9%E4%B8%8E%E6%94%B9%E5%86%99%E9%A1%BA%E5%BA%8F)：首次采用时阅读，优先 Props、尽量保留原样；同任务复用

相关组件：[TableToolbar](https://snowui.dev/llms/components/table-toolbar.md)、[Table](https://snowui.dev/llms/components/table.md)、[TableHeader](https://snowui.dev/llms/components/table-header.md)、[TableHead](https://snowui.dev/llms/components/table-head.md)、[TableBody](https://snowui.dev/llms/components/table-body.md)、[TableRow](https://snowui.dev/llms/components/table-row.md)、[TableCell](https://snowui.dev/llms/components/table-cell.md)、[Pagination](https://snowui.dev/llms/components/pagination.md)