Rows

Row numbers

Add a spreadsheet-style row-number column that follows sorting and filtering and is announced by screen readers.

rowNumbers adds a leading column that numbers the rows 1, 2, 3…, as in a spreadsheet. The numbers are positions in the current view, not ids, so they follow sorting and filtering.

Sort any column: the rows move and the numbers stay in order.

row-numbers.svelte GitHub ↗

Turning it on

<Grid {rows} {columns} rowNumbers height={480} />

Data rows are numbered; group header rows get no number.
The column stays in place when the grid scrolls sideways, and it is sized to the widest number.
Its cells are row headers, so a screen reader announces the row’s number with each cell. The column’s header reads “Row”, the rowNumber entry in labels.

Reference

Grid props from the types

rowNumbers boolean Default false

A leading row-number column (1, 2, 3… in view order; data rows only), as in a spreadsheet. Its cells are row headers, so screen readers announce the number with each row.

labels Partial<GridLabels> Default {}

Override any string the grid renders itself (menus, filter editor, pager, aria labels). Merged over English defaults — pass only what changes. Interpolated entries are functions so translations can reorder the parts. Resolved per grid.

Example

<Grid {rows} {columns} height={480} labels={{ noRows: 'Không có dữ liệu', sortAscending: 'Tăng dần' }} />