Columns

Column Pinning

LyteNyte Grid allows columns to be pinned to the start or end of the grid viewport. Pinned columns remain visible even as users scroll horizontally through the grid. For optimal usability, it's recommended to pin only one or two columns at a time.

The terms start and end are used instead of right or left to clearly indicate where a column will be pinned regardless of whether the grid is rendered in RTL or LTR mode.

Pinning Columns to Start

To pin a column to the start of the grid, set its pin property to "start". Columns pinned to the start will remain fixed at the left side of the grid in LTR mode and at the right side in RTL mode.

Column Pinning Start

TODO

TODO;

Pinning Columns to End

To pin a column to the end of the grid, set the pin property to "end". Columns pinned to the end will remain fixed at the right side of the grid in LTR mode and at the left side in RTL mode.

Column Pinning End

TODO

TODO;

Column Pinning Considerations

LyteNyte Grid maintains a consistent order for columns based on their pin state first, followed by their ordinal position. The ordering sequence is:

Columns pinned to the start
Unpinned columns
Columns pinned to the end

This ordering is maintained even when programmatically setting column values in the grid. For example:

const myColumns = [
  { id: "A" },
  { id: "B", pin: "end" },
  { id: "C" },
  { id: "D", pin: "start" },
];
 
// LyteNyte Grid will reorder the columns to ensure that pinned columns appear
// in their correct visual position.
grid.state.columns.set(myColumns);
 
// Will return columns in order:
// { id: "D", pin: "start" },
// { id: "A" },
// { id: "C" },
// { id: "B", pin: "end" }
const orderedColumns = grid.state.columns.peek();

When using both start-pinned and end-pinned columns in the same grid, ensure there is enough space to display all pinned columns while still allowing users to scroll through the unpinned columns in the middle.