ExcelExporter

Feature

A feature that allows exporting Grid data to Excel or CSV without involving the server. It uses TableExporter class as data provider, 3rd party provider to generate XLS files, and Microsoft XML specification.

import WriteExcelFileProvider from '../../lib/Grid/feature/experimental/xlsproviders/WriteExcelFileProvider.js';

new Grid({
    features : {
        excelExporter : {
            xlsProvider : WriteExcelFileProvider
        }
    }
});

Implementing custom provider

// Global scope
<script src="https://cdn.jsdelivr.net/npm/write-excel-file/bundle/write-excel-file.min.js"></script>

// importing from package
import writeXlsxFile from 'write-excel-file';

const typeMap = { string : String, number : Number, date : Date };

class MyXlsProvider {
    static write({ filename, columns, rows }) {
        columns.forEach(col => delete col.type);
        rows.forEach(row => row.forEach(cell => cell.type = typeMap[cell.type] || String));

        globalThis.writeXlsxFile([columns, ...rows], {
            // write-excel-file uses amount of symbols as width, so we need to convert pixels to symbols
            columns    : columns.map(col => ({ ...col, width : Math.round(col.width / 10) })),
            fileName   : filename,
            dateFormat : 'yyyy-mm-dd'
        });
    }
}

const grid = new Grid({
    features : {
        excelExporter : {
            xlsProvider : MyXlsProvider
        }
    }
})

Here is an example of how to add the feature:

const grid = new Grid({
    features : {
        excelExporter : {
            // Choose the date format for date fields
            dateFormat : 'YYYY-MM-DD HH:mm',

            exporterConfig : {
                // Choose the columns to include in the exported file
                columns : ['name', 'role'],
                // Optional, export only selected rows
                rows    : grid.selectedRecords
            }
        }
    }
});

And how to call it:

grid.features.excelExporter.export({
    filename       : 'Export',
    exporterConfig : {
        columns : [
            { text : 'First Name', field : 'firstName', width : 90 },
            { text : 'Age', field : 'age', width : 40 },
            { text : 'Starts', field : 'start', width : 140 },
            { text : 'Ends', field : 'finish', width : 140 }
        ]
    }
})

Exporting to CSV is done with the csv config:

grid.features.excelExporter.export({
    filename : 'myfile',
    csv      : true
})

This feature is disabled by default. For info on enabling it, see GridFeatures.

See also

• PdfExport - Export grid to PDF
• Print - Print the grid