Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

Angular Data GridCSV Export

The grid data can be exported to CSV with an API call, or using the right-click context menu (Enterprise only) on the Grid.

What Gets Exported

The same data that is in the grid gets exported, but none of the GUI representation of the data will be. What this means is:

  • The raw values, and not the result of cell renderer will get used, meaning:

    • Value Getters will be used.
    • Cell Renderers will NOT be used.
    • Cell Formatters will NOT be used (use processCellCallback instead).
  • Cell styles are not exported.

  • If row grouping:

    • All data will be exported regardless of whether groups are open in the UI.
    • By default, group names will be in the format "-> Parent Name -> Child Name" (use processRowGroupCallback to change this).
    • Row group footers (groupIncludeFooter=true) will NOT be exported - this is a GUI addition only.

The CSV export will be enabled by default. If you want to disable it, you can set the property suppressCsvExport = true in your gridOptions.

Security Concerns

When opening CSV files, spreadsheet applications like Excel, Apple Numbers, Google Sheets and others will automatically execute cell values that start with the following symbols as formulas: +, -, =, @, Tab (0x09) and Carriage Return (0x0D). In order to prevent any malicious content from being exported we recommend using the callback methods shown in the CSV Export Params to modify the exported cell values so that they do NOT start with any of the characters listed above. This way the applications will not execute the cell value directly if it starts with the characters listed above. If you'd like to keep the cell values unchanged when exporting, please allow exporting to Excel only.

Detailed info regarding CSV Injection can be found in the OWASP CSV Injection website.

Standard Export

The example below shows the default behaviour when exporting the grid's data to CSV.

Note the following:

  • You can use the Show CSV export content text button, to preview the output.
  • You can use the Download CSV export file button to download a csv file.
  • The file will be exported using the default name: export.csv.
  • Community version supports api CSV Export but not Context Menu.
Example: CSV Export
// Loading...

Changing the column separator

By default, a CSV file separates its columns using ,. But this value token could be changed using the columnSeparator param.

Note the following:

  • You can use the select field at the top to switch the value of the columnSeparator param.
  • You can use the Show CSV export content text button, to preview the output.
  • Enterprise version enables CSV Export using right click via the Context Menu.

Suppress Quotes

By default cell values are encoded according to CSV format rules: values are wrapped in double quotes, and any double quotes within the values are escaped, so my"value becomes "my""value". Pass true to insert the value into the CSV file without escaping. In this case it is your responsibility to ensure that no cells contain the columnSeparator character.

Note the following:

  • You can use the select field at the top to switch the value of the suppressQuotes param.
  • You can edit the cells to preview the results with different inputs.
  • You can use the Show CSV export content text button, to preview the output.
  • You can use the Download CSV export file button to download a csv file.

Prepending and Appending Content

The recommended way to prepend or append content, is by passing an array of CsvCell objects to appendContent or prependContent. This ensures that your content is correctly escaped.

For compatibility with earlier versions of the Grid you can also pass a string, which will be inserted into the CSV file without any processing. You are responsible for formatting the string according to the CSV standard.

Note the following:

  • You can use select fields at the top to switch the value of prependContent and appendContent.

    • With prependContent=CsvCell[][] or appendContent=CsvCell[][], custom content will be inserted containing commas and quotes. These commas and quotes will be visible when opened in Excel because they have been escaped properly.
    • With prependContent=string or appendContent=string, a string to be inserted into the CSV file without any processing, and without being affected by suppressQuotes and columnSeparator. It contains commas and quotes that will not be visible in Excel.
  • You can use the Show CSV export content text button, to preview the output.
  • You can use the Download CSV export file button to download a csv file.

Column Headers

In some situations, you could be interested in exporting only the grid data, without exporting the header cells. For this scenario, we provide the skipColumnGroupHeaders=true and skipColumnHeaders=true params.

Note the following:

  • Initially, grouped headers and header are exported.
  • Group Headers will be skipped if Skip Column Group Headers is checked.
  • Normal headers will be skipped if Skip Column Headers is checked.

Pinned Rows

If the pinned rows are not relevant to the data, they can be excluded from the export by using the skipPinnedTop=true and skipPinnedBottom=true params.

Note the following:

  • By default, all pinned rows are exported.
  • If Skip Pinned Top Rows is checked, the rows pinned at the top will be skipped.
  • If Skip Pinned Bottom Rows is checked, the rows pinned at the bottom will be skipped.

Hidden Columns

By default, hidden columns are not exported. If you would like all columns to be exported regardless of the current state of grid, use the allColumns=true params.

Note the following:

  • By default, only visible columns will be exported. The bronze, silver, and gold columns will not.
  • If Export All Columns is checked, the bronze, silver, and gold columns will be included in the export.

API

Grid Properties

defaultCsvExportParams
CsvExportParams
A default configuration object used to export to CSV.
suppressCsvExport
boolean
Prevents the user from exporting the grid to CSV.
Default: false

API Methods

exportDataAsCsv
Function
Downloads a CSV export of the grid's data. 
exportDataAsCsv = (
    params?: CsvExportParams
) => void;
getDataAsCsv
Function
Similar to exportDataAsCsv, except returns the result as a string rather than download it. 
getDataAsCsv = (
    params?: CsvExportParams
) => string | undefined;

Interfaces

CsvExportParams

Properties available on the CsvExportParams interface.

