@raclettejs/core 0.1.33-canary.3 → 0.1.34

package/services/frontend/src/orchestrator/components/dataTable/BaseDataTable.vue

@@ -1,24 +1,28 @@
 <template>
   <div>
-    <v-sheet border rounded>
-      <v-data-table
-        v-model="selected"
-        v-model:search="search"
-        density="compact"
-        :items-per-page="itemsPerPage"
-        sticky
-        fixed-header
-        :headers="computedHeaders"
-        :items="items"
-        :loading="loading"
-        @click:row="handleRowClick"
-        @update:current-items="(items) => emit('update:currentItems', items)"
-        :class="{ itemsDeleted }"
-        :show-select="showExport"
-        :item-value
-      >
-        <template #top>
-          <v-toolbar flat>
+    <v-data-table
+      v-model="selected"
+      v-model:search="search"
+      density="compact"
+      :items-per-page="itemsPerPage"
+      sticky
+      fixed-header
+      :headers="computedHeaders"
+      :items="filteredItems"
+      :loading="loading"
+      @click:row="handleRowClick"
+      @update:current-items="(items) => emit('update:currentItems', items)"
+      :class="{ itemsDeleted }"
+      :show-select="showExport && isExportMode"
+      :item-value
+    >
+      <template #top>
+        <v-toolbar
+          flat
+          density="compact"
+          class="base-data-table-toolbar tw:pr-2"
+        >
+          <slot name="toolbar-start">
             <v-toolbar-title v-if="dataName?.length">
               <v-icon
                 color="medium-emphasis"
@@ -26,61 +30,82 @@
                 size="x-small"
                 start
               />
-
               {{ dataName }}
             </v-toolbar-title>
+          </slot>
 
-            <template #append>
-              <div
-                class="tw:flex tw:flex-wrap tw:gap-2 tw:items-center tw:justify-end"
+          <template #append>
+            <div
+              class="tw:flex tw:min-w-0 tw:w-full tw:flex-wrap tw:items-center tw:justify-end tw:gap-2"
+            >
+              <slot name="toolbar-leading" />
+              <slot name="toolbar-end" />
+              <slot
+                name="toolbar-filters-trigger"
+                v-bind="filterTriggerSlotProps"
               >
-                <slot name="actions" />
-                <slot name="toolbar-leading" />
-                <FileUpload
-                  v-if="onFileLoaded"
-                  ref="importFileUploadRef"
-                  :on-file-loaded="onFileLoaded"
-                  :accept="importAccept"
-                  :read-as="importReadAs"
+                <v-btn
+                  v-if="showFilters"
+                  variant="outlined"
+                  prepend-icon="mdi-filter-variant"
+                  :text="$t('core.baseDataTable.filters')"
+                  @click="openFilters"
                 />
