v1.0.18 (Latest)

Copy Page

v1.0.18

Adds LyteNyte Grid to the shadcn registry. See the installation guide to get started with LyteNyte Grid in shadcn.

Introduces three new prebuilt themes for LyteNyte Grid: shadcn light, shadcn dark, and cotton candy. See the demo for live examples, or refer to the theming guide for instructions on using the prebuilt themes.

v1.0.17

Enhanced useServerDataSource interfaces. This patch adds several useful server data loading methods available from the returned server data source hook:

const ds = useServerDataSource({ });

ds.[method_name] // use method here

• refresh: Triggers a new data fetch for the current view. Enables easy polling.
• requestForGroup: Returns the DataRequest for a given group row.
• requestForNextSlice: Returns the DataRequest for the next slice to aid optimistic data fetching.
• requestsForView: Returns the DataRequests for the current view.
• seenRequests: A writable set that lets users clear or add request IDs to LyteNyte Grid's seen requests cache.

Additionally, the useServerDataSource hook now accepts an optional dataFetchExternals dependency array. Use this to make the server data source depend on external React state.

See the server data loading guides for full details on using the server data source in LyteNyte Grid.

Other Fixes

• Fixed full-width rows in Firefox not being positioned correctly in the view.

v1.0.16

Bug fixes for Firefox

• Fixed columns pinned to the end of the grid not staying in place while scrolling.
• Fixed master-detail rows causing overflow.
• Fixed column header dragging for swapping columns.

v1.0.0

LyteNyte Grid v1.0.0 marks the official stabilization of the LyteNyte Grid API. This release incorporates lessons learned from earlier iterations and developer feedback, with a strong focus on flexibility.

At a glance, v1.0.0 delivers:

• Stabilized public interfaces, going forward, only minor changes are expected.
• Headless rendering interfaces, prior versions used a “black-box” component, which made extensions difficult. The new headless API is intuitive for React developers and makes future improvements easier without breaking changes.
• Improvements across the board, better memory usage, higher performance, and reduced bundle size.

Migration from v0.9.x

Column Definition Changes

• headerName → name
• headerAutosizeFn → autosizeHeaderFn
• cellAutosizeFn → autosizeCellFn
• cellAutosizeFn removed. Instead, define only the columns you want to autosize in the API.
• type now accepts arbitrary strings and includes support for datetime. The complex type has been removed.
• aggFnsAllowed and aggFnDefault moved to uiHints. Any column can now be aggregated without explicit configuration.
• hidable removed. All columns are now hidable.
• Editing props consolidated. cellEditPredicate, cellEditParser, cellEditUnparser, cellEditProvider, cellEditParams, and cellEditRowUpdater are replaced by editRenderer, editSetter, and editable. See our cell editing guide.
• sortable moved to uiHints. All columns are sortable when added to the sort model.
• sortCycle and sortComparator removed. Define custom logic in your own code as needed.
• inFilterLabelFormatter removed. Now handled at the row data source level.
• inFilterField removed. no longer needed.
• quickSearchField removed. no longer needed.
• groupVisibility simplified to always, open, or closed.
• rowGroupable moved to uiHints. Any column can now be grouped when added to the group model.
• rowGroupField removed. The row group model now accepts a field object directly, making it more flexible.
• measureFnsAllowed and measureFnDefault removed. The pivot model now accepts an aggregation model.
• resizable and movable moved to uiHints.

LyteNyte State

