# @adapttable/mantine 中文文档

规范地址：https://npmcn.com/package/%40adapttable/mantine/

版本：3\.3\.11
npm 元数据更新时间：2026-11-01T20:00:35.897Z
中文译文更新时间：2026-11-06T09:24:04.143Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40adapttable/mantine
原文对照：https://npmcn.com/package/%40adapttable/mantine/?lang=original
项目主页：https://adapttable.orwamahmoud.com/react/demo/mantine/
源码仓库：https://github.com/orwa-mahmoud/adapttable

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.3 MB，340 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.12\.0
- 运行依赖：3 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0，@mantine/core ^7\.2\.0 \|\| ^8\.0\.0 \|\| ^9\.0\.0，@mantine/hooks ^7\.2\.0 \|\| ^8\.0\.0 \|\| ^9\.0\.0
- 首次发布：2026-06-12T07:26:25.191Z
- 最新版本发布：2026-11-01T20:00:35.567Z
- 近 30 天下载量：3610（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：52（近 12 个月 52 个）

## 中文简介

Adaptable的Mantine适配器——一个包含有电池,可主题的回放数据表,有排序,过滤,URL状态,虚拟化,RTL,暗模式,以及应答卡渲染等功能.

## 安装

```sh
npm install @adapttable/mantine
```

也可以使用：`pnpm add @adapttable/mantine`、`yarn add @adapttable/mantine`、`bun add @adapttable/mantine`

## README

# @ 适应/ 曼汀

