# Customizing Exported Columns

The [`csv`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#csv) property allows you to control which columns are exported and customize their header names using the `keys` and `names` options.

<CtaPanelOverview></CtaPanelOverview>

## Selecting Specific Columns

Use the `keys` option to specify which data properties to include in the export. This allows you to export only a subset of columns, even if more columns are visible in the Grid.

The `names` option defines the header row text for each exported column.

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

In this example, only the Product ID, Product Name, and Unit Price columns are exported, even though the Grid displays additional columns like Category, Units in Stock, and Discontinued.

## Working with Nested Properties

The CSV export supports nested object properties using dot notation. This is useful when your data contains complex nested structures:

```html
<template>
  <Grid :data-items="products" :csv="csvOptions">
    <GridToolbar>
      <GridCsvExportButton />
    </GridToolbar>
    <GridColumn :field="'ProductID'" :title="'ID'" />
    <GridColumn :field="'ProductName'" :title="'Product Name'" />
    <GridColumn :field="'Category.CategoryName'" :title="'Category'" />
    <GridColumn :field="'UnitPrice'" :title="'Unit Price'" />
  </Grid>
</template>

<script setup lang="ts">
const csvOptions = {
    keys: ['ProductID', 'ProductName', 'Category.CategoryName', 'UnitPrice'],
    names: ['ID', 'Product', 'Category', 'Price']
};
</script>
```

## Automatic Column Detection

When `keys` and `names` are not specified, the CSV export automatically:

1. Detects visible Grid columns and their `field` properties
2. Uses column `title` properties as header names
3. Excludes hidden columns from the export
4. Supports nested field paths (e.g., "Category.CategoryName")

Example:

```html
<template>
  
  <Grid :data-items="products" :csv="true">
    <GridColumn :field="'ProductID'" :title="'ID'" />
    <GridColumn :field="'ProductName'" :title="'Product Name'" />
    <GridColumn :field="'UnitPrice'" :title="'Price'" />
    
    <GridColumn :field="'SecretData'" :title="'Secret'" :hidden="true" />
  </Grid>
</template>
```

## Column Order

The order of properties in the `keys` array determines the column order in the exported CSV file:

```ts
const csvOptions = {
    // Export in this specific order
    keys: ['UnitPrice', 'ProductName', 'ProductID'],
    names: ['Price', 'Product', 'ID']
};
```

## Suggested Links

* [CSV Export Basics](https://www.telerik.com/kendo-vue-ui-develop/components/grid/csv-export)
* [Exporting Custom Data](https://www.telerik.com/kendo-vue-ui-develop/components/grid/csv-export/custom-data)
* [Data Transformation](https://www.telerik.com/kendo-vue-ui-develop/components/grid/csv-export/data-transformation)
* [Vue Data Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid)
* [API Reference of the Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops)