Note

This documentation describes the Datagrid Vue component for native UI views for Xml templates see datagrid.

Datagrid

A ViewModel-aware data grid that renders ViewModelProperty definitions as columns. Supports inline editing, grouping, sorting, selection, infinite scrolling, drag-and-drop rows, and responsive card mode.

Import

import { Datagrid } from '@neos/app'

Props

Prop	Type	Default	Description
`source`	`Model[]`	`undefined`	Explicit data source. Falls back to `viewModel.datasource`
`editable`	`boolean`	`false`	Enable inline cell editing
`groupable`	`boolean`	`true`	Allow column grouping via drag-and-drop
`groupPanelVisible`	`boolean`	`undefined`	Show the grouping panel above the grid
`indicatorColumn`	`boolean`	`true`	Show the left indicator column (dirty/error state)
`selectionColumn`	`boolean`	`true`	Show the left checkbox selection column
`noDataOverlay`	`boolean`	`true`	Show a no-data message when the source is empty
`rowHeight`	`number`	`undefined`	Fixed row height in pixels
`autoRowHeight`	`boolean`	`false`	Auto-size row height to content
`addRow`	`boolean`	`true`	Show add-row button at the bottom
`booleanDisplayMode`	`'checkbox' \\| 'text'`	`'checkbox'`	How boolean values are displayed in cells
`resizeColumnsOnRefresh`	`boolean`	`false`	Recalculate column widths on data refresh
`infiniteScrolling`	`boolean`	`undefined`	Load more data on scroll instead of paginating
`exportable`	`boolean`	`true`	Show export button
`columnPicker`	`boolean`	`true`	Show column visibility picker
`summaryTag`	`boolean`	`true`	Show column summary footer
`rowDetailVisibilityMode`	`'single' \\| 'multiple'`	`'single'`	Whether one or multiple row-detail panels can be open at once
`rowDetailExpandedByDefault`	`boolean`	`false`	Expand all row-detail panels by default
`rowDragover`	`(args: DatagridDragEventArgs) => boolean`	`undefined`	Return `true` to allow a row drag-over
`rowDrop`	`(args: DatagridDragEventArgs) => void`	`undefined`	Called when a row is dropped
`colspan`	`(args: DatagridColspanEventArgs) => number`	`undefined`	Return the number of columns a cell should span
`footerCounts`	`boolean`	`undefined`	Show record count in the footer
`cardMode`	`boolean`	`undefined`	Force card mode regardless of screen width
`cardModeBreakpoint`	`ResponsiveDatagridCardModeBreakpoint`	`undefined`	Breakpoint to switch to card mode
`cardModeScope`	`ResponsiveDatagridCardModeScope`	`undefined`	Scope selector for card mode breakpoint
`cardModeHeaderPropertyName`	`string`	`undefined`	Property to use as the card title
`inputNumberType`	`DatagridInputNumberType`	`null`	Input type for numeric cells in edit mode

Slots

Slot	Scope	Description
`{propertyName}-display`	`{ cell }`	Custom read-only cell for the named column
`{propertyName}-edit`	`{ cell, getEditComponentProps, getEditComponentListeners }`	Custom edit cell for the named column
`row-detail`	`{ item }`	Expandable row detail panel
`footer`	—	Custom footer content
`card`	`{ item }`	Custom card template in card mode

Types

import type { DatagridColspanEventArgs, DatagridDragEventArgs } from '@neos/app'

Usage Examples

Minimal — read-only bound to ViewModel

<Datagrid />

Editable grid with pagination disabled

<Datagrid :editable="true" :infinite-scrolling="true" :add-row="true" />

Custom cell display

<Datagrid>
  <template #status-display="{ cell }">
    <Badge :value="cell.item.status" :severity="cell.item.statusSeverity" />
  </template>
</Datagrid>

Expandable row detail

<Datagrid :row-detail-visibility-mode="'multiple'" :row-detail-expanded-by-default="false">
  <template #row-detail="{ item }">
    <VerticalLayout space="medium">
      <StringFormField property-name="notes" :item="item" :multi-lines="true" :rows="3" />
    </VerticalLayout>
  </template>
</Datagrid>

Drag-and-drop row reordering

function canDrop({ sourceItem, targetItem }) {
  return sourceItem.parentId === targetItem.parentId
}
function handleDrop({ sourceItem, targetItem }) {
  reorderItems(sourceItem, targetItem)
}

<Datagrid :row-dragover="canDrop" :row-drop="handleDrop" />

Responsive card mode on small screens

<Datagrid card-mode-header-property-name="name" card-mode-scope="container" />

Table of Contents