How to Create a Grid in JavaScript – Quick Webix Grid Guide

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.

How to Build a JavaScript DataGrid with Webix Grid in 5 Minutes

Table of contents