You can export Webix data components to the CSV format. The components do not require any special configuration to be exported.

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

• id - (string, object) ID or object of the exported view,
• config - (object) optional, a set of configuration options for customization.

For example, to export a list to a CSV document, you need to call the toCSV() method that takes the view object or its ID as a parameter:

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

Related sample:  Export to CSV

The toCSV method returns all data specified in the dataset of a component, or in the columns parameter of the DataTable view. The data are exported into a CSV document with the "Data" name by default.

Customizing Export to CSV

There are some common export customization settings that are also applicable to the toCSV method. There are also some specific settings described below.

Export API allows

• providing a custom filename
• defining custom header or template for data in the specified column
• rendering a template set in the widget's dataset
• setting the desired columns' delimiter
• including hidden columns and rows during export

Providing a custom filename

The default output file name is "Data.csv". To set a different name, use the filename parameter:

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

Defining custom header or template for columns

While exporting a DataTable into the CSV format, you can set custom headers and templates for specific columns:

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

Rendering a template set in the dataset

You can render a template set in the 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
    }
});

You can add some text into the header of the output file with the docHeader parameter:

// setting a custom text in the header of the PDF file
webix.toCSV($$("mylist"), {
    docHeader:"This document was made with Webix library. https://webix.com"
});

Setting the column delimiter

To set the column delimiter, use webix.csv.delimiter.cols:

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

Related sample:  Export to CSV

Including hidden columns and rows

By default hidden columns and rows are not included during export. You can include them by setting the hidden property to true:

webix.toCSV($$("datatable1"), {
    hidden: true
});

In the exported CSV file the hidden columns/rows will be visible.

Back to top