Exporting Custom Data

Updated on Feb 6, 2026

The 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 autoProcessData={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 for details.

This is a Free React CSV Export feature of the GridThe KendoReact CSV Export feature of the Grid is free to use, including in production—no sign-up or license required. Check out all 120+ free and premium UI components in the enterprise-grade KendoReact library.

Custom Data Export

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

Change Theme

Theme

Loading ...

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:

jsx

const [products] = React.useState(productData);
const [filter, setFilter] = React.useState();

const filteredData = filterBy(products, filter);

const csvOptions = {
    data: filteredData,
    fileName: 'filtered-products.csv'
};

<Grid
    data={filteredData}
    csv={csvOptions}
    filterable={true}
    filter={filter}
    onFilterChange={(e) => setFilter(e.filter)}
>
    <GridToolbar>
        <GridCsvExportButton />
    </GridToolbar>
    {/* columns */}
</Grid>;

Exporting Aggregated or Summary Data

Export summarized data instead of raw records:

jsx

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):

jsx

// 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'
};