[![@adapttable/mantine — a Mantine data table built on AdaptTable](https://adapttable.orwamahmoud.com/media/adapters/mantine/parts/filtering.gif)](https://adapttable.orwamahmoud.com/react/demo/?kit=mantine)

**[页:1](https://adapttable.orwamahmoud.com/)** • 妇女 **[现场演示](https://adapttable.orwamahmoud.com/react/demo/)** • 妇女 **[开始吧](https://adapttable.orwamahmoud.com/react/getting-started/)** • 妇女 **[在 StackBlitz 中尝试](https://stackblitz.com/github/orwa-mahmoud/adapttable/tree/main/starters/mantine)**

_移动从曼汀数据表? 见 [移徙指南](https://adapttable.orwamahmoud.com/react/migrate-from-mantine-datatable/)。 。 。 ._

这个 **曼汀适配器** 页:1 [适应表](https://github.com/orwa-mahmoud/adapttable) —— 说 a 包含电池的 React 数据表,包含排序、过滤、 URL- synced 状态, 选择 + 批量动作, RTL, 暗模式, 以及可选的入口 动画. 无头建筑 `@adapttable/core` 发动机.

```bash
pnpm add @adapttable/mantine @adapttable/core @mantine/core @mantine/hooks react react-dom
```

需要节点.js **22.12.0 或较新的**;包装的释放在22.12和24号节点上进行测试.

## 快速启动

```tsx
import "@mantine/core/styles.css";
import { MantineProvider } from "@mantine/core";
import {
  DataTable,
  useFrontendData,
  type ColumnDef,
} from "@adapttable/mantine";

interface Person {
  id: string;
  name: string;
  city: string;
}

const columns: ColumnDef<Person>[] = [
  { key: "name", header: "Name", accessor: (r) => r.name, sortable: true },
  { key: "city", header: "City", accessor: (r) => r.city },
];

export function People({ data }: { data: Person[] }) {
  const source = useFrontendData({ data, columns });
  return (
    <MantineProvider>
      <DataTable source={source} columns={columns} rowKey={(r) => r.id} />
    </MantineProvider>
  );
}
```

交换 `useFrontendData` 页:1 `useQuerySource` 从一个 服务器标签 `useInfiniteQuery` - 没有什么变化.

## 特征

-   **自动移动卡** - 在移动断点下,每行都会变成曼汀 `Card` (相同的过滤器、搜索、选择和 URL 状态)和无限卷轴替换寻呼器;每列调制 `mobileLabel` 编号 : `hideOnMobile`,将布局标注在 `forceMobile`。 。 。 . [看它翻动现场](https://adapttable.orwamahmoud.com/react/demo/mantine/mobile-cards/)。 。 。 .
-   **客户端或服务器数据** 通过一个 `TableSource` 合同——同样道具也一样.
-   **全局搜索框** ——已解开;在客户端数据上匹配每行的可搜索文本,并在服务器级别上将术语交给后端. 把它关掉 `searchable={false}`。 。 。 .
-   **URL 符号** 搜索 / 排序 / 过滤 / 页面 – 可共享,可深链接的链接.
-   **排序** 通过无障碍头控制.
-   **过滤** ——作曲 `filters(...)` (单位:千美元) `Drawer` 或锁定 `Popover` 加上可移动芯片和触发计数。 嵌入和/或过滤树的使用 同一个面板.
-   **页眉过滤器** (单位:千美元)`headerFilters()`)——每个被过滤的列头中的漏斗会打开与"过滤器"面板相同的字段,绑同状态,URL参数和芯片.
-   **自定义过滤器类型** (单位:千美元)`filterTypes([...])`——登记a `FilterTypeSpec` 带有自己的部件、运算符和上游;它获得窗体字段、页眉漏斗、URL参数和芯片.
-   **选择+批量动作** 使用曼汀语 `Checkbox`对,由 `bulkActions(...)`。 。 。 .
-   **行动作** 带有可选确认, `isHidden` 编号 : `isDisabled` 每个行.
-   **列扩展** 内部细节面板通过 `rowDetail(...)`。 。 。 .
-   **嵌入式表格** (单位:千美元)`nestedTable(...)`)——满分 `DataTable` 与自己的柱子, 排序和呼 在扩展行.
-   **内置单元格编辑** (单位:千美元)`editing(handler)` + 键 `editable` ——文本、编号和选择 编辑器; 输入承诺, 退出取消, Tab 移动开始 。 关闭操作器,没有打开的手机.
-   **行重排顺序** (单位:千美元)`rowReorder(handler)`) ——拖动手柄,升空键盘,数据集相接指数.
-   **行指针** (单位:千美元)`rowPinning(...)`)——虚拟窗口外粘上下行.
-   **固定摘要行** (单位:千美元)`pinnedSummaryRows(...)`)——主机拥有的总数被卡在外排序,过滤,分组,平面和选择,包括在分组和树表上.
-   **横跨行和列** (单位:千美元)`cellSpan(...)`)——每行1个单元格列表;被覆盖的单元格被省略.
-   **全宽和分隔行** (单位:千美元)`extraRows(...)`)——由主机注入的插槽相接而成 `beforeRowId`。 。 。 .
-   **行型和高度** (单位:千美元)`rowAppearance(...)`)——有条件的内线样式和一行高.
-   **键盘单元格导航** (单位:千美元)`cellNavigation()`\- 一个制表站,箭头键, ARIA网格语义和屏幕阅读器公告. 它也是大门 单元格范围选择、剪贴板复制/粘贴一个区域,以及填充手柄.
-   **行组** (单位:千美元)`grouping(...)` 或者说 `groupingPanel(...)`)——一列键或被命令要嵌入的列表,并附有每个组的集合.
-   **合计** - 一个脚印 `summaryRow`组合小计 `aggregatable` 列,以及内置或自定义 `aggregate()` 操作; 总计从被过滤行重算.
-   **关键表格** ——可选栏中各行、栏和措施的小计 `@adapttable/core/pivot` 输入.
-   **树数据** (单位:千美元)`tree(...)`)——分级行有扩展/拼接,桌面上和牌上.
-   **栏管理** ——显示/隐藏,重排,接针(粘接)和再大小,外加相撞的列组.
-   **火花线列** (单位:千美元)`@adapttable/react/sparkline`)——作为内置SVG的栏,行和区. 底盘从不付钱.
-   **PDF 导出和打印布局** (单位:千美元)`@adapttable/core/pdf`——可选条目; `pdfWriter()` 打开 `exportCsv`, (中文(简体) ), `printTable` 用于浏览器对话框.
-   **公式引擎** (单位:千美元)`@adapttable/core/formula`——电子表格公式并列和汇总;循环参考报告 `#CYCLE!`。 。 。 .
-   **特征构成** (单位:千美元)`features={[rowReorder(fn)]}`从 `@adapttable/mantine/row-reorder`\- 风格的子路径——导入是开关,以及 `standardFeatures()` 编辑 `/preset` 条目是单导入路径。 主机插件共享相同 `setup(host)` 表面.
-   **已保存视图** 指定过滤器/分包/分栏安排,并相互切换.
-   **CSV 导出** (单位:千美元)`exportCsv(...)`)——当前页面,被过滤的完整集,或 所选行; 选择列, 或将整行交给后端.
-   **XLSX 导出** (单位:千美元)`@adapttable/core/xlsx`——可选条目; `xlsxWriter()` 打开 `exportCsv` 写一个真实的 `.xlsx` 没有额外依赖的工作簿.
-   **命令调色板和上下文菜单** (单位:千美元)`commandPalette()`, (中文(简体) ), `contextMenu()`) —— Cmd/Ctrl+K 打开可搜索的表格动作列表;右键单击打开了页眉,行或单元格的菜单.
-   **查看控件** —— 说 `densityChooser()`, (中文(简体) ), `fullscreen()`, (中文(简体) ), `print(...)`, (中文(简体) ), `statusBar()`, (中文(简体) ), `selectionStats()`, (中文(简体) ), `sidePanel(...)` 财务报告和审定财务报表 `undoRedoButtons()`,每个选项工具栏控制从自己的子路径.
-   **虚拟化** (单位:千美元)`virtualize(...)`)——选入行/入卡窗口,用于非常大的列表.
-   **倾斜** 编号 `Pagination`,或无限滚动(通过设备自动).
-   **SSR和服务器组件** ——在没有DOM的情况下使出;客户端边界已经在构建中了,因此它会直接被降入Next.js App路由器. [文档](https://adapttable.orwamahmoud.com/react/ssr-rsc/)。 。 。 .
-   **国家** —— 说 `Skeleton` 装入、 重试出错以及空状态 .
-   **拉特** 通过 `dir`· ; **阴暗模式** 通过曼汀的彩色计划.
-   **自定义** —— 说 `slots`, (中文(简体) ), `classNames`,自定义 `toolbar`可注入时 `confirm`,可选入场动画(`animate`荣誉 `prefers-reduced-motion`完整无头逃生舱通过 `@adapttable/react`。 。 。 .

## 看它有用吗

每个片段都是真正的适配器,记录在现场演示中.

**行组** ——以一行为一列,每行小计

![mantine Row grouping](https://adapttable.orwamahmoud.com/media/adapters/mantine/parts/row-grouping.gif)

**内置单元格编辑** ——双击单元格;文本、数字和选择编辑器

![mantine Inline cell editing](https://adapttable.orwamahmoud.com/media/adapters/mantine/parts/cell-editing.gif)

**过滤** 键入绑定值,表格按键回答

![mantine Filtering](https://adapttable.orwamahmoud.com/media/adapters/mantine/parts/filtering.gif)

**栏管理** ——显示,隐藏,重排,接针和大小调整

![mantine Column management](https://adapttable.orwamahmoud.com/media/adapters/mantine/parts/column-management.gif)

**RTL / 阿拉伯语** - 整个桌子的镜子,不只是文字

![mantine RTL / Arabic](https://adapttable.orwamahmoud.com/media/adapters/mantine/parts/rtl.gif)

## 文档

[开始](https://adapttable.orwamahmoud.com/react/getting-started/) • 妇女 [现场演示](https://adapttable.orwamahmoud.com/react/demo/) • 妇女 [比较与 ag-Grid → MUI X → TanStack](https://adapttable.orwamahmoud.com/react/comparison/)

-   **数据** —— 说 [客户端对服务器级](https://adapttable.orwamahmoud.com/data-tiers/) • 妇女 [无限卷轴( i)](https://adapttable.orwamahmoud.com/react/pagination/) • 妇女 [URL 符号状态](https://adapttable.orwamahmoud.com/react/url-state/)
-   **互动** —— 说 [过滤](https://adapttable.orwamahmoud.com/react/filtering/) • 妇女 [排序](https://adapttable.orwamahmoud.com/react/sorting/) • 妇女 [选择大块动作( b)](https://adapttable.orwamahmoud.com/react/selection/) • 妇女 [扩展行](https://adapttable.orwamahmoud.com/react/row-expansion/) • 妇女 [内置单元格编辑](https://adapttable.orwamahmoud.com/react/cell-editing/)
-   **列数** —— 说 [显示/隐藏 · 重排 · 接针 · 调整大小](https://adapttable.orwamahmoud.com/react/column-management/) • 妇女 [行组和集合](https://adapttable.orwamahmoud.com/react/row-grouping/) • 妇女 [CSV 导出](https://adapttable.orwamahmoud.com/react/customization/#csv-export)
-   **再来** —— 说 [i18n 和 RTL](https://adapttable.orwamahmoud.com/react/i18n-rtl/) • 妇女 [虚拟化](https://adapttable.orwamahmoud.com/react/virtualization/) • 妇女 [定制](https://adapttable.orwamahmoud.com/react/customization/) • 妇女 [API 密码](https://adapttable.orwamahmoud.com/react/api/) • 妇女 [财务问题](https://adapttable.orwamahmoud.com/faq/)

## 许可证

[麻省理工学院](https://npmcn.com/LICENSE) © [奥尔瓦·马哈茂德](https://orwamahmoud.com/)

## 常见问题

### @adapttable/mantine 是什么？

Adaptable的Mantine适配器——一个包含有电池,可主题的回放数据表,有排序,过滤,URL状态,虚拟化,RTL,暗模式,以及应答卡渲染等功能\.

### 如何安装 @adapttable/mantine？

在项目目录运行 npm install @adapttable/mantine，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）、@mantine/core（^7\.2\.0 \|\| ^8\.0\.0 \|\| ^9\.0\.0）、@mantine/hooks（^7\.2\.0 \|\| ^8\.0\.0 \|\| ^9\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @adapttable/mantine 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @adapttable/mantine 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @adapttable/mantine 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.12\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @adapttable/mantine 可以商用吗？

@adapttable/mantine 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @adapttable/mantine 的下载量有多少？

根据 npm 官方下载统计，@adapttable/mantine 在 2026/10/05 – 2026/11/03 这 30 天内被下载 3,610 次，日均约 120 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @adapttable/mantine 还在维护吗？

最新版本 3\.3\.11 发布于 2026/11/02（6 天前）；至今共发布 52 个版本，其中过去 12 个月发布了 52 个；首次发布于 2026/06/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。