lytenyte-grid

一款 React 数据网格，具备排序、筛选、列固定、单元格选择、行选择、服务器数据加载、无限数据加载、行分组与聚合、透视等高级功能，以及更多功能。

LyteNyte Grid 是一款无头或预设样式的 React 数据网格，提供两个版本：

• Core — @1771technologies/lytenyte-core（Apache 2.0，免费，无需许可证）
• PRO — @1771technologies/lytenyte-pro（商业版，包含 Core 的全部功能）

PRO 许可： PRO 可免费安装并用于评估，无需许可证密钥即可试用。未设置密钥时会显示水印（“用于评估”）。

使用规则

• 首先确定用户使用的是 Core 还是 PRO。如果不明确，仅当所需功能需要 PRO 时才使用 PRO 示例；否则使用与 Core 兼容的 API。
• 仅从下表加载相关参考文件。不要一开始就加载所有参考文件。
• 优先使用 LyteNyte API 和术语。除非明确进行比较，否则不要替换为 AG Grid、TanStack Table、MUI DataGrid 或通用网格 API。
• 提供 React 示例时，请给出完整的 TypeScript 代码片段，包含导入、GridSpec、数据源设置、列状态、CSS 导入和具有明确尺寸的网格容器。
• 始终包含相关的 CSS 导入，以及具有明确高度的包装容器。
• 调试时，首先检查以下内容：软件包版本、CSS 导入、容器高度、列 ID、受控状态处理程序、数据源类型，以及该功能属于 Core 还是 PRO。

生产部署需要许可证密钥才能移除水印。许可证验证在本地进行； 不会发起网络请求。如果用户正在构建或制作原型，尚未设置许可证也没关系——可以在发布前添加。

快速入门

1. 首先导入 LyteNyte Grid 及其对应的 CSS 文件。

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

   如果使用 LyteNyte Grid Core：

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

2. 创建 Grid Spec 类型，为 LyteNyte Grid 中要显示的数据提供类型。

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

3. 使用 LyteNyte 软件包导出的 Grid 组件，创建一个用于渲染 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>
     );
   }
   

   在此处，我们也在组件中定义列。LyteNyte Grid 的列至少需要一个 id 属性，该属性在所有列中必须唯一。详情请参阅列参考。

按需加载参考文件

仅在任务需要时读取参考文件。不要一开始就加载所有文件。

当任务涉及……	加载此文件
安装、许可、CSS 导入、CDN、水印错误	refs/installation.md
网格设置、容器尺寸、响应性、API 参考、apiExtension、usePiece、无头模式、事件系统（cell/row/viewport 事件）、行/列动画、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
注释——突出显示单元格、单元格备注、蚂蚁线、自定义叠加层、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

功能可用性与参考文档路由

决定以下事项时，请先使用此文件：

1. 用户需要 Core 还是 PRO
2. 接下来要加载哪个参考文件

规则

• 如果用户请求的功能中有任何一项仅限 PRO，请使用 PRO。
• 确定版本后，加载下方列出的最具体的参考文件。
• 不要加载所有参考文件。

PRO 专属功能

用户请求的功能	版本	加载
服务端数据、服务端排序／筛选／分组、useServerDataSource	PRO	refs/server-data-source.md
无限滚动、分页式服务端行	PRO	refs/infinite-paginated-source.md
树形数据、嵌套对象行、useTreeDataSource	PRO	refs/tree-data-source.md
数据透视表、透视模式、度量值、总计	PRO	refs/pivoting.md
表达式、表达式筛选器、表达式编辑器	PRO	refs/expressions.md
标签筛选器、having 筛选器	PRO	refs/filtering.md
SmartSelect、PillManager、Menu、Dialog、TreeView、ColumnManager、RowGroupCell、SelectAll	PRO	refs/components.md
注释、单元格备注、蚂蚁线、自定义叠加层、annotations 属性	PRO	refs/annotations.md

Core 兼容功能

用户请求的功能	版本	加载
安装、许可证、水印、包管理器、CDN	Core/PRO	refs/installation.md
网格设置、响应性、事件、API 扩展、无头模式、动画、滚动闪烁、初始视口	Core/PRO	refs/grid-core.md
TypeScript、GridSpec、行节点类型	Core/PRO	refs/typescript.md
列、尺寸调整、固定、可见性、分组、表头	Core/PRO	refs/columns.md
行高、行固定、行拖动、全宽行、主从详情、行条带、斑马纹	Core/PRO	refs/rows.md
行选择、复选框选择、联动／独立选择	Core/PRO	refs/row-selection.md
客户端数据、排序、筛选、分组、聚合	Core/PRO	refs/client-data-source.md
单元格渲染器、工具提示、差异闪烁、单元格／区域选择、剪贴板	Core/PRO	refs/cells.md
单元格编辑、验证、编辑器、批量编辑	Core/PRO	refs/cell-editing.md
文本／数字／日期／集合／树形集合筛选器、快速搜索	Core/PRO	refs/filtering.md
CSV、Excel、Parquet、Arrow、剪贴板导出	Core/PRO	refs/export.md
主题、CSS 令牌、Tailwind、CSS Modules、Emotion	Core/PRO	refs/theming.md
shadcn/ui 设置或 ln-shadcn	Core/PRO	refs/shadcn.md
键盘、无障碍、RTL、React Compiler、打包、安全	Core/PRO	refs/misc.md

含糊的用户请求

用户说	理解为	加载
“advanced filter”	确认他们指的是 set/tree-set 筛选器，还是 PRO expression/having 筛选器	refs/filtering.md，可能还需要 refs/expressions.md
“tree”	可能指 TreeView 组件或树形数据	refs/components.md 或 refs/tree-data-source.md
“grouping”	通常指客户端行分组，除非提到服务端数据	refs/client-data-source.md
“pagination”	通常指服务端分页行	refs/infinite-paginated-source.md
“context menu”	预置的 Menu 组件	refs/components.md
“custom visibility panel”	自定义 Core 实现或 PRO ColumnManager	refs/columns.md，可能还需要 refs/components.md