External Configuration

You can load not only data but also DataTable configuration from an external file or the server side.

Configuration from a JSON file

To load both data and configuration from JSON file, initialize DataTable as shown below:

webix.ui({
    view:"datatable",
    url:"data/data-config.json" //path to a json file. See the file contents below
});

The data-config.json file should have the following contents:

'data-config.json' file

{
    "config":{
        "columns":[
            { "id":"title", "header":"Film title", "width":200},
            { "id":"year", "header":"Released", "width":80},
            { "id":"votes", "header":"Votes", "width":100}
        ],
        "height":100,
        "autowidth":true
    },
    "data":[
        {"id":"1", "title":"The Shawshank Redemption", "year":"1994", "votes":"678790"},
        {"id":"2", "title":"The Godfather", "year":"1972", "votes":"511495"}
    ]
}

Configuration from an XML file

To load both data and configuration from XML file, initialize DataTable as shown below:

webix.ui({
    view:"datatable",
    url:"data/data-config.xml"// path to an XML file. See the file content below
});

The specified data-config.xml should have the following structure:

'data-config.xml' file

<?xml version='1.0' encoding='utf-8' ?>
<data>
    <config>
        <columns>
            <column ID="title"   header="Film title"  width="200"></column>
            <column ID="year"     header="Released"    width="80"></column>
            <column ID="votes"    header="Votes"       width="100"></column>
        </columns>
        <height>100</height>
        <autowidth>true</autowidth>
    </config>
    <item id='1' title='The Shawshank Redemption' year='1994' votes='678790'></item>
    <item id='2' title='The Godfather'            year='1972' votes='511495'></item>
</data>

Related sample:  Loading Configuration from External URL

Configuring from the server side

To load DataTable configuration from the server side, initialize DataTable as shown below:

webix.ajax("data/config.json").then(function(data){
    var config = data.json();
    webix.ui({
        view:"datatable",
        columns:config,
        data: [
            { id:1, title:"The Shawshank Redemption", year:1994,  votes:678790},
            { id:2, title:"The Godfather",            year:1972,  votes:511495}
        ]
    });
});

The specified config.json file should have the following structure:

'config.json' file

[
    { "id":"title", "header":"Film title",  "width":200},
    { "id":"year",  "header":"Released",   "width":80},
    { "id":"votes", "header":"Votes",       "width":100}
]

Configuring and populating from the server side

To load both data and configuration from the server side, initialize DataTable as shown below:

webix.ajax("data/data-config.json").then(function(data){
    var obj = data.json();
    webix.ui({
        view:"datatable",
        columns:obj.config,
        data:obj.rows
    });
});

The specified data-config.json file should have the following structure:

'data-config.json' file

{
    "config":[
        { "id":"title", "header":"Film title", "width":200},
        { "id":"year", "header":"Released", "width":80},
        { "id":"votes", "header":"Votes", "width":100}
    ],
    "rows":[
        {"id":"1", "title":"The Shawshank Redemption", "year":"1994", "votes":"678790"},
        {"id":"2", "title":"The Godfather", "year":"1972", "votes":"511495"}
    ]
}

Related sample:  Loading Configuration from Server Side