columnSeparator
string
Delimiter to insert between cell values.
Default: ,
suppressQuotes
boolean
By default cell values are encoded according to CSV format rules: values are wrapped in double quotes, and any double quotes within the values are escaped, so my value becomes \"my\"\"value\". Pass true to insert the value into the CSV file without escaping. In this case it is your responsibility to ensure that no cells contain the columnSeparator character.
Default: false
prependContent
CsvCustomContent
Content to put at the top of the file export. A 2D array of CsvCell objects (see Prepending and Appending Content). Alternatively, you can pass a multi-line string that is simply appended to the top of the file content.
prependContent: CsvCustomContent;

type CsvCustomContent = CsvCell[][] | string

interface CsvCell {
  // The data that will be added to the cell. 
  data: CsvCellData;
  // The number of cells to span across (1 means span 2 columns).
  // Default: `0`
  mergeAcross?: number;
}

interface CsvCellData {
  // The value of the cell. 
  value: string | null;
}
appendContent
CsvCustomContent
Content to put at the bottom of the file export. A 2D array of CsvCell objects (see Prepending and Appending Content). Alternatively, you can pass a multi-line string that is simply appended to the bottom of the file content.
appendContent: CsvCustomContent;

type CsvCustomContent = CsvCell[][] | string

interface CsvCell {
  // The data that will be added to the cell. 
  data: CsvCellData;
  // The number of cells to span across (1 means span 2 columns).
  // Default: `0`
  mergeAcross?: number;
}

interface CsvCellData {
  // The value of the cell. 
  value: string | null;
}
getCustomContentBelowRow
Function
A callback function to return content to be inserted below a row in the export. 
getCustomContentBelowRow = (
    params: ProcessRowGroupForExportParams
) => CsvCustomContent | undefined;

interface ProcessRowGroupForExportParams<TData = any, TContext = any> {
  // Row node. 
  node: IRowNode<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}

type CsvCustomContent = CsvCell[][] | string

interface CsvCell {
  // The data that will be added to the cell. 
  data: CsvCellData;
  // The number of cells to span across (1 means span 2 columns).
  // Default: `0`
  mergeAcross?: number;
}

interface CsvCellData {
  // The value of the cell. 
  value: string | null;
}
allColumns
boolean
If true, all columns will be exported in the order they appear in the columnDefs. When false only the columns currently being displayed will be exported.
Default: false
columnKeys
(string | Column)[]
Provide a list (an array) of column keys or Column objects if you want to export specific columns.
rowPositions
RowPosition[]
Row node positions. 
rowPositions: RowPosition[];

interface RowPosition {
  // A positive number from 0 to n, where n is the last row the grid is rendering
  // or -1 if you want to navigate to the grid header 
  rowIndex: number;
  // Either 'top', 'bottom' or null/undefined (for not pinned) 
  rowPinned: RowPinnedType;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
fileName
string
String to use as the file name.
Default: 'export.csv'
exportedRows
'all' | 'filteredAndSorted'
Determines whether rows are exported before being filtered and sorted.
Default: filteredAndSorted
onlySelected
boolean
Export only selected rows.
Default: false
onlySelectedAllPages
boolean
Only export selected rows including other pages (only makes sense when using pagination).
Default: false
skipColumnGroupHeaders
boolean
Set to true to exclude header column groups.
Default: false
skipColumnHeaders
boolean
Set to true if you don't want to export column headers.
Default: false
skipRowGroups
boolean
Set to true to skip row group headers if grouping rows. Only relevant when grouping rows.
Default: false
skipPinnedTop
boolean
Set to true to suppress exporting rows pinned to the top of the grid.
Default: false
skipPinnedBottom
boolean
Set to true to suppress exporting rows pinned to the bottom of the grid.
Default: false
shouldRowBeSkipped
Function
A callback function that will be invoked once per row in the grid. Return true to omit the row from the export. 
shouldRowBeSkipped = (
    params: ShouldRowBeSkippedParams
) => boolean;

interface ShouldRowBeSkippedParams<TData = any, TContext = any> {
  // Row node. 
  node: IRowNode<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}
processCellCallback
Function
A callback function invoked once per cell in the grid. Return a string value to be displayed in the export. For example this is useful for formatting date values. 
processCellCallback = (
    params: ProcessCellForExportParams
) => string;

interface ProcessCellForExportParams<TData = any, TContext = any> {
  value: any;
  accumulatedRowIndex?: number;
  node?: IRowNode<TData> | null;
  column: Column;
  type: string;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}
processHeaderCallback
Function
A callback function invoked once per column. Return a string to be displayed in the column header. 
processHeaderCallback = (
    params: ProcessHeaderForExportParams
) => string;

interface ProcessHeaderForExportParams<TData = any, TContext = any> {
  column: Column;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}
processGroupHeaderCallback
Function
A callback function invoked once per column group. Return a string to be displayed in the column group header. Note that column groups are exported by default, this option will not work with skipColumnGroupHeaders=true. 
processGroupHeaderCallback = (
    params: ProcessGroupHeaderForExportParams
) => string;

interface ProcessGroupHeaderForExportParams<TData = any, TContext = any> {
  columnGroup: ColumnGroup;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}
processRowGroupCallback
Function
A callback function invoked once per row group. Return a string to be displayed in the group cell. 
processRowGroupCallback = (
    params: ProcessRowGroupForExportParams
) => string;

interface ProcessRowGroupForExportParams<TData = any, TContext = any> {
  // Row node. 
  node: IRowNode<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}

CsvCell

Properties available on the CsvCell interface.

data *
CsvCellData
The data that will be added to the cell. 
data: CsvCellData;

interface CsvCellData {
  // The value of the cell. 
  value: string | null;
}
mergeAcross
number
The number of cells to span across (1 means span 2 columns).
Default: 0

CsvCellData

Properties available on the CsvCellData interface.

value *
string | null
The value of the cell.