Marker Column

The marker column is a special column provided by Graphite Grid. It is always rendered as the first column and pinned to the grid's start. The marker column can be enabled or disabled.

By default, the marker column displays the row index for each row. However, its behavior changes depending on the current configuration of the grid. For example, when Row Selection is enabled, the marker column displays a checkbox to select rows.

export function MarkerColumn() {
  const grid = useGraphiteGrid({
    initial: {
      markerColumnEnabled: true,
      // other grid properties
    },
  });
 
  return (
    <div style={{ height: 300 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}

Marker Column Definition

Since the marker column is provided by Graphite Grid, it has a more restrictive column definition. The markerColumnDefinition in the grid state allows you to update various aspects of the marker column. The example below uses a custom cell renderer for the marker column.

Caution

Overriding the default marker column should be done on a case-by-case basis. The marker column is dynamic and will render different content based on the state of the grid.

For example, the marker column displays a checkbox when row selection is enabled. Changing the cell renderer of the marker column does not prevent rows from being selected using it. The user-provided renderer should account for the row selection state when updating the renderer.

export function MarkerColumnDefinition() {
  const grid = useGraphiteGrid({
    initial: {
      markerColumnDefinition: {
        cellRenderer: (p) => {
          return (
            <div className="w-full h-full flex items-center justify-center text-sm bg-indigo-300 dark:bg-indigo-800">
              {p.row.rowIndex}
            </div>
          );
        },
      },
      // other grid properties
    },
  });
 
  return (
    <div style={{ height: 300 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}