Grid Props

This reference details the different properties that you can provide to the LyteNyte Grid component.

The base type for LyteNyte Grid component props is Grid.Props. Grid.Props is a generic type that accepts a GridSpec object. The following example shows the GridSpec interface. For a detailed walkthrough, see the API Extension guide.

1
export interface GridSpec<
2
  Data = unknown,
3
  ColExt extends Record<string, any> = object,
4
  S extends RowSource<Data> = RowSource,
5
  Ext extends Record<string, any> = object,
6
> {
7
  readonly data?: Data;
8
  readonly column?: ColExt;
9
  readonly source?: S;
10
  readonly api?: Ext;
11
}

Properties

Provide these props to the Grid component to configure the LyteNyte Grid.

Grid

Prop

Event handlers for grid components. Use this property to attach event listeners to a cell, column, row, viewport, or header.

The ID of the grid. This value determines element ownership for grid components. In most cases, you should not set this value unless you need to distinguish grid elements in a query selector.

A ref used to retrieve the grid API.

Whether the grid renders in right-to-left (RTL) direction.

A component slot for providing overlays rendered within the rows container.

A component slot for the auxiliary ViewportShadows component.

A component slot for providing overlays rendered within the viewport.

Styles and classes applied to grid elements. Use this property to add additional styles to cells, rows, headers, detail containers, or the viewport without breaking the grid into separate component parts.

Columns

Prop

The default column definition. The grid uses this definition as a fallback for properties not defined on a column.

Whether the grid autosizes a column when the edge of the header is double-clicked. The column must be resizable.

Whether column groups are expanded by default.

The column group expansion state that the grid uses. Provide this value to control column group expansions.

The delimiter the grid uses to join column group paths when creating a column group ID. By default, this value is "/".

The drag placeholder the grid uses while a column group move is in progress.

The renderer used to display column group content.

The definition of the special marker column managed by LyteNyte Grid. Set the on property to enable the marker.

The drag placeholder the grid uses while a column move is in progress.

The columns that are managed by the Column Manager.

Whether the grid resizes columns to fit the viewport.

An event callback that fires when the expansion state of a column group changes.

An event callback that fires when a column move ends with a drop occurring outside the viewport.

An event callback that fires when the columns change.

Rows

Prop

An event callback that fires when a row drag enters a valid drop zone target.

An event callback that fires when a row drag leaves a valid drop zone target.

An event callback that fires when a row is dropped during a row drag operation.

An event callback that fires when the row group column is updated in the grid, for example when it is resized.

Whether the grid applies the data-ln-row-alternate attribute to odd rows.

Tag identifiers that a row accepts during a row drag operation.

A predicate function that determines whether a row renders as full width.

A component that renders the content for a full width row. If the grid includes full width rows, you must provide this.

The column definition for the automatically generated group column.

The height of each tree item. This value must be a fixed integer.

The maximum number of rows before the visual start row that the grid checks for row spans.

The mouse interaction that triggers row selection in the grid.

The row selection behavior the grid uses.

The row data source the grid uses to retrieve rows and determine row counts.

Row Detail

Prop

An event callback that fires when the detail expansion state of a row changes.

The initial detail area height the grid uses before it has had a chance to observe the actual detail height. The grid uses this property only when the rowDetailHeight property is set to "auto".

The set of rows that have expanded detail. Provide this value if you want to control row detail expansion.

Returns the rendered height of the row detail area for the given row. Use this method when the rowDetailHeight property on the grid is set to "auto" and you need to query the detail area height.

The component the grid uses to render the detail area of an expanded row.

Virtualization and Sizing

Prop

The number of additional columns the grid renders after the viewport end to improve perceived horizontal scrolling.

The number of additional columns the grid renders before the viewport start to improve perceived horizontal scrolling.

Whether the floating row is enabled.

The height in pixels of the floating row.

The height in pixels of the header group.

The height in pixels of the header.

The number of additional rows the grid renders below the viewport to improve perceived scroll performance.

The number of additional rows the grid renders above the viewport to improve perceived scroll performance.

Whether the grid virtualizes columns.

Whether the grid virtualizes rows.

Cell Editing

Prop

The mouse interaction that begins a cell edit.

The cell editing behavior the grid uses, either single cell editing, full row editing, or no editing.

A validator function the grid uses to validate row edits.

An event callback that fires when cell editing begins. You can use this callback to prevent cell editing.

An event callback that fires when cell editing is cancelled.

An event callback that fires when cell editing ends successfully.

An event callback that fires when cell editing fails.

Cell Selection

Prop

Whether the grid allows marker column selection in cell selection ranges.

Whether the grid clears the cell selection when focus moves to a non-cell position, such as a header cell.

The type of cell selection the grid enables.

"range" allows a single range of cells to be selected.
"multi-range" allows multiple ranges of cells to be selected.
"none" disables cell selection. This is the default.

Returns the current cell selection data rectangles in the grid.

An event callback that fires when the cell selection area in the grid changes.

Grid Props

On this page