TableExporter

This class transforms grid component into two arrays: rows and columns. Columns array contains objects with meta information about column: field name, column name, width and type of the rendered value, rows array contains arrays of cell values.

const exporter = new TableExporter({ target : grid });
exporter.export()

// Output
{
    columns : [
        { field : 'name',     value : 'First name', type : 'string',  width : 100 },
        { field : 'surname',  value : 'Last name',  type : 'string',  width : 100 },
        { field : 'age',      value : 'Age',        type : 'number',  width : 50  },
        { field : 'married',  value : 'Married',    type : 'boolean', width : 50  },
        { field : 'children', value : 'Children',   type : 'object',  width : 100 }
    ],
    rows : [
        ['Michael', 'Scott',   40, false, []],
        ['Jim',     'Halpert', 30, true,  [...]]
    ]
}

How data is exported

Exporter iterates over store records and processes each record for each column being exported. Exporter uses same approach to retrieve data as column: reading record field, configured on the column, or calling renderer function if one is provided. This means data can be of any type: primitives or objects. So children array in the above code snippet may contain instances of child record class.

Column renderers

Column renderers are commonly used to style the cell, or even render more HTML into it, like WidgetColumn does. This is not applicable in case of export. Also, given grid uses virtual rendering (only renders visible rows) and exporter iterates over all records, not just visible ones, we cannot provide all data necessary to the renderer. Some arguments, like cellElement and row, wouldn't exist. Thus, the renderer is called with as much data we have: value, record, column, grid, other documented arguments would be undefined.

Exporter adds one more flag for renderer function: isExport. When renderer receives this flag it knows data is being exported and can skip DOM work to return simpler value. Below snippet shows simplified code of the widget column handling export:

renderer({ isExport }) {
    if (isExport) {
        return null;
    }
    else {
        // widget rendering routine
        ...
    }
}

Column types

Column types are not actually a complete list of JavaScript types (you can get actual type of the cell using typeof) it is a simple and helpful meta information.

Available column types are:

• string
• number
• boolean
• date
• object

Everything which is not primitive like string/number/bool (or a date) is considered an object. This includes null, undefined, arrays, classes, functions etc.

Getting column type

If existing grid column is used, column type first would be checked with exportedType config. If exportedType is undefined or column does not exist in grid, type is read from a record field definition. If the field is not defined, object type is used.

Configuring exported type:

new Grid({
    columns : [
        {
            name         : 'Name',
            field        : 'name',
            exportedType : 'object',
            renderer     : ({ value, isExport }) => {
                if (isExport) {
                    return { value }; // return value wrapped into object
                }
            }
    ]
})