# 3. Data and columns > Step 3 of 6 · [← First grid](https://svgrid.com/docs/getting-started/2-first-grid/) · [Next: Features →](https://svgrid.com/docs/getting-started/4-features/) SvGrid reads two arrays: `data` (your rows) and `columns` (the column-definition list). Everything else is opt-in.  ## Row data The `data` prop is any `ReadonlyArray`. A Svelte 5 `$state` array, a derived store, an SWR/TanStack-Query cache, a `+page.ts` load result, a plain literal - the grid doesn't care, as long as the array reference changes when the rows change. ```svelte Add row ``` ### Identity Today the wrapper uses each row's array index as its id. That's fine for read-only views; if you mutate `rows`, prefer keeping the same object references for rows that didn't change so selection and edit state line up. A `getRowId` prop on the wrapper is tracked in [Missing features](https://svgrid.com/docs/help/missing-features/) and supported by the headless `createSvGrid` core today. ### Immutability SvGrid does **not** mutate your data. When the user commits an edit the grid emits an `onCellValueChange` event; you decide whether to mutate in place or copy. See [Saving values](https://svgrid.com/docs/help/editing/saving-values/). ## Column definitions A column definition tells SvGrid how to read a value out of a row, how to render it, and how to format it. ```ts import type { ColumnDef } from '@svgrid/grid' type Person = { id: string firstName: string lastName: string age: number joinedAt: string // ISO date salary: number active: boolean } const columns: GridColumns = [ // `field`: read a key straight off the row { field: 'firstName', header: 'First name' }, // `fieldFn`: compute the value; needs an explicit `id` { id: 'fullName', header: 'Full name', fieldFn: (row) => `${row.firstName} ${row.lastName}`, }, // Numeric, with locale-aware formatting { field: 'age', header: 'Age', format: { type: 'number', options: { maximumFractionDigits: 0 } }, }, // Date with explicit pattern { field: 'joinedAt', header: 'Joined', format: { type: 'date', pattern: 'y-m-d' }, }, // Currency { field: 'salary', header: 'Salary', format: { type: 'currency', currency: 'USD' }, }, // Boolean rendered as a checkbox { field: 'active', header: 'Active', editorType: 'checkbox', }, ] ``` ### Common properties | Property | Purpose | | ------------- | -------------------------------------------------------------------------------------------------------- | | `field` | Reads `row[key]`. | | `fieldFn` | Computes the value from the row. Required when there's no underlying field. | | `id` | Stable column id. Required when you use `fieldFn` (no field to derive from). | | `header` | String or render snippet for the header. | | `footer` | String or render snippet for the footer row. | | `cell` | Render snippet / component for the body cell. See [Cell components](https://svgrid.com/docs/help/cells/cell-components/). | | `format` | Locale-aware formatter: `number`, `currency`, `percent`, `date`, `datetime`. | | `formatter` | Function form for one-off custom value formatting. | | `editorType` | Inline editor: `text` \| `number` \| `checkbox` \| `date` \| `datetime`. | | `width` | Initial column width in pixels. Default comes from the `columnWidth` prop on ``. | | `align` | Header + body alignment: `'left'` \| `'right'` \| `'center'`. Inferred from `editorType` when omitted. | | `columns` | Child column defs for column groups (multi-level header). | Sorting / filtering / grouping are toggled per-grid via the registered features. Per-column flags (`enableSorting: false`, etc.) are on the [Missing features](https://svgrid.com/docs/help/missing-features/) list. ### Custom cells For anything beyond a stringified value, render with `renderSnippet`: ```svelte {#snippet PersonCell(props: { row: Named })} {props.row.firstName[0]}{props.row.lastName[0]} {props.row.firstName} {props.row.lastName} {/snippet} `${r.firstName} ${r.lastName}`, cell: (ctx) => renderSnippet(PersonCell, { row: ctx.row.original }), }, { field: 'age', header: 'Age' }, ] satisfies GridColumns} /> ``` [Cell components](https://svgrid.com/docs/help/cells/cell-components/) has the full patterns: avatars, sparklines, progress bars, status badges. ## Formats on the columns you already have `format` is declarative and locale-aware, so a currency, a percentage and a date all come from the same place rather than from three helper functions. ```svelte ``` > Video: Learn SvGrid 2: your data, your columns (https://www.youtube.com/watch?v=HvQ4PDuY8Q4) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/getting-started/3-data-and-columns/ . All docs: https://svgrid.com/llms.txt