Columns

Marker Column

The marker column is a special column you can enable in the grid state. LyteNyte Grid creates and manages it automatically. It is not part of your column definitions and is always frozen to the start of the grid.

The marker column provides auxiliary row functionality, such as a selection checkbox or an expand icon for master-detail features.

Enable the marker column by setting markerColumnEnabled to true on the grid. You can define it with the markerColumn property. The example below shows a marker column with checkbox selection.

Marker Column

"use client";
 
import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
 
type BankData = (typeof bankDataSmall)[number];
const columns: Column<BankData>[] = [
  { id: "age", type: "number" },
  { id: "job" },
  { id: "balance", type: "number" },
  { id: "education" },
  { id: "marital" },
];
 
export default function MarkerColumn() {
  const ds = useClientRowDataSource({ data: bankDataSmall });
 
  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
 
    rowSelectionMode: "multiple",
    rowSelectionActivator: "none",
 
    columnMarkerEnabled: true,
    columnMarker: {
      cellRenderer: ({ rowSelected, grid }) => {
        return (
          <div className="flex w-full h-full items-center justify-center">
            <input
              type="checkbox"
              checked={rowSelected}
              onChange={() => {}}
              onClick={(e) => {
                e.stopPropagation();
                grid.api.rowHandleSelect({
                  target: e.currentTarget,
                  shiftKey: e.shiftKey,
                });
              }}
            />
          </div>
        );
      },
    },
 
    columnBase: {
      widthFlex: 1,
    },
  });
 
  const view = grid.view.useValue();
 
  return (
    <div className="lng-grid" style={{ height: 500 }}>
      <Grid.Root grid={grid}>
        <Grid.Viewport>
          <Grid.Header>
            {view.header.layout.map((row, i) => {
              return (
                <Grid.HeaderRow key={i} headerRowIndex={i}>
                  {row.map((c) => {
                    if (c.kind === "group") return null;
 
                    return (
                      <Grid.HeaderCell
                        key={c.id}
                        cell={c}
                        className="flex w-full h-full capitalize px-2 items-center"
                      />
                    );
                  })}
                </Grid.HeaderRow>
              );
            })}
          </Grid.Header>
          <Grid.RowsContainer>
            <Grid.RowsCenter>
              {view.rows.center.map((row) => {
                if (row.kind === "full-width") return null;
 
                return (
                  <Grid.Row row={row} key={row.id}>
                    {row.cells.map((c) => {
                      return (
                        <Grid.Cell
                          key={c.id}
                          cell={c}
                          className="text-sm flex items-center px-2 h-full w-full"
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

PreviousColumn Floating Header

Next Introduction