# @espresso-lab/mantine-data-table 中文文档 规范地址：https://npmcn.com/package/%40espresso-lab/mantine-data-table/ 版本：2\.6\.6 npm 元数据更新时间：2026-11-13T09:30:29.971Z 中文译文更新时间：2026-11-14T15:34:01.989Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40espresso-lab/mantine-data-table 原文对照：https://npmcn.com/package/%40espresso-lab/mantine-data-table/?lang=original 项目主页：https://github.com/espresso-lab/mantine-data-table#readme 源码仓库：https://github.com/espresso-lab/mantine-data-table ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.1 MB，34 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：2 个 - peer 依赖：react ^19\.3\.0，react-dom ^19\.3\.0，@mantine/core ^9\.7\.0，@mantine/form ^9\.7\.0，@mantine/dates ^9\.7\.0，@mantine/hooks ^9\.7\.0，@tabler/icons-react ^3\.31\.0 - 首次发布：2025-04-09T08:45:37.524Z - 最新版本发布：2026-11-13T09:30:29.569Z - 近 30 天下载量：2004（2026-10-14 至 2026-11-12，npm 官方下载统计） - 已发布版本数：173（近 12 个月 90 个） ## 中文简介 Mantine UI 数据表组件 ## 安装 ```sh npm install @espresso-lab/mantine-data-table ``` 也可以使用：`pnpm add @espresso-lab/mantine-data-table`、`yarn add @espresso-lab/mantine-data-table`、`bun add @espresso-lab/mantine-data-table` ## README # 曼汀数据表 配置驱动的包装器周围 [曼通数据表](https://icflorescu.github.io/mantine-datatable/)。 。 。 . 将表格描述为一个字段列表,并进行排序、标记、过滤、CRUD模式, 扩展行和响应性移动卡布局——由 [TanStack 查询](https://tanstack.com/query)。 。 。 . [![License](https://img.shields.io/badge/License-MIT-blue)](https://npmcn.com/package/%40espresso-lab/mantine-data-table/#readme-license) [![NPM Version](https://img.shields.io/npm/v/@espresso-lab/mantine-data-table.svg?style=flat)](https://www.npmjs.com/package/@espresso-lab/mantine-data-table) [![NPM Downloads](https://img.shields.io/npm/d18m/@espresso-lab/mantine-data-table.svg?style=flat)](https://www.npmjs.com/package/@espresso-lab/mantine-data-table) ## 安装 ```bash npm i @espresso-lab/mantine-data-table ``` 您需要安装的对等依赖 : `@mantine/core`, (中文(简体) ), `@mantine/dates`, (中文(简体) ), `@mantine/form`, (中文(简体) ), `@mantine/hooks`, (中文(简体) ), `@tabler/icons-react`, (中文(简体) ), `react` 财务报告和审定财务报表 `react-dom`。 。 。 . (单位:千美元)`mantine-datatable` 财务报告和审定财务报表 `@tanstack/react-query` 来捆绑. ) ## 设置 将您的应用程序包入 `DataTableProvider`它提供了基础 URL、 TanStack 查询客户端和 每一个请求都发出信头. ```tsx import "@mantine/core/styles.css"; import "@mantine/dates/styles.css"; import "mantine-datatable/styles.css"; import { MantineProvider } from "@mantine/core"; import { QueryClient } from "@tanstack/react-query"; import { DataTableProvider } from "@espresso-lab/mantine-data-table"; const queryClient = new QueryClient(); export function Root() { return ( ({ Authorization: `Bearer ${await getToken()}` })} > ); } ``` ## 使用量 表格由 `queryKey`,一个 `apiPath` 和清单 `fields`组件获取 `GET {apiPath}`,使行和线条针对同一路径创建/更新/删除. ```tsx import { DataTable, Field } from "@espresso-lab/mantine-data-table"; interface User { id: string; name: string; email: string; active: boolean; } const fields: Field[] = [ { id: "name", list: true, create: true, update: true, delete: true, required: true, column: { accessor: "name", title: "Name", sortable: true }, }, { id: "email", list: true, create: true, update: true, delete: true, column: { accessor: "email", title: "Email" }, }, { id: "active", list: true, create: true, update: true, delete: true, type: "boolean", column: { accessor: "active", title: "Active" }, }, ]; export function Users() { return ( title="Benutzer" titleOrder={2} description="12 Benutzer · 2 eingeladen" entityName="Benutzer" recordLabel={(user) => user.name} search={{ placeholder: "Name oder E-Mail suchen" }} queryKey={["users"]} apiPath="/users" fields={fields} selection pagination mobileCards /> ); } ``` 该表使整个列表脚手架:标题(标题、描述、刷新、 `buttons`, (中文(简体) ), 批量菜单,一旦选中行, 创建按钮“ Benutzer analegen” , 最后, 您的QQ `moreActions`),带有搜索字段和您的工具栏 `toolbar` 控制,还有表格。 每行的结尾都是 行动——进一步 `rowActions`,则 _比尔比顿_,则 _洛兴_ (红色,总是最后);在电话上他们 移动到卡的QQ菜单。 其行完全没有动作的表格不会得到动作栏. 这个 动作列在宽的表格中保持右侧边缘 卷起侧行,而一行扩大后,与桌子的可见部分一样宽并保持原地. 列脚(和)作为电话上的最后一张卡片出现. 失败的请求显示“ Erneut ” 而不是表格的提醒 。 删除总是先问 并命名记录. ### 字段 一个字段既描述表格列又描述窗体输入. | 密钥 | 说明 | | --- | --- | | `id` | 唯一密钥;用作窗体字段名称和列访问器倒置. | | `list` 编号 : `create` 编号 : `update` 编号 : `delete` | 字段是否在表格中显示,创建窗体,编辑窗体,是否可以编辑. | | `type` | `text` (违约), `number`, (中文(简体) ), `date`, (中文(简体) ), `boolean`, (中文(简体) ), `textarea` 或者说 `custom`。 。 。 . | | `required` | `boolean` 或者说 `(values) => boolean`. 表格在提交时检查——现场的“Pflichtfeld”,第一个是焦点,没有浏览器泡沫; `0` 计为值, a `boolean` 字段必须被勾选,多步骤窗体检查只检查当前步骤. | | `column` | A 类 [mantine-数据表列](https://icflorescu.github.io/mantine-datatable/) —— 说 `accessor`, (中文(简体) ), `title`, (中文(简体) ), `render`, (中文(简体) ), `sortable`, (中文(简体) ), `textAlign`, (中文(简体) ), `filter`, (中文(简体) ), `footer`, (中文(简体) ), `hidden`。 。 。 . | | `render` | 对于 `type: "custom"` ——自取自: `(values, setValues, hideButtons, { error, required, errors })`; 显示 `error` 临Τ 附有若干投入的传送(地址)读取其信息来自 `errors` ,并声明每个需要的密钥为自己的一个字段 `render: () => null`。 。 。 . | | `defaultValue`, (中文(简体) ), `placeholder`, (中文(简体) ), `step`, (中文(简体) ), `conditional` | 可选的. | ### 常见道具 | Prop | 说明 | | --- | --- | | `title`, (中文(简体) ), `titleOrder` | 桌头; `titleOrder={2}` 当表格是页面时(默认) `4`,一节). | | `description` | 标题下暗行——"7 Objekte""110 Einheiten"等数字. 函数收到 `{ totalRecords }`中,所有记录表格页 `server` 服务器的计数 : `` ({ totalRecords }) => `${totalRecords} Kontakte` `` 。 。 。 . | | `breadcrumbs`, (中文(简体) ), `crumb` | 上页标题上显示的祖先(`titleOrder` 当标题不是普通字符串时,则使用当前页面的标签(参见 _面包屑_) (中文(简体) ). | | `titleHint` | 标题旁边的信息图标后面的 Hover Card. | | `entityName` | 记录的 singular名词(“Einheit”); 命名创建按钮(“Einheit alegen”)和对话框(“Einheit bearbeiten”,“Einheit löschen?”). | | `recordLabel` | `(record) => string`;在删除确认和行动作标签中命名记录. | | `search` | `true` 或者说 `{ placeholder, accessors, match }` 过滤行客户端; 与 `{ value, onChange }` 搜索属于你(服务器侧). | | `toolbar` | 搜索字段( 对象选择、 分区过滤器、 切换器) 后提供的过滤控制 . | | `buttons` | 次要标题按钮,创建按钮左边. | | `createButtonText` | 覆盖实体Name anlegen". | | `moreActions` | `RowAction[]` ——整个列表上罕见的动作 ("Sicherung einlesen...") 在"Weitere Aktionen"中,在创建按钮后最后一个在标题;一个红色的在分隔符后. | | `nested` | 表格是开放记录(扩展行,对话框)内的一个列表:创建按钮成为了"轻"的"实体"Name\\\\\\\\\\\\\\"hinzufügen",其对话框也称""hinzufügen",刷新图标和电话排序控制被忽略,电话卡被打上彩色,空列表是一条暗行. | | `editAction` | `(record) => ({ label, icon })` - 重新标签 _比尔比顿_ 每个行。 在一个计算出来的数值中输入的值如下: `IconPencilCheck` 以“Manuell überschrieben – bearbeiten”命名. | | `onUpdate` | `(values, record) => Promise` ——将编辑对话框自己保存,而不是 `PUT apiPath/{id}`;对话框从行开始,而不是取回记录. | | `rowActions` | `(record) => RowAction[]` —— 前面显示的进一步行动作 _比尔比顿_编号 :_洛兴_ (两个多倒入了qq菜单). `variant: "light"` 角色 `color` 将一个变为打开记录的状态(绿色检查,红色十字). | | `selection` | 行复选框; 一旦选中行, “n ausgewählt” 将随您打开批量菜单 `actions` 财务报告和审定财务报表 _洛兴_。 。 。 . | | `actions` | 所选行上的散列动作;在手机上也出现在每张卡的菜单中. | | `pagination` | `true` 浏览器中的页面; 选项设置页面大小, 第一个大小, 您所保存的页面, 或 `server` 一次装入一页(参见 _倾斜_) (中文(简体) ). | | `mobileCards` | 将牌照列表改为下表 `sm` 断点. | | `tabs` | 在数据集之间切换,每个数据集都有自己的查询参数和api路径. | | `rowExpansion` | 可扩展行(见下文). | | `noRecordsText` | 空表文本;没有点击的搜索会自己说. | | `defaultSort`, (中文(简体) ), `queryParams`, (中文(简体) ), `onRowClick`, (中文(简体) ), `canUpdate`, (中文(简体) ), `canDelete`, (中文(简体) ), `deleteConfirmMessage` | 可选的. | ## 构件 表格所制作的棋子被导出,所以没有表格的一页看起来是一样的: ```tsx import { PageHeader, RowActions, SearchInput, ViewSwitch } from "@espresso-lab/mantine-data-table"; Läuft} actions={} />; ; , onClick: download }]} onEdit={() => edit(unit)} onDelete={() => confirmDelete(unit)} />; ``` - `PageHeader` 面包屑小径,标题(`order`默认值 `2`、徽章和信息 `hint` 之后,阴暗的 `description` 如下, `actions` 在右边,包装在标题下的电话. - `SearchInput` ——搜索图标,在有文字时设置一个清晰的按钮,在电话上全宽. - `ViewSwitch` - 调换一个领域的视图(`value`, (中文(简体) ), `onChange`, (中文(简体) ), `data` 联 合 国 `{ value, label }`, (中文(简体) ), `label` 作为无障碍名称:a `SegmentedControl` 从 `sm` 断点, 全宽 `Select` 下方有相同的条目,其中三个德国标签不再相并用. - `RowActions` ——行有工具提示的动作图标:进一步动作(在qq菜单中有两个以上), _比尔比顿_, (中文(简体) ), _洛兴_。它阻止点击到达可点击行. ## 面包屑 每页页页头( E)`PageHeader`,或一个 `DataTable` 与 `titleOrder={2}`显示面包屑 线索以自己的标题结尾。 应用程序提供根一次 `BreadcrumbProvider`; 提供者 巢穴,所以一个区块可以为它下方的一切添加自己的水平: ```tsx import { BreadcrumbProvider } from "@espresso-lab/mantine-data-table"; navigate({ to: "/" }) }]}> ; ``` 一页只传出 根与自己之间的祖先 `breadcrumbs`下方 `sm` 分出一行超过两道碎屑的线索 : 较早的关卡会移动到 qq 菜单中 长标签被截断. ## 倾斜 `DataTable` 财务报告和审定财务报表 `SubTable` 页同,并显示同页页脚—— " 1 - 15 von 120 " ,页和页 “Einträge pro Seite”作为桌面上桌下一行,在电话卡片下以一行为中心。 页面 大小。 一种大小的,或者没有,隐藏着选择. **在浏览器.** 该表有所有记录,并显示其中一页: ```tsx ``` **从服务器.** `DataTable` 询问 `apiPath` 一次一页 - `page` (从1起), `size`, (中文(简体) ), `sort` 财务报告和审定财务报表 `direction` 和 `search` 并读取 `{ items, total }`。然后对服务器进行排序和搜索; `filters` 不在浏览器中应用,通过什么 服务器过滤器 `queryParams`。所显示的页面将一直保留到下一个页面到达. ```tsx ``` `query` 构建请求和 `read` 读取其它 API 的答案,此处为 Spring Data (单位:千美元)`page` 从0起, `sort=name,asc`, (中文(简体) ), `content` 财务报告和审定财务报表 `totalElements`: ```tsx ({ page: page - 1, size, sort: `${sort},${direction}`, q: search }), read: (body) => { const { content, totalElements } = body as { content: Contact[]; totalElements: number }; return { items: content, total: totalElements }; }, }, }} … /> ``` A 类 `SubTable` 显示您装入的内容 : 通过此页面 `records` 以及它所处的位置 `pagination`。 。 。 . ```tsx const [page, setPage] = useState(1); const { data } = useQuery({ queryKey: ["changes", page], queryFn: () => loadChanges(page, 50) }); ; ``` **你留着一页.** `page` 财务报告和审定财务报表 `onPageChange` 将页面交给您, 将其保存在 URL 中, 或重置它从 外部;当排序、搜索或标签发生变化时,表格仍然移动到第1页. ```tsx navigate({ search: { page } }) }} … /> ``` ## 列扩展 设定 `rowExpansion` 以一行显示内容。 第一栏增加了一分音符 自动; `expandable` 控制哪个行可以打开。 扩张本身就影响了其内容—— `md` 在桌面上,卡片本身在电话上被套入——所以内容不会带来自有的粘贴. 扩展行中的列表是 `nested`(单位:千美元) `SubTable` 当它的行已被装载时, a `DataTable` 何时 它根据自己的要求编辑。 然后,这两个部分都变成同一个部分——一个标题: `title` (命令4), 选项 `description` 和右边的动作,桌面上的一个边框表格和一面的有色卡 电话,列脚作为电话的最后一张卡片,以及暗淡的一行话(`noRecordsText`而不是一个 空位相会. ```tsx import { SubTable } from "@espresso-lab/mantine-data-table"; title="Accounts" queryKey={["accounts"]} apiPath="/accounts" fields={fields} mobileCards rowExpansion={{ expandable: (account) => account.entries.length > 0, content: (account, isMobile) => ( formatDate(e.date) }, { accessor: "amount", title: "Amount", textAlign: "right", render: (e) => formatAmount(e.amount), footer: formatAmount(account.total), }, ]} /> ), }} />; ``` 扩展行中一个单独编辑的列表——条目添加、更改和删除,使用 他们自己的要求是: `DataTable` 与 `nested` 因此,它带来了对话: ```tsx rowExpansion={{ content: (tenancy) => ( nested title="Mietstaffelung" entityName="Mietstaffel" apiPath={`/tenancies/${tenancy.id}/rent-steps`} queryKey={["tenancies", tenancy.id, "rent-steps"]} fields={rentStepFields} mobileCards /> ), }} ``` `SubTable` 两种布局都使用一组列:桌面上完整的曼丁数据表(排序, 列过滤器,页脚总数)和移动上贴有标签的卡片列表。 添加 `hideOnMobile: (record) => boolean` 以跳出移动卡中的低值单元格。 过 `rowActions={(record) => ({ name, onEdit, onDelete, actions })}` 而不是构建动作列: 桌面获得相同的右对齐 `RowActions` 作为 `DataTable`,在桌边滚动时被钉住,每张牌上都打一个"Q"菜单. A 类 表格`withTableBorder`) 显示白色边框卡像 `DataTable`因为,a `nested` 一个 已下锡分卡. ## 许可证 麻省理工学院 ## 常见问题 ### @espresso-lab/mantine-data-table 是什么？ Mantine UI 数据表组件 ### 如何安装 @espresso-lab/mantine-data-table？ 在项目目录运行 npm install @espresso-lab/mantine-data-table，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.3\.0）、react-dom（^19\.3\.0）、@mantine/core（^9\.7\.0）、@mantine/form（^9\.7\.0）、@mantine/dates（^9\.7\.0）、@mantine/hooks（^9\.7\.0）、@tabler/icons-react（^3\.31\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @espresso-lab/mantine-data-table 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @espresso-lab/mantine-data-table 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @espresso-lab/mantine-data-table 可以商用吗？ @espresso-lab/mantine-data-table 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @espresso-lab/mantine-data-table 的下载量有多少？ 根据 npm 官方下载统计，@espresso-lab/mantine-data-table 在 2026/10/14 – 2026/11/12 这 30 天内被下载 2,004 次，日均约 67 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @espresso-lab/mantine-data-table 还在维护吗？ 最新版本 2\.6\.6 发布于 2026/11/13（1 天前）；至今共发布 173 个版本，其中过去 12 个月发布了 90 个；首次发布于 2025/04/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。