version: "1.0.1" name: lytenyte-grid description: > Use this skill when the user is working with LyteNyte Grid (@1771technologies/lytenyte-pro or @1771technologies/lytenyte-core), a headless React data grid. Activate for tasks like: installing or licensing LyteNyte Grid, configuring columns or rows, building cell renderers or editors, adding filters or sort controls, grouping or aggregating rows, pivoting, exporting to CSV/Excel/Parquet/Arrow, row selection, cell range selection, theming or styling, TypeScript GridSpec patterns, server-side or tree data, annotations, cell notes, marching ants, row/column animations, row banding, scroll flash suppression, and any PRO component (SmartSelect, PillManager, Menu, Dialog, TreeView, RowGroupCell). Also activate when the user describes grid problems without naming the package — e.g. "my rows won't group", "cells aren't editable", "add a loading overlay", "pin this column", "the filter isn't working", "how do I export this table", "select a range of cells", "copy cells to clipboard", "build me a grid", "animate rows", "highlight cells", "add a note to a cell". compatibility: React 18+. Designed for Claude Code and similar AI coding agents. metadata: author: 1771 Technologies docs: https://www.1771technologies.com/docs

A React Data Grid with advanced features like sorting, filtering, column pinning, cell selection, row selection, server data loading, infinite data loading, row grouping and aggregations, pivoting, and many more features.

LyteNyte Grid is a headless or pre-styled React data grid with two editions:

• Core — @1771technologies/lytenyte-core (Apache 2.0, free, no license required)
• PRO — @1771technologies/lytenyte-pro (commercial, superset of Core)

PRO licensing: PRO can be installed and used freely for evaluation — no license key is needed to try it. A watermark ("used for evaluation") appears when no key is set.

Operating Rules

• First determine whether the user is using Core or PRO. If unclear, default examples to PRO only when the requested feature requires PRO; otherwise use Core-compatible APIs.
• Load only the relevant reference files from the table below. Do not load every reference upfront.
• Prefer LyteNyte APIs and terminology. Do not substitute AG Grid, TanStack Table, MUI DataGrid, or generic grid APIs unless explicitly comparing.
• For React examples, provide complete TypeScript snippets with imports, GridSpec, data source setup, columns state, CSS import, and a sized grid container.
• Always include the relevant CSS import and a wrapper with an explicit height.
• When debugging, check these first: package edition, CSS import, container height, column IDs, controlled state handlers, data source type, and whether the feature is Core or PRO.

A license key is required to remove the watermark for production deployments. License validation is offline; no network request is made. If the user is building/prototyping and hasn't set up a license yet, that is fine — they can add it before shipping.

Quick Start

1. Start by importing LyteNyte Grid and its associated CSS file.

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

If you are using LyteNyte Grid Core:

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

1. Create a Grid Spec type to provide the grid with types for the data that will be displayed in

LyteNyte Grid.

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

1. Create a component that renders LyteNyte Grid using the Grid component exported from the

LyteNyte package.

```tsx 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> ); } ```

Here we define the columns in the component as well. LyteNyte Grid columns require at a minimum an id property, which must be unique among all the columns. See the Columns Ref for more details.

Load References On Demand

Read a reference file only when the task requires it. Do not load all files upfront.

Feature Availability & Reference Routing

Use this file first when deciding:

1. whether the user needs Core or PRO
2. which reference file to load next

Rules

• Use PRO when any requested feature is PRO-only.
• After deciding edition, load the most specific reference file listed below.
• Do not load every reference file.

PRO-Only Features

Core-Compatible Features

Ambiguous User Requests