Column Floating Header

The floating row in LyteNyte Grid is a specialized header row that appears below the main column headers. It allows custom components to be rendered for each column. While commonly used for implementing filtering interfaces, the floating row can accommodate any type of component.

To display the floating header row, set the floatingRowEnabled property to true in the grid's configuration. Once enabled, a row will appear below the column headers with cells for each column. The content of each floating cell is determined by the column's floatingCellRenderer property.

TODO;

Floating Cell Components

A column's floatingCellRenderer property can accept either a React component or a string. When providing a string, it serves as a lookup key to retrieve the actual component from those registered in the grid's state. The floatingCellRenderers property on the grid allows you to register a set of floating cell renderers that can be referenced by columns.

TODO;

We recommend registering floating cell renderers and referencing them from columns rather than providing React components directly. This approach keeps columns serializable and improves debugging capabilities.

Floating Filter Component (Enterprise Only)

LyteNyte Grid Enterprise includes a built-in floating filter component that provides filtering capabilities for your columns. You can either register this component and reference it from columns or use it directly in your column configurations.

TODO;

Toggling the Floating Row Visibility

You can toggle the floating row's visibility by modifying the floatingRowEnabled state value on the grid. Here's a simple function that demonstrates this capability:

const toggleFloatingFilter = () =>
  grid.state.floatingRowEnabled.set((prev) => !prev);