Creating Basic Application

This tutorial walks you through creating a basic application with DataTable. As you will follow the steps, you will learn how to initialize DataTable, customize and configure its appearance and load data to it. The final code of the tutorial can be used as the start point for applications using DataTable.

You can also try our new Webix tutorials.

Related sample:  Quick Start with DataTable

A new HTML file and related code files

To start, create a new HTML file and include the DataTable code files in it.

Required code files are:

  • webix.css
  • webix.js

A basic html page with the included DataTable code files

<html>
<head>
    <title>Quick start with DataTable</title>
  <script src="../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" href="../codebase/webix.css" type="text/css" charset="utf-8">
</head>
<body>
    <script>
        //here you will place your JavaScript code
</script> </body> </html>

Including Webix files via Package Managers

OR, as an alternative to downloading, you can install Webix library via such package managers as NuGet and Bower.

Installing Webix requires by means of these tools requires executing just a line of code inside them (you don't need to download anything):

NuGet

nuget install Webix
 
//If you use Microsoft Visual Studio, execute this from Package Manager Console
install-package Webix

Bower

bower install webix

Object constructor

To create a new DataTable instance, you need to use the next constructor:

var dtable = webix.ui({ view:"datatable" });

Next, let's set up table columns - the array of objects, each of which specifies an individual column. Each object must at least has the id attribute set.

It addition to id, we will specify 2 often used column attributes: header (the header of a column) and width (the width of a column).

Basic DataTable configuration

var dtable = webix.ui({
    view:"datatable",
    columns:[
        { id:"title",   header:"Film title",   width:200},
        { id:"year",    header:"Release year", width:80},
        { id:"votes",   header:"Votes",        width:100}
    ]
});

General settings

On the previous step, we have defined primary settings for DataTable. For more available configuration, read other articles in this documentation:

Loading data

There are various ways to load data into DataTable (read about them in chapter Data loading).
We will use the easiest of the ways and specify data directly in the constructor with the help of the data parameter:

var dtable = webix.ui({
    view:"datatable",
    columns:[
        { id:"title",   header:"Film title",    width:200},
        { id:"year",    header:"Release year" , width:80},
        { id:"votes",   header:"Votes",         width:100}
    ],
    data:[
        { id:1, title:"The Shawshank Redemption", year:1994, votes:678790},
        { id:2, title:"The Godfather",            year:1972, votes:511495}
    ]
});

Congratulations! Now you can run your app with DataTable.

Related sample:  Quick Start with DataTable

What's next

What can we suggest you to do next?

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