-                <v-btn-group density="compact" divided>
-                  <DataExporter
-                    v-if="showExport"
-                    :data="exportPayloadData"
-                    :disabled="!selected.length"
-                    :formats="exportFormats"
-                    :default-format="exportDefaultFormat"
-                    :button-label="$t('core.export')"
-                    color="info"
-                    variant="elevated"
-                  />
-                  <v-btn
-                    v-if="onFileLoaded"
-                    color="teal"
-                    variant="elevated"
-                    density="compact"
-                    prepend-icon="mdi-database-import"
-                    :text="$t('core.import')"
-                    @click="importFileUploadRef?.openPicker()"
-                  />
-                  <v-btn
-                    v-if="showCreateButton"
-                    @click="handleCreate"
-                    prepend-icon="mdi-plus"
-                    density="compact"
-                    :text="
-                      $t('core.baseDataTable.createDataButton', {
-                        dataName,
-                      })
-                    "
-                    variant="elevated"
-                    color="success"
-                  />
-                </v-btn-group>
-              </div>
-            </template>
-          </v-toolbar>
-
+              </slot>
+              <slot
+                name="toolbar-actions-trigger"
+                v-bind="actionsTriggerSlotProps"
+              >
+                <v-menu
+                  v-if="showActionsOverflowMenu"
+                  v-model="isActionsMenuOpen"
+                  location="bottom end"
+                >
+                  <template #activator="{ props: menuProps }">
+                    <v-btn
+                      v-bind="menuProps"
+                      icon="mdi-dots-vertical"
+                      variant="text"
+                      density="comfortable"
+                      :aria-label="$t('core.baseDataTable.actionsMenu')"
+                    />
+                  </template>
+                  <v-list density="compact" nav min-width="260">
+                    <slot
+                      name="action.export-mode"
+                      v-bind="exportModeActionSlotProps"
+                    >
+                      <v-list-item
+                        v-if="showExport"
+                        :title="
+                          isExportMode
+                            ? $t('core.baseDataTable.disableExportMode')
+                            : $t('core.baseDataTable.enableExportMode')
+                        "
+                        prepend-icon="mdi-checkbox-marked-outline"
+                        @click="toggleExportMode"
+                      />
+                    </slot>
+                    <slot name="action.import" v-bind="importActionSlotProps">
+                      <v-list-item
+                        v-if="onFileLoaded"
+                        :title="$t('core.import')"
+                        prepend-icon="mdi-database-import"
+                        @click="importFileUploadRef?.openPicker()"
+                      />
+                    </slot>
+                    <slot
+                      name="toolbar-actions-menu"
+                      v-bind="menuActionSlotProps"
+                    />
+                  </v-list>
+                </v-menu>
+              </slot>
+            </div>
+          </template>
+        </v-toolbar>
+
+        <slot name="toolbar-search">
           <v-text-field
             v-model="search"
             :label="
@@ -93,135 +118,169 @@
             hide-details
             single-line
             density="compact"
+            class="tw:mt-2 tw:mb-4"
           />
-        </template>
+        </slot>
+
+        <FileUpload
+          v-if="onFileLoaded"
+          ref="importFileUploadRef"
+          :on-file-loaded="onFileLoaded"
+          :accept="importAccept"
+          :read-as="importReadAs"
+        />
 
-        <template
-          #item.color="{ item }"
-          v-if="!customSlots.includes('item.color')"
-        >
-          <div class="tw:flex tw:gap-2" v-if="item.color?.length">
-            <v-chip :color="item.color" label variant="outlined" size="small">
-              {{ item.color }}
-            </v-chip>
-          </div>
-        </template>
-        <!-- Built-in tags column -->
-        <template
-          #item.tags="{ item }"
-          v-if="!customSlots.includes('item.tags')"
-        >
-          <div class="tw:flex tw:gap-2" v-if="item.tags?.length">
-            <v-chip
-              v-for="tag in item.tags"
-              :key="tag._id || tag.id || tag"
-              :color="tag.color"
-              label
-              variant="outlined"
-              size="small"
-            >
-              {{ tag.title || tag.name || tag }}
-            </v-chip>
-          </div>
-        </template>
-
-        <!-- Dynamic slots for custom column rendering -->
-        <template v-for="slot in customSlots" :key="slot" #[slot]="slotProps">
-          <slot :name="slot" v-bind="slotProps" />
-        </template>
-
-        <!-- Actions column template -->
-        <template #item.actions="{ item }" v-if="showActionsColumn">
-          <slot name="prepend-row-actions" :item="item"> </slot>
-          <slot name="row-actions" :item="item">
-            <!-- Default delete action -->
-            <v-icon
-              v-if="showDeleteAction && !isDeleteDisabled(item)"
-              color="red"
-              @click.stop.prevent="handleDelete(item)"
-              class="mr-2"
-              :title="
-                $t('core.baseDataTable.deleteDataTitle', {
-                  dataName,
-                })
-              "
-              icon="mdi-delete"
-            />
-          </slot>
-          <slot name="append-row-actions" :item="item"> </slot>
-        </template>
-
-        <!-- Loading template -->
-        <template #loader>
-          <v-skeleton-loader
-            class="mx-auto border"
-            :height="500"
-            width="100%"
-            type="list-item"
-            :loading="true"
+        <slot name="importer" v-bind="importerSlotProps" />
+        <slot name="exporter" v-bind="exporterSlotProps">
+          <DataExporter
+            v-if="showExport && isExportMode"
+            :data="exportPayloadData"
+            :disabled="!selected.length"
+            :formats="exportFormats"
+            :default-format="exportDefaultFormat"
+            :button-label="$t('core.export')"
           />
