DEV Community: RoarLyte

Official Release of LyteNyte Grid Version 2.1

RoarLyte — Thu, 30 Apr 2026 20:22:28 +0000

Ship Powerful Data Grids In Minutes With One Prompt

Building powerful, feature-rich data grids can take an agonizingly long time. LyteNyte Grid 2.1 changes that.

We didn’t want to add AI capabilities to LyteNyte Grid to chase the hype. Shipping a marginally useful AI gimmick that looks cool in a demo but gathers dust in production isn’t how we operate. We needed AI to do the heavy lifting and genuinely accelerate your workflow.

The answer was simple: Have AI build advanced data grids simply by describing what you want.

LyteNyte Grid 2.1 ships AI Skills, the grid's first set of AI-enhanced workflows. With Skills, you can go from idea to production-ready data grid in a single prompt, turning hours of development into minutes.

What’s New In LyteNyte Grid 2.1?

LyteNyte Grid 2.1 introduces AI-enhanced workflows, advanced expressions, and removes paywalls where they don’t belong:

LyteNyte Grid AI Skills (Core + PRO)

Create advanced data grids in a single prompt.
Works with Claude Code, Cursor, Windsurf, and other AI coding agents.
20+ reference files for deeper context, accuracy, and token efficiency.
Fully handles accessibility requirements out of the box.

Expression Capabilities (PRO)

Evaluate custom, application-specific expressions with a flexible expression engine.
Filter grid data with dynamic expressions that make complex rules simple to define.
Customize how expressions work using plugins to match your application’s needs.

Cell Selection & Clipboard Now Free (Core)

Single and multi-range selection, controlled state, and clipboard support, all open source.
LyteNyte Grid Core officially offers more features than other open-source data grid libraries.

Whether you need a free, open-source data grid (Core) or are shipping enterprise-scale applications that require advanced features and support (PRO), LyteNyte Grid 2.1 has you covered.

Build Faster with LyteNyte Grid AI Skills

You can think of AI Skills as the ultimate cheat code for your AI assistant.

Technically speaking, they are structured context files that your coding agent loads when interacting with LyteNyte Grid. Practically speaking, they are what stop your AI from hallucinating outdated APIs and writing broken code.

LyteNyte Grid AI Skills provide your coding agent with up-to-date, curated knowledge of the grid, so it actually knows what it’s doing. The result is advanced grid implementations generated with greater accuracy, reliability, and speed.

Instead of manually wiring together a complex grid, developers can describe what they want and let their coding agent do the heavy lifting.

Learn more: Using AI Skills.

Install LyteNyte Grid AI Skills
Skills works with Claude Code, Cursor, Windsurf, and any other coding agent that supports the Vercel Skills CLI.

Install it in one command:

npx skills add 1771-Technologies/lytenyte

Skills are installed in your project and activate automatically. You don’t need to paste documentation into the chat or tell the agent to use it. When you describe a grid task, the agent detects the Skill and starts using it.

Learn more: AI Skills Installation.

Fewer Mistakes, Better Code
LyteNyte Grid AI Skills cover virtually every aspect of building the grid, including implementation details that help prevent the most common AI mistakes. For example:

The grid container must have a defined height, or it renders blank.
All non-primitive props, such as columns, events, and apiExtension, must use stable references.
columns always require an onColumnsChange handler, or user interactions are silently discarded.
Pivoting requires spreading ds.usePivotProps() onto <Grid /> in addition to setting pivotMode: true.

These gotchas are explicitly surfaced to the agent before it writes any code, which means the code it generates is far more likely to work correctly the first time.

Why LyteNyte Grid & AI Skills?
The reasons Skills works reliably and accurately with LyteNyte Grid are a direct result of our unique architecture and design:

No Wrapper Layers: Built in React, for React. Your coding agent already understands React, so it already understands LyteNyte Grid.
Stateless & Declarative: Interfaces are unopinionated and declarative, with everything driven by props. Your AI doesn’t have to write chaotic mapping or translation code to force things to work. It directly shapes the grid based on your app’s state.
Zero Guesswork: Coding agents use well-documented React patterns that they are familiar with, leading to faster, more accurate results from simple prompts.
Accessibility: Accessibility is built directly into the grid, so your AI can skip the misery of manually hallucinating custom screen-reader properties.

Turns out, when you design an API that developers enjoy using, it translates perfectly to an AI that knows exactly what to do with it.

Powerful Expressions Capabilities

LyteNyte Grid 2.1 introduces powerful expression capabilities that bring cell-level computations, user-defined logic, and advanced filtering directly into the grid. Instead of hard-coding every rule, calculation, or filter condition, developers can give users a consistent, intuitive way to define logic alongside their data.

This functionality is delivered through four complementary features:

