# Row data Row data is whatever you pass to ``. It is a `ReadonlyArray` where `TData` is your row type. Any shape works; the grid does not require a base class or interface. > Live demo: Quick start - https://svgrid.com/demos/01-quick-start/ ## Static ```svelte ``` ## Reactive Use a Svelte 5 `$state` array. The grid re-derives its row model whenever the array reference changes: ```svelte ``` In-place mutation works too - `rows.push(x)` or `rows[i] = y` - because `$state` arrays are deep-reactive. ## Row identity (`getRowId`) Without `getRowId`, the grid uses each row's array index as its id. That's fine for static data, but selection / expansion / edit state won't survive sorts, filters, or insertions. For anything beyond a read-only grid, pass `getRowId`: ```svelte row.id} /> ``` The function fires per row at row-model build time. Return any stable string - a database PK, a UUID, a slug. The same `id` then flows into `onRowSelectionChange`, `onCellValueChange`, `api.getCellValue(...)`, and every other API surface that takes a row id. Available on both the `` wrapper and the headless `createSvGrid({ getRowId })` core. ## Empty state The grid renders the `emptyMessage` prop when `data.length === 0`: ```svelte ``` ## Loading state Pass `loading` to overlay a spinner / skeleton (the wrapper has a built-in overlay layer): ```svelte ``` For controlled skeleton-row UX in virtualized server-side grids, see [demos/09-server-side.svelte](https://svgrid.com/demos/09-server-side/). ## Replacing the array Assigning a new array is the ordinary way to load data, and the grid re-derives its row model from the new reference. Sort or filter state survives, because neither is stored on the rows. ```svelte {status} ``` ## What getRowId buys you Select a row in each grid, then sort by salary. The left grid keys rows by array position, so the selection follows the slot rather than the person; the right one keys by `id` and keeps hold of who you picked. ```svelte

No getRowId - selection is tied to the row index:

With getRowId - selection is tied to the person:

String(r.id)} /> ``` ## See also - [Accessing rows](https://svgrid.com/docs/help/rows/accessing-rows/) - [Row pagination](https://svgrid.com/docs/help/rows/row-pagination/) - [Server-side guide](https://svgrid.com/docs/getting-started/#11-server-side-data) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/rows/row-data/ . All docs: https://svgrid.com/llms.txt