LyteNyte Grid logo for light mode. Links back to the documentation home page.
GuidesAPI ReferenceChangelog
Rows

Row Height

LyteNyte Grid allows developers to control row height. Rows can have a fixed height, vary in height per row, or expand to fill the available viewport space.

The rowHeight property on the grid state controls how LyteNyte Grid calculates each row's height in pixels. This property accepts three possible values:

  • Numbers: Sets all rows to a fixed height in pixels.
  • Functions: Returns the height in pixels for each row. Use this option to create variable row heights.
  • Fill String: A string of the form fill:<number>. For example, fill:24 instructs LyteNyte Grid to distribute the available viewport space across all rows, while enforcing a minimum height of 24px per row.

Number Row Heights

Set rowHeight to a number to give all rows a uniform height. The numeric value represents the row height in pixels. The demo below shows fixed row heights in action.

Fixed Row Height

Updating Row Height

In the demo above, clicking the toggle buttons updates the row height. You can change the row height by setting the grid.state.rowHeight property. Updating this value causes the grid to recalculate row layout, so avoid changing it inside hot or frequently running code paths.

The following example sets the row height to 40px:

grid.state.rowHeight.set(40);

If you need to update a variable row height after grid initialization, set rowHeight to a function that returns your height function. This pattern prevents you from overwriting the state setter with the height function itself.

const myRowHeightFunction = (i: number) => {

  /* implementation */

};



// ❌ Incorrect

grid.state.rowHeight.set(myRowHeightFunction);



// ✅ Correct

grid.state.rowHeight.set(() => myRowHeightFunction);

Variable Row Height

LyteNyte Grid supports variable row heights through a function callback. This function must return a number representing the row height in pixels, and the returned value may differ per row.

LyteNyte Grid calls this function for every row during layout, so performance is critical. Keep the implementation simple and avoid expensive calculations inside the callback.

The demo below illustrates variable row heights in practice.

Variable Row Height

In this example, the row height cycles through a predefined set of values. While this demo uses a simple pattern, your own logic can be as complex as needed, as long as it remains performant.

const grid = Grid.useLyteNyte({

  // Other grid properties

  rowHeight: (i) => [30, 50, 80, 120][i % 4],

});

Fill Row Height

Use the fill row height syntax "fill:<n>" to make rows expand and fill the available viewport space, where n is the minimum row height in pixels.

LyteNyte Grid assigns each row its minimum height, calculates the remaining available space, and then distributes that space evenly across all rows. This approach works well when the grid displays only a small number of rows and you want them to occupy the full viewport height.

Fill Row Height

When using fill row heights, if the combined minimum height of all rows exceeds the viewport height, the grid cannot distribute additional space. In this case, each row renders at exactly its minimum height, behaving the same as fixed-height rows.

Next Steps

  • Row Pinning: Freeze specific rows at the top or bottom of the viewport.
  • Row Full Width: Create rows that expand to the full width of the viewport.
  • Row Selection: Select individual or multiple rows.
  • Row Sorting: Learn about the row sort model and how rows are ordered.

Overview

Learn how the LyteNyte grid creates, renders, and manages rows. LyteNyte Grid has two types of rows, group rows and leaf rows. These rows define the grid's main content.

Row Pinning

LyteNyte Grid can freeze rows at the top or bottom of the grid viewport. Pinned rows remain visible as the user scrolls.

On this page

Number Row HeightsUpdating Row HeightVariable Row HeightFill Row HeightNext Steps