• aggFns removed. Aggregations are now defined at the row data source level.
• autosizeDoubleClickHeader → columnDoubleClickToAutosize
• cellEditPointerActivator → editClickActivator
• cellEditProviders → editRenderers
• columnHeaderHeight → headerHeight
• columnHeaderRenderers removed. unnecessary in headless mode.
• columnGroupHeaderHeight → headerGroupHeight
• columnGroupHeaderRenderer removed. unnecessary in headless mode.
• columnGroupStickHeaders removed. unnecessary in headless mode.
• columnGroupIdDelimiter → columnGroupJoinDelimiter (clearer naming).
• columnGroupExpansionState → columnGroupExpansions
• columnSpanScanDistance → colScanDistance
• rowDetailMarker removed. unnecessary.
• rowDetailEnabled removed. Row detail is always available via detail expansion state.
• Row dragging properties (rowDragEnabled, rowDragMultiRow, rowDragExternalGrid, rowDragPredicate) removed. Use grid.api.useRowDrag instead.
• rowGroupAutoApplyAggDefault removed. unnecessary.
• rowGroupColumnTemplate → rowGroupColumn
• Pagination properties (paginate, paginatePageSize, paginateCurrentPage) removed. Controlled by row data source.
• rowSelectionCheckbox removed. unnecessary.
• rowSelectionPointerActivator → rowSelectionActivator
• rowSelectionPredicate removed. Row selection can now be prevented via the rowSelectBegin event.
• rowSelectionSelectChildren → rowSelectChildren
• rowSelectionMultiSelectOnClick removed. unnecessary.
• sortComparatorFns removed. Use custom comparators directly in sortModel.
• Overlay and menu-related properties (overlayToShow, overlays, columnMenuRenderer, contextMenuRenderer, contextMenuPredicate, panelFrames, panelFrameButtons, menuFrames) removed. unnecessary in headless mode.
• Pivot-related properties refactored. columnPivotModel now holds the complete pivot configuration. See the column pivoting guide.
• filterQuickSearch → quickSearch
• filterModel split into FilterModel (simple filters) and FilterInModel (set filters).
• measureModel removed. Now defined in columnPivotModel.
• treeData removed. unnecessary.

Grid API

• autosizeMeasure removed. Use the new measureText function exported by LyteNyte Grid packages.
• Cell editing events:
  • cellEditBegin → editBegin
  • cellEditEnd → editEnd
  • cellEditIsActive → editIsCellActive
• Most cellEdit* APIs removed. Use events (editBegin, editEnd) instead.
• columnField now takes (column, row) instead of (row, column).
• columnGroupToggle → columnToggleGroup
• columnUpdate now handles both single and multiple updates.
  Replaces columnUpdateMany, columnResize, and columnResizeMany.
• Column movement APIs simplified into columnMove.
• Numerous columnIs* and columnSort* helpers removed. No longer necessary.
• Navigation APIs consolidated. Use focusCell instead of navigate*.
• navigateScrollIntoView → scrollIntoView
• Row refresh, reload, and data replacement APIs removed. Handled by row data source.
• Selection APIs simplified:
  • rowSelectionGetSelected → rowSelected
  • rowSelectionSelect → rowSelect
  • rowSelectionSelectAll → rowSelectAll
• Undo/redo and legacy menu/frame APIs removed.
• Pivot APIs consolidated into the columnPivotModel.

Migrating to Headless Components

Replace:

function MyGrid() {
  const grid = useLyteNytePro(...); // or core

  return <LyteNyteGrid grid={grid} />;
}

With:

import { Grid } from "@1771technologies/lytenyte-pro";

function MyGrid() {
  const grid = Grid.useLyteNyte(...);

  return (
    <Grid.Root grid={grid}>
      <Grid.Viewport>
        <Grid.Header>
          {view.header.layout.map((row, i) => (
            <Grid.HeaderRow key={i} headerRowIndex={i}>
              {row.map((c) =>
                c.kind === "group" ? (
                  <Grid.HeaderGroupCell key={c.idOccurrence} cell={c} />
                ) : (
                  <Grid.HeaderCell key={c.id} cell={c} />
                )
              )}
            </Grid.HeaderRow>
          ))}
        </Grid.Header>
        <Grid.RowsContainer>
          <Grid.RowsCenter>
            {view.rows.center.map((row) =>
              row.kind === "full-width" ? (
                <Grid.RowFullWidth key={row.id} row={row} />
              ) : (
                <Grid.Row key={row.id} row={row}>
                  {row.cells.map((c) => (
                    <Grid.Cell key={c.id} cell={c} />
                  ))}
                </Grid.Row>
              )
            )}
          </Grid.RowsCenter>
        </Grid.RowsContainer>
      </Grid.Viewport>
    </Grid.Root>
  );
}