lytenyte-grid

用途

LyteNyte Grid 是一个 React 数据表格组件，支持无头（headless）或预样式（pre-styled）两种使用方式。它提供排序、筛选、列固定、单元格选择、行选择、服务端数据加载、无限数据加载、行分组与聚合、透视等高级功能。该技能用于在用户使用 LyteNyte Grid 时提供针对性的参考与示例。

版本与许可

LyteNyte Grid 有两个版本：

Core — @1771technologies/lytenyte-core（Apache 2.0，免费，无需许可证）
PRO — @1771technologies/lytenyte-pro（商业版，是 Core 的超集）

PRO 可免费安装并用于评估，试用无需许可证密钥。未设置密钥时会显示“used for evaluation”水印。生产部署需许可证密钥以移除水印。许可证验证为离线进行，不发起网络请求。若用户处于构建或原型阶段且尚未设置许可证，可稍后在发布前添加。

主要能力

Core 与 PRO 共同支持的能力包括：安装与许可、网格设置与响应式、事件系统、API 扩展、无头模式、动画、滚动闪烁抑制、初始视口尺寸、TypeScript 与 GridSpec 类型、列（尺寸、固定、可见性、分组、表头）、行（高度、固定、拖拽、全宽行、主从详情、行条纹）、行选择（复选框、联动与隔离选择）、客户端数据（排序、筛选、分组、聚合）、单元格渲染器、工具提示、差异闪烁、单元格与范围选择、剪贴板、单元格编辑与校验、文本/数字/日期/集合/树集合筛选、快速搜索、CSV/Excel/Parquet/Arrow 导出、主题与 CSS 令牌、Tailwind、CSS Modules、Emotion、shadcn/ui 集成、键盘快捷键、无障碍、RTL、React Compiler、打包与安全等。

PRO 独有功能包括：服务端数据（useServerDataSource、服务端排序/筛选/分组）、无限滚动与分页服务端行、树数据（useTreeDataSource、嵌套对象行）、透视表（pivotMode、PivotModel、度量、总计）、表达式（Evaluator、ExpressionEditor、表达式筛选）、标签筛选与 having 筛选、UI 组件（SmartSelect、PillManager、Menu、Dialog、TreeView、ColumnManager、RowGroupCell、SelectAll）、注释（单元格高亮、单元格备注、marching ants、自定义覆盖层、annotations 属性）。

使用方式

首先导入 LyteNyte Grid 及其关联的 CSS 文件。PRO 版本示例：

import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid-full.css";

Core 版本示例：

import { Grid, useClientDataSource } from "@1771technologies/lytenyte-core";
import "@1771technologies/lytenyte-core/grid-full.css";

创建 Grid Spec 类型，为网格提供数据类型：

interface GridSpec {
  readonly data: { name: string; price: number };
}

创建渲染 LyteNyte Grid 的组件：

function MyGrid() {
  const ds = useClientDataSource({ data: myData });

  const [columns, setColumns] = useState<Grid.Column<GridSpec>[]>([
    { id: "name", name: "Name" },
    { id: "price", name: "Price", type: "number" },
  ]);

  return (
    <div className="ln-light ln-grid" style={{ height: 500 }}>
      <Grid<GridSpec> rowSource={ds} columns={columns} onColumnsChange={setColumns} rowHeight={40} />
    </div>
  );
}

列至少需要一个 id 属性，且在所有列中必须唯一。

操作规则

首先确定用户使用的是 Core 还是 PRO。若不清楚，仅当所需功能需要 PRO 时才默认使用 PRO 示例；否则使用 Core 兼容 API。
仅按需加载相关参考文件，不要预先加载全部。
优先使用 LyteNyte API 与术语，除非明确比较，否则不要替换为 AG Grid、TanStack Table、MUI DataGrid 或通用网格 API。
React 示例应提供完整的 TypeScript 代码片段，包含导入、GridSpec、数据源设置、列状态、CSS 导入以及设定尺寸的网格容器。
始终包含相关 CSS 导入和具有明确高度的包裹容器。
调试时优先检查：包版本、CSS 导入、容器高度、列 ID、受控状态处理器、数据源类型，以及该功能属于 Core 还是 PRO。

参考文件路由

根据任务按需加载对应参考文件：

安装、许可、CSS 导入、CDN、水印错误 → refs/installation.md
网格设置、容器尺寸、响应式、API 参考、apiExtension、usePiece、无头模式、事件系统、行/列动画、suppressScrollFlash、viewportInitialWidth/viewportInitialHeight → refs/grid-core.md
TypeScript、GridSpec、渲染器类型、RowNode 类型守卫 → refs/typescript.md
列（id/name/field、尺寸、固定、分组、表头渲染器、跨列）→ refs/columns.md
行（高度、主从详情、全宽行、行跨行、行拖拽、行条纹、斑马纹、rowAlternateAttr）→ refs/rows.md
行选择（复选框、SelectAll、联动与隔离、受控状态）→ refs/row-selection.md
客户端数据（useClientDataSource、排序、筛选、分组、聚合、透视、增删行）→ refs/client-data-source.md
服务端数据（useServerDataSource、DataRequest/DataResponse、加载状态、刷新）→ refs/server-data-source.md
树数据（useTreeDataSource、嵌套对象、rowRootFn/rowChildrenFn）→ refs/tree-data-source.md
服务端数据无限滚动或分页 → refs/infinite-paginated-source.md
单元格渲染器、工具提示、差异闪烁、虚拟化警告、单元格范围选择（cellSelectionMode、cellSelections、多范围、剪贴板）→ refs/cells.md
单元格编辑（编辑模式、校验器、编辑渲染器、批量编辑）→ refs/cell-editing.md
筛选（文本、数字、日期、集合、快速搜索筛选模式）→ refs/filtering.md
表达式 DSL（Evaluator、ExpressionEditor、表达式筛选）→ refs/expressions.md
透视（pivotMode、PivotModel、度量、总计）→ refs/pivoting.md
导出数据（CSV、Excel、Parquet、Arrow、剪贴板）→ refs/export.md
注释（单元格高亮、单元格备注、marching ants、自定义覆盖层、annotations 属性）→ refs/annotations.md
UI 组件（SmartSelect、Menu、Popover、Dialog、PillManager、ColumnManager、TreeView、RowGroupCell、覆盖层、ViewportShadows）→ refs/components.md
主题（预构建主题、data-ln-* 属性、CSS 令牌、Tailwind、CSS Modules、Emotion）→ refs/theming.md
shadcn/ui（CLI 安装、ln-shadcn 主题、将 shadcn 组件用作渲染器/编辑器/筛选器、暗色模式、cn 工具）→ refs/shadcn.md
键盘快捷键、RTL、无障碍、React Compiler、打包、安全、版本管理 → refs/misc.md

适用场景

适用于在 React 应用中构建数据密集型表格界面的场景，包括需要客户端排序筛选分组聚合、服务端数据加载、无限滚动、树形数据、透视分析、单元格编辑与校验、数据导出、主题定制或 shadcn/ui 集成的项目。

限制

服务端数据、无限滚动/分页、树数据、透视、表达式、标签/having 筛选、部分 UI 组件、注释等为 PRO 独有功能，Core 不支持。
PRO 生产部署需许可证密钥以移除水印；许可证验证为离线进行。
具体价格、收费细节、平台支持范围等资料暂未提供。