compote-ui 0.83.0 → 0.84.0

package/dist/components/data-table-v9/create-table.svelte.js

@@ -3,7 +3,8 @@ import { useLocaleContext } from '@ark-ui/svelte/locale';
 import { onDestroy } from 'svelte';
 import { renderComponent, renderSnippet } from '@tanstack/svelte-table';
 import { dataTableFeatures } from './features';
-import { TYPE_NUMBER_FORMAT_DEFAULTS } from './data-table-utils';
+import { TYPE_NUMBER_FORMAT_DEFAULTS, getBooleanCellValue, getPhoneCellValue, getUrlCellValue } from './data-table-utils';
+import { formatPhoneCellValue } from './phone-format';
 import { filterKindFor } from './column-filter-kind';
 import { dateCellTimeZone, formatDateCell } from './date-cell';
 import { isEmptyDateRange, matchesDateRange, resolveDateRange } from '../../utils/date-filter';
@@ -168,7 +169,8 @@ function createColumns(columns, localeCtx) {
                 formatLocale: column.formatLocale,
                 grow: column.grow,
                 sum: column.sum,
-                footer: column.footer
+                footer: column.footer,
+                export: createExportMeta(column, localeCtx)
             },
             // Select cells may hold an array (multi-value / tag columns): facet each item
             // separately so the Funnel lists options, not value combinations.
@@ -265,14 +267,62 @@ function formatCellValue(column, value, row, localeCtx) {
     if (column.cellSnippet) {
         return renderSnippet(column.cellSnippet, { value, row });
     }
+    return formatCellText(column, value, row, localeCtx) ?? '-';
+}
+/**
+ * A cell's text as the table shows it — `cell`, else type formatting — or undefined when
+ * empty. Shared by the cell renderer (which shows `-` for empty) and exports.
+ */
+function formatCellText(column, value, row, localeCtx) {
     const rendered = column.cell
         ? column.cell(value, row)
         : applyTypeFormat(column, value, localeCtx);
-    if (rendered === null || rendered === undefined || rendered === '') {
-        return '-';
-    }
+    if (rendered === null || rendered === undefined || rendered === '')
+        return undefined;
     return String(rendered);
 }
+// DataTableCellContent draws these types itself, ignoring `cell`/`cellComponent`.
+const BUILT_IN_CELL_TYPES = new Set(['boolean', 'url', 'phone']);
+/**
+ * The text DataTableCellContent shows for a type it draws itself (`{ text: undefined }` for its
+ * `-`), or undefined for any other type. Keep in step with data-table-cell-content.svelte.
+ */
+function formatBuiltInCellText(type, value) {
+    switch (type) {
+        case 'boolean': {
+            const checked = getBooleanCellValue(value);
+            return { text: checked === undefined ? undefined : checked ? 'Yes' : 'No' };
+        }
+        case 'url':
+            return { text: getUrlCellValue(value) };
+        case 'phone': {
+            const phone = getPhoneCellValue(value);
+            return { text: phone === undefined ? undefined : formatPhoneCellValue(phone) };
+        }
+        default:
+            return undefined;
+    }
+}
+function createExportMeta(column, localeCtx) {
+    const builtIn = column.type !== undefined && BUILT_IN_CELL_TYPES.has(column.type);
+    return {
+        enabled: column.enableExport ?? column.type !== 'action',
+        hasCustomCell: typeof column.cell === 'function' && !builtIn,
+        exportValue: column.exportValue,
+        formatText: (value, row) => builtIn
+            ? formatBuiltInCellText(column.type, value)?.text
+            : formatCellText(column, value, row, localeCtx),
+        formatTypedText: (value) => {
+            if (builtIn)
+                return formatBuiltInCellText(column.type, value)?.text;
+            const rendered = applyTypeFormat(column, value, localeCtx);
+            if (rendered === null || rendered === undefined || rendered === '')
+                return undefined;
+            return String(rendered);
+        },
+        resolveLocale: () => column.formatLocale ?? localeCtx().locale
+    };
+}
 function getCellComponentProps(column, value, row) {
     return column.cellProps ? column.cellProps(value, row) : { value, row };
 }

package/dist/components/data-table-v9/export/csv-exporter.d.ts

