# @adapttable/radix 中文文档

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

版本：3\.3\.11
npm 元数据更新时间：2026-11-01T20:00:05.685Z
中文译文更新时间：2026-11-07T07:15:48.891Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：2.2 MB，344 个文件
- 模块格式：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，@radix-ui/themes ^3\.0\.0
- 首次发布：2026-06-26T21:34:09.526Z
- 最新版本发布：2026-11-01T20:00:05.377Z
- 近 30 天下载量：2017（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：46（近 12 个月 46 个）

## 中文简介

用于Adaptable的Radix主题适配器——一个包含有排序,过滤,URL状态,选择,RTL,和暗模式的电池的Radix数据表.

## 安装

```sh
npm install @adapttable/radix
```

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

## README

# @ 适应/ radex

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

**[页: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/radix)**

这个 **Radix 主题适配器** 页:1 [适应表](https://github.com/orwa-mahmoud/adapttable) —— 说 a 包含有排序、过滤、 URL- synced 的 Radix 数据表 状态、 选择 + 批量动作、 RTL 和 暗模式。 无头建筑 `@adapttable/core` 发动机。 (目标) `@radix-ui/themes` **页:1**. ) (中文(简体) )

```bash
pnpm add @adapttable/radix @adapttable/core @radix-ui/themes react react-dom
```

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

## 快速启动

```tsx
import { Theme } from "@radix-ui/themes";
import "@radix-ui/themes/styles.css";
import { DataTable, useFrontendData, type ColumnDef } from "@adapttable/radix";

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 (
    <Theme accentColor="iris">
      <DataTable source={source} columns={columns} rowKey={(r) => r.id} />
    </Theme>
  );
}
```

外观跟随周围 `<Theme>` 轻/暗、重音和半径; 通过 `accentColor` 把桌子的口音调调出来 交换 `useFrontendData` 页:1 `useQuerySource` 从服务器上打印的查询中驱动同一表格.

## 特征

-   **自动移动卡** ——在移动断点下,每行作为拉迪克斯制成 `Card` (相同的过滤器、搜索、选择和 URL 状态)和无限卷轴替换寻呼器;每列调制 `mobileLabel` 编号 : `hideOnMobile`,将布局标注在 `forceMobile`。 。 。 . [看它翻动现场](https://adapttable.orwamahmoud.com/react/demo/mantine/mobile-cards/)。 。 。 .
-   **客户端或服务器数据** 通过一个 `TableSource` 合同——同样道具也一样.
-   **全局搜索框** ——已解开;在客户端数据上匹配每行的可搜索文本,并在服务器级别上将术语交给后端. 把它关掉 `searchable={false}`。 。 。 .
-   **URL 符号** 搜索 / 排序 / 过滤 / 页面 – 可共享,可深链接的链接.
-   **排序** 通过可分类标题.
-   **过滤** a 包括: `Popover` 或者说 `Dialog` 过滤器外加可移动 `Badge` 芯片,扳机上有滤波器 同一面板中的嵌入式和/或过滤树.
-   **页眉过滤器** (单位:千美元)`headerFilters()`)——每个被过滤的列头中的漏斗会打开与"过滤器"面板相同的字段,绑同状态,URL参数和芯片.
-   **自定义过滤器类型** (单位:千美元)`filterTypes([...])`——登记a `FilterTypeSpec` 带有自己的部件、运算符和上游;它获得窗体字段、页眉漏斗、URL参数和芯片.
-   **选择+批量动作** 使用 Radix 键 `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/radix/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`, (中文(简体) ), `size`, (中文(简体) ), `accentColor`, (中文(简体) ), `className`可注入时 `confirm`,整个无头逃生舱通过 `@adapttable/react`。 。 。 .

## 看它有用吗

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

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

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

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

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

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

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

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

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

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

![radix RTL / Arabic](https://adapttable.orwamahmoud.com/media/adapters/radix/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/radix 是什么？

用于Adaptable的Radix主题适配器——一个包含有排序,过滤,URL状态,选择,RTL,和暗模式的电池的Radix数据表\.

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

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

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

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

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

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

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

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

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

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

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

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

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

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