Vuetify0 v1.0 is here — the stable release is live! Read the announcement.

Theme

Mode

Palettes

Accessibility

DataGrid API

Headless data grid compound with column layout, cell editing, row ordering, and row spanning. Built on createDataGrid.

Explore these related pages for additional context and usage patterns.

Page	Category
Data Grid	Data
createDataGrid	Data
createDataTable	Data
Pagination	Semantic
Splitter	Semantic

DataGrid.Root

Props

namespace

string | undefined

Namespace for dependency injection.

Default: "v0:data-grid"

search

string | undefined

Default: ""

Events

update:search

[value: string]

Slots

default

DataGridRootSlotProps<T>

DataGrid.Body

Props

namespace

string | undefined

Namespace for dependency injection.

Default: "v0:data-grid"

Slots

default

DataGridBodySlotProps<T>

DataGrid.Cell

Props

namespace

string | undefined

Namespace for dependency injection.

Default: "v0:data-grid"

column

string | undefined

Column identifier for editing and span lookup

colspan

number | undefined

Number of columns this cell spans. Row spanning owns rowspan.

Slots

default

DataGridCellSlotProps

DataGrid.Column

Props

namespace

string | undefined

Namespace for dependency injection.

Default: "v0:data-grid"

id

string | undefined

Column id — registers this header with the grid when set

sortable

boolean | undefined

Participate in the sort pipeline

filterable

boolean | undefined

Participate in the filter pipeline

size

number | undefined

Width as a percentage (0–100)

minSize

number | undefined

Minimum width as a percentage

maxSize

number | undefined

Maximum width as a percentage

pinned

any

Pin position

resizable

boolean | undefined

Allow resizing

Default: true

editable

boolean | undefined

Whether cells in this column can be edited

validate

((value: unknown) => string | true) | undefined

Validate a committed edit. Return true or an error string.

colspan

number | undefined

Number of columns this cell spans

rowspan

number | undefined

Number of rows this cell spans

Slots

default

DataGridColumnSlotProps

DataGrid.Empty

Props

namespace

string | undefined

Namespace for dependency injection.

Default: "v0:data-grid"

Slots

default

DataGridEmptySlotProps

DataGrid.Handle

Props

namespace

string | undefined

Namespace for dependency injection.

Default: "v0:data-grid"

disabled

boolean | undefined

Whether the handle is disabled

Default: false

label

string | undefined

Accessible label for the resize handle

Slots

default

DataGridHandleSlotProps

DataGrid.Header

Props

namespace

string | undefined

Namespace for dependency injection.

Default: "v0:data-grid"

Slots

default

DataGridHeaderSlotProps

DataGrid.Row

Props

namespace

string | undefined

Namespace for dependency injection.

Default: "v0:data-grid"

id

any

Row identifier. Registers a data ticket when set with value.

value

object | undefined

Row value to register. Omit on header rows.

index

number | undefined

1-based aria-rowindex. Defaults to the row's position in orderedItems.

selectable

boolean | undefined

Emit aria-selected.

Default: false

resizable

boolean | undefined

Enable column resizing via Splitter composition. When true, the row renders as Splitter.Root and child columns register as Splitter.Panel. Place DataGrid.Handle inside Column (not as a sibling of Column) so the row's owned children stay columnheaders. Requires the as="div" chain — native table tags cannot host Splitter.

Default: false

Slots

default

DataGridRowSlotProps

DataGrid.Table

Props

namespace

string | undefined

Namespace for dependency injection.

Default: "v0:data-grid"

Slots

default

DataGridTableSlotProps

Was this page helpful?