# @firestitch/grid 中文文档

规范地址：https://npmcn.com/package/%40firestitch/grid/

版本：18\.3\.0
npm 元数据更新时间：2026-11-01T00:18:10.569Z
中文译文更新时间：2026-11-01T03:57:50.843Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：5.1 MB，720 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2026-10-06T17:55:13.679Z
- 最新版本发布：2026-11-01T00:18:10.364Z
- 已发布版本数：9（近 12 个月 9 个）

## 中文简介

Angular 18中的虚拟滚动网格，可以显示枢轴（行级别、列级别和值），也可以显示源代码自己的行（详细信息），每个列标头都有排序和过滤器、可扩展的组、总行和列，以及停靠的布局面板

## 安装

```sh
npm install @firestitch/grid
```

也可以使用：`pnpm add @firestitch/grid`、`yarn add @firestitch/grid`、`bun add @firestitch/grid`

## README

# @firestitch /网格

一个用于Angular 18的虚拟滚动网格，它可以显示枢轴(行级别、列级别和 值)或源自己的行（详细信息），对每个列标头进行排序和筛选， 可扩展的组，总行和列，以及停靠在它旁边的布局面板。网格从不 保存一个数据集：它请求 `GridSource` 对于屏幕上的行，作为查看器读取更多 滚动和打开组。

## 安装

```bash
npm install @firestitch/grid
```

像每个firekit包一样，网格没有声明对等依赖项。应用程序安装 网格本身导入的包：

| 包 | 版本 | 用于 |
| --- | --- | --- |
| `@angular/core`， `common`， `forms`， `cdk`， `material` | `^18.2.7` |  |
| `rxjs` | `^7.5.6` |  |
| `@firestitch/chip` | `^18.0.70` | 布局面板的现场芯片 |
| `@firestitch/menu` | `^18.0.5` | 标题和布局面板菜单 |
| `@firestitch/resize` | `^18.0.3` | 布局面板的调整边缘大小 |
| `@firestitch/style` | `^18.0.70` | 这个 `--fs-*` 网格绘制时使用的颜色符号 |
| `@firestitch/datepicker` | `^18.0.29` | 日期列过滤器 |
| `@firestitch/form` | `^18.0.41` | 过滤面板验证 |
| `@firestitch/popover` | `^18.1.0` | 过滤器面板和截断的单元格（面板模式，在18.1.0中添加） |

一个应用程序必须安装它们中的每一个， `@firestitch/datepicker`， `@firestitch/form` 和 `@firestitch/popover` 包括：应用程序不能建立没有他们，和 `@firestitch/popover` 必须是18.1.0或更高版本。 `@firestitch/datepicker` 和 `@firestitch/form` 进口 `@firestitch/clear`， `common`， `date`， `dialog`， `drawer`， `message` 和 `scroll-picker`, `@firestitch/drawer` 需要 `@firestitch/core` 和 `@firestitch/store`。一个已经使用的应用程序 Fs-datepicker有。

## 使用

`fs-grid` 是一个独立的组件。

```ts
import { HttpClient } from '@angular/common/http';
import { Component, inject, signal } from '@angular/core';

import {
  FsGridComponent,
  GridAggregation,
  GridGranularity,
  GridLayout,
  GridResult,
  GridSource,
} from '@firestitch/grid';

@Component({
  selector: 'app-sales-grid',
  standalone: true,
  imports: [FsGridComponent],
  template: '<fs-grid [source]="source" [(layout)]="layout"></fs-grid>',
})
export class SalesGridComponent {
  public layout = signal<GridLayout>({
    rows: [{ field: 'region' }],
    columns: [{ field: 'orderedOn', granularity: GridGranularity.Month }],
    values: [{ field: 'revenue', aggregation: GridAggregation.Sum }],
    totalRow: true,
  });

  public source: GridSource = {
    read: (request, params) => this._http.post<GridResult>('/sales/grid', { request, params }),
  };

  private _http = inject(HttpClient);
}
```

### 输入

| 输入 | 类型 |  |
| --- | --- | --- |
| `source` | `GridSource` | 必需的。这是网格获取数据的唯一途径。 |
| `[(layout)]` | `GridLayout` | 必需的。排序，过滤，标题拖拽和布局面板写它回来，规范。 |
| `controls` | `GridControls` | 观众可能会改变什么(`sort`， `expand`， `layout`， `filter`): `enabled`， `disabled` 或者 `hidden`。启用了遗漏的控件。 |
| `params` | `GridParams` | 主机自己的值，每次读取都携带。网格从不向内看。 |
| `[(expansion)]` | `GridExpansion` | 哪些组是开放的：每个组都是开放的 `depth`，然后观众自己的打开和关闭。 |
| `[(panel)]` | `GridPanel | null` | 面板停靠在电网旁边； `null` 当没有人开门的时候。 |
| `formatter` | `GridFormatter` | 写入网格显示的每个值，因此屏幕和主机自己的文件读取相同。网格的en-US格式化程序在缺席时使用。 |
| `clearedFilter` | `{ field, granularity } | null` | 当谷物参数驱动发生变化时，主机取出的日期过滤器；状态行将其命名。 |

### 源

```ts
export interface GridSource {
  read(request: GridRequest, params: GridParams): Observable<GridResult>;
}
```

-   每次发射都是答案的一部分，完成意味着完成。
-   阅读是冷的，取消订阅会中止阅读。网格取消不再需要的读取。
-   `request.rows` 命名所需的行范围， `request.columns` 列范围，和 `request.fields` 还请求源的字段和限制。
-   错误到达时为 `Error` 带有可读信息；网格显示了重试。

### 布局助手

-   `canonicalGridLayout(layout)` 将布局作为主机存储并进行比较：默认值为 left out和key的顺序是一样的，所以两个相同的布局有相同的JSON。
-   `normalizeGridLayout(layout)` 可原谅的未知键和没有字段的条目是什么 每一张单子和每一面旗帜都会回来。

## 风格

网格根据自己的组件样式进行绘制 `--fs-*` 令牌的 `@firestitch/style` 和 Angular Material主题。没有什么要包括的：包裹 `styles.scss` 是空的 只有这样构建才能像其他Firestitch包一样布局。

## 开发

```bash
npm run serve     # the playground, with every example
npm run check     # the engine, contract and client checks
npm run package   # the checks, then package/ with this README and the LICENSE
```

## 许可证

麻省理工学院。看到 [许可证](https://npmcn.com/package/%40firestitch/grid/LICENSE).

## 常见问题

### @firestitch/grid 是什么？

Angular 18中的虚拟滚动网格，可以显示枢轴（行级别、列级别和值），也可以显示源代码自己的行（详细信息），每个列标头都有排序和过滤器、可扩展的组、总行和列，以及停靠的布局面板

### 如何安装 @firestitch/grid？

在项目目录运行 npm install @firestitch/grid，或使用 pnpm add / yarn add / bun add。

### @firestitch/grid 支持 TypeScript 吗？

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

### @firestitch/grid 支持 ESM 还是 CommonJS？

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

### @firestitch/grid 可以商用吗？

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

### @firestitch/grid 还在维护吗？

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