@@ -0,0 +1,14 @@
+import { type CsvOptions } from '../../../utils/csv';
+import type { DataTableExportData } from './export-data';
+import type { DataTableExporter } from './types';
+export type CsvExporterOptions = CsvOptions & {
+    id?: string;
+    label?: string;
+};
+/** Neutralizes a field a spreadsheet would run as a formula, by prefixing `'`. */
+export declare function guardCsvFormula(text: string): string;
+/** The export data as rows of CSV fields, header first, guarded against formula injection. */
+export declare function exportDataToCsvRows(data: DataTableExportData): string[][];
+/** A CSV exporter: the text the table shows, BOM-prefixed and `;`-separated by default. */
+export declare function createCsvExporter(options?: CsvExporterOptions): DataTableExporter;
+export declare const csvExporter: DataTableExporter;

package/dist/components/data-table-v9/export/csv-exporter.js

@@ -0,0 +1,43 @@
+import { toCsv } from '../../../utils/csv';
+import { downloadBlob } from '../../../utils/download';
+import { PhFileText } from '../../../icons';
+const NUMBER_TYPES = new Set(['number', 'currency', 'percent']);
+// Spreadsheet apps run a field starting with one of these as a formula (CSV injection).
+const FORMULA_START = /^[=+\-@\t\r]/;
+// Digits, spaces and number punctuation only (`+381 60 123`, `-5`, `(011) 22-33`): at worst
+// arithmetic, it can't call a function, so it is left as is. Spaces include the no-break ones
+// Intl groups digits with; tab and CR stay guarded.
+const NUMERIC_LIKE = new RegExp('^[+-]?[\\d \\u00a0\\u202f().,/+-]*$');
+/** Neutralizes a field a spreadsheet would run as a formula, by prefixing `'`. */
+export function guardCsvFormula(text) {
+    return FORMULA_START.test(text) && !NUMERIC_LIKE.test(text) ? `'${text}` : text;
+}
+// Only a number column without its own `cell` is known to hold Intl-formatted text, so a
+// leading `-` there is a sign even next to a currency name (`-US$ 5`). Any `cell` may return
+// arbitrary text.
+function isFormattedNumber(column) {
+    return column.type !== undefined && NUMBER_TYPES.has(column.type) && !column.hasCustomCell;
+}
+/** The export data as rows of CSV fields, header first, guarded against formula injection. */
+export function exportDataToCsvRows(data) {
+    const header = data.columns.map((column) => guardCsvFormula(column.header));
+    const rows = data.rows.map((cells) => cells.map((cell, index) => {
+        const column = data.columns[index];
+        return column && isFormattedNumber(column) ? cell.text : guardCsvFormula(cell.text);
+    }));
+    return [header, ...rows];
+}
+/** A CSV exporter: the text the table shows, BOM-prefixed and `;`-separated by default. */
+export function createCsvExporter(options = {}) {
+    const { id = 'csv', label = 'CSV', ...csvOptions } = options;
+    return {
+        id,
+        label,
+        icon: PhFileText,
+        export: ({ filename, getData }) => {
+            const csv = toCsv(exportDataToCsvRows(getData()), csvOptions);
+            downloadBlob(new Blob([csv], { type: 'text/csv;charset=utf-8' }), `${filename}.csv`);
+        }
+    };
+}
+export const csvExporter = createCsvExporter();

package/dist/components/data-table-v9/export/export-data.d.ts

