Table

TableExport

Dropdown button that exports the current table data to CSV or JSON files.

TableExport

A dropdown trigger button with two built-in export options: CSV (default) and JSON. Selecting an option generates the file from the provided data and columns, triggers a browser download, and emits an export event with the generated content. CSV values are quoted and escape any embedded quotes; nested object paths are supported via dotted column.key values.

Components

`<XATableExport />`

<XATableExport
  :data="rows"
  :columns="[
    { key: 'name',  label: 'Name'  },
    { key: 'email', label: 'Email' },
    { key: 'user.company', label: 'Company' },
  ]"
  filename="users-export"
  :show-label="true"
  :enable-csv="true"
  :enable-json="false"
  @export="(format, content) => logExport(format, content)"
/>

Props

Prop	Type	Default	Description
`data`	`Object[]`	required	Array of row objects to export.
`columns`	`Column[]`	required	Column descriptors. Each: `{ key, label, formatter? }`. `key` may be a dotted path like `"user.company"`.
`filename`	`string`	`'export'`	Base filename (no extension). The chosen format is appended: `users-export.csv`.
`showLabel`	`boolean`	`true`	When `true`, the trigger button shows the text label "Export" with a chevron. Set to `false` for icon-only.
`enableCsv`	`boolean`	`true`	Show the "Export as CSV" menu item.
`enableJson`	`boolean`	`false`	Show the "Export as JSON" menu item.

Column shape

interface ExportColumn {
  key: string                          // Required — dotted path into row
  label: string                        // Required — header text
  formatter?: (value: unknown) => unknown  // Optional cell formatter
}

Emits

Event	Payload	Description
`export`	`(format: 'csv' \| 'json', content: string)`	Fired after the file is generated and the browser download triggered. `content` is the raw CSV / JSON string.

AI Context

component: XATableExport
package: "@xenterprises/nuxt-x-app"
category: Table
use-when: >
  Tables where users need to download the visible data for offline analysis
  or sharing. Renders a dropdown trigger button; mounts automatically inside
  XATableToolbar when the toolbar's `exportable` and `data` props allow.
nested-keys: "Use dotted column.key like 'user.company' to traverse row objects."

Edit this pageorReport an issue

TableEditableCell

Double-click-to-edit table cell with text, number, textarea, select, and boolean input modes.

TableFilterBar

Search input + typed filter dropdowns row that emits filter changes for table query updates.