Grid Props

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.

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.

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>