Row Detail

LyteNyte Grid lets you display expandable detail sections beneath individual rows. This feature, known as Row Detail (sometimes called Master Detail), allows you to render any arbitrary React component in the expanded area.

Enabling Row Detail

Enable row detail by setting the rowDetailEnabled property in grid state. This tells LyteNyte Grid that users can expand some rows to include a detail section. When enabling this feature, you must provide a React component via the rowDetailRenderer property to define what appears in each row's detail section.

TODO;

The rowDetailEnabled property accepts a boolean, the string "all", or a function that selectively enables row detail for specific rows. Setting it to true enables row detail for leaf rows only. Setting it to "all" enables row detail for every row.

Row Detail Height

Control the height of the detail area by setting the rowDetailHeight property. You can specify either a fixed pixel height or a function that returns a pixel height value.

TODO;

Row Detail Marker

When you enable row detail, LyteNyte Grid displays an expansion icon in the marker column. Disable this icon by setting the rowDetailMarker property to false. If you disable the marker, you must provide users with an alternative way to expand detail rows.

TODO;

Row Detail Expansions

The rowDetailExpansions property in grid state tracks which detail rows are expanded. Modify this value programmatically to change which rows display their detail sections.

LyteNyte Grid provides these API methods to manage detail rows programmatically:

• rowDetailIsExpanded determines if a row is currently expanded
• rowDetailToggle switches a row's expansion state
• rowDetailRowPredicate returns true if a row supports a detail section
• rowDetailVisibleHeight returns the visible height of a row's detail section in pixels

TODO;