-        </template>
-
-        <!-- Additional table slots (this caused the table to be empty) -->
-        <!-- <slot name="table-slots" /> -->
-      </v-data-table>
-    </v-sheet>
-    <!-- Delete Confirmation Dialog -->
-    <v-dialog
-      v-model="deleteDialog"
-      max-width="400"
-      v-if="showDeleteAction && itemToDelete"
-    >
-      <v-card>
-        <v-card-title class="text-h6">
-          {{
-            $t("core.baseDataTable.deleteDataTitle", {
-              dataName,
-            })
-          }}
-        </v-card-title>
-
-        <v-card-text
-          v-html="
-            $t('core.baseDataTable.deleteDataConfirmMessage', {
-              article: dataArticle,
-              dataName,
-              value:
-                itemToDelete.email ||
-                itemToDelete.title ||
-                itemToDelete.name ||
-                itemToDelete._id,
-            })
-          "
+        </slot>
+      </template>
+
+      <template
+        #item.color="{ item }"
+        v-if="!customSlots.includes('item.color')"
+      >
+        <div class="tw:flex tw:gap-2" v-if="item.color?.length">
+          <v-chip :color="item.color" label variant="outlined" size="small">
+            {{ item.color }}
+          </v-chip>
+        </div>
+      </template>
+      <!-- Built-in tags column -->
+      <template #item.tags="{ item }" v-if="!customSlots.includes('item.tags')">
+        <div class="tw:flex tw:gap-2" v-if="item.tags?.length">
+          <v-chip
+            v-for="tag in item.tags"
+            :key="tag._id || tag.id || tag"
+            :color="tag.color"
+            label
+            variant="outlined"
+            size="small"
+          >
+            {{ tag.title || tag.name || tag }}
+          </v-chip>
+        </div>
+      </template>
+
+      <!-- Dynamic slots for custom column rendering -->
+      <template v-for="slot in customSlots" :key="slot" #[slot]="slotProps">
+        <slot :name="slot" v-bind="slotProps" />
+      </template>
+
+      <!-- Actions column template -->
+      <template #item.actions="{ item }" v-if="showActionsColumn">
+        <slot name="prepend-row-actions" :item="item"> </slot>
+        <slot name="row-actions" :item="item" />
+        <slot name="append-row-actions" :item="item"> </slot>
+      </template>
+
+      <!-- Loading template -->
+      <template #loader>
+        <v-skeleton-loader
+          class="mx-auto border"
+          :height="500"
+          width="100%"
+          type="list-item"
+          :loading="true"
         />
-        <v-card-actions>
-          <v-spacer />
-          <v-btn variant="text" @click="deleteDialog = false">
-            {{ $t("core.baseDataTable.deleteDataConfirmCancel") }}
-          </v-btn>
-          <v-btn color="red" variant="flat" @click="confirmDelete">
-            {{ $t("core.baseDataTable.deleteDataConfirmButton") }}
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+      </template>
 
+      <!-- Additional table slots (this caused the table to be empty) -->
+      <!-- <slot name="table-slots" /> -->
+    </v-data-table>
     <!-- Additional dialogs slot -->
     <slot name="dialogs" />
