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
To start, create a new HTML file and include the DataTable code files in it.
Required code files are:
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>
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
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}
]
});
On the previous step, we have defined primary settings for DataTable. For more available configuration, read other articles in this documentation:
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 can we suggest you to do next?