# Getting values
You get cell values in three ways depending on context.
> Live demo: Selection + copy/paste - https://svgrid.com/demos/04-selection-copy-paste/
## Inside a column definition
`field` does the obvious thing - `row[key]`:
```ts
{ field: 'firstName', header: 'First' }
```
Use `fieldFn` for anything computed:
```ts
{
id: 'fullName',
header: 'Full name',
fieldFn: (row) => `${row.firstName} ${row.lastName}`,
}
```
## Inside a cell renderer
A `cell` callback receives a `CellContext`:
```ts
{
field: 'salary',
header: 'Salary',
cell: (ctx) => {
const value = ctx.getValue() // unknown
const row = ctx.row.original // your TData
const all = ctx.row.getAllCells() // array of Cell
return /* renderSnippet / string / etc. */
},
}
```
`ctx.row.original` is the **raw row object** you passed in - handy when
you want sibling values without going through accessors.
## From outside the grid
After `onApiReady`:
```ts
const v = api.getCellValue(rowIndex, columnId)
api.setCellValue(rowIndex, columnId, newValue)
```
`rowIndex` is the index in the **source data array**, not the post-pipeline
displayed index.
## Reading by row id
`api.getRowId(rowIndex | row)` gives a row's stable id: the value your
`getRowId` prop computed, or the row's position when you set no `getRowId`.
Pass a display index (the space `getActiveCell`, `scrollToRow` and the cell
methods use) or a row object; it returns `null` for an index or object that
is not in the grid. The id is what `selectRows`, `toggleRowSelected` and an
`applyTransaction` remove all take, so this is how you go from "the active
cell" or "this row object" to an operation keyed by id.
There is no `api.getCellValueByRowId(rowId, columnId)` helper today. If you
need that, walk `api.getData()`:
```ts
function valueByRowId(api: SvGridApi<{}, Person>, rowId: string, col: string) {
const data = api.getData()
const idx = data.findIndex((r) => r.id === rowId)
return idx === -1 ? undefined : api.getCellValue(idx, col)
}
```
## What the grid is showing
`api.getDisplayedRows()` returns the rows after filter and sort, which is what
you want for an export, a count, or anything a user would describe as "what is
on screen". The source array answers a different question.
```svelte
(api = next)} />
{report}
```
## The row behind the cell
A cell context carries `row.original` - your object, untouched. That is what a
renderer or a tooltip should read, because the formatted value has already lost
the type.
```svelte
{#snippet Ratio(props: { row: Person })}
{Math.round(props.row.salary / props.row.age).toLocaleString()} per year of age
{/snippet}
```
## See also
- [Cell components](https://svgrid.com/docs/help/cells/cell-components/)
- [Accessing rows](https://svgrid.com/docs/help/rows/accessing-rows/)
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/cells/getting-values/ . All docs: https://svgrid.com/llms.txt