BaseDataTable

BaseDataTable is the core orchestrator table shell built on Vuetify v-data-table. Use it in plugin and workbench list widgets for a consistent toolbar, filters, export/import hooks, and row-action layout.

import BaseDataTable from "@raclettejs/core/orchestrator/components/dataTable/BaseDataTable.vue"

Separation of concerns

Core (BaseDataTable) provides table chrome: toolbar, filter drawer, export/import wiring, row selection, delete-confirm plumbing.

Your widget owns data fetching ($data), CRUD, routing, deleted-items toggles, and restore actions. Do not put workbench-specific routing into core.

---

Quick start

<template>
  <BaseDataTable
    :items="rows"
    :headers="headers"
    :data-name="$t('myPlugin.list.dataName')"
    :show-filters="true"
    :row-click-handler="(item) => goToEditById('myEditLink', item._id)"
  >
    <template #toolbar-end>
      <v-btn
        prepend-icon="mdi-plus"
        variant="flat"
        color="success"
        :text="$t('core.baseDataTable.createDataButton', { dataName: $t('myPlugin.list.dataName') })"
        @click="goToCreate('myCreateLink')"
      />
    </template>

    <template #row-actions="{ item }">
      <BaseDataTableConfirmDeleteBtn :item="item" @delete="deleteRow(item)" />
    </template>
  </BaseDataTable>
</template>

For Workbench plugins, keep navigation in useWorkbenchTableActions (workbench app composable) rather than encoding it in BaseDataTable.

---

Props

Data and display

Prop	Type	Default	Description
items	T[]	[]	Rows shown in the table
loading	boolean	—	Loading state
headers	Array<{ title, key, … }>	required	Column definitions
dataName	string	required	Entity label (search placeholder, toolbar title)
itemValue	string	"_id"	Unique row key for selection and export
itemsPerPage	number	10	Pagination page size
sortBy	{ key, order }[]	—	Initial column sort
groupBy	string | string[]	—	Vuetify group-by key(s)
showSearch	boolean	true	Search field above the table
showLoading	boolean	true	Pass loading through to v-data-table
showActionsColumn	boolean	true	Append an actions column
actionsHeaderTitle	string	—	Overrides core.baseDataTable.actions

Row interaction

Prop	Type	Description
rowClickHandler	(item, context?) => void	Called on row click (skips interactive controls)
isRowClickable	(item) => boolean	When set with rowClickHandler, limits pointer cursor and clicks

Deleted / soft-delete behaviour

Prop	Type	Description
itemsDeleted	boolean	Tints rows and switches hard-delete confirm copy
confirmDelete	boolean	Show confirm dialog for requestDelete (default true)
getDeleteConfirmMessage	(item) => string	Soft-delete message
getHardDeleteConfirmMessage	(item) => string	Used when itemsDeleted is true

Filters

Prop	Type	Default	Description
showFilters	boolean	false	Show Filters button and drawer
filterMaxSelectOptions	number	300	Max distinct values before a column uses a text field
filterDrawerAttach	"auto" | "viewport" | "parent"	"auto"	Drawer attachment; see Filters
onFilterStateChange	(filters, context) => void	—	Draft filter edits in the drawer
onFilterApply	(filters, context) => void	—	After Apply
onFilterReset	(filters, context) => void	—	After Reset

Export and import

See also DataExporter.

Prop	Type	Default	Description
showExport	boolean	true	Export mode in the actions menu
showSelect	boolean	false	Checkbox column independent of export
exportableItems	Record[]	—	Canonical records for export (matched by itemValue)
exportMeta	object	—	Optional meta in export payload
exportRowShape	"visible-columns" | "full-records"	"visible-columns"	Project export to header keys or full rows
exportShowDataScopeSwitch	boolean	true	Items/meta/combined toggle in exporter
exportFormats	FormatEntry[]	["json"]	Export formats
exportDefaultFormat	string	"json"	Default format
onFileLoaded	(content, file) => void	—	Enables import in the actions menu
importAccept	string	".json"	File input accept
importReadAs	"text" | "arrayBuffer"	"text"	File read mode

Toolbar indicators

Prop	Type	Default	Description
toolbarIndicators	{ id, label, color?, icon? }[]	[]	Generic active-mode chips and ⋮ menu badge

Core does not know what each indicator means — widgets pass labels and colours. Example for deleted-items mode:

:toolbar-indicators="
  showDeleted
    ? [{ id: 'deleted', label: $t('core.showDeleted'), color: 'error', icon: 'mdi-delete-outline' }]
    : []
"

When any indicator is present:

• A dot (or count) badge appears on the ⋮ actions menu button
• Default chips render in the toolbar (override with #toolbar-indicators)

---

Slots

Toolbar

Slot	Purpose
toolbar-start	Left side (default: dataName title)
toolbar-leading	Controls before actions (e.g. DB selector)
toolbar-indicators	Override default mode chips; props: { indicators }
toolbar-end	Primary actions (e.g. Create)
toolbar-filters-trigger	Override Filters button; props: { openFilters, toggleFilterDrawer, isFilterDrawerOpen }
toolbar-actions-trigger	Override ⋮ menu activator; props: { isOpen, toggle }
toolbar-actions-menu	Extra entries in the ⋮ menu (e.g. show-deleted switch)
toolbar-search	Override search field

Row actions

Slot	Purpose
prepend-row-actions	Icons before row actions (e.g. restore)
row-actions	Per-row actions (delete, edit, …)
append-row-actions	Trailing row actions

Filters drawer

Slot	Purpose
filters.summary	Above drawer header; props: { filters, activeCount }
filters.drawer.header	Drawer title row
filters.drawer.body	Filter fields
filters.drawer.footer	Apply / Reset buttons

Export / import

Slot	Purpose
exporter	Replace DataExporter
importer	Replace import UI
action.export-mode	Custom export-mode menu item
action.import	Custom import menu item

Columns and passthrough

Slot	Purpose
item.<key>	Custom cell renderer for a column
body.prepend, body.append, tfoot	Summary rows
bottom, thead, …	Other v-data-table slots forwarded automatically
dialogs	Sibling content below the table

Built-in column slots: item.color, item.tags (when not overridden).

---

Patterns

Delete with confirmation

Use BaseDataTableConfirmDeleteBtn inside #row-actions. It calls requestDelete from useBaseDataTableDeleteConfirm() (provided by BaseDataTable).

<template #row-actions="{ item }">
  <BaseDataTableConfirmDeleteBtn :item="item" @delete="deleteRow(item)" />
</template>

Show deleted / hard delete

Keep showDeleted in the widget. Wire:

• :items-deleted="showDeleted" — row tint and hard-delete messages
• #toolbar-actions-menu — switch to toggle the mode
• :toolbar-indicators — visible badge/chip when the mode is active (even with zero rows)
• #prepend-row-actions — restore icon when showDeleted

Fetch with isDeleted: showDeleted.value on your $data calls.

Export round-trip (Workbench)

See DataExporter — Use with BaseDataTable.

---

Filters

• Click Filters to open a right-side drawer.
• Edits are draft until Apply; Reset clears applied filters.
• Columns with active filters get a highlighted header and cell background.

Drawer attachment

filterDrawerAttach	Behaviour
auto (default)	Viewport v-navigation-drawer on page and inline; custom slide-over panel inside the table host when slotType is modal
viewport	Full-height drawer on the viewport
parent	Drawer contained to the table host element

Modal detection uses provide / inject from WidgetsLayoutLoader (slotType: page | modal | inline) — the same value every *Widget.vue receives. No extra widget prop is required.

On full-page tables with the raclette footer (“Cooked with raclette”), the drawer footer gets extra bottom padding so Apply/Reset stay above the app footer.

---

See also

• DataExporter
• Custom export formats
• Widgets (Golden Path)
• Frontend reference