Skip to content

Quick Start with Webix Grid

Creating a new Grid

Section titled “Creating a new 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.

Related sample:  Quick Start with DataGrid

Include necessary files

Section titled “Include necessary 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/webixgrid.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" href="../codebase/webixgrid.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.

Related sample:  Quick Start with DataGrid

What’s Next

Section titled “What’s Next”

What can we suggest you to do next?