SvGridApi reference

The imperative API exposed via <SvGrid onApiReady={(api) => ...}>. Use it for data, column, filter, sort, group, selection, and visibility operations from outside the component.

import type { SvGridApi } from 'sv-grid-community'

let api = $state<SvGridApi<typeof features, Order> | null>(null)

<SvGrid
  data={rows}
  columns={columns}
  features={features}
  onApiReady={(next) => (api = next)}
/>

<button onclick={() => api?.addRow({ /* ... */ })}>Add row</button>

Cells

getCellValue(rowIndex, columnId)

getCellValue(rowIndex: number, columnId: string): unknown

Read a cell value from the underlying data. Returns undefined when either argument doesn't resolve.

setCellValue(rowIndex, columnId, value)

setCellValue(rowIndex: number, columnId: string, value: unknown): void

Write a cell value through the column's field. Triggers a re-render. Does NOT fire onCellValueChange - that callback is for user edits.

Rows

addRow(row, position?)

addRow(row: TData, position?: 'top' | 'bottom' | number): void

position defaults to 'bottom'. A numeric index inserts before that index.

addRows(rows, position?)

addRows(rows: ReadonlyArray<TData>, position?: 'top' | 'bottom' | number): void

Batched insert. Cheaper than calling addRow in a loop for hundreds of rows.

removeRow(rowIndex) / removeRows(rowIndices)

removeRow(rowIndex: number): void
removeRows(rowIndices: ReadonlyArray<number>): void

Remove by data-array index (the same index onCellValueChange reports).

Columns

addColumn(column, position?) / addColumns(columns, position?)

addColumn(column: ColumnDef<TFeatures, TData>, position?: 'left' | 'right' | number): void
addColumns(columns: ReadonlyArray<ColumnDef<TFeatures, TData>>, position?: 'left' | 'right' | number): void

position defaults to 'right'.

removeColumn(columnId)

removeColumn(columnId: string): void

By id (or field when no id was provided).

Visibility

setColumnVisible(columnId, visible) / isColumnVisible(columnId)

setColumnVisible(columnId: string, visible: boolean): void
isColumnVisible(columnId: string): boolean

Hidden columns stay in the column array but don't render.

Sort

setSort(columnId, direction)

setSort(columnId: string, direction: 'asc' | 'desc' | null): void

Replaces any existing sort. Pass null to clear sort on that column. Multi-sort through the API is on the Missing features list - the user can build it themselves with Shift-click on headers.

clearSort()

clearSort(): void

Clear all sort clauses.

Group

setGroupBy(columnIds)

setGroupBy(columnIds: ReadonlyArray<string>): void

Group by zero or more columns. Replaces any existing group config.

Filter

setFilter(columnId, filter)

setFilter(
  columnId: string,
  filter: { operator: SvGridFilterOperator; value?: string } | null,
): void

Where SvGridFilterOperator is:

type SvGridFilterOperator =
  | 'contains' | 'equals' | 'startsWith'
  | 'greaterThan' | 'lessThan' | 'isBlank'

Pass null to clear.

clearFilter(columnId)

clearFilter(columnId: string): void

Clear a single column's filter. (A clearAllFilters() helper is on the Missing features list.)

Data snapshot

getData()

getData(): ReadonlyArray<TData>

Snapshot of the current internal data array - the grid's working copy, which reflects every cell edit and addRow / removeRow since mount.

getDisplayedRows()

getDisplayedRows(): ReadonlyArray<TData>

Returns the rows that are currently visible in the grid - after filter, sort, and pagination. Use for pro.exportData(...) when you want to export the current view.

Pro extensions

After installPro(api), the same object also exposes:

api.exportData(opts)   // see Pro export reference
api.print(opts)
api.importData(opts)
api.ai.filter(...)
api.ai.smartFill(...)
api.ai.summarize(...)
api.ai.classify(...)
api.pivot.build(config)
api.pivot.buildFrom(data, config)

See Pro reference.