āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/1771-technologies/lytenyte/(column)/columns ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
useLyteNyte hook,
you provide an array of column definitions. This guide explains how to
define columns and describes each property.At minimum, a column requires an id property:
const column = { id: "my-column" };
Each column must have a unique id. Ensure uniqueness across all
columns in your grid.
LyteNyte Grid provides defaults for properties you omit. Use
columnBase to set defaults for all columns. For example, instead of
configuring every column for moving and resizing, set it once in
columnBase.
To move a column, click and drag the header. To resize the header, hover your mouse cursor near the right edge of the header and an indicator will appear. You may then click and drag to resize.
</Callout>!demo:Column Base="./demos/column-base"
Use the type field to hint at the data type. Defaults to string.
Options include number, date, datetime, or any custom string.
Providing the correct type ensures proper sorting and filtering.
The name property sets display text for a column. If omitted, the
id is used. You can pass a custom headerRenderer returning a
ReactNode.
autosizeHeaderFn calculates width for custom header components. It
applies only to headers. Use autosizeCellFn for cell widths.
The pin property freezes columns at the start or end of the grid so
they stay visible during horizontal scrolling.
Use the hide property to control visibility. Defaults to false.
editable: whether the cell is editableeditRenderer: the editing componenteditSetter: updates row data after editingautosizeCellFn customizes how cell widths are calculated.
floatingCellRenderer sets content for floating header cells when
floatingRowEnabled is true.
field defines how to extract cell values from your data. Defaults to
the column id.
groupPath is an ordered set of strings that define the group
hierarchy. Groups form implicitly from all groupPath values.
groupVisibility controls when a column appears:
open: Only when the group is expandedclosed: Only when the group is collapsedalways: Always visiblewidth: desired column widthwidthMin / widthMax: width boundswidthFlex: share of extra viewport spacecellRenderer provides a custom React component for cells.
rowSpan / colSpan let cells span multiple rows or columns.
uiHints inform UI components about column capabilities. They do not
affect core grid behavior or API methods.
PRO only: quickSearchIgnore excludes the column from quick search.
You now know the available column properties in LyteNyte Grid. See individual guides for deeper details on each property.
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā