Sometimes you just need to display a datagrid quickly — without tons of boilerplate code.
Here’s how to do it step-by-step using the Webix Grid, the most functional JavaScript Datagrid in the world.
1. Install Webix Grid
You have two ways to set up Webix Grid:
A) Local files (Quick Start method)
Download or copy webixgrid.js and webixgrid.css from the package, and link them in your HTML page:
<link rel="stylesheet" href="path/to/webixgrid.css">
<script src="path/to/webixgrid.js"></script>
B) NPM (for bundlers)
If you’re working in a modern JS project with Webpack, Vite, etc.:
npm install webix-grid-gpl
Then import the Grid in your JS file and include the CSS in your build process.
2. Define your Grid configuration
A Webix Grid is created from a configuration object.
This object describes columns and data.
const grid = {
columns: [
{ id:"title", header:"Film title", fillspace:true },
{ 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 }
]
};
Breaking it down:
columns → Defines table structure.
id — key name from the data object.
header — text in the column’s header.
fillspace:true — makes the column stretch to fill available space.
width — fixed column width in pixels.
data → Array of objects where each object is one row.
3. Initialize the Grid
Use webix.ready() to make sure the DOM is ready before creating the grid:
webix.ready(() => {
webix.grid(grid);
});
This will render the DataGrid in the page.
4. Full example: HTML without bundler
If you just want to open it in a browser without npm or a build tool:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webix Grid Example</title>
<link rel="stylesheet" href="path/to/webixgrid.css">
<script src="path/to/webixgrid.js"></script>
</head>
<body>
<script>
const grid = {
columns:[
{ id:"title", header:"Film title", fillspace:true },
{ 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 }
]
};
webix.ready(() => {
webix.grid(grid);
});
</script>
</body>
</html>
Replace path/to/ with the actual location of webixgrid.css and webixgrid.js.
5. Quick Cheatsheet: Common Grid Options
| Option | Description |
|---|---|
width |
Fixed column width in pixels. |
fillspace:true |
Stretch column to fill remaining space. |
sort:"int" |
Enable integer sorting for a column ("string", "date" also supported). |
template |
Function or string to format cell content. |
select:"row" |
Enable row selection. |
resizeColumn:true |
Allow resizing columns by dragging. |
autoheight:true |
Adjust height to fit rows. |
autowidth:true |
Adjust width to fit content. |
css:"className" |
Apply custom CSS styling to a column. |
Final Thoughts
With just a few lines of configuration, you can get a fully functional DataGrid up and running in minutes using Webix Grid. Whether you link the files directly in an HTML page or integrate via npm into a modern build setup, the process stays the same: define your columns, feed in your data, and let Webix handle the rest. From here, you can gradually enhance your table with sorting, filtering, editing, and custom styling — without rewriting your core setup. It’s a fast, flexible, and beginner-friendly way to manage tabular data in JavaScript.
This article matches the Quick Start and official JavaScript Datagrid docs. To learn more read Webix Grid API documentation.