v2.0.2 (Latest)

The latest changelog for LyteNyte Grid. Track new features, improvements, and changes with each release.

v2.0.2

Mar 8, 2026

Fixed Smart Select not displaying selection list when open.
Fixed Column Manager not correctly rendering split column groups.
Fixed multi range selection deselecting a larger selection rectangle when only a single cell is deselected.

v2.0.1

Feb 20, 2026

Published package README changes.

LyteNyte Grid v2 improves on v1 in almost every aspect. The primary focus of this release is the grid’s developer experience. LyteNyte Grid is designed to fit your application, not force your application to fit the grid.

v2 is smaller, faster, more lightweight, and more capable than v1. It achieves these improvements in three key ways:

Removal of the useLyteNyte hook in favor of a completely prop-driven grid.
Introduction of API and column extensions.
A predefined headless configuration.

In addition, v2 includes many minor and quality-of-life improvements, along with significant enhancements to existing features.

New Grid Features

Use the cellSelectionExcludeMarker grid property to prevent selection of the marker column.
Use the cellSelectionMaintainOnNonCellPosition grid property to prevent clearing cell selection when focus moves to a non-grid element.
The columnMoveDragPlaceholder and columnGroupMoveDragPlaceholder properties allow you to specify a custom drag indicator when moving columns or column groups.
The columnGroupRenderer property allows you to provide a custom React component to render column groups.
Use the events property to define event handlers for any standard HTML event on any part of the grid, such as cells, rows, or headers. Event handlers receive additional contextual information.
Use the styles property to apply inline styles and classes to grid elements.
Use the rowAlternateAttr property to disable the row-alternating data attribute.
Use the rowDropAccept property to allow rows from other grids to be dragged into the current grid.
Use the ref property to obtain a reference to the grid API.
Use the slotShadows property to render the new Viewport Shadows component.
Use the slotViewportOverlay and slotRowsOverlay properties to render custom overlay components.
editMode now supports full row editing.
The onColumnMoveOutside event detects when a column is dragged outside the grid.
Pivot mode now supports a Grand Totals row.
Pivot columns can now be processed and alternated before the grid renders them.
Column Groups can now be used to resize all columns under the group if the child columns are resizable.
The pivotModel now supports label filtering.
You can now apply label filters to the client row source.
You can now apply having filters (post-grouping filters) to the client row source.
All grid row sources now directly support adding and deleting rows.
Client row groups can now be flattened when a group has a single leaf child.
Row selection now supports two modes:
1. Isolated row selection, where each row maintains its own selection state.
2. Linked row selection, where a row group’s selection state links to the selection state of its children.
You can now exclude individual rows from the set of selectable rows.
The client row source can now suppress automatic expansion to the leaf row.
The client row source now supports unbalanced row groups with varying levels of depth. This capability replaces the existing tree data source and satisfies both use cases.
The tree data source now accepts object-based data instead of array-based data.
- Render arbitrary objects.
- Edit object data.
- Build advanced tree views.
New components and utilities:
- A headless SelectAll component for selecting or deselecting all rows.
- A RowGroupCell component for managing row group expansion.
- A simple TreeView component that renders a specially configured version of LyteNyte Grid.
- A SmartSelect component that you can use as a custom dropdown, combobox, or multi-combobox.
- A Dialog component for grid-specific dialogs or general application dialogs.
- A Popover component for grid features or general popover usage.
- A Menu component for general-purpose dropdown menus.

Grid Property Changes

The cellSelectionExcludeMarker property has been added. This property prevents marker column selection.
The onCellSelectionChange property has been added. This property handles cell selection updates.
The colScanDistance property has been removed. The grid now determines the appropriate scan distance automatically.
The rowFullWidthPredicate and rowFullWidthRenderer parameters now receive the grid API instead of the grid state object.
The sortModel, filterModel, filterInModel, rowGroupModel, and aggModel properties have been removed. These models now live on the grid’s row data sources. You can now define custom models.
The rowGroupColumn property now accepts false to disable it. The rowGroupDisplayMode property has been removed.
The rowGroupDefaultExpansion and rowGroupExpansion properties now live on the row data source.
The cellRenderers, floatingCellRenderers, headerCellRenderers, and editRenderers properties have been removed. These properties are no longer required.
rowSelectionActivator now uses "single-click" instead of "single".
The rowDetailRenderer now receives the grid API instead of the grid state object.
The editCellMode property has been renamed to editMode.
The editRowValidatorFn now receives the updated edit parameters.
The columnMarkerEnabled property has been removed. Enable the marker column through the marker column definition.
The rowDataSource property has been renamed to rowSource.
The rowSelectedIds property has been removed. The row data source now manages row selection.
The rowSelectChildren property has been removed. Use linked row selection instead.
The quickSearch and quickSearchSensitivity properties have been removed. Define quick search at the row source level.
The columnPivotMode and columnPivotModel properties have been removed. Handle column pivoting at the row source level.
The dialogFrames and popoverFrames properties have been removed. You can now trigger dialogs and popovers without these properties.

