Columns

LyteNyte Grid uses columns to power its core functionality, including sorting, filtering, moving, and resizing. When you call the useLyteNyte hook, you'll provide an array of column definitions. This guide covers how to define columns and explains each available property.

Basic Column Definition

At its simplest, a column requires only an id property:

const column = { id: "my-column" };

Every column must have a unique id. You are responsible for ensuring this uniqueness across your columns.

The Column Base

While you can configure many properties for each column, LyteNyte Grid provides default values for any properties you don't explicitly define. Use the columnBase property to set default values for all columns in your grid.

For example, instead of configuring each column to support moving, resizing, filtering, and sorting, set these properties once on the columnBase:

TODO;

Column Properties Overview

Column Type

Set the type field to hint at the data type a column will contain. It defaults to text, but you can set it to number, date, text, or complex. A complex type indicates non-primitive data, such as when a column contains arrays.

While this field is optional, providing the correct type ensures LyteNyte Grid uses the appropriate built-in functionality for sortable, filterable, or editable columns.

Header Rendering

The headerName property specifies the display text for a column. This text appears in the grid header and in various LyteNyte Grid components, such as the Pill Manager. If you don't provide a header name, the column's id serves as a fallback.

LyteNyte Grid includes a minimal header component by default. You can provide your own custom header through the headerRenderer property, which should return a non-null React Node.

Header Autosizing

LyteNyte Grid can automatically size columns to fit their content. To help with custom header components, provide a headerAutosizeFunc to calculate the width needed for your header content. Note that this function applies only to column headers. Use the cellAutosizeFn for calculating cell widths.

Column Aggregations

Three properties control a column's aggregation capabilities:

• aggFunc: The currently applied aggregation function
• aggFuncsAllowed: The aggregation functions available for this column
• aggFuncDefault: The default aggregation function applied when columns are grouped

Column Visibility

Control visibility with the hide property, which defaults to false (visible). The hidable property indicates whether users can toggle a column's visibility, though you can always hide columns programmatically regardless of this setting.

Cell Editing

Configure cell editing behavior with these properties:

• cellEditPredicate: Determines if cells in this column are editable
• cellEditParser: Converts a cell edit value into the stored cell value (e.g., converting a Date object to an ISO string)
• cellEditUnparser: Converts a stored cell value into an editable format (e.g., converting an ISO string to a JavaScript Date)
• cellEditProvider: The React component to use for cell editing
• cellEditParams: Parameters to pass to the cell edit component
• cellEditRowUpdater: A custom function for updating row data based on edit changes.

Cell Autosizing

The cellAutosizeFn property lets you customize how cell widths are calculated, this is especially useful with custom cell renderers.

Use cellSkipOnAutosizeAll to exclude a column from grid-wide autosize operations while still allowing individual column resizing.

Floating Cell

The floatingCellRenderer property defines what appears in floating header cells for this column. This only applies when you enable the grid's floatingRowEnabled property.

Sorting

Configure sorting with these properties:

• sortable: Determines if the column supports sorting
• sortCycle: Defines the order of sorting operations (e.g., ["asc", "desc", null] cycles through ascending, descending, and no sorting)
• sortComparator: Provides custom sort logic for the column's data

Field

The field property determines how to extract cell values from your data. It serves as the column's accessor method. If not provided, the column's id is used instead.

Column Grouping

The groupPath property defines an ordered set of strings that place the column within a group hierarchy. Column groups form implicitly from the combined groupPath properties across your columns.

The groupVisibility property controls when a column appears based on its group's expanded state:

• visible-when-open: Shows the column only when its group is expanded
• visible-when-closed: Shows the column only when its group is collapsed
• always-visible: Shows the column regardless of group state

Column Width

Control column width with these properties:

• width: Sets the desired column width
• widthMin and widthMax: Constrain the column width within these bounds
• widthFlex: Determines how much excess viewport width this column should claim

Cell Rendering

The cellRenderer property lets you provide a custom React component for rendering cells. While LyteNyte Grid includes a basic renderer, the grid was designed with custom renderers in mind.

Row and Column Spanning

Use rowSpan and columnSpan to make cells span multiple rows or columns. Cells covered by a spanning cell won't render.

Row Grouping

The rowGroupable property indicates whether a column can serve as a row group key, allowing data aggregation across unique column values. Use rowGroupField to specify how to calculate the group key (defaults to the column's field).

Column Resizing and Moving

The resizable property controls whether users can resize a column through the UI.

The movable property determines if users can reorder a column through the UI.

Enterprise-Only Properties

The following properties are exclusive to the Enterprise edition of LyteNyte Grid.

Filtering

Enterprise edition includes advanced filtering capabilities:

• filterSupportsQuickSearch: Enables this column for quick filtering operations
• filterSupportsIn: Allows filtering by a set of unique values in this column
• inFilterLabelFormatter: Formats the display of in-filter values
• inFilterField and quickSearchField: Define how to calculate filter values when they differ from the column's primary value

Column Pivoting

Enterprise edition supports column pivoting, where column values dynamically generate new columns:

• columnPivotable: Indicates if this column can serve as a pivot
• columnPivotField: Specifies how to calculate the pivot key

Measures

Measures work with column pivots to determine values for dynamically created columns:

• measureFunc: Determines the measure value for this column
• measureFuncsAllowed: Lists the measure functions available for this column
• measureFuncDefault: Sets the default measure function to use

Summary

This guide outlined all properties available for columns in LyteNyte Grid. For more detailed information on each property, consult the specific guides in the LyteNyte Grid documentation.