CSV Export

Export the current grid data to a CSV file. The export respects the active sort order, filters, and column visibility, so the user gets exactly what they see.

The simplest way to enable export is to show the built-in toolbar. Set ShowToolbar="true" and an export button appears in the toolbar area above the grid.

<ArcadiaDataGrid TItem="Employee" Data="@employees"
                 ShowToolbar="true"
                 Sortable="true"
                 Filterable="true">
    <ArcadiaColumn TItem="Employee" Title="Name" Field="@(e => e.Name)" />
    <ArcadiaColumn TItem="Employee" Title="Department" Field="@(e => e.Department)" />
    <ArcadiaColumn TItem="Employee" Title="Salary" Field="@(e => e.Salary)" Format="C0" Align="right" />
</ArcadiaDataGrid>

@code {
    private List<Employee> employees = new()
    {
        new("Alice", "Engineering", 95000),
        new("Bob", "Marketing", 72000),
        new("Carol", "Engineering", 105000),
    };

    record Employee(string Name, string Department, decimal Salary);
}

When the user clicks the export button, the browser downloads a .csv file with the current data.

Programmatic Export

For custom export triggers — a button outside the grid, a keyboard shortcut, or an automated workflow — use a component reference and call ExportToCsvAsync() directly.

<button @onclick="ExportData">Export to CSV</button>

<ArcadiaDataGrid @ref="grid" TItem="Employee" Data="@employees"
                 Sortable="true"
                 Filterable="true">
    <ArcadiaColumn TItem="Employee" Title="Name" Field="@(e => e.Name)" />
    <ArcadiaColumn TItem="Employee" Title="Department" Field="@(e => e.Department)" />
    <ArcadiaColumn TItem="Employee" Title="Salary" Field="@(e => e.Salary)" Format="C0" Align="right" />
</ArcadiaDataGrid>

@code {
    private ArcadiaDataGrid<Employee> grid = default!;

    private List<Employee> employees = new()
    {
        new("Alice", "Engineering", 95000),
        new("Bob", "Marketing", 72000),
        new("Carol", "Engineering", 105000),
    };

    private async Task ExportData()
    {
        await grid.ExportToCsvAsync();
    }

    record Employee(string Name, string Department, decimal Salary);
}

Custom File Name

Pass a file name to ExportToCsvAsync to control the download name. The default is export.csv.

await grid.ExportToCsvAsync("employees-report.csv");

ExportToCsvAsync Method

public async Task ExportToCsvAsync(string fileName = "export.csv")

Parameter	Type	Default	Description
`fileName`	`string`	`"export.csv"`	Name of the downloaded CSV file

The method triggers a browser file download via JS interop. It returns after the download has been initiated.

What Gets Exported

The CSV export includes:

A header row with each visible column’s Title
Data rows in the current sort order
Only filtered rows when filters are active
Only visible columns — columns with Visible="false" are excluded
Formatted values using each column’s Format string (e.g., currency, dates)

Columns without a Field accessor (e.g., template-only columns like action buttons), hidden columns, detail templates, and selection checkboxes are not included in the export.

Export with Filters Active

When filters are active, only matching rows are exported. This lets users filter down to a subset and export just that subset.

@* User filters "Department" to "Engineering", then clicks Export CSV *@
@* Only Engineering employees are included in the CSV *@
<ArcadiaDataGrid TItem="Employee" Data="@employees"
                 ShowToolbar="true"
                 Filterable="true">
    <ArcadiaColumn TItem="Employee" Title="Name" Field="@(e => e.Name)" />
    <ArcadiaColumn TItem="Employee" Title="Department" Field="@(e => e.Department)" />
    <ArcadiaColumn TItem="Employee" Title="Salary" Field="@(e => e.Salary)" Format="C0" />
</ArcadiaDataGrid>

Export with Selection

When both selection and the toolbar are enabled, the export button exports only the selected rows if any rows are selected. When no rows are selected, it exports all visible rows.

<ArcadiaDataGrid TItem="Employee" Data="@employees"
                 ShowToolbar="true"
                 Selectable="true"
                 MultiSelect="true"
                 SelectedItems="@selected"
                 SelectedItemsChanged="@(s => selected = s)">
    <ArcadiaColumn TItem="Employee" Title="Name" Field="@(e => e.Name)" />
    <ArcadiaColumn TItem="Employee" Title="Department" Field="@(e => e.Department)" />
    <ArcadiaColumn TItem="Employee" Title="Salary" Field="@(e => e.Salary)" Format="C0" Align="right" />
</ArcadiaDataGrid>

@code {
    private HashSet<Employee> selected = new();
}

CSV Output Example

For a grid with Name, Department, and Salary columns:

Name,Department,Salary
Alice,Engineering,"$95,000"
Carol,Engineering,"$105,000"

Values containing commas, double-quotes, or newlines are automatically quoted per RFC 4180.

Clipboard Copy

Beta.10 adds keyboard-driven clipboard copy. Users can copy grid data to the clipboard without exporting a file.

How It Works

Press Ctrl+C (or Cmd+C on Mac) while the grid is focused to copy data to the clipboard as tab-separated values (TSV).
If rows are selected, only the selected rows are copied.
If no rows are selected, all visible rows on the current page are copied.
The copied data includes a header row with column titles, followed by data rows.

The TSV format pastes cleanly into spreadsheet applications like Excel and Google Sheets, where tabs are interpreted as column separators.

Example

With three employees visible and none selected, pressing Ctrl+C copies:

Name	Department	Salary
Alice	Engineering	$95,000
Bob	Marketing	$72,000
Carol	Engineering	$105,000

When two rows are selected, only those rows (plus the header) are copied.

Notes

Clipboard copy respects column visibility — hidden columns are excluded.
Values are formatted using each column’s Format string, matching what the user sees on screen.
The grid must have focus for the keyboard shortcut to work. Clicking anywhere on the grid gives it focus.
In browsers that require clipboard permissions, the user may see a permission prompt on first use.

Note: CSV export operates on the client-side processed data. When using LoadData for server-side mode, only the currently loaded rows are exported. To export the full server-side dataset, fetch all rows in your application code and pass them to a separate export utility.