Column Property Changes

The headerRenderer, cellRenderer, floatingCellRenderer, and editRenderer properties no longer accept a string value for a pre-registered renderer. Resolve the renderer before providing the column definitions to the grid.
The quickSearchIgnore property has been removed. Quick search is now opt-in.
The uiHints property has been removed. Column extensions now replace this functionality.
The resizable property has been added. It indicates whether the column can be resized.
The movable property has been added. It indicates whether the column can be moved.
The editOnPrintable property has been added. It determines whether a cell edit begins when a printable character is pressed.
The editMutateCommit property has been added. This callback function mutates edit data before the grid updates the row.

All function parameter types on the Column type now reflect the updated grid API and Column extension system introduced in v2.

The colSpan and rowSpan functions now receive api, column, row, rowIndex, and colIndex. The grid parameter has been removed.
The field function now receives row data to compute the value. The grid, column, and data parameters have been removed. These parameters are not required in v2 and are not available in every execution context.
The headerRenderer function now receives api and column. The grid parameter has been removed.
The cellRenderer function now receives api, column, rowIndex, colIndex, selected, indeterminate, detailExpanded, editData, and layout. The grid, rowSelected, rowPin, and rowIndeterminate parameters have been removed.
The editRenderer function now receives api, row, column, rowIndex, colIndex, editValue, changeValue, editData, editValidation, changeData, commit, cancel, and layout. The grid parameter has been removed.
The editable function now receives api instead of grid.
The editSetter parameters have been reworked to provide data change types and the grid API instead of the grid state object.

API Property Changes

The cellSelection method has been added to retrieve the current grid selection state.
The xPosition$ and yPosition$ properties have been added to provide reactive access to the grid’s coordinate positions.
The viewport$ property has been added to provide reactive access to the grid’s viewport state.
The columnView method has been added to retrieve a description of the currently visible columns.
The rowDetailIsExpanded property has been renamed to rowDetailExpanded.
The rowDetailRenderedHeight property has been renamed to rowDetailHeight.
The rowIsAggregated method has been added to determine whether a row is aggregated.
The rowGroupIsExpanded method has been renamed to rowIsExpanded.
The rowIsExpandable method has been added to determine whether a row can be expanded.
The rowView method has been added to retrieve a description of the current row view.
The exportDataRect method has been renamed to exportData.
The editUpdate method has been split into two focused methods: editUpdateRows and editUpdateCell.
The useRowDrag hook now provides streamlined drag parameters.
The columnIndex method has been removed. Use the columnView method instead.
The sortForColumn method has been removed. A column’s sort index now derives from the defined sort model.
The rowGroupColumnIndex method has been removed. The grid now creates only a single row group column.
The rowGroupApplyExpansions method has been removed. The grid no longer requires this method.
The eventAddListeners, eventRemoveListener, and eventFire methods have been removed. LyteNyte Grid no longer maintains a custom event system.
The exportCsv and exportCsvFile methods have been removed. Use the more flexible exportData method instead.
The dialogFrameOpen, dialogFrameClose, popoverFrameOpen, and popoverFrameClose methods have been removed. The grid no longer manages dialog or popover state.
The rowSelect method can now select all rows. The rowSelectAll method has been removed.

LyteNyte Grid now extends the Grid API with additional methods and properties based on the provided row source. The following properties from v1 have changed or are now supplied by the row source:

rowById is now provided by the row source.
rowByIndex is now provided by the row source.

Client Row Source Changes

The useClientRowDataSource hook has been renamed to useClientDataSource. The useClientRowDataSourcePaginated hook has been removed. You can use useClientDataSource for paginated client data, but this approach is not recommended. When all data exists on the client, pagination introduces unnecessary complexity and is generally an anti-pattern.

The useClientDataSource hook now treats the row source as a derived value based on the provided properties. As a result, the hook behaves like useMemo rather than useState.

bottomData has been renamed to botData.
reflectData has been removed. This property is no longer required.
rowIdLeaf has been renamed to leafIdFn.
rowIdBranch has been renamed to groupIdFn.
transformInFilterItem has been removed. The client source no longer owns the data, and filter items can now be derived directly from the data.

The client row source is now responsible for:

Column pivoting and pivot mode.
Managing row group expansion state.
Sorting, filtering, and aggregating row nodes.
Managing row selection state.
Creating, updating, and deleting rows.

In v1, the grid managed these responsibilities and indirectly delegated them to the client source. This design required the grid to initialize before you could safely use client source state.

In v2, the grid removes this indirection. The client source is immediately usable, regardless of whether the grid has mounted.

Server Row Source Changes

The useServerDataSource hook is more capable in v2 while maintaining the same level of simplicity as v1.

dataFetcher has been renamed to queryFn. The grid no longer passes built-in data models to this function. You can now define and manage your own custom models.
dataFetchExternals has been renamed to queryKey. The queryKey property is now strongly typed through a generic parameter.
dataColumnPivotFetcher has been removed. Fetch pivot columns directly inside your query handler.
dataInFilterItemFetcher has been removed. Fetch filter items directly inside your query handler.
cellUpdate has been renamed to onRowDataChange to keep prop names consistent across row data sources.
cellUpdateOptimistically has been renamed to rowUpdateOptimistically.

The server data source now also manages:

Row group expansion state.
Row selection state.

The server data source can now:

Delete rows.
Add rows.

Tree Row Source Changes

The tree data source from v1 has been removed. Use the client data source as a replacement.

v2 introduces a new, more advanced tree data source designed specifically for object-based data. Because this implementation is entirely new, there is no direct migration path or property mapping from v1.

See the Tree Overview guide for more details.

Components Changes

The SortManager and ListBox components have been removed. You can recreate their functionality using the new components provided by LyteNyte Grid.

The PillManager component replaces the ListBox component. PillManager supports reordering and activating pill items.

The ColumnManager component has been simplified and is now more opinionated in its behavior. You can use it as a drop-in column manager. For more flexible and configurable tree structures, use the new TreeView component available in LyteNyte Grid.

Theme Token Changes

LyteNyte Grid v2 introduces more clearly defined theme tokens while preserving the existing color palette. The theme CSS is now split into separate files.

See the Grid Theming guide for more details.

Migration from v1.x

This section provides a high-level overview of migrating from v1 to v2 of LyteNyte Grid. If you have questions, open an issue on GitHub.

There are two primary changes required to migrate to v2:

Render the default grid instead of composing the grid from headless parts.

Replace this v1 code:

1
<Grid.Root grid={grid}>
2
  <Grid.Viewport>
3
    <Grid.Header>
4
      {view.header.layout.map((row, i) => {
5
        return (
6
          <Grid.HeaderRow key={i} headerRowIndex={i}>
7
            {row.map((c) => {
8
              if (c.kind === "group") return null;
9

10
              return <Grid.HeaderCell key={c.id} cell={c} />;
11
            })}
12
          </Grid.HeaderRow>
13
        );
14
      })}
15
    </Grid.Header>
16
    <Grid.RowsContainer>
17
      <Grid.RowsCenter>
18
        {view.rows.center.map((row) => {
19
          if (row.kind === "full-width") return null;
20

21
          return (
22
            <Grid.Row row={row} key={row.id}>
23
              {row.cells.map((c) => {
24
                return <Grid.Cell key={c.id} cell={c} />;
25
              })}
26
            </Grid.Row>
27
          );
28
        })}
29
      </Grid.RowsCenter>
30
    </Grid.RowsContainer>
31
  </Grid.Viewport>
32
</Grid.Root>

With this v2 code:

1
<Grid />

If you need access to the internal grid parts, see the Headless Component Parts guide.

Note

If your only customizations involved attaching event listeners or applying styles, set the styles and events props on the Grid component instead of breaking the grid into headless parts.

Remove the useLyteNyte hook (and the corresponding call to useView). Pass props directly to the Grid component.

Instead of:

1
const grid = Grid.useLyteNyte({
2
  gridId: useId(),
3
  rowDataSource: ds,
4
  columns,
5
  editCellMode: "cell",
6
  columnBase: {
7
    editable: true,
8
    widthFlex: 1,
9
  },
10
});

Use:

1
<Grid rowSource={ds} editMode="cell" columnBase={{ editable: true, widthFlex: 1 }} />

The gridId property is no longer required.

The steps above cover the primary migration changes. Review the changelog for property renames and removals. TypeScript should surface most required updates.

Remove Effect Code

v2 is fully prop-driven. Remove any synchronization logic that mutates grid state through useEffect.

For example:

1
const rowHeightParam = useRowHeightParam();
2

3
const grid = useLyteNyte({ rowHeight: rowHeightParam });
4

5
useEffect(() => {
6
  grid.state.rowHeight.set(rowHeightParam);
7
}, [grid, rowHeightParam]);
8

9
return <Grid.Root grid={grid}>{/* ... */}</Grid.Root>;

Replace it with:

1
const rowHeightParam = useRowHeightParam();
2

3
return <Grid rowHeight={rowHeightParam} />;

Replacing the Predefined Models

In v1, LyteNyte Grid predefined filter, sort, and group models. In v2, your code defines these models dynamically.

See the following guides for the updated approach: