Grid Props
Reference for every prop accepted by the Vue 3 Grid component, including data sources, columns, sorting, filtering, selection, and editing controls today.
All properties accepted by the Vue Grid component. Props use kebab-case in templates.
Required Props
columns
Type: ColumnDefinition[]
Array of column definitions.
<template>
<Grid :columns="columns" ... />
</template>row-height
Type: number
Height of each row in pixels.
<template>
<Grid :row-height="36" ... />
</template>Data Props
row-data
Type: TData[]
Array of row data objects.
<script setup>
const data = ref([
{ id: 1, name: "Giovanni" },
{ id: 2, name: "Luca" },
]);
</script>
<template>
<Grid :row-data="data" ... />
</template>data-source
Type: DataSource<TData>
Data source for advanced data handling.
<script setup>
const dataSource = createClientDataSource(data);
</script>
<template>
<Grid :data-source="dataSource" ... />
</template>Optional Props
header-height
Type: number
Default: Same as row-height
<template>
<Grid :header-height="48" ... />
</template>overscan
Type: number
Default: 3
Number of rows to render outside viewport.
sorting-enabled
Type: boolean
Default: true
Enable/disable sorting globally.
dark-mode
Type: boolean
Default: false
Enable dark mode styling.
wheel-dampening
Type: number
Default: 0.1
Dampening factor for wheel scrolling (0-1).
Drag & Reorder Props
row-drag-entire-row
Type: boolean
Default: false
When enabled, clicking and dragging any cell initiates a row drag.
<template>
<Grid :row-drag-entire-row="true" @row-drag-end="handleRowDragEnd" ... />
</template>@row-drag-end
Type: (sourceIndex: number, targetIndex: number) => void
Emitted when a row is dropped after dragging. The consumer handles data reordering.
@column-moved
Type: (fromIndex: number, toIndex: number) => void
Emitted when a column header is dragged to a new position.
@column-resized
Type: (colIndex: number, newWidth: number) => void
Emitted when a column is resized by dragging the header edge.
SSR Props
initial-width
Type: number
Initial viewport width in pixels for server-side rendering. On the client, a ResizeObserver takes over automatically.
initial-height
Type: number
Initial viewport height in pixels for server-side rendering.
Identity & Edit Props
get-row-id
Type: (row: TData) => RowId
Function to extract a unique ID from each row. Required when onCellValueChanged is provided.
<template>
<Grid
:columns="columns"
:row-data="data"
:row-height="36"
:get-row-id="(row) => row.id"
@cell-value-changed="handleCellValueChanged"
/>
</template>@cell-value-changed
Type: (event: CellValueChangedEvent<TData>) => void
Emitted after a cell value is committed via inline editing or fill-handle drag.
Styling Props
highlighting
Type: HighlightingOptions<TData>
Dynamic row, column, and cell class computation. See the Styling guide for detailed usage.
<template>
<Grid
:columns="columns"
:row-data="data"
:row-height="36"
:highlighting="{
computeRowClasses: (ctx) =>
ctx.rowIndex != null && ctx.rowIndex % 2 === 1 ? ['zebra-row'] : [],
}"
/>
</template>Loading Props
loading-component
Type: Component<{ isLoading: boolean }>
Custom component rendered during data loading instead of the default spinner.
Renderer Props
cell-renderer
Type: VueCellRenderer
Global cell renderer.
cell-renderers
Type: Record<string, VueCellRenderer>
Named cell renderer registry.
edit-renderer / edit-renderers
Custom edit renderers.
header-renderer / header-renderers
Custom header renderers.
Template Ref
You can access the underlying GridCore instance via a template ref:
<script setup>
import { ref } from "vue";
const gridRef = ref(null);
function sortByName() {
gridRef.value?.core?.setSort("name", "asc");
}
</script>
<template>
<GpGrid ref="gridRef" :columns="columns" :row-data="data" :row-height="36" />
</template>Example
<template>
<Grid
:columns="columns"
:row-data="data"
:row-height="36"
:header-height="48"
:overscan="5"
:sorting-enabled="true"
:dark-mode="isDark"
:cell-renderers="{ status: StatusRenderer }"
/>
</template>