# Exporting Custom Data

The [`csv`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#csv) property's `data` option allows you to export a different dataset than what is currently displayed in the Grid. This is useful for scenarios like exporting all data when the Grid shows only a paginated subset.

> **Tip**: If you're using `:auto-process-data="true"` and simply want to control whether to export all pages or just the current page, use the `allPages` option instead. Set `allPages: false` to export only the current page, or `allPages: true` (the default) to export all data. See [CSV Export Basics](https://www.telerik.com/kendo-vue-ui-develop/components/grid/csv-export) for details.

<CtaPanelOverview></CtaPanelOverview>

## Custom Data Export

You can specify custom data to export using the `data` property in the CSV configuration object:

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

In this example, the Grid displays the full product list, but the CSV export only includes the first 5 products.

## Common Use Cases

### Exporting Filtered Data

Export only the data that matches current filter criteria:

```html
<template>
  <Grid
    :data-items="filteredData"
    :csv="csvOptions"
    :filterable="true"
    :filter="filter"
    @filterchange="onFilterChange"
  >
    <GridToolbar>
      <GridCsvExportButton />
    </GridToolbar>
    
  </Grid>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { filterBy } from '@progress/kendo-data-query';

const products = ref(productData);
const filter = ref();

const filteredData = computed(() => filterBy(products.value, filter.value));

const csvOptions = computed(() => ({
    data: filteredData.value,
    fileName: 'filtered-products.csv'
}));

const onFilterChange = (e) => {
    filter.value = e.filter;
};
</script>
```

### Exporting Aggregated or Summary Data

Export summarized data instead of raw records:

```ts
const summaryData = products.map((product) => ({
    Category: product.Category.CategoryName,
    TotalValue: product.UnitPrice * product.UnitsInStock,
    Status: product.Discontinued ? 'Discontinued' : 'Active'
}));

const csvOptions = {
    data: summaryData,
    fileName: 'product-summary.csv'
};
```

## DataResult Support

The CSV export automatically handles both plain arrays and DataResult objects (commonly used with server-side operations):

```ts
// Both formats are supported
const dataResult = {
    data: products.slice(0, 20),
    total: products.length
};

const csvOptions = {
    data: dataResult, // Automatically extracts the 'data' array
    fileName: 'export.csv'
};
```

## Suggested Links

* [CSV Export Basics](https://www.telerik.com/kendo-vue-ui-develop/components/grid/csv-export)
* [Customizing Exported Columns](https://www.telerik.com/kendo-vue-ui-develop/components/grid/csv-export/custom-columns)
* [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)