# @devslab/dds-table-react 中文文档

规范地址：https://npmcn.com/package/%40devslab/dds-table-react/

版本：0\.33\.0
npm 元数据更新时间：2026-11-11T19:00:01.881Z
中文译文更新时间：2026-11-12T10:34:12.080Z
软件包许可：SEE LICENSE IN LICENSE

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

原始 npm 页面：https://www.npmjs.com/package/%40devslab/dds-table-react
原文对照：https://npmcn.com/package/%40devslab/dds-table-react/?lang=original
项目主页：https://devslab.kr/brand/
源码仓库：https://github.com/devslab-kr/dds

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

- 包体积（解压后）：26.6 kB，13 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：react ^18\.3\.0 \|\| ^19\.0\.0，react-dom ^18\.3\.0 \|\| ^19\.0\.0
- 首次发布：2026-10-11T07:11:33.142Z
- 最新版本发布：2026-11-11T19:00:01.507Z
- 近 30 天下载量：2544（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：23（近 12 个月 23 个）

## 中文简介

DDS 主题社区 AG Grid 反应

## 安装

```sh
npm install @devslab/dds-table-react
```

也可以使用：`pnpm add @devslab/dds-table-react`、`yarn add @devslab/dds-table-react`、`bun add @devslab/dds-table-react`

## README

# @devslab/ dds- table- react

DDS 样式和SSR安全反应边界 **AG 网状社区 36.2.0**此软件包独立于 `@devslab/dds-react`; 导入 React 原始文本不导入 AG Grid 。 反应和反应DOM 18.3或19是同龄人.

```tsx
import { useRef } from "react";
import { DataTable, type DataTableRef } from "@devslab/dds-table-react";
import type { ColDef, ICellRendererParams } from "ag-grid-community";
import "@devslab/dds-tokens/tokens.css";
import "@devslab/dds-css/dds.css";
import "@devslab/dds-table-react/styles.css";

type Order = { id: string; amount: number };
const columns: ColDef<Order>[] = [
  { field: "id", filter: true },
  { field: "amount", editable: true,
    cellRenderer: ({ value }: ICellRendererParams<Order, number>) => <strong>{value}</strong> },
];
export function Orders({ rows }: { rows: readonly Order[] }) {
  const gridRef = useRef<DataTableRef<Order>>(null);
  return <DataTable rows={rows} columns={columns} label="Orders"
    placeholder="Preparing orders" gridRef={gridRef}
    gridProps={{ getRowId: ({ data }) => data.id, rowSelection: { mode: "multiRow" },
      onGridReady: ({ api }) => console.log(api.getDisplayedRowCount()),
      localeText: { noRowsToShow: "No orders" } }} />;
}
```

`rows` 接受不可变的数组引用并复制AG Grid的数组。 当数据变化时替换数组;当实用时保持列和本地配置的稳定. `columns` 属于本地 `ColDef<T>[]`,包括反应细胞渲染器. `label` 需要并标出附件区域和挂起的网格。 所有拷贝和翻译都属于打电话者;通过 `localeText` 为AG Grid的内置UI.

`gridProps` 是导出 `DataTableGridProps<T>` 土生土长的别名 `AgGridReactProps<T>`,不包括 `rowData` 财务报告和审定财务报表 `columnDefs`。它接受AG调用、编辑/选择/过滤选项、自定义渲染器、, `gridOptions`, (中文(简体) ), `modules`,主题。 DDS 默认为本地 `AllCommunityModule`可排序/可调整列 `minWidth: 120`,以及 `ddsGridTheme`. 直接原生地产凌驾于等同物之上 `gridOptions` 数值。 自定义模块集必须包括其特性所需的模块和 `RenderApiModule` 用于所需的可访问标签。 DDS不在全球注册模块,也不在本地选项之外添加选择/过滤/编辑.

`gridRef` 是一个正常的 React ref to `AgGridReact<T>`; 访问 `gridRef.current.api` 之后 `onGridReady`。它支持对象 refs和回调 refs,包括React 19 ref 清理。 组件 `ref` 指其附件 `HTMLDivElement`DOM道具(`id`, (中文(简体) ), `className`, (中文(简体) ), `style`)适用于该地区.

`density` 默认为 `"comfortable"` (40px行,44px头; `"dense"` 使用32px行和36px头. 当地人 `rowHeight`编号 :`headerHeight` 覆盖密度 。 默认高度为 480px; 使用 `style={{ height: 640 }}` 来改变它。 网格可以填充可用的宽度并保留最小的列宽,使用AG Grid在窄屏幕上的水平滚动. 选择本地 `domLayout` 如果改变其布局,则将容器尺寸合并起来.

导出 `ddsGridTheme` 将语义DDS CSS变量映射到AG Grid支持的主题参数. 它遵循最近的 DDS 符号范围,包括 `[data-theme="dark"]`覆盖 `gridProps.theme`, (中文(简体) ), `gridProps.gridOptions.theme`,或 `ddsGridTheme.withParams(...)`. AG Grid 生成自己的主题 CSS; 不在此默认主题的同时加载遗留的 AG Grid CSS . [AG 网格主题参数](https://www.ag-grid.com/react-data-grid/theming-parameters/) 支持 CSS 变量颜色表达式.

安全部门改革和工人进口是浏览器-全球安全。 服务器渲染和第一次水合渲染会发出同样的名称 `role="region"` 占位符为 `aria-busy="true"`,稳定高地,可选择的呼叫者提供 `placeholder`然后挂起 AG 网格。 服务器标记中未包含已实现的网格行或 HTML 表格;如果页面需要,则提供单独的服务器摘要 。 土著 `loading` 标记挂载区域繁忙,并驱动 AG Grid 的加载覆盖。 空阵列使用 AG Grid 的本地空状态 。 在 React 服务器组件框架中,在客户端组件内使用此组件.

社区排序,过滤,再大小调整,编辑,选择,虚拟化,无限行模式仍然是AG Grid行为. 默认客户端行模型只处理所提供行: 当它无法排序/过滤整个远程结果时 `rows` 是一个已装入的页面。 对于远程数据,选择具有数据源的共同体无限行模型,并在其中执行远程排序/过滤 `getRows` 处理者。 过 `rows={[]}` 并配置本地数据源; `rows`编号 :`columns` 仍然是DS自有的投入。 Entertainment服务器侧行模式,分组,支点,以及其他商业功能不捆绑. 单独安装/注册企业模块的消费者拥有许可证和集成. [AG 网格行模型](https://www.ag-grid.com/react-data-grid/row-models/) 文档这些边界.

公布的无害环境管理、申报和明确的CSS出口并不包含固体运行时间依赖。 DDS的源代码许可在 [自由主义](https://npmcn.com/package/%40devslab/dds-table-react/LICENSE)AG Grid社区有自己的麻省理工学院执照.

## 常见问题

### @devslab/dds-table-react 是什么？

DDS 主题社区 AG Grid 反应

### 如何安装 @devslab/dds-table-react？

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

### @devslab/dds-table-react 支持 TypeScript 吗？

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

### @devslab/dds-table-react 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @devslab/dds-table-react 可以商用吗？

@devslab/dds-table-react 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @devslab/dds-table-react 的下载量有多少？

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

### @devslab/dds-table-react 还在维护吗？

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