Loading Data into DataTable

DataTable can load data of various formats, such as:

JSON;
XML;
JsArray;
CSV.

In addition to the mentioned above, you can define any custom format (read how to do this in Data Drivers).

There are two main ways of loading data in DataTable:

define the data source in the object constructor;
use the parse or the load method.

Both ways work in the same way.

Loading data from an inline dataset

webix.ui({
    view:"datatable",
    data:[
        { id:1,name:"The Shawshank Redemption",year:1994},
        { id:2,name:"The Godfather",year:1972}
    ]
});

Loading data from a data file

webix.ui({
    view:"datatable",
    url:"data/data.json"
});

The url property can be:

a string with the path to a file, a script or a service

webix.ui({
    view:"datatable",
    url:"data/customers"
});

a function to fetch and parse data into a widget

{ view:"datatable", autoConfig:true, url:function(params){
    return webix.ajax("data/customers");
}};

a loading proxy object

{ view:"datatable", id:"table", autoConfig:true, url:{
    $proxy:true,
    load:function(view, params){
       return webix.ajax().get("data/customers", params);
    }
}};

Loading from XML, CSV, JSArray

When loading a non-JSON data, you need to specify the datatype property in config, or pass the name of the expected data type as the second parameter of the parse/load method.

You will also need to use column data mapping to show the correct data in each column.

Loading from CSV

webix.ui({
    view:"datatable",
    columns:[
        { map:"#data1#", header:"First column" }
        { map:"#data2#", header:"Second column" }
    ],
    datatype:"csv"
    url:"data/data.csv"
});

With XML, if the tags in data are the same as column IDs, there is no need for you to use mapping:

webix.ui({
    view:"datatable",
    columns:[
        { id:"name", header:"Will use value from sub-tag 'name'" }
        { id:"details", header:"Will use value from the 'details' attribute or sub-tag" }
    ],
    datatype:"xml"
    url:"data/data.xml"
});

Otherwise, also use mapping:

Loading from XML

webix.ui({
    view:"datatable",
    columns:[
        { map:"#cells[0]#", header:"Will use value from first cell sub-tag" }
        { map:"#details#", header:"Will use value from details attribute or sub-tag" }
    ],
    datatype:"xml"
    url:"data/data.xml"
});

For more details, check Data Mapping

Converting HTML Table to DataTable

To turn an HTML table into DataTable you should call method parse with these parameters:

data - the ID of the table;
datatype - the format of data. Must be set to 'htmltable'.

Loading data from an html table

<table id="films">
    <tr>
        <td width="40">id</td>
        <td width="200">Film title</td>
        <td width="80">Release year</td>
    </tr>
    ...
</table>
<script>grid = webix.ui({
    view:"datatable",
    autoheight:true,
    autowidth:true
});
 
grid.parse("films", "htmltable");
</script>

Loading from Database

To load data from a database table(s), you should deal with both client and server sides.

On the client side, you must define the url parameter (or call the load() method) and specify a server-side script there.

Static loading from db. Client-side code.

webix.ui({
    url:"data/table_data.php"
});
// or
grid.load("data/table_data.php");

A server-side response should include the following information:

data - the array of data records;
pos - the position in the data component to add the loaded data to;
total_count - the total number of records available on the server.

Sample of JSON response

{
    "data":[
        {"id":1,"package":"acx100-source"},
        {"id":2,"package":"acx200-source"}
    ],
    "pos":0,
    "total_count":999
}

Related sample: Dynamic Loading from DB

Loading Big Datasets (Dynamic)

Generally, in case of dynamic loading a data source is a database.

On the client side you must define the url parameter (or call the load() method) with a file implementing server-side 'communication'.

Dynamic loading from db. Client-side code

webix.ui({
    view:"datatable",
    autoConfig:true,
    url:"data/data_dyn.php"
});

A server-side response should include the following information:

Sample of JSON response

{
    "data":[
        {"id":1,"package":"acx100-source"},
        {"id":2,"package":"acx200-source"}
    ],
    "pos":0,
    "total_count":999
}

Related sample: Dynamic Loading from DB

Note that inside dynamic_loading() you should specify the number of records that will be loaded at once.

Dynamic related parameters

The library offers you different properties and methods that can help you to configure dynamic loading.

**Table 1** Dynamic related parameters
Parameter	Description	Usage example
datafetch	Defines the start position DataTable will load data from	If you want to load the particular number of records (e.g. 80), set datafetch:80. Related sample: Setting Loading Position
datathrottle	Sets polling interval that can be used to decrease the number of requests to the server	As a rule, data are getting loaded when the user starts to scroll DataTable. If the user scrolls DataTable slowly, the app pushes a lot of requests to the server, most of which are unnecessary. To exclude unnecessary requests and reduce server overloading, you can set the datathrottle property, for example to 5, and requests will be sent to the server at 5 seconds intervals. Related sample: Datatable: Setting Timeout for Dynamic Loading
loadahead	Allows you to avoid DataTable from possible 'blank spots' while scrolling	When you start scrolling, DataTable detects where you scroll (up or down) and loads next records in this direction (the number of records is defined by the parameter). If you set loadahead:50, then on each scrolling movement DataTable will load next 50 records. Related sample: Dynamic Loading.Load Ahead

Loading Screen

When you deal with big data, it's useful to display the loading screen that shows users that the app is actually doing something.

Call the showOverlay() method to enable the loading screen for DataTable and hideOverlay() to disable it.

Using the loading screen in DataTable

webix.ui({
    view:"datatable",
    on:{
        onBeforeLoad:function(){
            this.showOverlay("Loading...");
        },
        onAfterLoad:function(){
            this.hideOverlay();
        }
    },
    url:"data/table_data.php"
});

Related sample: Loading Screen

If there are no data on the server, instead of hiding the overlay message, you can replace it with a different one by calling showOverlay() with different text:

Defining the overlay text for DataTable

on:{
    onAfterLoad:function(){
        if (!this.count())
            this.showOverlay("Sorry, there is no data");
        else
            this.hideOverlay();
    }
}

Related sample: Adding Overlay Text

Loading Configuration

You can load configuration from the server side along with data. In such a case your data will look as:

{
    config:{
        columns:[ /* columns configuration here...*/ ],
        // any extra options here, the same as in constructor...
    },
    data:[ /* an array of data objects here, as in the above samples...*/ ]
}

Read more on the topic in the article External Configuration and in Webix tutorials.

If you have not checked yet, be sure to visit site of our main product Webix web control library and page of datagrid javascript product.