CSV Export Basics

Updated on May 11, 2026

The csv property of the Grid component enables you to export the content of the Kendo UI for Vue Data Grid to CSV format using the built-in @progress/kendo-csv library and @progress/kendo-file-saver for file saving.

Prerequisites

To use the CSV export feature, install the following peer dependencies:

jsx

npm install @progress/kendo-csv @progress/kendo-file-saver

Getting Started

To enable CSV export in the Grid:

1. Set the Grid csv prop to true or provide a GridCSVExportOptions configuration object.
2. Add the GridCsvExportButton component to the Grid toolbar or use a custom button.

The following example demonstrates the basic CSV export functionality. The Grid uses :auto-process-data="true" to handle pagination internally, and with :csv="true", clicking the export button exports all data by default:

Change Theme

Theme

Loading ...

Note: When using :auto-process-data="true", the allPages option controls pagination behavior during export. By default allPages is true, which exports all data. Set allPages: false to export only the current page. See the Basic Configuration Example below for more details.

CSV Export Options

The CSV export functionality provides extensive customization through the GridCSVExportOptions interface:

• allPages - Exports all pages or only the current page (default: true - exports all data)
• fileName - Sets the name of the exported CSV file (default: "grid-export.csv")
• data - Optional custom data to export instead of Grid's data
• keys - Specifies which properties to export from the data objects
• names - Defines custom header names for the exported columns
• delimiter - Sets the character used to separate values (default: ",")
• lineSeparator - Defines the line ending character (default: "\r\n")
• preventFormulaInjection - Protects against formula injection attacks (default: true)
• maxCellLength - Sets the maximum character length per cell (default: 32767)
• includeUTF8BOM - Adds UTF-8 BOM for better Excel compatibility with special characters

Basic Configuration Example

The following example demonstrates how to export all data while displaying only a paginated view. The Grid shows 10 items per page, but with allPages: true (the default), the CSV export includes all products with a custom file name (products-export.csv) and Unix-style line endings:

Change Theme

Theme

Loading ...

CSV Export Features

• Customizing exported columns
• Exporting custom data
• Exporting grouped data
• Programmatic export (exportAsCsv & getCsvBlob)
• Data transformation with onCsvexport
• Formula injection protection

Suggested Links

• API Reference of the Grid
• API Index of the Grid