Export to CSV

To export data from a data component into a CSV document, call the toCSV method. The method takes 2 parameters:

id - (string, object) the id or the object of the exported view
options - (object) optional, a set of configuration options that define what data will be displayed in the CSV file

For example, this will export a datatable to a CSV document:

webix.ui({
    view:"datatable",
    id: "myDataTable",
    // list configuration
    ...
});
 
webix.toCSV($$("myDataTable"));

Related sample: Export to CSV

Customizing Export

By default: - The toCSV method returns all data specified in the dataset of a component or in the columns parameter of the DataTable view. - The data is exported into a CSV document named "Data".

You can change the default behavior and add some other settings.

You can

provide a custom filename
strip HTML tags from the cells
set custom columns for export
define custom header or template for data in the specified column
include extra fields into export
render a template set in the dataset
set the desired columns delimiter
disable file download in a browser, if necessary
ignore particular columns during export
omit the header or footer of Datatable during export
output certain data from the data set of Datatable

providing a custom filename:

webix.toCSV($$("table"), {
    filename: "table"
});

stripping HTML tags from the cells:

webix.toCSV($$("table"), {
    filterHTML:true
});

setting columns you'd like to see in the export file. There are two ways to set the custom columns for export:

You can provide an object with column ids as keys. Their values can be either boolean for default parameters (taken from component configuration) or object for custom parameters:

webix.toCSV($$("table"), {
    columns:{
        "rank":true,
        "title":{ header:"Title", width:250}
    }
});

With such a notation the order of the columns in the resulting file is defined automatically with a for.. in loop. Sometimes it may be unreliable, e.g.:

webix.toCSV($$("table"), {
    columns:{
        "rank":true,
        "title":{ header:"Title", width:250},
        "2016":{ header:"Votes in 2016"},
        "2015":{ header:"Votes in 2015"}
    }
});

The order in the export file will be: "2015", "2016", "rank", "title" since numbers are processed first and come in the ascending order.

To ensure the strict order of columns in the resulting file, you can specify the columns as a plain array:

webix.toCSV($$("table"), {
    columns:[
        { id:"rank" },
        { id:"title", header:"Title", width:250},
        { id:"2016", header:"Votes in 2016"},
        { id:"2015", header:"Votes in 2015"}
    ]
});

Note that if you want to get the default column's parameters in this case, you should specify only the column's id (see the "rank" column).

defining custom header or template parameter for data in the specified column:

webix.toCSV($$("table"), {
    columns:{
        "title":{header: "Title", template: webix.template("#id#.#name#")},
        "year":{header: "Year"}
    }
});

The column will be rendered with the stated additional properties, which may differ from the component's parameters.

rendering a template set in the widget's dataset via setting the rawValues option to false

webix.ui({
    rows:[
        {
            view:"datatable",
            data:grid_data,
            columns:[
                {id:"title", fillspace:true, template:"Film #title#"}
            ]
        }
    ]
});
 
webix.toCSV($$("$datatable1"),{
    columns:{
        rawValues:false
    }
});

including extra fields into export by forming them right within the export function:

webix.toCSV($$("table"), {
    columns:{
        Custom1:{
            template:function(obj){
                return "Year " + obj.year;
            },
            header:"Year"
        },
        //other columns
        title:true
    }
});

"Custom1" (any name can be used) receives data from the year field even if it is not seen in this component but is presented in its dataset. The field is rendered with template and header that will be the header of the corresponding column in the resulting table.

setting the desired columns' delimiter using webix.csv.delimiter.cols

webix.csv.delimiter.cols = ",";

disabling file download in a browser if necessary, via the download property set to false:

webix.toCSV($$("table"), {
   download:false
}).then(function(blob){
   //process raw data
});

ignoring particular columns during export via the ignore property. You need to set its value as an object with a list of columns names to ignore. For example:

webix.toCSV($$("table"), {
    ignore: { "votes":true, "rating":true }
});

omitting the header or footer of a datatable during the export. For this you need to use the header/footer option and set it to false:

webix.toCSV($$("table"), {
    header:false,
    footer:false
});

Related sample: Export to CSV

outputting certain data from the data set of Datatable via the filter property. The value of this option should be set as a function which returns the data that should be exported:

webix.toCSV($$("data"), {
    filter:function(obj){
        var found = sel.find(function(item){
            return item.id == obj.id;
        });
        return found;
    }
});