diff --git a/package.json b/package.json
index a2e1778fe3..c0ce9a91f4 100644
--- a/package.json
+++ b/package.json
@@ -99,5 +99,5 @@
             "svelte-preprocess"
         ]
     },
-    "packageManager": "pnpm@10.20.0"
+    "packageManager": "pnpm@10.18.3"
 }
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index dea8860b55..cd9e75aeb2 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -153,6 +153,7 @@ export enum Click {
     DatabaseTableDelete = 'click_table_delete',
     DatabaseDatabaseDelete = 'click_database_delete',
     DatabaseImportCsv = 'click_database_import_csv',
+    DatabaseExportCsv = 'click_database_export_csv',
     DomainCreateClick = 'click_domain_create',
     DomainDeleteClick = 'click_domain_delete',
     DomainRetryDomainVerificationClick = 'click_domain_retry_domain_verification',
@@ -277,6 +278,7 @@ export enum Submit {
     DatabaseDelete = 'submit_database_delete',
     DatabaseUpdateName = 'submit_database_update_name',
     DatabaseImportCsv = 'submit_database_import_csv',
+    DatabaseExportCsv = 'submit_database_export_csv',
     DatabaseBackupDelete = 'submit_database_backup_delete',
 
     ColumnCreate = 'submit_column_create',
diff --git a/src/lib/components/csvExportBox.svelte b/src/lib/components/csvExportBox.svelte
new file mode 100644
index 0000000000..2aa87b3b58
--- /dev/null
+++ b/src/lib/components/csvExportBox.svelte
@@ -0,0 +1,292 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { page } from '$app/state';
+    import { realtime, sdk } from '$lib/stores/sdk';
+    import { getProjectId } from '$lib/helpers/project';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Layout, Typography, Code } from '@appwrite.io/pink-svelte';
+    import { type Models, type Payload } from '@appwrite.io/console';
+    import { Modal } from '$lib/components';
+    import { Query } from '@appwrite.io/console';
+
+    type ExportItem = {
+        status: string;
+        table?: string;
+        bucketId?: string;
+        bucketName?: string;
+        fileName?: string;
+        downloadUrl?: string;
+        errors?: string[];
+    };
+
+    type ExportItemsMap = Map<string, ExportItem>;
+
+    let exportItems = $state<ExportItemsMap>(new Map());
+
+    function downloadExportedFile(downloadUrl: string) {
+        if (!downloadUrl) {
+            return;
+        }
+
+        window.open(downloadUrl, '_blank');
+    }
+
+    async function showErrorNotification(payload: Payload) {
+        let errorMessage = 'Export failed. Please try again.';
+        try {
+            const parsed = JSON.parse(payload.errors[0]);
+            errorMessage = parsed?.message || errorMessage;
+        } catch {
+            errorMessage = payload.errors[0] || errorMessage;
+        }
+
+        addNotification({
+            type: 'error',
+            message: errorMessage,
+            isHtml: true,
+            timeout: 10000
+        });
+    }
+
+    async function updateOrAddItem(exportData: Payload | Models.Migration) {
+        if (exportData.destination?.toLowerCase() !== 'csv') return;
+
+        const status = exportData.status;
+        const current = exportItems.get(exportData.$id);
+        let tableName = current?.table;
+
+        // Get bucket, filename, and download URL from migration options
+        const options = ('options' in exportData ? exportData.options : {}) || {};
+        const bucketId = options.bucketId || '';
+        const fileName = options.filename || '';
+        const downloadUrl = options.downloadUrl || '';
+        let bucketName = current?.bucketName;
+
+        const existing = exportItems.get(exportData.$id);
+
+        const isDone = (s: string) => ['completed', 'failed'].includes(s);
+        const isInProgress = (s: string) => ['pending', 'processing'].includes(s);
+
+        // Skip if we're trying to set an in-progress status on a completed migration
+        const shouldSkip = existing && isDone(existing.status) && isInProgress(status);
+
+        const hasNewData =
+            downloadUrl && (!existing?.downloadUrl || existing.downloadUrl !== downloadUrl);
+        const shouldSkipDuplicate = existing?.status === status && !hasNewData;
+
+        if (shouldSkip || shouldSkipDuplicate) return;
+
+        exportItems.set(exportData.$id, {
+            status,
+            table: tableName ?? current?.table,
+            bucketId: bucketId,
+            bucketName: bucketName,
+            fileName: fileName,
+            downloadUrl: downloadUrl,
+            errors: exportData.errors || []
+        });
+
+        exportItems = new Map(exportItems);
+
+        switch (status) {
+            case 'completed':
+                if (downloadUrl) {
+                    downloadExportedFile(downloadUrl);
+                    addNotification({
+                        type: 'success',
+                        message: `Export completed`,
+                        timeout: 10000,
+                        buttons: [
+                            {
+                                name: 'Download',
+                                method: () => downloadExportedFile(downloadUrl)
+                            }
+                        ]
+                    });
+                }
+                break;
+            case 'failed':
+                await showErrorNotification(exportData);
+                break;
+        }
+    }
+
+    function clear() {
+        exportItems = new Map();
+    }
+
+    function graphSize(status: string): number {
+        switch (status) {
+            case 'pending':
+                return 10;
+            case 'processing':
+                return 60;
+            case 'completed':
+            case 'failed':
+                return 100;
+            default:
+                return 30;
+        }
+    }
+
+    function text(status: string, tableName = '') {
+        const table = tableName ? `<b>${tableName}</b>` : '';
+        switch (status) {
+            case 'completed':
+                return `Exporting ${table} completed`;
+            case 'failed':
+                return `Exporting ${table} failed`;
+            case 'processing':
+                return `Exporting ${table}`;
+            default:
+                return 'Preparing export...';
+        }
+    }
+
+    onMount(() => {
+        sdk.forProject(page.params.region, page.params.project)
+            .migrations.list({
+                queries: [
+                    Query.equal('destination', 'CSV'),
+                    Query.equal('status', ['pending', 'processing'])
+                ]
+            })
+            .then((migrations) => {
+                migrations.migrations.forEach(updateOrAddItem);
+            });
+
+        return realtime.forConsole(page.params.region, 'console', (response) => {
+            if (!response.channels.includes(`projects.${getProjectId()}`)) return;
+            if (response.events.includes('migrations.*')) {
+                updateOrAddItem(response.payload as Payload);
+            }
+        });
+    });
+
+    let isOpen = $state(true);
+    let showCsvExportBox = $derived(exportItems.size > 0);
+    let showErrorModal = $state(false);
+    let selectedErrors = $state<string[]>([]);
+</script>
+
+{#if showCsvExportBox}
+    <Layout.Stack direction="column" gap="l" alignItems="flex-end">
+        <section class="upload-box">
+            <header class="upload-box-header">
+                <h4 class="upload-box-title">
+                    <Typography.Text variant="m-500">
+                        Exporting rows ({exportItems.size})
+                    </Typography.Text>
+                </h4>
+                <button
+                    class="upload-box-button"
+                    class:is-open={isOpen}
+                    aria-label="toggle upload box"
+                    onclick={() => (isOpen = !isOpen)}>
+                    <span class="icon-cheveron-up" aria-hidden="true"></span>
+                </button>
+                <button class="upload-box-button" aria-label="close export box" onclick={clear}>
+                    <span class="icon-x" aria-hidden="true"></span>
+                </button>
+            </header>
+
+            <div class="upload-box-content-list">
+                {#each [...exportItems.entries()] as [key, value] (key)}
+                    <div class="upload-box-content" class:is-open={isOpen}>
+                        <ul class="upload-box-list">
+                            <li class="upload-box-item">
+                                <section class="progress-bar u-width-full-line">
+                                    <div
+                                        class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
+                                        <Typography.Text>
+                                            {@html text(value.status, value.table)}
+                                        </Typography.Text>
+                                        {#if value.status === 'failed' && value.errors && value.errors.length > 0}
+                                            <button
+                                                class="link"
+                                                type="button"
+                                                onclick={() => {
+                                                    selectedErrors = value.errors;
+                                                    showErrorModal = true;
+                                                }}>
+                                                more details
+                                            </button>
+                                        {/if}
+                                    </div>
+                                    <div
+                                        class="progress-bar-container"
+                                        class:is-danger={value.status === 'failed'}
+                                        style="--graph-size:{graphSize(value.status)}%">
+                                    </div>
+                                </section>
+                            </li>
+                        </ul>
+                    </div>
+                {/each}
+            </div>
+        </section>
+    </Layout.Stack>
+{/if}
+
+<Modal bind:show={showErrorModal} title="Export error details" hideFooter>
+    {#if selectedErrors.length > 0}
+        <Code
+            code={JSON.stringify(
+                selectedErrors.map((err) => {
+                    try {
+                        return JSON.parse(err);
+                    } catch {
+                        return err;
+                    }
+                }),
+                null,
+                2
+            )}
+            lang="json"
+            hideHeader />
+    {/if}
+</Modal>
+
+<style lang="scss">
+    .upload-box {
+        display: flex;
+        max-height: 320px;
+        flex-direction: column;
+    }
+
+    .upload-box-header {
+        flex-shrink: 0;
+    }
+
+    .upload-box-title {
+        font-size: 11px;
+    }
+
+    .upload-box-content-list {
+        overflow-y: auto;
+    }
+
+    .upload-box-content {
+        width: 304px;
+    }
+
+    .upload-box-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .progress-bar-container {
+        height: 4px;
+
+        &::before {
+            height: 4px;
+            background-color: var(--bgcolor-neutral-invert);
+        }
+
+        &.is-danger::before {
+            height: 4px;
+            background-color: var(--bgcolor-error);
+        }
+    }
+</style>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index df9a3ceeaf..09b4d248c3 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -13,6 +13,7 @@ export { default as Copy } from './copy.svelte';
 export { default as CopyInput } from './copyInput.svelte';
 export { default as UploadBox } from './uploadBox.svelte';
 export { default as BackupRestoreBox } from './backupRestoreBox.svelte';
+export { default as CsvExportBox } from './csvExportBox.svelte';
 export { default as List } from './list.svelte';
 export { default as ListItem } from './listItem.svelte';
 export { default as Empty } from './empty.svelte';
diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index 9ccb04f532..ef4c5f4150 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -12,6 +12,7 @@
         indeterminate?: boolean;
         size?: 's' | 'm';
         description?: string;
+        truncate?: boolean;
     }
 
     export let id: string = '';
@@ -22,6 +23,7 @@
     export let element: HTMLInputElement | undefined = undefined;
     export let size: $$Props['size'] = 's';
     export let description = '';
+    export let truncate: boolean = false;
     let error: string;
 
     const handleInvalid = (event: Event) => {
@@ -50,6 +52,7 @@
                 {label}
                 {required}
                 {description}
+                {truncate}
                 on:invalid={handleInvalid}
                 on:click
                 on:change />
diff --git a/src/routes/(console)/project-[region]-[project]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/+layout.svelte
index eeeff2dd77..a2e8a1d585 100644
--- a/src/routes/(console)/project-[region]-[project]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { BackupRestoreBox, MigrationBox, UploadBox } from '$lib/components';
+    import { BackupRestoreBox, MigrationBox, UploadBox, CsvExportBox } from '$lib/components';
     import { realtime } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { project, stats } from './store';
@@ -119,6 +119,7 @@
     <MigrationBox />
     <BackupRestoreBox />
     <CsvImportBox />
+    <CsvExportBox />
 </div>
 
 <style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
index 5483e87a37..93d908097c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
@@ -2,6 +2,8 @@
     import { Filters, hasPageQueries, queries } from '$lib/components/filters';
     import ViewSelector from '$lib/components/viewSelector.svelte';
     import { Button } from '$lib/elements/forms';
+    import { goto } from '$app/navigation';
+    import { resolve } from '$app/paths';
     import type { Column, ColumnType } from '$lib/helpers/types';
     import { Container } from '$lib/layout';
     import { preferences } from '$lib/stores/preferences';
@@ -32,7 +34,9 @@
         IconChevronUp,
         IconPlus,
         IconViewBoards,
-        IconRefresh
+        IconRefresh,
+        IconUpload,
+        IconDownload
     } from '@appwrite.io/pink-icons-svelte';
     import type { Models } from '@appwrite.io/console';
     import EmptySheet from './layout/emptySheet.svelte';
@@ -131,6 +135,20 @@
         }
     }
 
+    function getTableExportUrl() {
+        const queryParam = page.url.searchParams.get('query');
+        const url = resolve(
+            '/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/export',
+            {
+                region: page.params.region,
+                project: page.params.project,
+                database: page.params.database,
+                table: page.params.table
+            }
+        );
+        return queryParam ? `${url}?query=${encodeURIComponent(queryParam)}` : url;
+    }
+
     onDestroy(() => ($showCreateColumnSheet.show = false));
 </script>
 
@@ -172,17 +190,10 @@
                     justifyContent="flex-end"
                     style="padding-right: 40px;">
                     <Layout.Stack
-                        gap="s"
                         direction="row"
                         alignItems="center"
-                        justifyContent="flex-end">
-                        <Button
-                            secondary
-                            event={Click.DatabaseImportCsv}
-                            disabled={!(hasColumns && hasValidColumns) || disableButton}
-                            on:click={() => (showImportCSV = true)}>
-                            Import CSV
-                        </Button>
+                        justifyContent="flex-end"
+                        gap="s">
                         {#if !$isSmallViewport}
                             <Button
                                 secondary
@@ -193,19 +204,37 @@
                                 Create row
                             </Button>
 
-                            <Button
-                                icon
-                                size="s"
-                                secondary
-                                class="small-button-dimensions"
-                                on:click={() => {
-                                    $expandTabs = !$expandTabs;
-                                    preferences.setKey('tableHeaderExpanded', $expandTabs);
-                                }}>
-                                <Icon
+                            <Tooltip placement="top">
+                                <Button
+                                    icon
                                     size="s"
-                                    icon={!$expandTabs ? IconChevronDown : IconChevronUp} />
-                            </Button>
+                                    secondary
+                                    class="small-button-dimensions"
+                                    disabled={!(hasColumns && hasValidColumns) || disableButton}
+                                    on:click={() => (showImportCSV = true)}>
+                                    <Icon icon={IconUpload} size="s" />
+                                </Button>
+
+                                <svelte:fragment slot="tooltip">Import CSV</svelte:fragment>
+                            </Tooltip>
+
+                            <Tooltip placement="top">
+                                <Button
+                                    icon
+                                    size="s"
+                                    secondary
+                                    class="small-button-dimensions"
+                                    disabled={!(hasColumns && hasValidColumns && data.rows.total) ||
+                                        disableButton}
+                                    on:click={() => {
+                                        trackEvent(Click.DatabaseExportCsv);
+                                        goto(getTableExportUrl());
+                                    }}>
+                                    <Icon icon={IconDownload} size="s" />
+                                </Button>
+
+                                <svelte:fragment slot="tooltip">Export CSV</svelte:fragment>
+                            </Tooltip>
 
                             <Tooltip disabled={isRefreshing || !data.rows.total} placement="top">
                                 <Button
@@ -229,6 +258,25 @@
 
                                 <svelte:fragment slot="tooltip">Refresh</svelte:fragment>
                             </Tooltip>
+
+                            <Tooltip placement="top">
+                                <Button
+                                    icon
+                                    size="s"
+                                    secondary
+                                    class="small-button-dimensions"
+                                    on:click={() => {
+                                        $expandTabs = !$expandTabs;
+                                        preferences.setKey('tableHeaderExpanded', $expandTabs);
+                                    }}>
+                                    <Icon
+                                        icon={!$expandTabs ? IconChevronDown : IconChevronUp}
+                                        size="s" />
+                                </Button>
+
+                                <svelte:fragment slot="tooltip"
+                                    >{!$expandTabs ? 'Expand' : 'Collapse'}</svelte:fragment>
+                            </Tooltip>
                         {/if}
                     </Layout.Stack>
                 </Layout.Stack>
@@ -383,6 +431,7 @@
 
     :global(.rotating) {
         animation: rotate 1s linear infinite;
+        animation-direction: reverse;
     }
 
     @keyframes rotate {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/export/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/export/+page.svelte
new file mode 100644
index 0000000000..8858a90959
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/export/+page.svelte
@@ -0,0 +1,248 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { resolve } from '$app/paths';
+    import { page } from '$app/state';
+    import { goto } from '$app/navigation';
+    import { Wizard } from '$lib/layout';
+    import { Fieldset, Layout, Icon, Divider, Tooltip } from '@appwrite.io/pink-svelte';
+    import { Button, InputSelect, InputCheckbox, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { table } from '../store';
+    import { queries, type TagValue } from '$lib/components/filters/store';
+    import { TagList } from '$lib/components/filters';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { toLocalDateTimeISO } from '$lib/helpers/date';
+    import { writable } from 'svelte/store';
+    import { isSmallViewport } from '$lib/stores/viewport';
+
+    let showExitModal = $state(false);
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+
+    let localQueries = $state<Map<TagValue, string>>(new Map());
+    const localTags = $derived(Array.from(localQueries.keys()));
+
+    const timestamp = toLocalDateTimeISO(Date.now())
+        .replace(/[:.]/g, '-')
+        .split('T')
+        .join('_')
+        .slice(0, -4);
+    const filename = `${$table.name}_${timestamp}.csv`;
+
+    let selectedColumns = $state<Record<string, boolean>>({});
+    let showAllColumns = $state(false);
+
+    type DelimiterOption = 'Comma' | 'Semicolon' | 'Tab' | 'Pipe';
+    const delimiterMap: Record<DelimiterOption, string> = {
+        Comma: ',',
+        Semicolon: ';',
+        Tab: '\t',
+        Pipe: '|'
+    };
+
+    let delimiter = $state<DelimiterOption>('Comma');
+    let includeHeader = $state(true);
+    let exportWithFilters = $state(false);
+
+    const columnLimit = $derived($isSmallViewport ? 6 : 9);
+    const visibleColumns = $derived(
+        showAllColumns ? $table.columns : $table.columns.slice(0, columnLimit)
+    );
+    const hasMoreColumns = $derived($table.columns.length > columnLimit);
+    const selectedColumnCount = $derived(Object.values(selectedColumns).filter(Boolean).length);
+
+    const tableUrl = $derived.by(() => {
+        const queryParam = page.url.searchParams.get('query');
+        const url = resolve(
+            '/(console)/project-[region]-[project]/databases/database-[database]/table-[table]',
+            {
+                region: page.params.region,
+                project: page.params.project,
+                database: page.params.database,
+                table: page.params.table
+            }
+        );
+        return queryParam ? `${url}?query=${encodeURIComponent(queryParam)}` : url;
+    });
+
+    function removeLocalFilter(tag: TagValue) {
+        localQueries.delete(tag);
+        localQueries = new Map(localQueries);
+    }
+
+    function initializeColumns() {
+        selectedColumns = Object.fromEntries($table.columns.map((col) => [col.key, true]));
+    }
+
+    function selectAllColumns() {
+        selectedColumns = Object.fromEntries($table.columns.map((col) => [col.key, true]));
+    }
+
+    function deselectAllColumns() {
+        selectedColumns = Object.fromEntries($table.columns.map((col) => [col.key, false]));
+    }
+
+    async function handleExport() {
+        const selectedCols = Object.entries(selectedColumns)
+            .filter(([_, selected]) => selected)
+            .map(([key]) => key);
+
+        if (selectedCols.length === 0) {
+            addNotification({
+                type: 'error',
+                message: 'Please select at least one column to export'
+            });
+            return;
+        }
+
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .migrations.createCSVExport({
+                    resourceId: `${page.params.database}:${page.params.table}`,
+                    filename: filename,
+                    columns: selectedCols,
+                    queries: exportWithFilters ? Array.from(localQueries.values()) : [],
+                    delimiter: delimiterMap[delimiter],
+                    header: includeHeader,
+                    notify: true
+                });
+
+            addNotification({
+                type: 'success',
+                message: 'CSV export has started'
+            });
+
+            trackEvent(Submit.DatabaseExportCsv);
+
+            await goto(tableUrl);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+
+            trackError(error, Submit.DatabaseExportCsv);
+        }
+    }
+
+    onMount(() => {
+        initializeColumns();
+        localQueries = new Map($queries);
+    });
+</script>
+
+<Wizard title="Export CSV" columnSize="s" href={tableUrl} bind:showExitModal confirmExit column>
+    <Form bind:this={formComponent} bind:isSubmitting onSubmit={handleExport}>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Columns">
+                <Layout.Stack gap="l">
+                    <Layout.Stack direction="row" gap="s" alignItems="center">
+                        <Button compact on:click={selectAllColumns}>Select all</Button>
+                        <span style:height="20px">
+                            <Divider vertical />
+                        </span>
+                        <Button compact on:click={deselectAllColumns}>Deselect all</Button>
+                    </Layout.Stack>
+
+                    <Layout.Grid columns={3} columnsS={1} gap="l">
+                        {#each visibleColumns as column (column.key)}
+                            <div style="min-width: 0;">
+                                <InputCheckbox
+                                    id={`column-${column.key}`}
+                                    label={column.key}
+                                    bind:checked={selectedColumns[column.key]}
+                                    truncate />
+                            </div>
+                        {/each}
+                    </Layout.Grid>
+
+                    {#if hasMoreColumns}
+                        <div style:margin-bottom="-0.5rem">
+                            <Button compact on:click={() => (showAllColumns = !showAllColumns)}>
+                                {showAllColumns ? 'Show less' : 'Show more'}
+                            </Button>
+                        </div>
+                    {/if}
+                </Layout.Stack>
+            </Fieldset>
+
+            <Fieldset legend="Export options">
+                <Layout.Stack gap="l">
+                    <InputSelect
+                        id="delimiter"
+                        label="Delimiter"
+                        bind:value={delimiter}
+                        options={[
+                            { value: 'Comma', label: 'Comma' },
+                            { value: 'Semicolon', label: 'Semicolon' },
+                            { value: 'Tab', label: 'Tab' },
+                            { value: 'Pipe', label: 'Pipe' }
+                        ]}>
+                        <Layout.Stack direction="row" gap="none" alignItems="center" slot="info">
+                            <Tooltip>
+                                <Icon size="s" icon={IconInfo} />
+                                <span slot="tooltip">
+                                    Define how to separate values in the exported file.
+                                </span>
+                            </Tooltip>
+                        </Layout.Stack>
+                    </InputSelect>
+
+                    <InputCheckbox
+                        id="includeHeader"
+                        label="Include header row"
+                        description="Column names will be added as the first row in the CSV"
+                        bind:checked={includeHeader} />
+
+                    <Layout.Stack gap="m">
+                        <div class:disabled-checkbox={localTags.length === 0}>
+                            <InputCheckbox
+                                id="exportWithFilters"
+                                label="Export with filters"
+                                description="Export rows that match the current table filters"
+                                disabled={localTags.length === 0}
+                                bind:checked={exportWithFilters} />
+                        </div>
+
+                        {#if localTags.length > 0}
+                            <Layout.Stack
+                                direction="row"
+                                gap="xs"
+                                alignItems="center"
+                                style="padding-left: 1.75rem;"
+                                wrap="wrap">
+                                <TagList
+                                    tags={localTags}
+                                    on:remove={(e) => {
+                                        removeLocalFilter(e.detail);
+                                    }} />
+                            </Layout.Stack>
+                        {/if}
+                    </Layout.Stack>
+                </Layout.Stack>
+            </Fieldset>
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="footer">
+        <Layout.Stack justifyContent="flex-end" direction="row">
+            <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>
+                Cancel
+            </Button>
+            <Button
+                fullWidthMobile
+                on:click={() => formComponent.triggerSubmit()}
+                disabled={$isSubmitting || selectedColumnCount === 0}>
+                Export
+            </Button>
+        </Layout.Stack>
+    </svelte:fragment>
+</Wizard>
+
+<style>
+    .disabled-checkbox :global(*) {
+        cursor: unset;
+    }
+</style>