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 article Data Drivers).

There are two main ways of loading data in DataTable:

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

Both ways lead to one and the same result and don't have any specificity.

Loading data from inline dataset

grid = new 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

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

Loading from XML, CSV, JsArray

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

Also, you need to show in the columns configuration, which data will go to each column.

Loading from XML

grid = new 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"
});

If you use xml format with tag names equal to column ids, you may skip mapping, DataTable will be able to auto-map values

Loading from CSV

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

For more details, check Data Mapping

Converting HTML table to DataTable

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

data - the id of the table;
datatype - the format of data. Must be set to value '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 = new webix.ui({
    view:"datatable",
    ...
});
 
grid.parse("films", "htmltable");
</script>

Related sample: Loading from HTML table

Loading from database

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

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

On the server side you should write the script realizing server-client 'communication' that returns data in the XML or JSON format:

Static loading from db. Server-side code

<?php
   require_once("../../common/config.php");
   $data = new JSONDataConnector($conn, $dbtype);
   $data->dynamic_loading(30);
   $data->render_table("packages_plain","id","package, size, architecture, section");
?>

Static loading from db. Client-side code.

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

Related sample: Loading from DB

Loading big datasets (dynamic)

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

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

On the server side, if you don't write server-side code by yourself and use WebixConnector you should just call the dynamic_loading() method:

Dynamic loading from db. Client-side code

grid = new webix.ui({
    ...
    url:"data/data_dyn.php"
});

Dynamic loading from db. Server-side code

require_once("../../common/config.php");//including the connector file
$data = new JSONDataConnector($conn, $dbtype);//initializing the connector object
$data->dynamic_loading(30);//enabling dynamic loading 
$data->render_table("packages_plain","id","package, size, architecture, section");//loading data from the specified database table

Related sample: Dynamic loading from DB

Note, inside dynamic_loading() you should specify a 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 set when, how often and which data will be loaded.

**Table 1** Dynamic related parameters
Parameter	Description	Usage example
datafetch	Defines the number of records that should be loaded from server side during each dynamic loading request. 50 by default.	You want to load the particular number of records (e.g. 80), then you set datafetch:80. Related sample: Setting loading position
datathrottle	Sets polling interval that can be used to decrease the number of requests to server	As a rule, data are getting loaded when a user starts to scroll DataTable. If he scrolls DataTable slowly, the app pushes a big amount of requests to the server, a major part of which is unnecessary. To exclude unnecessary requests and reduce server overloading, you can set the datathrottle property, for example to 5, and requests start to be sent to server at 5 seconds intervals. Related sample: Setting polling interval
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 large data size, it's useful to display the loading screen showing users that the app is actually doing something.

To enable the loading screen for DataTable you should call method showOverlay(), to disable it after - hideOverlay().

Using the loading screen in DataTable

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

Related sample: Loading screen

In case you don't call method hideOverlay() , instead of the loading screen you will set the overlay text. It can be useful in some situations. For example, when your DataTable doesn't contain any data, you can display the overlay text to inform users about it.

Defining the overlay text for DataTable

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

Related sample: Adding overlay text

Loading configuration

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

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

Read more on the topic in article External configuration.

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.