@@ -0,0 +1,98 @@
+import type { Column, RowData } from '@tanstack/svelte-table';
+import { type DataTableInstance } from '../data-table-utils';
+import type { DataTableColumnType } from '../types';
+/** Which rows an export writes. Both keep the table's filtering and sorting. */
+export type DataTableExportScope = 'filtered' | 'selected';
+export type DataTableExportColumn = {
+    id: string;
+    /** The column header; a grouped column's reads `Group / Column`. */
+    header: string;
+    type?: DataTableColumnType;
+    formatOptions?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions;
+    /** The column has its own `cell` renderer: its text is not derived from `type`. */
+    hasCustomCell: boolean;
+    /** The column sets `exportValue`, so `value` is that, not the accessor value. */
+    hasExportValue: boolean;
+    locale: string;
+    /** Current width in px. */
+    size: number;
+};
+export type DataTableExportCell = {
+    /** `exportValue` output when the column sets one, else the accessor value. */
+    value: unknown;
+    /** The text the table shows for this cell; `''` when empty. */
+    text: string;
+};
+export type DataTableExportData = {
+    columns: DataTableExportColumn[];
+    rows: DataTableExportCell[][];
+};
+/**
+ * The rows an export writes, in table order: filtered and sorted, and for `selected` only the
+ * selected ones among them (a selected row the filter hides is not exported).
+ */
+export declare function getExportRows<T extends RowData>(table: DataTableInstance<T>, scope: DataTableExportScope): import("@tanstack/table-core").Row<{
+    rowSortingFeature: import("@tanstack/table-core").TableFeature;
+    rowSelectionFeature: import("@tanstack/table-core").TableFeature;
+    columnFilteringFeature: import("@tanstack/table-core").TableFeature;
+    columnFacetingFeature: import("@tanstack/table-core").TableFeature;
+    globalFilteringFeature: import("@tanstack/table-core").TableFeature;
+    columnVisibilityFeature: import("@tanstack/table-core").TableFeature;
+    columnPinningFeature: import("@tanstack/table-core").TableFeature;
+    columnSizingFeature: import("@tanstack/table-core").TableFeature;
+    columnResizingFeature: import("@tanstack/table-core").TableFeature;
+    sortedRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
+    filteredRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
+    facetedRowModel: (table: import("@tanstack/table-core").Table<any, any>, columnId: string) => () => import("@tanstack/table-core").RowModel<any, any>;
+    facetedUniqueValues: (table: import("@tanstack/table-core").Table<import("@tanstack/table-core").TableFeatures, any>, columnId: string) => () => Map<any, number>;
+    facetedMinMaxValues: (table: import("@tanstack/table-core").Table<import("@tanstack/table-core").TableFeatures, any>, columnId: string) => () => undefined | [number, number];
+    sortFns: {
+        alphanumeric: import("@tanstack/table-core").CreatedSortFn<any, any>;
+        basic: import("@tanstack/table-core").CreatedSortFn<any, any>;
+        datetime: import("@tanstack/table-core").CreatedSortFn<any, any>;
+        text: import("@tanstack/table-core").CreatedSortFn<any, any>;
+    };
+    filterFns: {
+        arrIncludes: import("@tanstack/table-core").CreatedFilterFn<any, any>;
+        equals: import("@tanstack/table-core").CreatedFilterFn<any, any>;
+        inDateRange: import("@tanstack/table-core").CreatedFilterFn<any, any>;
+        inNumberRange: import("@tanstack/table-core").CreatedFilterFn<any, any>;
+        includesString: import("@tanstack/table-core").CreatedFilterFn<any, any>;
+        weakEquals: import("@tanstack/table-core").CreatedFilterFn<any, any>;
+    };
+    columnMeta: import("../types").DataTableColumnMeta;
+}, T>[];
+/** Visible columns that exports include, in the order the table shows them (pinning). */
+export declare function getExportColumns<T extends RowData>(table: DataTableInstance<T>): Column<{
+    rowSortingFeature: import("@tanstack/table-core").TableFeature;
+    rowSelectionFeature: import("@tanstack/table-core").TableFeature;
+    columnFilteringFeature: import("@tanstack/table-core").TableFeature;
+    columnFacetingFeature: import("@tanstack/table-core").TableFeature;
+    globalFilteringFeature: import("@tanstack/table-core").TableFeature;
+    columnVisibilityFeature: import("@tanstack/table-core").TableFeature;
+    columnPinningFeature: import("@tanstack/table-core").TableFeature;
+    columnSizingFeature: import("@tanstack/table-core").TableFeature;
+    columnResizingFeature: import("@tanstack/table-core").TableFeature;
+    sortedRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
+    filteredRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
+    facetedRowModel: (table: import("@tanstack/table-core").Table<any, any>, columnId: string) => () => import("@tanstack/table-core").RowModel<any, any>;
+    facetedUniqueValues: (table: import("@tanstack/table-core").Table<import("@tanstack/table-core").TableFeatures, any>, columnId: string) => () => Map<any, number>;
+    facetedMinMaxValues: (table: import("@tanstack/table-core").Table<import("@tanstack/table-core").TableFeatures, any>, columnId: string) => () => undefined | [number, number];
+    sortFns: {
+        alphanumeric: import("@tanstack/table-core").CreatedSortFn<any, any>;
+        basic: import("@tanstack/table-core").CreatedSortFn<any, any>;
+        datetime: import("@tanstack/table-core").CreatedSortFn<any, any>;
+        text: import("@tanstack/table-core").CreatedSortFn<any, any>;
+    };
+    filterFns: {
+        arrIncludes: import("@tanstack/table-core").CreatedFilterFn<any, any>;
+        equals: import("@tanstack/table-core").CreatedFilterFn<any, any>;
+        inDateRange: import("@tanstack/table-core").CreatedFilterFn<any, any>;
+        inNumberRange: import("@tanstack/table-core").CreatedFilterFn<any, any>;
+        includesString: import("@tanstack/table-core").CreatedFilterFn<any, any>;
+        weakEquals: import("@tanstack/table-core").CreatedFilterFn<any, any>;
+    };
+    columnMeta: import("../types").DataTableColumnMeta;
+}, T, unknown>[];
+/** The columns and cells an export writes. */
+export declare function getExportData<T extends RowData>(table: DataTableInstance<T>, scope: DataTableExportScope): DataTableExportData;

