Row Numbers

Enterprise

Introduction

Row numbers add a built-in index column that labels each row with its sequential position. It ships in @zengrid/enterprise: rowNumberColumn() returns a ready column definition you drop into the grid’s columns — no data field required, the number comes from the row’s position.

import { rowNumberColumn } from '@zengrid/enterprise/grid';

const grid = new Zengrid(mount, {
  columns: [
    rowNumberColumn(),                 // the index column
    { field: 'name',   header: 'Name' },
    { field: 'region', header: 'Region' },
  ],
});

Counting is either continuous (unbroken across the whole dataset) or per-page (restarts at the start value every pageSize rows). Everything is configurable through one options object:

Option	Default	Effect
start	1	Number given to the first row.
step	1	Increment between successive rows.
mode	'continuous'	'continuous' counts across the dataset; 'per-page' restarts each page.
pageSize	0	Rows per page, used by 'per-page' mode.
header	'#'	Column header label.
width	64	Column width in pixels.
field	'__rownum__'	Column id (carries no data).
className	—	Extra CSS class applied to each number cell.

The returned column also exposes .manager — a RowNumberManager — for reading or reconfiguring the numbering at runtime (setStart, setStep, setMode, setPageSize), followed by a grid.refresh().

Try it live

Each tab is a different numbering setup. Edit the rowNumberColumn(...) options and the index column re-renders. Scroll the grid to watch the numbers follow the rows.

Index columnStart & stepPer-page

CodeDemoSplit

ResetRun ⌘⏎

Prepend rowNumberColumn() to columns. It numbers continuously from 1 — scroll to row 50,000 and the count keeps going.

Continuous vs. per-page

Continuous numbering runs unbroken across the dataset — row 30,001 reads 30001. It’s the default and suits a plain scrolling grid. Per-page numbering restarts at start every pageSize rows, so paired with Row Pagination each page reads 1…pageSize. The Per-page tab above shows the restart directly on the scrolling grid.

Next

• Row Data — supply the rows to number.
• Row Pagination — pair with per-page numbering.