Row numbers

rowNumbers adds a pinned column numbering the data rows 1, 2, 3… in display order, continuing across pages, with your own width and header.

Live demoRow numbers

Numbers on the left that follow sorting and searching.

Code for this demo

import { createGrid } from '@freegridjs/core';
import { demoColumns, makeRows } from '../data';
import { button, search, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const grid = createGrid(ctx.host, {
    columns: demoColumns(lang),
    data: makeRows(500),
    locale: lang,
    // numbers follow what is on screen: they are given again after sorting and filtering
    rowNumbers: { width: 56, header: '#' },
  });

  text(ctx, h('Sort or search: the numbers on the left follow the rows as shown. Click a number to focus its row.',
    '정렬하거나 검색해 보세요. 왼쪽 번호는 보이는 순서대로 다시 매겨집니다. 번호를 누르면 그 행으로 이동합니다.'));
  separator(ctx);
  button(ctx, h('Sort by Q1, high to low', '1분기 높은 순'), () => { grid.setSort([{ colId: 'q1', dir: 'desc' }]); ctx.log('setSort q1 desc'); });
  button(ctx, h('Sort by name', '이름순'), () => { grid.setSort([{ colId: 'name', dir: 'asc' }]); ctx.log('setSort name asc'); });
  button(ctx, h('Clear sort', '정렬 해제'), () => { grid.setSort([]); ctx.log('setSort []'); });
  search(ctx, h('Search…', '검색…'), v => grid.setQuickFilter(v));
  return grid;
}

rowNumbers: true adds a narrow column pinned on the left that numbers the data rows 1, 2, 3… in the order they are shown, the way a spreadsheet numbers its rows. The numbers follow sorting and filtering, continue across pages (page 2 of 50 rows starts at 51), and skip group and summary rows. Clicking a number moves the focus to that row.

Pass an object to set the column's width and header text. Printouts show the numbers when the grid does; print({ rowNumbers: false }) leaves them out.

createGrid(el, {
  columns,
  data,
  rowNumbers: true,                                // a "#" column pinned on the left
  // rowNumbers: { width: 64, header: 'No.' },     // your own width and header
  pagination: { pageSize: 50 },                    // numbers continue: page 2 starts at 51
});

grid.print({ rowNumbers: false });                 // leave them out of a printout

Sort or search in the demo below to see the numbers given again. The pagination demo shows numbers continuing from page to page.

Options

Name	Type	Description
`rowNumbers`	`boolean \| { width?, header? }`	A column pinned on the left numbering the data rows 1, 2, 3…; group and summary rows get no number.
`print({ rowNumbers })`	`boolean`	Whether a printout shows the numbers (default: as on screen).