📄 DataExporter - Exporting items, meta, or both

Use DataExporter when users need to export data from your widget or table.

Quick start

<template>
  <DataExporter
    :data="exportPayload"
    :formats="['json', 'yaml']
    filename="servers"
    default-format="json"
  />
</template>

<script setup lang="ts">
import DataExporter from "@raclettejs/core/orchestrator/components/dataExport/DataExporter.vue"

const exportPayload = {
  items: [
    { id: "1", name: "vm-1" },
    { id: "2", name: "vm-2" },
  ],
  meta: {
    generatedAt: new Date().toISOString(),
    currency: "EUR",
  },
}
</script>

---

Canonical payload shape

DataExporter expects this envelope:

{
  items: unknown[]
  meta?: unknown
}

---

Data scope switch

The exporter popover provides a data scope switch:

• Combined -> exports { items, meta? }
• Items -> exports only the items array
• Meta -> exports only the meta object

This is useful when users want:

• just invoice line items (items)
• just configuration object (meta)
• full context (combined)

---

Use with BaseDataTable

BaseDataTable already wires DataExporter and emits the export envelope.

<BaseDataTable
  :items="rows"
  :exportable-items="rows"
  item-value="id"
  :show-filters="true"
  :export-formats="['json', myCustomFormat]"
/>

New table action model

• Export selection checkboxes are shown only when export mode is enabled from the table actions menu.
• Import and filter controls are available from the actions menu.
• Active per-column filters are indicated in the header (* suffix on the affected column title).
• Create/Edit/Delete are intentionally not built in; implement those in consumer widgets via slots and rowClickHandler.

Workbench action-layer pattern

For Workbench plugins, keep routing/CUD behavior in a shared Workbench composable (for example useWorkbenchTableActions) instead of encoding it in BaseDataTable.

Typical usage:

<BaseDataTable
  :items="rows"
  :headers="headers"
  :row-click-handler="(item) => goToEditById('myEditLink', item._id)"
>
  <template #toolbar-end>
    <v-btn @click="goToCreate('myCreateLink')">Create</v-btn>
  </template>
  <template #row-actions="{ item }">
    <v-btn icon="mdi-delete" @click.stop.prevent="deleteRow(item)" />
  </template>
</BaseDataTable>

Important

• Always set item-value to a real unique key in your row model (id, _id, ...).
• If item-value is wrong, selected rows can map incorrectly.
• Use export-meta when your serializers need contextual fields.
• Exported row fields are automatically projected to the keys present in headers.
• Columns not present in headers are not included in exported row objects.
• The internal/system actions column is never exported.

Relevant BaseDataTable slots

• exporter: replace or fully customise exporter rendering.
• importer: replace/augment import trigger rendering.
• action.export-mode: customise export-mode action entry.
• action.filters: customise filter action entry.
• action.import: customise import action entry.
• filters.drawer.header|body|footer: customise right-side filter drawer sections.

---

Built-in formats

Built-ins serialize the selected scope payload as-is:

• json
• yaml
• xml

So if users select Items, built-ins serialize just the array.

---

Troubleshooting

Serializer says payload is invalid

Your custom format likely validates only one shape. Make it support all relevant scope outputs (combined, items, optionally meta) or normalize input before rendering.

Export button disabled

In BaseDataTable, export is disabled when no rows are selected.