+
+    <v-navigation-drawer
+      v-model="isFilterDrawerOpen"
+      location="right"
+      temporary
+      width="360"
+      :aria-label="$t('core.baseDataTable.filters')"
+    >
+      <div class="tw:flex tw:flex-col tw:h-full">
+        <slot name="filters.summary" v-bind="filterSummarySlotProps" />
+        <slot name="filters.drawer.header" v-bind="filterDrawerHeaderSlotProps">
+          <div
+            class="tw:flex tw:items-center tw:justify-between tw:px-4 tw:py-3"
+          >
+            <span class="tw:font-semibold">{{
+              $t("core.baseDataTable.filters")
+            }}</span>
+            <v-btn
+              icon="mdi-close"
+              size="small"
+              variant="text"
+              :aria-label="$t('core.baseDataTable.closeFilters')"
+              @click="isFilterDrawerOpen = false"
+            />
+          </div>
+        </slot>
+
+        <slot name="filters.drawer.body" v-bind="filterDrawerBodySlotProps">
+          <div class="tw:px-4 tw:pb-4 tw:flex tw:flex-col tw:gap-3">
+            <v-text-field
+              v-for="header in filterableHeaders"
+              :key="String(header.key)"
+              v-model="columnFilters[String(header.key)]"
+              @update:model-value="notifyFilterStateChange"
+              :label="header.title"
+              clearable
+              hide-details
+              density="compact"
+              variant="outlined"
+            />
+          </div>
+        </slot>
+
+        <div class="tw:mt-auto tw:px-4 tw:pb-4 tw:pt-2 tw:flex tw:gap-2">
+          <slot
+            name="filters.drawer.footer"
+            v-bind="filterDrawerFooterSlotProps"
+          >
+            <v-btn
+              variant="outlined"
+              prepend-icon="mdi-filter-remove"
+              :text="$t('core.baseDataTable.resetFilters')"
+              @click="resetFilters"
+            />
+            <v-btn
+              color="primary"
+              variant="flat"
+              prepend-icon="mdi-check"
+              :text="$t('core.baseDataTable.applyFilters')"
+              @click="applyFilters"
+            />
+          </slot>
+        </div>
+      </div>
+    </v-navigation-drawer>
   </div>
 </template>
 
 <script setup lang="ts" generic="T extends Record<string, any>">
 import { computed, ref, useSlots, useTemplateRef } from "vue"
-import { useRouteState } from "@raclettejs/core/orchestrator/composables"
-import DataExporter from "@raclettejs/core/orchestrator/components/dataExport/DataExporter.vue"
-import FileUpload from "@raclettejs/core/orchestrator/components/input/FileUpload.vue"
+import DataExporter from "@racletteOrchestrator/components/dataExport/DataExporter.vue"
+import FileUpload from "@racletteOrchestrator/components/input/FileUpload.vue"
 import type {
   ExportPayload,
   FormatEntry,
 } from "@racletteOrchestrator/composables/useExport/types"
 import type { DataTableItem } from "vuetify/lib/components/VDataTable/types"
 