package/dist/components/data-table-v9/export/export-data.js

@@ -0,0 +1,55 @@
+import { getColumnLabel, getColumnMeta } from '../data-table-utils';
+/**
+ * The rows an export writes, in table order: filtered and sorted, and for `selected` only the
+ * selected ones among them (a selected row the filter hides is not exported).
+ */
+export function getExportRows(table, scope) {
+    const rows = table.getRowModel().rows;
+    return scope === 'selected' ? rows.filter((row) => row.getIsSelected()) : rows;
+}
+/** Visible columns that exports include, in the order the table shows them (pinning). */
+export function getExportColumns(table) {
+    return [
+        ...table.getStartVisibleLeafColumns(),
+        ...table.getCenterVisibleLeafColumns(),
+        ...table.getEndVisibleLeafColumns()
+    ].filter((column) => getColumnMeta(column.columnDef)?.export?.enabled === true);
+}
+function exportHeader(column) {
+    const labels = [];
+    for (let current = column; current; current = current.parent) {
+        labels.unshift(getColumnLabel(current));
+    }
+    return labels.join(' / ');
+}
+/** The columns and cells an export writes. */
+export function getExportData(table, scope) {
+    const columns = getExportColumns(table).flatMap((column) => {
+        const meta = getColumnMeta(column.columnDef);
+        const exportMeta = meta?.export;
+        return exportMeta ? [{ column, meta, exportMeta }] : [];
+    });
+    return {
+        columns: columns.map(({ column, meta, exportMeta }) => ({
+            id: column.id,
+            header: exportHeader(column),
+            type: meta.type,
+            formatOptions: meta.formatOptions,
+            hasCustomCell: exportMeta.hasCustomCell,
+            hasExportValue: exportMeta.exportValue !== undefined,
+            locale: exportMeta.resolveLocale(),
+            size: column.getSize()
+        })),
+        rows: getExportRows(table, scope).map((row) => columns.map(({ column, exportMeta }) => {
+            const original = row.original;
+            const raw = row.getValue(column.id);
+            const { exportValue, formatText, formatTypedText } = exportMeta;
+            const value = exportValue ? exportValue(raw, original) : raw;
+            // `cell` always gets the accessor value — the text matches what the table shows.
+            const text = exportValue && !exportMeta.hasCustomCell
+                ? formatTypedText(value)
+                : formatText(raw, original);
+            return { value, text: text ?? '' };
+        }))
+    };
+}

package/dist/components/data-table-v9/export/types.d.ts

