Accessing Rows

Community

Introduction

Once data is loaded you often need to read it back — for a selection summary, an export, a custom action, or just to inspect a row. ZenGrid exposes those reads on grid.rows, and it draws a clear line between two coordinate spaces:

• Source access is keyed by a row’s original position in the array you passed to setData(). It never moves when the user sorts, filters, or pages — hold an index into your own dataset and read it back with getSourceValue / getSourceRow.
• Displayed access is keyed by a row’s on-screen position. It follows the active sort and filter, and returns values in the visible column order — getDisplayedValue, getDisplayedRow, getDisplayedRowData.

toSourceIndex and toDisplayedIndex convert between the two.

// Source space — stable, by your own index:
grid.rows.getSourceValue(0, 0);   // top-left of the array you loaded
grid.rows.getSourceRow(0);        // ['Aria Vaskov', 'Analyst', …]

// Displayed space — what the user sees, after sort + filter:
grid.rows.getDisplayedRow(0);            // the first row on screen
grid.rows.getDisplayedRowData(0);        // { name: …, role: …, … }
grid.rows.getDisplayedRowCount();        // rows left after filtering

// Convert between them:
grid.rows.toSourceIndex(0);       // which source row is showing first?
grid.rows.toDisplayedIndex(0);    // where did source row 0 end up? (-1 if filtered out)

Why two spaces?

ZenGrid’s data model is positional — the grid never reorders your array. Sort and filter build a view over it, so the row on screen at position 0 may be any source row. Source reads give you stable record access; displayed reads give you what’s on screen. Pick the one that matches the index you’re holding.

The grid.rows API

Method	Space	Returns
getSourceRowCount()	source	Rows loaded, ignoring sort/filter.
getDisplayedRowCount()	displayed	Rows left after the active filter.
getSourceValue(row, col)	source	One cell, by source row + source column.
getSourceRow(row)	source	A whole source row as an array.
getDisplayedValue(row, col)	displayed	One cell, by on-screen row + visible column.
getDisplayedRow(row)	displayed	An on-screen row as an array (visible column order).
getDisplayedRowData(row)	displayed	An on-screen row as an object keyed by field.
toSourceIndex(displayRow)	↔	The source index behind a displayed row.
toDisplayedIndex(sourceRow)	↔	The on-screen index of a source row (-1 if filtered out).
forEachDisplayedRow(fn)	displayed	Walk every visible row in view order.

Try it live

Each tab reads rows a different way. The snippet sorts and filters the grid so the two coordinate spaces diverge — click a control and the grid reads the running instance and reports back.

Source vs displayedWhole rows & objectsIndex mapping

CodeDemoSplit

ResetRun ⌘⏎

The grid is sorted by Name, so displayed row 0 is not source row 0. Read both and compare — source access ignores the sort, displayed access follows it.

Reading the current view in bulk

grid.rows reads row-by-row. To pull the whole current view at once — for a download or a clipboard copy — reach for the export API, which shares the same sort/filter view: grid.export.csv({ rows: 'filtered' }) returns only the rows that pass the active filter, in on-screen order, and grid.export.source() hands back a reusable value accessor for building other formats. See Row Pagination for paging that same view.

Next

• Row Data — load the rows first.
• Getting Values — read individual cell values.
• Row Sorting — the sort that displayed access follows.