Box
API
Row
Map

JavaScript/jQuery DataGrid - export

Configures client-side exporting.

Type:

Export

A user can click the Export button to save an Excel or PDF file with the exported data. Data types, sort, filter, and group settings are maintained.

DevExtreme HTML5 JavaScript DataGrid Export Button

The following instructions show how to enable and configure client-side export:

  1. Install or reference the required libraries

    Install the following libraries for the export:

    • <!-- Export to Excel -->
    • <head>
    • <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
    • <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.4.0/exceljs.min.js"></script>
    • <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>
    • <!-- Reference the DevExtreme sources here -->
    • </head>
    •  
    • <!-- Export to Pdf -->
    • <head>
    • <!-- ... -->
    • <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.0.0/jspdf.umd.min.js"></script>
    • <!-- Reference the DevExtreme sources here -->
    • </head>
  2. Enable the export UI
    Set the export.enabled property to true. This property enables export for all columns. Set a column's allowExporting property to false to prevent it from being exported:

    JavaScript
    • $(function () {
    • $("#dataGridContainer").dxDataGrid({
    • export: {
    • enabled: true
    • },
    • columns: [{ ...
    • allowExporting: false
    • },
    • // ...
    • ]
    • });
    • });
  3. Export the DataGrid
    Implement the onExporting handler and call the excelExporter.exportDataGrid(options) or pdfExporter.exportDataGrid(options) method. In the code below, the exportDataGrid method exports the DataGrid as is. You can use ExcelExportDataGridProps/PdfExportDataGridProps to configure export settings. The DataGrid exports its data to an Excel worksheet or a PDF document. To save the Excel document, call the FileSaver's saveAs method. To save the PDF document, call the jsPDF's save method.

    The example below shows how to export DataGrid to Excel file.

    JavaScript
    • $('#gridContainer').dxDataGrid({
    • export: {
    • enabled: true
    • },
    • onExporting: function(e) {
    • var workbook = new ExcelJS.Workbook();
    • var worksheet = workbook.addWorksheet('Main sheet');
    • DevExpress.excelExporter.exportDataGrid({
    • worksheet: worksheet,
    • component: e.component,
    • customizeCell: function(options) {
    • options.excelCell.font = { name: 'Arial', size: 12 };
    • options.excelCell.alignment = { horizontal: 'left' };
    • }
    • }).then(function() {
    • workbook.xlsx.writeBuffer().then(function(buffer) {
    • saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
    • });
    • });
    • }
    • });

    The example below shows how to export DataGrid to PDF document.

    JavaScript
    • $(function(){
    • $('#exportButton').dxButton({
    • // ...
    • onClick: function() {
    • const doc = new jsPDF();
    • DevExpress.pdfExporter.exportDataGrid({
    • jsPDFDocument: doc,
    • component: dataGrid
    • }).then(function() {
    • doc.save('Customers.pdf');
    • });
    • }
    • });
    • const dataGrid = $('#gridContainer').dxDataGrid({
    • // ...
    • }).dxDataGrid('instance');
    • });

The following restrictions apply when users export DataGrid:

Export to Excel Overview Demo Export to PDF Overview Demo Export Images to Excel Demo Export Images to PDF Demo

allowExportSelectedData

Allows users to export selected rows only.

Type:

Boolean

Default Value: false

When this property is set to true, a click on DevExtreme DataGrid HTML5 Toolbar Exporting invokes a menu that contains the "Export selected rows" command.

DevExtreme DataGrid Exporting Selected Rows

Export to Excel Demo Export to PDF Demo

NOTE
See Also
  • export.texts.exportSelectedRows - customizes the text of the "Export selected rows" command.
  • selection.mode - enables selection in the UI component.

enabled

Adds the Export button to the DataGrid's toolbar.

Type:

Boolean

Default Value: false

Refer to the export topic for information on how to configure export.

Export to Excel Demo Export to PDF Demo

formats

Specifies the availability and captions of data export buttons.

Default Value: 'DataGrid'

The formats property's default value is ['xlsx']. This means that the DataGrid displays the export button and its menu contains a command titled "Export all data (selected rows) to Excel". If you would rather implement PDF export in your application, set the formats property to ['pdf']. The command text changes to "Export all data (selected rows) to PDF". You can then implement the onExporting handler accordingly.

Export to Excel Overview Demo Export to PDF Overview Demo

Since the formats property accepts an array, you can specify multiple formats. For example, you can set the property to ['xlsx', 'pdf']. In this case, the grid displays multiple export commands: "Export all data (selected rows) to Excel" and "Export all data (selected rows) to PDF". In the onExporting handler, add logic that checks which button initiated the export operation.

JavaScript
  • $(function(){
  • const dataGrid = $('#gridContainer').dxDataGrid({
  • // ...
  • export: {
  • enabled: true,
  • formats: ['xlsx', 'pdf'],
  • },
  • onExporting(e) {
  • if (e.format === 'xlsx') {
  • const workbook = new ExcelJS.Workbook();
  • const worksheet = workbook.addWorksheet('Companies');
  • DevExpress.excelExporter.exportDataGrid({
  • component: e.component,
  • worksheet,
  • autoFilterEnabled: true,
  • }).then(() => {
  • workbook.xlsx.writeBuffer().then((buffer) => {
  • saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'Companies.xlsx');
  • });
  • });
  • }
  • else if (e.format === 'pdf') {
  • const doc = new jsPDF();
  • DevExpress.pdfExporter.exportDataGrid({
  • jsPDFDocument: doc,
  • component: e.component,
  • }).then(() => {
  • doc.save('Companies.pdf');
  • });
  • }
  • },
  • }).dxDataGrid('instance');
  • });

The predefined values for the formats property are 'xlsx' and 'pdf'. You can also specify any custom string, such as ['csv']. If you do that, the export command caption will read "Export all data (selected rows) to CSV". Once again, you'll need to change the onExporting handler to produce a file in that format. Refer to the CSV Injection section to take the threat of a CSV Injection Attack into account.

The example below shows how to export DataGrid to CSV format.

JavaScript
  • $(function(){
  • const dataGrid = $('#gridContainer').dxDataGrid({
  • // ...
  • export: {
  • enabled: true,
  • formats: ['csv'],
  • },
  • onExporting: function(e) {
  • const workbook = new ExcelJS.Workbook();
  • const worksheet = workbook.addWorksheet('Employees');
  • DevExpress.excelExporter.exportDataGrid({
  • component: e.component,
  • worksheet: worksheet
  • }).then(function() {
  • // https://github.com/exceljs/exceljs#writing-csv
  • // https://github.com/exceljs/exceljs#reading-csv
  • workbook.csv.writeBuffer().then(function(buffer) {
  • saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Report.csv");
  • });
  • });
  • },
  • }).dxDataGrid('instance');
  • });

texts

Configures the texts of export commands, buttons, and hints.

Type:

ExportTexts