With Webix Grid, a standalone JavaScript DataGrid component, you can build an interactive, fully functional JavaScript grid in minutes. The material here follows the official Webix JS Grid quick-start flow and uses real-world data (land regions of countries).
Backed by a dedicated team of developers, Webix Grid has been evolving since 2013. It is available in two versions: a free, open-source GPL edition and a commercial version. This tutorial series focuses on the free version, guiding you through its core features for building interactive JavaScript data grids.
Difficulty: ★☆☆ Beginner
Estimated time: ~10 minutes
Step 1. Setting Up the HTML Page with JavaScript DataGrid Files
Start by creating a simple HTML webpage and adding the required DataGrid code files:
- grid.css
- grid.js
<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>
Tip: You can download the free Webix Grid GPL version by running the npm install webix-grid-gpl command or fill the form and download Webix Grid PRO free trial.
Step 2. Initializing the DataGrid and Defining Columns
To create a new DataGrid, start with the webix.grid() constructor inside the <script> tag:
The next step is to configure the columns. Columns are defined as an array of objects, where each object represents a single column. At minimum, every column object must include the id property, which maps the column to a specific field in the dataset.
Along with id, two other frequently used properties are:
- header – the label shown at the top of the column,
- width or fillspace – which control how wide the column is.
Here’s an example of a grid with two columns:
columns: [
{ id: "country", header: "Country", fillspace: true },
{ id: "area", header: "Land Area (km²)", width: 150 }
]
});
This setup creates a grid with:
- a Country column that stretches to fill the available space,
- a Land Area (km²) column with a fixed width of 150 pixels.
Step 3. Loading Data into a JavaScript Grid
Once the columns are defined, the next step is to populate the grid with data.
You can load data into JS datagrid in various formats, such as: JSON, XML, JsArray, CSV or define a custom data format. The most straightforward approach is to specify data directly in the constructor using the data parameter:
columns: [
{ id: "country", header: "Country", fillspace: true },
{ id: "area", header: "Land Area (km²)", width: 150 }
],
data: [
{ country: "Russia", area: 17098242 },
{ country: "Canada", area: 9984670 },
{ country: "United States",area: 9833517 },
{ country: "China", area: 9596961 },
{ country: "Brazil", area: 8515767 },
{ country: "Australia", area: 7692024 },
{ country: "India", area: 3287263 }
]
});
Well done! You’ve just built your first JavaScript data grid with Webix Grid, which automatically renders rows and headers without extra boilerplate. Check out the live demo in the snippet tool: https://snippet.webix.com/df90u3ab
Things to try: Make your learning more hands-on, explore how Webix DataGrid allows sorting data rows on the client side in 2 different ways.
F.A.Q.
Q: What is Webix Grid?
A standalone, lightweight JavaScript DataGrid component designed for quick setup, fast data handling, and essential features like advanced sorting, filtering, editing, in-built charts, subrows and subviews and more.
Q: Why use webix.grid() instead of webix.ui()?
Using webix.grid() directly aligns with the standalone-grid quick-start, skipping the full Webix UI library. webix.ui() is the way to init Webix UI. Choosing Webix Grid means making your app more lightweight and your decision more .
Q: Can Webix Grid handle large datasets?
Yes. Webix Grid is optimized for working with thousands of rows and columns. It supports dynamic loading, virtual scrolling, and seamless backend integration. A unique feature developed by the Webix team is lazy rendering not only for rows but also for columns. Read about Webix best practices for optimizing JS DataGrid Performance in the JS Datagrids performance comparison article.
Q: What Sets Webix Grid Apart from Other JavaScript Datagrids?
High performance, API flexibility, and ease of use are all combined in Webix Grid. In contrast to numerous other JavaScript grids, it provides:
- Smooth learning curve: even novices may quickly construct a functional grid.
- Rich functionality in a GPL edition, with the majority of features, including data validation and Sparklines, being freely accessible.
- Easy initialisation using an easy-to-use API and a one-line constructor.
Consistent UI/UX across devices and browsers.
Full Example (All in One)
<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>
var jsgrid = webix.grid({
columns: [
{ id: "country", header: "Country", fillspace: true },
{ id: "area", header: "Land Area (km²)", width: 150 }
],
data: [
{ country: "Russia", area: 17098242 },
{ country: "Canada", area: 9984670 },
{ country: "United States",area: 9833517 },
{ country: "China", area: 9596961 },
{ country: "Brazil", area: 8515767 },
{ country: "Australia", area: 7692024 },
{ country: "India", area: 3287263 }
]
});
webix.ready(() => {
webix.grid(jsgrid);
});
</script>
</body>
</html>