@@ -0,0 +1,23 @@
+import type { RowData } from '@tanstack/svelte-table';
+import type { Component } from 'svelte';
+import type { DataTableInstance } from '../data-table-utils';
+import type { DataTableExportData, DataTableExportScope } from './export-data';
+export type DataTableExportContext<T extends RowData> = {
+    table: DataTableInstance<T>;
+    scope: DataTableExportScope;
+    /** File name without extension. */
+    filename: string;
+    /**
+     * The columns and cells to write. Lazy: an exporter that exports on the server only needs
+     * `table` (its sorting, filters and visible columns) and need not call it.
+     */
+    getData: () => DataTableExportData;
+};
+/** One file format `DataTable.Export` offers. */
+export type DataTableExporter = {
+    id: string;
+    label: string;
+    icon?: Component;
+    /** If it returns a promise, the Export trigger stays busy until it settles. */
+    export: <T extends RowData>(context: DataTableExportContext<T>) => void | Promise<unknown>;
+};

package/dist/components/data-table-v9/export/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/data-table-v9/index.d.ts

@@ -8,6 +8,9 @@ export { default as ColumnFilter } from './toolbar/data-table-column-filter.svel
 export { default as ColumnVisibility } from './toolbar/data-table-column-visibility.svelte';
 export { default as Search } from './toolbar/data-table-search.svelte';
 export { default as Refresh } from './toolbar/data-table-refresh.svelte';
+export { default as Export } from './toolbar/data-table-export.svelte';
+export { csvExporter, createCsvExporter } from './export/csv-exporter';
+export { getExportColumns, getExportData, getExportRows } from './export/export-data';
 export { default as ColumnFilterEditor } from './filter-editors/column-filter-editor.svelte';
 export { ColumnFilterEditing } from './column-filter-editing.svelte';
 export { filterKindFor, getColumnFilterKind } from './column-filter-kind';
@@ -16,5 +19,8 @@ export { EMPTY_SELECT_VALUE, selectFilterOptions } from '../../utils/select-filt
 export type { CreateDataTableOptions, DataTableInstance } from './create-table.svelte';
 export type { ColumnFilterEditingOptions, FilterableColumn } from './column-filter-editing.svelte';
 export type { ColumnFilterKind } from './column-filter-kind';
+export type { CsvExporterOptions } from './export/csv-exporter';
+export type { DataTableExportCell, DataTableExportColumn, DataTableExportData, DataTableExportScope } from './export/export-data';
+export type { DataTableExportContext, DataTableExporter } from './export/types';
 export type { SelectFilterOption, SelectFilterValue } from '../../utils/select-filter';
 export type { DataTableAlign, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableColumn, DataTableColumnBase, DataTableColumnInstance, DataTableColumnOptions, DataTableColumnType, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableGroupColumn, DataTableLeafColumnBase, DataTableLeafColumn } from './types';

package/dist/components/data-table-v9/index.js

@@ -8,6 +8,10 @@ export { default as ColumnFilter } from './toolbar/data-table-column-filter.svel
 export { default as ColumnVisibility } from './toolbar/data-table-column-visibility.svelte';
 export { default as Search } from './toolbar/data-table-search.svelte';
 export { default as Refresh } from './toolbar/data-table-refresh.svelte';
+export { default as Export } from './toolbar/data-table-export.svelte';
+// Export formats for DataTable.Export, and the data they write (for a custom exporter).
+export { csvExporter, createCsvExporter } from './export/csv-exporter';
+export { getExportColumns, getExportData, getExportRows } from './export/export-data';
 // Building blocks for filter UI outside the toolbar and header popups (e.g. a facet panel):
 // the same editors, pending-edit handling and select options the Funnel uses.
 export { default as ColumnFilterEditor } from './filter-editors/column-filter-editor.svelte';

package/dist/components/data-table-v9/toolbar/data-table-export.svelte

@@ -0,0 +1,146 @@
+<script lang="ts" generics="T extends RowData">
+	import type { RowData } from '@tanstack/svelte-table';
+	import { Menu as ArkMenu } from '@ark-ui/svelte/menu';
+	import * as Menu from '../../menu';
+	import * as Tooltip from '../../tooltip';
+	import { button } from '../../button/button.variants';
+	import { PhDownloadSimple } from '../../../icons';
+	import type { DataTableInstance } from '../data-table-utils';
+	import { csvExporter } from '../export/csv-exporter';
+	import { getExportData, getExportRows, type DataTableExportScope } from '../export/export-data';
+	import type { DataTableExporter } from '../export/types';
+
+	type Props = {
+		table: DataTableInstance<T>;
+		/** File formats to offer. One format and no selected rows: a plain button; otherwise a menu. */
+		exporters?: DataTableExporter[];
+		/** File name without extension. */
+		filename?: string;
+		/** Text label for the trigger. When omitted, a download icon is shown instead. */
+		triggerLabel?: string;
+	};
+
+	let { table, exporters = [csvExporter], filename = 'export', triggerLabel }: Props = $props();
+
+	// Menu and tooltip share one trigger element, so both must agree on its id.
+	const triggerId = $props.id();
+
+	let pending = $state(false);
+
+	// Row model reads aren't reactive on their own: read the slices they depend on first.
+	const rowSlices = $derived.by(() => [
+		table.options.data,
+		table.atoms.columnFilters.get(),
+		table.atoms.globalFilter.get(),
+		table.atoms.sorting.get(),
+		table.atoms.rowSelection.get()
+	]);
+	const rowCount = $derived.by(() => {
+		void rowSlices;
+		return getExportRows(table, 'filtered').length;
+	});
+	// Counted exactly as the export picks them: selected rows the filter keeps.
+	const selectedCount = $derived.by(() => {
+		void rowSlices;
+		return getExportRows(table, 'selected').length;
+	});
+	const hasSelection = $derived(selectedCount > 0);
+	// The menu's choice, reset to all rows whenever the selection empties or starts again, so a
+	// "Selected rows" pick from an earlier selection never carries over to a new one.
+	let chosenScope = $derived.by<DataTableExportScope>(() => {
+		void hasSelection;
+		return 'filtered';
+	});
+	// `selected` with nothing selected would write an empty file: fall back to all rows.
+	const scope = $derived<DataTableExportScope>(hasSelection ? chosenScope : 'filtered');
+	const showMenu = $derived(exporters.length > 1 || hasSelection);
+
+	async function runExport(exporter: DataTableExporter) {
+		if (pending) return;
+		pending = true;
+		const exportScope = scope;
+		try {
+			await exporter.export({
+				table,
+				scope: exportScope,
+				filename,
+				getData: () => getExportData(table, exportScope)
+			});
+		} finally {
+			pending = false;
+		}
+	}
+</script>
+
+{#snippet triggerContent()}
+	<PhDownloadSimple />
+	{triggerLabel}
+{/snippet}
+
+{#if showMenu}
+	<Menu.Root ids={{ trigger: triggerId }} positioning={{ placement: 'bottom-end' }}>
+		<Tooltip.Root ids={{ trigger: triggerId }} disabled={!!triggerLabel}>
+			<Tooltip.Trigger>
+				{#snippet asChild(tooltipProps)}
+					<ArkMenu.Trigger
+						{...tooltipProps()}
+						aria-label={triggerLabel ? undefined : 'Export'}
+						aria-busy={pending}
+						class={button({ variant: 'outline', size: triggerLabel ? 'default' : 'icon' })}
+					>
+						{@render triggerContent()}
+					</ArkMenu.Trigger>
+				{/snippet}
+			</Tooltip.Trigger>
+			<Tooltip.Content>Export</Tooltip.Content>
+		</Tooltip.Root>
+
+		<Menu.Content class="min-w-44">
+			{#if hasSelection}
+				<Menu.RadioItemGroup
+					value={scope}
+					onValueChange={(details) => (chosenScope = details.value as DataTableExportScope)}
+				>
+					<Menu.RadioItem value="filtered" closeOnSelect={false}>
+						All rows ({rowCount})
+					</Menu.RadioItem>
+					<Menu.RadioItem value="selected" closeOnSelect={false}>
+						Selected rows ({selectedCount})
+					</Menu.RadioItem>
+				</Menu.RadioItemGroup>
+				<Menu.Separator />
+			{/if}
+			{#each exporters as exporter (exporter.id)}
+				{@const Icon = exporter.icon}
+				<Menu.Item
+					value={`export:${exporter.id}`}
+					disabled={pending}
+					onSelect={() => runExport(exporter)}
+				>
+					{#if Icon}<Icon class="text-ink-dim" />{/if}
+					{exporter.label}
+				</Menu.Item>
+			{/each}
+		</Menu.Content>
+	</Menu.Root>
+{:else}
+	{@const exporter = exporters[0]}
+	{#if exporter}
+		<Tooltip.Root disabled={!!triggerLabel}>
+			<!-- aria-disabled instead of disabled so keyboard focus isn't lost mid-export -->
+			<Tooltip.Trigger
+				type="button"
+				variant="outline"
+				size={triggerLabel ? 'default' : 'icon'}
+				class="aria-disabled:cursor-default"
+				aria-label={triggerLabel ? undefined : `Export ${exporter.label}`}
+				aria-busy={pending}
+				aria-disabled={pending}
+				onclick={() => runExport(exporter)}
+			>
+				{@render triggerContent()}
+			</Tooltip.Trigger>
+			<Tooltip.Content>Export {exporter.label}</Tooltip.Content>
+		</Tooltip.Root>
+	{/if}
+{/if}

package/dist/components/data-table-v9/toolbar/data-table-export.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { RowData } from '@tanstack/svelte-table';
+import type { DataTableInstance } from '../data-table-utils';
+import type { DataTableExporter } from '../export/types';
+declare function $$render<T extends RowData>(): {
+    props: {
+        table: DataTableInstance<T>;
+        /** File formats to offer. One format and no selected rows: a plain button; otherwise a menu. */
+        exporters?: DataTableExporter[];
+        /** File name without extension. */
+        filename?: string;
+        /** Text label for the trigger. When omitted, a download icon is shown instead. */
+        triggerLabel?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends RowData> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableExport: $$IsomorphicComponent;
+type DataTableExport<T extends RowData> = InstanceType<typeof DataTableExport<T>>;
+export default DataTableExport;

package/dist/components/data-table-v9/types.d.ts

@@ -36,6 +36,15 @@ export type DataTableLeafColumnBase<T extends RowData> = DataTableColumnOptions<
     grow?: boolean;
     sum?: boolean;
     footer?: (values: unknown[]) => string | number | undefined;
+    /**
+     * The value an export writes for this column, in place of the accessor value. Use it
+     * when the cell holds something a file can't show (an object rendered by
+     * `cellComponent`). Without `cell`, its text is formatted by the column `type`; it is
+     * never passed to `cell`, which keeps receiving the accessor value.
+     */
+    exportValue?: (value: unknown, row: T) => unknown;
+    /** Whether exports include this column. Defaults to `true`, `false` for `type: 'action'`. */
+    enableExport?: boolean;
     columns?: never;
 };
 export type DataTableAccessorKeyColumn<T extends RowData> = DataTableLeafColumnBase<T> & {
@@ -73,4 +82,18 @@ export type DataTableColumnMeta = {
     grow?: boolean;
     sum?: boolean;
     footer?: (values: unknown[]) => string | number | undefined;
+    /** Leaf columns only: what exports read. Set by `createTable`, not by consumers. */
+    export?: DataTableColumnExportMeta;
+};
+export type DataTableColumnExportMeta = {
+    enabled: boolean;
+    /** The column has its own `cell` renderer, so its text is not derived from `type`. */
+    hasCustomCell: boolean;
+    exportValue?: (value: unknown, row: never) => unknown;
+    /** The cell text the table shows (`cell`, else type formatting), without the `-` placeholder. */
+    formatText: (value: unknown, row: never) => string | undefined;
+    /** Type formatting only, never `cell` — for `exportValue` output. */
+    formatTypedText: (value: unknown) => string | undefined;
+    /** `formatLocale`, else the current locale context. */
+    resolveLocale: () => string;
 };

package/dist/components/data-table-v9/virtual/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Root } from './data-table-virtualized.svelte';
-export { ColumnFilter, ColumnFilterEditing, ColumnFilterEditor, ColumnVisibility, EMPTY_SELECT_VALUE, FlexRender, Refresh, Search, Title, Toolbar, createDataTableColumnHelper, createTable, filterKindFor, getColumnFilterKind, getColumnLabel, renderComponent, renderSnippet, selectFilterOptions } from '../index';
-export type { ColumnFilterEditingOptions, ColumnFilterKind, CreateDataTableOptions, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableAlign, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableColumn, DataTableColumnBase, DataTableColumnInstance, DataTableColumnOptions, DataTableColumnType, DataTableGroupColumn, DataTableInstance, DataTableLeafColumn, DataTableLeafColumnBase, FilterableColumn, SelectFilterOption, SelectFilterValue } from '../index';
+export { ColumnFilter, ColumnFilterEditing, ColumnFilterEditor, ColumnVisibility, EMPTY_SELECT_VALUE, Export, FlexRender, Refresh, Search, Title, Toolbar, createCsvExporter, createDataTableColumnHelper, createTable, csvExporter, filterKindFor, getColumnFilterKind, getColumnLabel, getExportColumns, getExportData, getExportRows, renderComponent, renderSnippet, selectFilterOptions } from '../index';
+export type { ColumnFilterEditingOptions, ColumnFilterKind, CreateDataTableOptions, CsvExporterOptions, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableAlign, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableColumn, DataTableColumnBase, DataTableColumnInstance, DataTableColumnOptions, DataTableColumnType, DataTableExportCell, DataTableExportColumn, DataTableExportContext, DataTableExportData, DataTableExporter, DataTableExportScope, DataTableGroupColumn, DataTableInstance, DataTableLeafColumn, DataTableLeafColumnBase, FilterableColumn, SelectFilterOption, SelectFilterValue } from '../index';

package/dist/components/data-table-v9/virtual/index.js

@@ -1,2 +1,2 @@
 export { default as Root } from './data-table-virtualized.svelte';
-export { ColumnFilter, ColumnFilterEditing, ColumnFilterEditor, ColumnVisibility, EMPTY_SELECT_VALUE, FlexRender, Refresh, Search, Title, Toolbar, createDataTableColumnHelper, createTable, filterKindFor, getColumnFilterKind, getColumnLabel, renderComponent, renderSnippet, selectFilterOptions } from '../index';
+export { ColumnFilter, ColumnFilterEditing, ColumnFilterEditor, ColumnVisibility, EMPTY_SELECT_VALUE, Export, FlexRender, Refresh, Search, Title, Toolbar, createCsvExporter, createDataTableColumnHelper, createTable, csvExporter, filterKindFor, getColumnFilterKind, getColumnLabel, getExportColumns, getExportData, getExportRows, renderComponent, renderSnippet, selectFilterOptions } from '../index';

package/dist/components/data-table-v9/xlsx/index.d.ts

@@ -0,0 +1,24 @@
+import type { DataTableExportData } from '../export/export-data';
+import type { DataTableExporter } from '../export/types';
+import { type XlsxCell, type XlsxDateFormats } from './xlsx-cell';
+export { DEFAULT_XLSX_DATE_FORMATS, toXlsxCell, xlsxNumberFormat } from './xlsx-cell';
+export type { XlsxCell, XlsxDateFormats, XlsxDatePart } from './xlsx-cell';
+export type XlsxExporterOptions = Partial<XlsxDateFormats> & {
+    id?: string;
+    label?: string;
+    /** Sheet name (Excel allows 31 characters, without `[ ] : * ? / \`). */
+    sheet?: string;
+};
+/** The export data as sheet rows: a bold header row, then typed cells. */
+export declare function exportDataToSheet(data: DataTableExportData, formats?: XlsxDateFormats): XlsxCell[][];
+/**
+ * The export data as an .xlsx file. Loads `write-excel-file` (an optional peer dependency) on
+ * first call, so importing this module costs nothing until an export runs — and stays SSR-safe.
+ */
+export declare function exportDataToXlsxBlob(data: DataTableExportData, options?: XlsxExporterOptions): Promise<Blob>;
+/**
+ * An Excel exporter: numbers, dates and booleans as typed cells, formatted like the table.
+ * Needs `write-excel-file` installed.
+ */
+export declare function createXlsxExporter(options?: XlsxExporterOptions): DataTableExporter;
+export declare const xlsxExporter: DataTableExporter;