Expression Input Component: An intuitive UI that reduces friction when creating expressions.
Expression Engine: Powers custom, application-specific expression languages.
Advanced Expression Filter: Dynamic, logic-based filtering for complex conditions.
Expression Plugins: Provides an easy way to extend expressions and custom functions even further.

Together, these features allow developers to easily expose spreadsheet-like data manipulation directly to their end-users.

The Expression Engine & UI
LyteNyte Grid’s Expression Engine lets you inject custom calculations and application-specific logic directly into the grid, turning user-defined formulas, such as sum(Sale Revenue) / sum(Quantity Sold), into actionable data.

Under the hood, the engine parses inputs into an Abstract Syntax Tree (AST). While the grid evaluates expressions client-side for instant feedback, developers can also export the AST for server-side processing, eliminating boilerplate and accelerating workflows.

To make authoring seamless, the engine comes with an intuitive Expression Input Component. Your end users get a familiar, spreadsheet-like typing experience, and developers don't have to write any custom UI code.

Expression Filtering Done Right
Building traditional UIs for multi-condition filters is challenging for developers to maintain and can be tedious for end users to use.

Instead of forcing users to click through endless, convoluted "AND/OR" dropdowns, LyteNyte Grid’s Advanced Expression Filter solves this by letting users type complex, logic-based queries directly.

These expression-based filters scale naturally with complexity, eliminating the need for developers to build convoluted custom filter components. Since LyteNyte Grid’s expression engine is so flexible, developers can create virtually any expression language, including ones that users may already be familiar with.

Extensions For The Win
LyteNyte Grid’s expression engine is built on a plugin-based architecture. At its core, it supports simple mathematical calculations. However, its capabilities can be extended through plugins to include custom identifiers, functions, and operators.

To accelerate development, LyteNyte Grid also provides a standard set of plugins that enable a JavaScript-like expression language out of the box, helping developers get started quickly while still allowing full customization.

Cell Range Selection & Clipboard Available for Free

We’re tearing down the paywall and officially moving Cell Range Selection and Clipboard from LyteNyte Grid PRO to LyteNyte Grid Core. That means these highly requested features are now fully open-source and completely free.

We have zero interest in offering a "lite" or “hobbled” version of our open-source grid. With this shift, LyteNyte Grid Core takes the undisputed title of the most feature-rich open-source data grid on the market.
While the other grids lock essential tools like Row Grouping, Row Master Detail, and Cell Range Selection behind paywalls, we’re handing you the keys.

The 1771 Technologies team is committed to building the best open-source data grid on the web. Period.

Next Steps: All Roads Lead To 3.0

We’ve barely scratched the surface of what AI can do for your grids, and our pipeline is already packed with updates. Behind the scenes, the engineering team is already deep into building LyteNyte Grid 3.0.

We won't use a tired corporate cliché like "game-changing," but let's just say the gap between us and the competition is about to become a canyon.

If there is a feature you have in mind? Let us know on GitHub, or check out our live demo for more.

Give LyteNyte Grid a go, it’s one NPM install away

npm install @1771technologies/lytenyte-core

Get Started Now

Try the interactive demo. See LyteNyte Grid PRO in action.
Compare license plans. Choose the right fit for your team.

Or start building with the free LyteNyte Grid Core edition. It’s open-source, memory-efficient, and ready to drop into your next React project.

Official Release of LyteNyte Grid Version 2.0

RoarLyte — Tue, 17 Mar 2026 12:56:21 +0000

100% Stateless. The Way Data Grids & Data Tables Should Work

LyteNyte Grid 1.0 dropped with a ~40kb bundle size, headless or pre-styled modes, a declarative API, 150+ features, and lightning-fast performance.

However, like every React data grid in existence, its design still led developers to write code using the dreaded useEffect or similar effect handlers, particularly when syncing state with URL params. While LyteNyte Grid 1.0 is less opinionated than other data grid libraries, it still enforces opinionated structures for sort, filter, and group models, creating friction when your data source doesn’t fit our mold.

These problems aren’t unique to LyteNyte Grid. Our competitors ignore them; some call them “features”, but every data grid hits this wall. Until today! LyteNyte Grid 2.0 is the only grid that fully solves them.

What’s New in LyteNyte Grid 2.0?

Great developer experience means the data grid gets out of your damn way. So, LyteNyte Grid 2.0 has gone 100% stateless and fully prop-driven. Meaning you can configure it declaratively from your state, whether it’s URL params, server state, Redux, or whatever else you can imagine.

Statelessness is not the only improvement. LyteNyte Grid 2.0 is stacked with improvements:

Limitless API Extensions

Extend API and column definitions with your own properties and methods
100% type-safe, naturally

Hybrid Headless Mode

