LyteNyte Grid Documentation

Server data loading allows LyteNyte Grid to handle massive datasets (millions of rows) by using partial data loading. Instead of transferring the entire dataset to the browser, the grid requests only the necessary rows from the server based on the user's current view.

LyteNyte Grid supports three primary loading strategies:

• Pagination: Loading data page by page.
• Infinite scrolling: Lazily loading data as the user scrolls down.
• Viewport-based loading: Loading only the rows currently visible in the viewport (the primary focus of the server data source).

This approach provides direct row interaction (e.g., jumping to row 9,500) and natively supports complex operations like pivoting and grouping that are difficult to implement with standard pagination.

LyteNyte Grid is a high-performance React data grid designed for developer experience (DX) and performance. Key characteristics include:

• Performance: Up to 7x faster than competing grids, handling up to 10,000 updates/sec and millions of rows at just 40 KB gzipped.
• Feature Rich: Includes 150+ built-in features such as server-side data loading, infinite scrolling, pivoting, tree views, filtering, row grouping, and cell editing.
• Declarative & Type-Safe API: A 100% type-safe API that allows extending column definitions and props without wrappers or extra dependencies.
• Flexible Styling: Supports both a headless mode for ultimate customization and pre-built themes for rapid development.
• Stateless & Prop-Driven: The grid is driven by your state (URL params, server state, etc.), ensuring zero synchronization headaches.

The documentation is built using Next.js and Fumadocs. Key files and routes include:

• lib/source.ts: Contains the content source adapter. The loader() function provides the interface to access your content.
• lib/layout.shared.tsx: Contains shared layout options.
• app/(home): Route group for the landing page and other general pages.
• app/docs: The main documentation layout and pages.
• app/api/search/route.ts: The Route Handler responsible for search functionality.

LyteNyte Grid is available in two main editions:

LyteNyte Grid Core (Open Source)

• Cell Range Selection: Single and multi-range selection, controlled state, and clipboard support.
• Basic Grid Functionality: Memory-efficient, declarative React components.

LyteNyte Grid PRO (Enterprise)

• AI Skills: Enhanced workflow for AI coding agents.
• Expression Capabilities: Full expression engine, input component, advanced filtering, and plugin system.
• Advanced Features: Includes features like Row Grouping and Row Master Detail.

The LyteNyte Grid Core edition is an open-source, memory-efficient version of the grid (approximately 36kb gzipped). It provides several advanced data handling features out of the box, including:

• Row grouping: Organize data into hierarchical groups.
• Master-detail rows: Expand rows to show detailed information.
• Data aggregation: Perform calculations and summaries on your data sets.

It is designed for high-performance React applications such as dashboards, admin panels, and internal tools.

Measure Right is a library designed to measure the runtime performance and memory usage of UI components and applications. It allows you to define specific tasks (benchmarks) and execute them across multiple iterations in a controlled browser environment.

import { run, wait, expect } from "@1771technologies/measure-right";

LyteNyte Grid is designed to meet WCAG 2.0 guidelines at levels A, AA, and AAA. Achieving Level AA compliance typically satisfies ADA standards.

The grid achieves this by using ARIA (Accessible Rich Internet Applications) attributes on rows, cells, and headers, allowing screen readers to interpret the grid's structure and content correctly. Even when virtualization is enabled, the grid renders cells and headers in natural DOM order to ensure correct parsing by assistive technologies.

A Row Data Source is the abstraction LyteNyte Grid uses to load, manage, and render rows. It acts as the bridge between your raw data and the grid's viewport, handling the logic for how data is presented.

Key responsibilities of a Row Data Source include:

• Reporting total row counts (including pinned top/bottom rows).
• Retrieving specific rows by index or ID.
• Running data aggregations and creating dynamic pivots.
• Updating row data in place.
• Managing in-filter items and pagination.

LyteNyte Grid PRO includes an advanced expression system that allows for spreadsheet-like data manipulation. This system is composed of four main parts:

1. Expression Engine: Parses inputs into an Abstract Syntax Tree (AST). It evaluates expressions client-side for instant feedback and allows exporting the AST for server-side processing.
2. Expression Input Component: A built-in UI component that provides users with a familiar, spreadsheet-like typing experience for creating expressions.
3. Advanced Expression Filter: Enables users to type complex, logic-based queries directly into the grid instead of using traditional dropdown-based filters.
4. Expression Plugins: A plugin-based architecture that allows you to extend the engine with custom identifiers, functions, and operators (e.g., adding JavaScript-like capabilities).

LyteNyte Grid uses a declarative sortModel to manage sorting state. It is important to note that the grid itself does not perform the sorting logic on the data. Instead, the grid provides a sortModel (an array of sort configurations) to your row data source. Your data source is responsible for reading this model, applying the appropriate sorting logic to the data, and returning the sorted rows to the grid.

Each item in the sortModel array conforms to the SortModelItem interface and defines which column to sort, the sort kind, and the direction.

// Example of a single sort configuration item
{
  columnId: "age", 
  sort: { kind: "number" }, 
  isDescending: false 
}