Export column picker
A pre-export dialog for choosing which columns go into the file.
vue
<script setup lang="ts">
import ExportColumnPicker from '@shared/components/common/ExportColumnPicker.vue'
import { Button } from '@shared/components/ui/button'
import { ref } from 'vue'
const COLUMNS = [
{ key: 'id', label: 'Invoice' },
{ key: 'customer', label: 'Customer' },
{ key: 'issued', label: 'Issued' },
{ key: 'due', label: 'Due' },
{ key: 'total', label: 'Total' },
{ key: 'status', label: 'Status' },
]
const open = ref(false)
const chosen = ref<string[]>([])
</script>
<template>
<div class="space-y-3">
<Button variant="outline" @click="open = true">
Choose columns
</Button>
<ExportColumnPicker v-model:open="open" :columns="COLUMNS" @confirm="chosen = $event" />
<p class="text-sm text-muted-foreground">
{{ chosen.length ? `Exporting: ${chosen.join(', ')}` : 'Nothing chosen yet' }}
</p>
</div>
</template>Usage
columns is { key, label }[]. confirm carries the chosen keys, and the dialog closes itself with it.
The keys come back in the order of the columns array, not the order they were ticked, so the exported file matches the table on screen.
Everything starts ticked each time the dialog opens. That is the common case, and it means the usual path is one press.
DataTableExport drives this dialog, so a table's export menu already offers it. Use it directly where you are exporting something that is not a DataTable.
API
Source: src/shared/components/common/ExportColumnPicker.vue
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | required | You own it. |
columns | { key: string, label: string }[] | required | The columns to offer, in export order. A label can be a translation key or a literal. |
Emits
| Event | Payload | Description |
|---|---|---|
update:open | value: boolean | From Cancel, Escape, the overlay, and after a confirm. |
confirm | keys: string[] | The chosen keys, in the order of columns. |
Slots
None.
Accessibility
- Each checkbox is inside a
<label>, so the whole row is the hit area and the column's name is the checkbox's name. - The confirm button counts what is selected, "Export 4 columns", so the outcome is stated before it happens. It is singular at one.
- With nothing selected the confirm button is genuinely
disabled, so an empty file cannot be produced. - The list scrolls inside the dialog at up to 288 pixels, so a wide table's column list never pushes the footer off the screen.