Columns

Marker Column

The marker column is automatically created and managed by LyteNyte Grid when specific features are enabled. This special column supports several key grid features:

Row selection: Displays checkboxes for selecting rows when row selection is enabled. For more details, see the Row Selection guide.
Row dragging: Provides drag handles when row dragging functionality is enabled. For more information, refer to the Row Dragging guide.
Row detail: Shows expansion controls when row detail functionality is enabled for the marker column. For more information, refer to the Row Detail guide.

The marker column is fully managed by LyteNyte Grid and doesn't appear in the columns configuration you provide to the grid. It will only be displayed when one or more of the above features are enabled. If none of these features are active, the marker column remains hidden.

Marker Column

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
 
const columns: ColumnProReact[] = [
  { id: "age", type: "number" },
  { id: "job" },
  { id: "balance", type: "number" },
  { id: "education" },
  { id: "marital" },
];
 
export function MarkerColumn() {
  const ds = useClientDataSource({ data: bankDataSmall });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
 
    rowSelectionCheckbox: "normal",
    rowSelectionMode: "multiple",
    rowDetailEnabled: true,
    rowDragEnabled: true,
 
    rowDetailRenderer: () => {
      return (
        <div>
          Your detail renderer here. Empty as this guide is for marker column
          functionality.
        </div>
      );
    },
 
    columnBase: {
      widthFlex: 1,
    },
  });
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: "1" }}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}

PreviousColumn Floating Header

Next Introduction