Sensible default child configuration
Up to 90% less boilerplate

Native Tree Data

Directly supports object-based data
Deep nesting works out of the box

Brand New Components

Standalone Smart Select, Tree View, Menus, Dialogs
Utilities to cut boilerplate

Featherweight Bundle Size

PRO: 40kb (down 18% from 49kb)
Core: 30kb (down 14% from 35kb)

Heavy-Hitting New Features

Post-group filters, pivot grand totals, resizable column groups
Row tree collapsing and advanced label filtering

Improved Documentation

+130 guides that cover real-world scenarios
Live demos, detailed code explanations

If you need a free, open-source data grid (Core) or are shipping enterprise-scale applications that demand advanced features and support (PRO), LyteNyte Grid 2.0 has you covered.

Limitless API Extensions

LyteNyte Grid 2.0 now supports virtually unlimited extensibility because we acknowledge that only you understand your business logic best.

You can now extend the Grid API and column definitions with your own custom properties and methods, all fully type-safe. Instead of making you rebuild your app around our ego, we designed the grid to fit your architecture.

Hybrid Headless Mode

LyteNyte Grid 1.0 is fully headless. LyteNyte Grid 2.0 keeps that power and remains headless, but now provides a sensible default child configuration. This lets you get up and running quickly without writing the ‘Mount Everest’ of boilerplate.

Developers can now simply write:

<Grid {...props} />

Instead of:

<Grid.Root>
  <Grid.Viewport>
    <Grid.Header>
      {headerRows.map((row, i) => {
        return (
          <Grid.HeaderRow key={i} headerRowIndex={i}>
            {row.map((c) => {
              if (c.kind === "group") return <Grid.HeaderGroupCell />;
              return <Grid.HeaderCell />;
            })}
          </Grid.HeaderRow>
        );
      })}
    </Grid.Header>

    <Grid.RowsContainer>
      <Grid.RowsCenter>
        {rows.map((row) => {
          if (row.kind === "full-width") return <Grid.RowFullWidth />;
          return (
            <Grid.Row row={row} key={row.id}>
              {row.cells.map((c) => (
                <Grid.Cell />
              ))}
            </Grid.Row>
          );
        })}
      </Grid.RowsCenter>
    </Grid.RowsContainer>
  </Grid.Viewport>
</Grid.Root>

Native Tree Data

Tree Data got completely reworked in LyteNyte Grid 2.0. Instead of forcing array-based path structures, the grid now works directly with object-based data.

We ditched “Tree Data Mode”. Most tree-data needs were already handled by the standard client grid, yet most grids force you to flatten nested objects into array paths just to render a hierarchy. We don’t.

LyteNyte Grid works directly with your nested object data, so it can render and edit deep hierarchies natively.

Brand New Components

LyteNyte Grid 2.0 ships with a high-performance component suite you can run with the grid or use independently:

Smart Select: Component for combobox or multi-chip selection.
Tree View: Built as a grid variant for specialized hierarchies.
Menus & Dialogs: Fully functional context menus and a general-purpose dialog component.

Since we dislike repetitive setup as much as you do, we’ve also shipped utility components and helpers that minimize grid-related boilerplate.

Featherweight Bundle Size

We tightened the codebase to make LyteNyte Grid 2.0 significantly faster and lighter, even with the new features.

Core (Free Edition): 30kb gzipped (Down from 35kb).
Pro (Commercial Edition): Under 40kb gzipped (Down from 49kb).

Less code. More power.

Heavy Hitting New Features

DX wasn’t the only upgrade. We loaded 2.0 with a wide range of new features:

Post-group filters
Row group tree collapsing
Resizable column groups
Label filtering
Grand total rows for pivot mode

And a hell of a lot more.

Improved Documentation

We know developers don’t want to read documentation, mostly because docs are typically awful. That’s why we fixed ours. We didn’t merely wish you luck and automatically generate an API reference.

We wrote 130+ in-depth guides, each with thorough explanations, real-world demos, and code examples. Everything you would need to get productive with LyteNyte Grid fast.

Next Steps: Beyond The Opening Act

This is only the beginning for us. LyteNyte Grid 2.0 has been significantly shaped by feedback from existing users, and we’re grateful for it. We have a steady slate of features planned, including rollout headers, advanced expression filters, and more.

If there is a feature you have in mind? Let us know on GitHub, or check out our live demo for more.

Give LyteNyte Grid a go, it’s one NPM install away

npm install @1771technologies/lytenyte-core

Get Started Now

Try the interactive demo. See LyteNyte Grid PRO in action.
Compare license plans. Choose the right fit for your team.

Or start building with the free LyteNyte Grid Core edition. It’s open source, memory efficient, and ready to drop into your next React project.