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

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>

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.

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

Related sample: Dynamic Loading from DB

Loading Big Datasets (Dynamic)

Generally, a data source in case of dynamic loading 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'.

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

Dynamic loading from db. Client-side code

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 start position DataTable will load data from	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: 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 large data size, it's useful to display the loading screen showing 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

In case you don't call the hideOverlay method, you will set the overlay text instead of the loading screen. 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 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.

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.