Data Components Export to CSV

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

Export is available both in Standard and Pro versions, but pay attention that the IE browser is supported starting from version 10.

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 is 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

  1. providing a custom filename
  2. defining custom header or template for data in the specified column
  3. rendering a template set in the widget's dataset
  4. setting the desired columns' delimiter

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
    }
});

Displaying text in the header of the export file

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

Back to top