VDatatableServerPlus API
All base VDataTableServer props/events/slots are supported. Use table-height instead of height.
Component
Props
| Name | Type | Default | Details |
|---|---|---|---|
| headers | required | Header model used by the column menu, filter row, and grouping UI. | |
| title | undefined | Title text in the toolbar. | |
| hide-title-bar | false | Hide toolbar including title and header commands. | |
| hide-column-menu | false | Hide column menu button and popup. | |
| drag-menu-height | 250 | Max height for column menu popup list. | |
| column-menu-z-index | undefined | Custom z-index for column menu. | |
| drag-menu-icon | $menu | Column menu activator icon. | |
| drag-item-icon | mdi-drag-vertical | Drag icon in column menu rows. | |
| drag-item-freeze-icon | mdi-table-lock | Freeze icon in column menu rows. | |
| drag-item-un-freeze-icon | mdi-table | Unfreeze icon in column menu rows. | |
| hide-filter-row | false | Hide column-level filter row. | |
| filter-icon | mdi-filter | Filter type menu icon. | |
| filter-menu-z-index | undefined | Custom z-index for filter menu. | |
| hide-footer | false | Hide pagination footer. | |
| show-right-panel | false | Enable splitter and show right panel slot. | |
| right-panel-fixed | true | Disable/enable splitter dragging. | |
| right-panel-width | 20 | Initial right panel width in percent. | |
| table-height | 50vh | Main table height. | |
| select-on-row | false | Toggle row selection on row click. | |
| highlight-row | false | Enable selected row highlight behavior. | |
| row-highlight-class | undefined | Class used when row highlight is enabled. | |
| selected-row | null | Selected row model (`v-model:selected-row`). | |
| header-text-size | undefined | Header text font size. | |
| header-icon-size | undefined | Header icon font size. | |
| header-cell-class | undefined | Custom class for both header and filter-row cells. | |
| header-cell-style | undefined | Custom inline style for both header and filter-row cells. | |
| table-class | undefined | Custom class for internal `v-data-table-server` root. | |
| table-style | undefined | Custom style for internal `v-data-table-server` root. | |
| right-panel-class | undefined | Custom class for right panel container. | |
| right-panel-style | undefined | Custom style for right panel container. | |
| data-table-props | {} | Pass-through props spread to internal `v-data-table-server`. | |
| group-by-icon | mdi-table-plus | Group-by toggle icon. | |
| group-sort-asc-icon | mdi-sort-ascending | Group sort ascending icon. | |
| group-sort-desc-icon | mdi-sort-descending | Group sort descending icon. |
Events
| Name | Payload | Details |
|---|---|---|
| update:selectedRow | any | Emits when `selected-row` changes. |
| click:row | { $event, param } | Fires on row click. |
| columnMenuOpened | boolean | Column menu open state changed. |
| columnMenuDragChange | { moved: { element, oldIndex, newIndex } } | Column reordered from drag-and-drop. |
| columnMenuChecked | { element, $event } | Column show/hide checkbox changed. |
| columnMenuFixed | { element, $event } | Column freeze/unfreeze toggled. |
Slots
| Name | Slot Props | Details |
|---|---|---|
| title | - | Toolbar title area. |
| header-commands | { clearSearch } | Right side of toolbar actions. |
| header-expand-section | - | Area between toolbar and table. |
| footer-append | - | Footer append area after pagination text. |
| right-panel | - | Right panel content when splitter is enabled. |
| bottom-area | - | Bottom area below table/splitter. |