Skip to content

Quick Start with Webix Grid

This tutorial walks you through creating a basic application with DataGrid. As you will follow the steps, you will learn how to initialize DataGrid, 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 DataGrid.

you can check the full snippet Quick Start with DataGrid

Section titled “A New HTML File and Related Code Files”

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

Required code files are:

  • grid.css
  • grid.js
// A basic html page with the included DataGrid code files
<html>
<head>
  <title>Quick start with DataGrid</title>
  <script src="../codebase/grid.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" href="../codebase/grid.css" type="text/css" charset="utf-8">
</head>
<body>
  <script>
        //here you will place your JavaScript code
  </script>
</body>
</html>

Grid Constructor

Section titled “Grid Constructor”

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

var dtable = webix.grid({});

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 DataGrid configuration
var dtable = webix.grid({
  columns:[
    { id:"title",  header:"Film title",   width:200},
    { id:"year",  header:"Release year", width:80},
    { id:"votes",  header:"Votes",        width:100}
  ]
});

General Settings

Section titled “General Settings”

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

Loading Data

Section titled “Loading Data”

There are various ways to load data into DataGrid (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.grid({
  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 DataGrid.

you can check the full snippet Quick Start with DataGrid

What’s Next

Section titled “What’s Next”

What can we suggest you to do next?