# CSV Export Basics

The [`csv`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#csv) property of the Grid component enables you to export the content of the KendoReact Grid to CSV format using the built-in `@progress/kendo-csv` library and `@progress/kendo-file-saver` for file saving.

<CtaPanelOverview></CtaPanelOverview>

## Getting Started

To enable CSV export in the Grid:

1. Set the Grid [`csv`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#csv) prop to `true` or provide a [`GridCSVExportOptions`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridcsvexportoptions) configuration object.
2. Add the [`GridCsvExportButton`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridcsvexportbutton) component to the Grid toolbar or use a custom button.

The following example demonstrates the basic CSV export functionality. The Grid uses `autoProcessData={true}` to handle pagination internally, and with `csv={true}`, clicking the export button exports all data by default:

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/csv-export/simple-export/source.txt)

> **Note**: When using `autoProcessData={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](https://www.telerik.com/kendo-react-ui-develop/components/grid/export/csv-export#basic-configuration-example) below for more details.

## CSV Export Options

The CSV export functionality provides extensive customization through the [`GridCSVExportOptions`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/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:

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/csv-export/all-data-export/source.txt)

## CSV Export Features

* [Customizing exported columns](https://www.telerik.com/kendo-react-ui-develop/components/grid/export/csv-export/custom-columns)
* [Exporting custom data](https://www.telerik.com/kendo-react-ui-develop/components/grid/export/csv-export/custom-data)
* [Exporting grouped data](https://www.telerik.com/kendo-react-ui-develop/components/grid/export/csv-export/grouped-data)
* [Programmatic export (saveAsCsv & getCsvBlob)](https://www.telerik.com/kendo-react-ui-develop/components/grid/export/csv-export/programmatic-export)
* [Data transformation with onCsvExport](https://www.telerik.com/kendo-react-ui-develop/components/grid/export/csv-export/data-transformation)
* [Formula injection protection](https://www.telerik.com/kendo-react-ui-develop/components/grid/export/csv-export/formula-injection)

## Suggested Links

* [API Reference of the Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops)
* [API Index of the Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api)