+export interface BaseDataTableActionContext<T> {
+  item?: T
+  filters: Record<string, string>
+  selectedIds: Array<string | number>
+}
+
 export interface BaseDataTableProps<T> {
   uuid?: string
   // Data props
@@ -238,27 +297,19 @@ export interface BaseDataTableProps<T> {
   }>
   itemsPerPage?: number
 
-  // Create button
-  showCreateButton?: boolean
-  createInteractionLinkId?: string
-
   // Row actions
   showActionsColumn?: boolean
-  showDeleteAction?: boolean
-
-  // Navigation
-  editInteractionLinkId?: string
 
   // Item processing
-  deleteValidator?: (item: T) => boolean
-  rowClickHandler?: (item: T) => void
+  rowClickHandler?: (item: T, context?: BaseDataTableActionContext<T>) => void
 
   dataName: string
-  dataArticle: string
 
   showExport?: boolean
+  showFilters?: boolean
 
   itemValue?: string
+  actionsHeaderTitle?: string
 
   /**
    * When set, exported rows come from here (matched to table selection via `itemValue`, default `_id`).
@@ -275,6 +326,19 @@ export interface BaseDataTableProps<T> {
   onFileLoaded?: (content: string | ArrayBuffer, file: File) => void
   importAccept?: string
   importReadAs?: "text" | "arrayBuffer"
+
+  onFilterStateChange?: (
+    payload: Record<string, string>,
+    context: BaseDataTableActionContext<T>,
+  ) => void
+  onFilterApply?: (
+    payload: Record<string, string>,
+    context: BaseDataTableActionContext<T>,
+  ) => void
+  onFilterReset?: (
+    payload: Record<string, string>,
+    context: BaseDataTableActionContext<T>,
+  ) => void
 }
 
 const props = withDefaults(defineProps<BaseDataTableProps<T>>(), {
@@ -282,11 +346,11 @@ const props = withDefaults(defineProps<BaseDataTableProps<T>>(), {
   items: () => [],
   itemsDeleted: false,
   itemsPerPage: 50,
-  showCreateButton: true,
   showActionsColumn: true,
-  showDeleteAction: true,
   showExport: true,
+  showFilters: false,
   itemValue: "_id",
+  actionsHeaderTitle: "",
   exportableItems: undefined,
   exportMeta: undefined,
   exportFormats: () => ["json"] as FormatEntry[],
@@ -294,18 +358,28 @@ const props = withDefaults(defineProps<BaseDataTableProps<T>>(), {
   onFileLoaded: undefined,
   importAccept: ".json",
   importReadAs: "text",
+  onFilterStateChange: undefined,
+  onFilterApply: undefined,
+  onFilterReset: undefined,
 })
 
 const emit = defineEmits<{
-  create: []
-  edit: [item: T]
-  delete: [item: T]
   rowClick: [item: T]
   "update:currentItems": [items: readonly DataTableItem<T>[]]
 }>()
 
 const slots = useSlots()
-const { triggerInteractionLinkById } = useRouteState()
+
+/** Hide ⋮ when the menu would be empty (no export toggle, import, or slot content). */
+const showActionsOverflowMenu = computed(
+  () =>
+    Boolean(props.showExport) ||
+    Boolean(props.onFileLoaded) ||
+    Boolean(slots["toolbar-actions-menu"]) ||
+    Boolean(slots["action.export-mode"]) ||
+    Boolean(slots["action.import"]),
+)
+
 const importFileUploadRef = useTemplateRef<{
   openPicker: () => void
 }>("importFileUploadRef")
@@ -313,20 +387,40 @@ const importFileUploadRef = useTemplateRef<{
 // Reactive data
 const search = ref("")
 const selected = ref<Array<string | number>>([])
-const deleteDialog = ref(false)
-const itemToDelete = ref<T | null>(null)
+const isExportMode = ref(false)
+const isActionsMenuOpen = ref(false)
+const isFilterDrawerOpen = ref(false)
+const columnFilters = ref<Record<string, string>>({})
 
 const computedHeaders = computed(() => {
   if (!props.headers || !props.headers?.length) {
     return null
   }
 
-  const headers = [...props.headers]
+  const headers = [...props.headers].map((header) => {
+    const key = String(header.key)
+    const hasFilter =
+      props.showFilters && columnFilters.value[key]?.trim()?.length > 0
+    return {
+      ...header,
+      title: header.title,
+      ...(hasFilter
+        ? {
+            headerProps: {
+              class: "filtered-column-header",
+            },
+            cellProps: {
+              class: "filtered-column-cell",
+            },
+          }
+        : {}),
+    }
+  })
 
   // Add actions column if needed
   if (props.showActionsColumn) {
     headers.push({
-      title: "Actions",
+      title: props.actionsHeaderTitle || "Actions",
       key: "actions",
       align: "end" as const,
       sortable: false,
@@ -348,6 +442,37 @@ const exportColumnKeys = computed(() => {
     .filter((key) => key.length > 0 && key !== "actions")
 })
 
+const filterableHeaders = computed(() =>
+  (props.headers ?? []).filter((header) => {
+    const key = String(header.key)
+    return key.length > 0 && key !== "actions"
+  }),
+)
+
+const filteredItems = computed(() => {
+  const rows = props.items ?? []
+  if (!props.showFilters) {
+    return rows
+  }
+
+  const activeFilters = Object.entries(columnFilters.value).filter(
+    ([, value]) => value?.trim().length > 0,
+  )
+  if (!activeFilters.length) {
+    return rows
+  }
+
+  return rows.filter((row) =>
+    activeFilters.every(([key, filterValue]) => {
+      const raw = row[key as keyof T]
+      if (raw === undefined || raw === null) {
+        return false
+      }
+      return String(raw).toLowerCase().includes(filterValue.toLowerCase())
+    }),
+  )
+})
+
 const projectRowsToVisibleColumns = <TRow extends Record<string, unknown>>(
   rows: TRow[],
 ) => {
@@ -424,53 +549,205 @@ const exportPayloadData = computed<ExportPayload>(() => {
 })
 
 // Methods
-const handleCreate = () => {
-  if (props.createInteractionLinkId) {
-    triggerInteractionLinkById(props.createInteractionLinkId)
+const toggleExportMode = () => {
+  isExportMode.value = !isExportMode.value
+  if (!isExportMode.value) {
+    selected.value = []
   }
-  emit("create")
 }
 
-const handleRowClick = (_: PointerEvent, row: { item: T }) => {
-  if (props.rowClickHandler) {
-    props.rowClickHandler(row.item)
-    return
-  }
+const toggleFilterDrawer = () => {
+  isFilterDrawerOpen.value = !isFilterDrawerOpen.value
+}
 
-  if (props.editInteractionLinkId) {
-    const item = row.item as any
+const openFilters = () => {
+  isFilterDrawerOpen.value = true
+}
 
-    triggerInteractionLinkById(props.editInteractionLinkId, {
-      id: item._id,
-    })
+const handleRowClick = (_: PointerEvent, row: { item: T }) => {
+  const context = actionContext(row.item)
+  if (props.rowClickHandler) {
+    props.rowClickHandler(row.item, context)
   }
 
-  emit("edit", row.item)
   emit("rowClick", row.item)
 }
 
-const handleDelete = (item: T) => {
-  itemToDelete.value = item
-  deleteDialog.value = true
-}
+const filterPayload = computed(() => ({ ...columnFilters.value }))
+const actionContext = (item?: T): BaseDataTableActionContext<T> => ({
+  item,
+  filters: filterPayload.value,
+  selectedIds: [...selected.value],
+})
 
-const confirmDelete = () => {
-  if (itemToDelete.value) {
-    emit("delete", itemToDelete.value)
+const notifyFilterStateChange = () => {
+  if (props.onFilterStateChange) {
+    props.onFilterStateChange(filterPayload.value, actionContext())
+  } else {
+    console.log("[BaseDataTable] filter-state-change", filterPayload.value)
   }
+}
 
-  itemToDelete.value = null
-  deleteDialog.value = false
+const applyFilters = () => {
+  if (props.onFilterApply) {
+    props.onFilterApply(filterPayload.value, actionContext())
+  } else {
+    console.log("[BaseDataTable] filter-apply", filterPayload.value)
+  }
 }
 
-const isDeleteDisabled = (item: T): boolean => {
-  return props.deleteValidator ? !props.deleteValidator(item) : false
+const resetFilters = () => {
+  columnFilters.value = {}
+  if (props.onFilterReset) {
+    props.onFilterReset({}, actionContext())
+  } else {
+    console.log("[BaseDataTable] filter-reset", {})
+  }
 }
+
+const actionsTriggerSlotProps = computed(() => ({
+  isOpen: isActionsMenuOpen.value,
+  toggle: () => {
+    isActionsMenuOpen.value = !isActionsMenuOpen.value
+  },
+}))
+
+const menuActionSlotProps = computed(() => ({
+  isExportMode: isExportMode.value,
+  toggleExportMode,
+  isFilterDrawerOpen: isFilterDrawerOpen.value,
+  toggleFilterDrawer,
+  openFilters,
+  canExport: props.showExport,
+  canImport: Boolean(props.onFileLoaded),
+  openImportPicker: () => importFileUploadRef.value?.openPicker(),
+  context: actionContext(),
+}))
+
+const exportModeActionSlotProps = computed(() => ({
+  active: isExportMode.value,
+  enabled: props.showExport,
+  toggle: toggleExportMode,
+}))
+
+const importActionSlotProps = computed(() => ({
+  enabled: Boolean(props.onFileLoaded),
+  openPicker: () => importFileUploadRef.value?.openPicker(),
+}))
+
+const filterTriggerSlotProps = computed(() => ({
+  isFilterDrawerOpen: isFilterDrawerOpen.value,
+  openFilters,
+  toggleFilterDrawer,
+}))
+
+const exporterSlotProps = computed(() => ({
+  data: exportPayloadData.value,
+  disabled: !selected.value.length,
+  formats: props.exportFormats,
+  defaultFormat: props.exportDefaultFormat,
+  isExportMode: isExportMode.value,
+  selectedCount: selected.value.length,
+}))
+
+const importerSlotProps = computed(() => ({
+  openPicker: () => importFileUploadRef.value?.openPicker(),
+  accept: props.importAccept,
+  readAs: props.importReadAs,
+  enabled: Boolean(props.onFileLoaded),
+}))
+
+const filterSummarySlotProps = computed(() => ({
+  filters: filterPayload.value,
+  activeCount: Object.values(columnFilters.value).filter(
+    (value) => value?.trim().length > 0,
+  ).length,
+}))
+
+const filterDrawerHeaderSlotProps = computed(() => ({
+  close: () => {
+    isFilterDrawerOpen.value = false
+  },
+  filters: filterPayload.value,
+}))
+
+const filterDrawerBodySlotProps = computed(() => ({
+  filters: columnFilters.value,
+  headers: filterableHeaders.value,
+  setFilter: (key: string, value: string) => {
+    columnFilters.value[key] = value
+    notifyFilterStateChange()
+  },
+}))
+
+const filterDrawerFooterSlotProps = computed(() => ({
+  applyFilters,
+  resetFilters,
+  filters: filterPayload.value,
+  context: actionContext(),
+}))
 </script>
 
 <style lang="css">
+/*
+ * VToolbar pins .v-toolbar__content to a fixed height (density-compact ≈ 48px)
+ * and sets overflow: hidden, which clips wrapped toolbar controls when the
+ * table lives in a narrow container (not just small viewports).
+ */
+.base-data-table-toolbar .v-toolbar__content {
+  height: auto !important;
+  min-height: 48px;
+  overflow: visible;
+  flex-wrap: wrap;
+  row-gap: 8px;
+  column-gap: 8px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/*
+ * Vuetify VToolbar.sass: .v-toolbar__content > .v-toolbar-title {
+ *   margin-inline-start: $toolbar-title-margin  // _variables.scss → 20px
+ * }
+ */
+.base-data-table-toolbar .v-toolbar__content > .v-toolbar-title {
+  margin-inline-start: 0;
+}
+
+.base-data-table-toolbar .v-toolbar__append {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/*
+ * Default VToolbar gives the title flex: 1 1 so it steals shrink and ellipsizes
+ * before the append block wraps. Prefer capping the title width so actions keep
+ * horizontal room; headline text aligns to the end of the title cell.
+ */
+.base-data-table-toolbar .v-toolbar-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: min(45%, 448px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .itemsDeleted .v-data-table__tr {
   background-color: rgb(233, 190, 190);
   color: #000;
 }
+
+.filtered-column-header {
+  background-color: rgba(var(--v-theme-info), 0.18);
+  box-shadow: inset 0 -2px 0 rgba(var(--v-theme-info), 0.9);
+}
+
+.filtered-column-cell {
+  background-color: rgba(var(--v-theme-info), 0.1);
+}
 </style>