# @bhplugin/ng-datatable 中文文档

规范地址：https://npmcn.com/package/%40bhplugin/ng-datatable/

版本：0\.2\.0
npm 元数据更新时间：2025-09-15T09:43:21.940Z
中文译文更新时间：2026-11-08T01:20:22.864Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40bhplugin/ng-datatable
原文对照：https://npmcn.com/package/%40bhplugin/ng-datatable/?lang=original
项目主页：https://github.com/bhaveshpatel200/ng-datatable#readme
源码仓库：https://github.com/bhaveshpatel200/ng-datatable

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

- 包体积（解压后）：842 kB，33 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/common \>=2\.0\.0，@angular/core \>=2\.0\.0
- 首次发布：2023-06-08T13:01:34.863Z
- 最新版本发布：2025-09-15T09:43:21.780Z
- 近 30 天下载量：2841（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 0 个）

## 中文简介

ng-databable - 完全自定义和易于使用的数据表库

## 安装

```sh
npm install @bhplugin/ng-datatable
```

也可以使用：`pnpm add @bhplugin/ng-datatable`、`yarn add @bhplugin/ng-datatable`、`bun add @bhplugin/ng-datatable`

## README

# @bhplugin/ng-数据表

  

## 示例

[文档演示文稿( D)](https://ng-datatable-document.vercel.app/)

## 安装

#### 国家预防机制

```bash
npm install @bhplugin/ng-datatable --save
```

#### 雅伦

```bash
yarn add @bhplugin/ng-datatable
```

#### 鲍尔

```bash
bower install @bhplugin/ng-datatable --save
```

## 使用量

#### 应用模块.ts

```bash
import { NgModule } from '@angular/core';
import { DataTableModule } from '@bhplugin/ng-datatable';

@NgModule({
    imports: [
        ...
        DataTableModule
    ],
})
export class AppModule {}
```

#### app.community.html (英语)

```html
<ng-datatable [rows]="rows" [columns]="cols"> </ng-datatable>
```

#### 应用程序组件.ts

```html

import { Component } from '@angular/core';
import { colDef } from '@bhplugin/ng-datatable';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    cols: Array<colDef> = [];
    rows: Array<any> = [];

    constructor() {
        this.initData();
    }

    initData(){
        this.cols = [
            { field: "id", title: "ID", filter: false },
            { field: "name", title: "Name" },
            { field: "username", title: "Username" },
            { field: "email", title: "Email" },
            { field: "phone", title: "Phone" },
            { field: "date", title: "Date", type: "date" },
            { field: "active", title: "Active", type: "bool" },
            { field: "age", title: "Age", type: "number" },
            { field: "address.city", title: "Address" },
            { field: "company.name", title: "Company" },
        ];

        this.rows = [
            {
            id: 1,
            name: "Leanne Graham",
            username: "Bret",
            email: "Sincere@april.biz",
            address: {
                street: "Kulas Light",
                suite: "Apt. 556",
                city: "Gwenborough",
                zipcode: "92998-3874",
                geo: {
                    lat: "-37.3159",
                    lng: "81.1496",
                },
            },
            phone: "1-770-736-8031 x56442",
            website: "hildegard.org",
            company: {
                name: "Romaguera-Crona",
                catchPhrase: "Multi-layered client-server neural-net",
                bs: "harness real-time e-markets",
            },
            date: "Tue Sep 27 2022 22:19:57",
            age: 10,
            active: true,
            },
            .......
        ];
    }
}
```

## 道具

| 道具 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| **列(需要)** | 数组 | \[ | 表格栏 |
| **行( 需要)** | 数组 | \[ | 表格行 |
| **是服务器模式** | 布尔 | 虚假 | 设定 **_真实_** 如果您需要服务器侧页. |
| **共计** | 编号 | 0 个 | 总计行数. **_共计_** 何时需要 **_是服务器模式_** 真实 |
| **皮肤** | 字符串 | "bh-table-striped bh-table-hover" "bh-table-table-hover" "bh-table-table-table-hover" "bh-table-table-table-table-hover" "bh-table-table-table-table-hover" "bh-table-table-table-table-table-table-table-hover" "bh-t-table-table-table-table-table-table-hover" "bh-快取取出"","高取取出取出取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取 | 皮肤自定义类 (')**bh -- -- 表条**\- 对于条纹行**bh -- -- 桌后**\- 对于徘徊行**bh 桌边**\- 对于相邻行**bh 表格协议**' - 用于压缩表) |
| **装入** | 布尔 | 虚假 | 启用加载器 |
| **有检查框** | 布尔 | 虚假 | 启用复选框 |
| **搜索** | 字符串 | "" "" (英语) | 启用全局搜索 |
| **页 次** | 编号 | 1个 | 当前页面 |
| **页面大小** | 编号 | 10个 | 每页行数 |
| **页面大小选项** | 数组 | \[10、20、30、50、100\] | 页面化选项 |
| **显示页码** | 布尔 | 真实 | 启用页面化选项 |
| **行分类** | 数组, 函数 | "" "" (英语) | 自定义行类 |
| **单元格分类** | 数组, 函数 | "" "" (英语) | 自定义单元格类 |
| **可排序** | 布尔 | 真实 | 启用排序 |
| **排序颜色** | 字符串 | 编号 | 排序列的名称 |
| **排序方向** | 字符串 | "asc" (英语) | 排序方向(asc或desc) |
| **分栏** | 布尔 | 虚假 | 启用单个列过滤器 |
| **标记** | 布尔 | 真实 | 启用页形 |
| **显示数字** | 布尔 | 真实 | 启用数字页 |
| **显示数字** | 编号 | 页:1 | 在页形图中显示计数数 |
| **显示第一页** | 布尔 | 真实 | 在页码中启用首页 |
| **显示最后页** | 布尔 | 真实 | 启用页中最后一页 |
| **第一个箭头** | 字符串 | 默认箭头 | 自定义第一页箭头 |
| **上个箭头** | 字符串 | 默认箭头 | 自定义上页箭头 |
| **上一个箭头** | 字符串 | 默认箭头 | 自定义上一个页面箭头 |
| **下一个箭头** | 字符串 | 默认箭头 | 自定义下一页箭头 |
| **页形信息** | 字符串 | "显示{0}至{1}{2}条目" | 自定义页码信息 |
| **无数据关联** | 字符串 | 无可用数据 | 自定义无数据消息 |
| **粘结页眉** | 布尔 | 虚假 | 启用固定信头 |
| **高度** | 字符串 | 450px (英语) | 只有粘着时才会使用 启用了信头 |
| **粘接第一相册** | 布尔 | 虚假 | 启用已固定的第一列 |
| **克隆页眉InFooter** | 布尔 | 虚假 | 启用页脚中的克隆页眉 |
| **选择RowOnClick** | 布尔 | 虚假 | 启用以选择行( 检查框) 单击 |

## 列选项

| 道具 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| **是独一无二的** | 布尔 | 虚假 | db 列是主密钥还是不是 |
| **字段** | 字符串 | "" "" (英语) | db 列名称 |
| **标题** | 字符串 | "" "" (英语) | 显示列名称 |
| **价值** | 字符串 | "" "" (英语) | 启用过滤器的过滤值 |
| **条件** | 字符串 | "夹" | 启用过滤器时列过滤器的默认条件 |
| **类型** | 字符串 | "" "" (英语) | 列类型(字符串、日期、数字、布尔) |
| **宽度** | 字符串 | "" "" (英语) | 自定义列宽度 |
| **微风** | 字符串 | "" "" (英语) | 自定义列最小宽度 |
| **最大宽度** | 字符串 | "" "" (英语) | 自定义列的最大宽度 |
| **隐藏** | 布尔 | 虚假 | 显示/隐藏列 |
| **过滤器** | 布尔 | 真实 | 启用列过滤器 |
| **搜索** | 布尔 | 真实 | 启用全局搜索 |
| **排序** | 布尔 | 真实 | 启用排序 |
| **单元格渲染器** | 函数,字符串 |  | 自定义单元格渲染 |
| **页眉分类** | 字符串 | "" "" (英语) | 自定义页眉单元格类 |
| **单元格分类** | 字符串 | "" "" (英语) | 自定义单元格类 |

## 活动

| 名称 | 说明 |
| --- | --- |
| **排序变化** | 当排序更改时会触发 |
| **搜索变化** | 当搜索更改时会触发 |
| **页面变化** | 当页面更改时会触发 |
| **页面变更** | 当页面化更改时会触发 |
| **选择行** | 使用复选框选择行时会触发 |
| **过滤变化** | 当列过滤器改变时会触发 |
| **划线** | 单击行时会触发 |
| **线条 DBClick** | 双击行时会触发 |

## 方法

| 名称 | 说明 |
| --- | --- |
| **重设** | 将重置所有选项, 如所选行、 过滤器、 搜索、 曲折页面等 |
| **获取选中的箭头** | 将返回所有所选行 |
| **获取文件夹** | 将返回所有列过滤器 |
| **清除选中的箭头** | 将取消选中的全部行 |
| **选择Row( 索引)** | 将随给定索引选择行( 不存在行将被忽略) |
| **未选择Row( 索引)** | 将取消带有给定索引的行( 不存在行将被忽略) |
| **是 RowSecret( 索引)** | 如果选择了带有给定索引的行,则返回正则 |

  

## 许可证

**_@bhplugin/ng-数据表_** 是一个开源软件,根据该软件许可 [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 .

  

## **我们的其他插件**

### Vue3 数据表 - [**@bhplugin/vue3-数据表**](https://www.npmjs.com/package/@bhplugin/vue3-datatable)

  

## 支助

[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png)](https://www.buymeacoffee.com/bhplugin)

## 常见问题

### @bhplugin/ng-datatable 是什么？

ng-databable - 完全自定义和易于使用的数据表库

### 如何安装 @bhplugin/ng-datatable？

在项目目录运行 npm install @bhplugin/ng-datatable，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/common（\>=2\.0\.0）、@angular/core（\>=2\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bhplugin/ng-datatable 支持 TypeScript 吗？

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

### @bhplugin/ng-datatable 支持 ESM 还是 CommonJS？

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

### @bhplugin/ng-datatable 可以商用吗？

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

### @bhplugin/ng-datatable 的下载量有多少？

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

### @bhplugin/ng-datatable 还在维护吗？

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