Skip to content
ZenGrid

Column Selection

Community

Introduction

Section titled “Introduction”

Column selection highlights whole columns rather than individual cells or rows — the model you want when the action is column-shaped: sum a column, hide it, export just those fields. Turn it on with selectionType: 'column':

const grid = new Zengrid(mount, {
  columns,
  selectionType: 'column',
  enableMultiSelection: true,   // omit for one column at a time
  onSelectionChange: (ranges) => {
    // ranges are column spans in source coordinates
  },
});

Clicking any cell in a column selects that whole column. With enableMultiSelection: true, ctrl/⌘-click adds a column and shift-click takes the contiguous run of columns from the anchor. Every change fires onSelectionChange with the selected column spans.

Reading the selected columns

Section titled “Reading the selected columns”

Two accessors mirror the row-side API so column code reads the same way:

grid.selection.selectColumns(1, 3);      // select columns 1–3
grid.selection.getSelectedColumns();     // → [1, 2, 3]
grid.selection.isColumnSelected(2);      // → true
grid.selection.clear();

getSelectedColumns() returns the data-column indices covered by whole-column selections (in ascending order), and isColumnSelected(col) tests a single column — the column counterparts of getSelectedRows() / isRowSelected(row).

Try it live

Section titled “Try it live”

No enableMultiSelection — one column at a time. Click any cell to select its whole column. isColumnSelected / getSelectedColumns read it back.

Where to go next

Section titled “Where to go next”