Building Your First JavaScript DataGrid in 5 Minutes (No Installation Required)

Viktoriya Stanishevskaya — Thu, 30 Oct 2025 13:49:36 +0000

Today, we're building an interactive JavaScript DataGrid (or datatable) that looks professional and works smoothly—without installing anything on your computer.

What You'll Build: A sortable, scrollable table showing world population data
Time Required: 5-10 minutes
Prerequisites: None. Seriously. If you can copy and paste, you're ready.

Why This Matters

Think of a DataGrid as a supercharged HTML table. Regular HTML tables are static and boring. A DataGrid lets users:

Sort columns by clicking headers
Scroll through thousands of rows smoothly
Edit data directly in the browser
Export information

Companies use DataGrids everywhere: dashboards, admin panels, reports. Learning this skill opens doors.

The Magic Ingredient: CDN Links

Here's the secret that makes this tutorial installation-free: CDN (Content Delivery Network) links.
Think of a CDN like Netflix for code libraries. Instead of downloading and storing files on your computer, you simply reference them from a reliable server. When someone visits your webpage, their browser fetches the necessary files automatically.
We'll use Webix Grid GPL. It's a free, open-source DataGrid library that's been battle-tested since 2013.

Step 1: Create Your HTML File

Open any text editor (Notepad, TextEdit, VS Code—doesn't matter) and create a file called my-first-grid.html.
Paste this starter code:

<!DOCTYPE html>
<html>
<head>
    <title>My First DataGrid</title>
    <script src="https://cdn.jsdelivr.net/npm/webix-grid-gpl@11.2.0/grid.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/webix-grid-gpl@11.2.0/grid.min.css">
</head>
<body>
    <script>
        // Your JavaScript code goes here
    </script>
</body>
</html>

What's happening here?

The <script> tag loads the DataGrid functionality from a CDN
The <link> tag loads the styling (colors, borders, fonts)
All our code will go inside the <script> tag in the body
No divs, no containers—Webix Grid handles everything automatically

Step 2: Define Your Grid Configuration

Inside the <script> tag, add this code:

var myGrid = webix.grid({
    columns: [
        { id: "country", header: "Country", fillspace: true },
        { id: "population", header: "Population (millions)", width: 180 },
        { id: "capital", header: "Capital City", width: 150 }
    ]
});

Breaking it down (in plain English):

var myGrid = webix.grid({...}) — Create a new DataGrid and store it in a variable
columns: [...] — Define three columns:

country: Takes up all remaining space (fillspace: true)
population: Fixed width of 180 pixels
capital: Fixed width of 150 pixels

The id property is crucial—it tells the grid which data field to display in each column. The header property is what users see at the top of each column.

Step 3: Add Your Data

Now let's populate the grid with actual information. Update your code to include the data property:

var myGrid = webix.grid({
    columns: [
        { id: "country", header: "Country", fillspace: true },
        { id: "population", header: "Population (millions)", width: 180 },
        { id: "capital", header: "Capital City", width: 150 }
    ],
    data: [
        { country: "China", population: 1411, capital: "Beijing" },
        { country: "India", population: 1393, capital: "New Delhi" },
        { country: "United States", population: 331, capital: "Washington, D.C." },
        { country: "Indonesia", population: 273, capital: "Jakarta" },
        { country: "Pakistan", population: 225, capital: "Islamabad" },
        { country: "Brazil", population: 213, capital: "Brasília" },
        { country: "Nigeria", population: 211, capital: "Abuja" },
        { country: "Bangladesh", population: 166, capital: "Dhaka" }
    ]
});

What's happening:

data: [...] — An array of objects (think of it as a list of records)
Each object represents one row in your table
The property names (country, population, capital) must match the column id values exactly

Step 4: Initialize the JS Grid

Here's the final crucial step. Add this code right after your grid configuration:

webix.ready(() => {
    webix.grid(myGrid);
});

What does this do?

webix.ready() waits until the page is fully loaded, then
webix.grid(myGrid) renders your grid configuration on the screen.
This two-step process (configure, then render) gives you flexibility to modify the grid before displaying it.

Step 5: Test It!

Save your file and open it in a web browser. You should see a professional-looking table with:

Clean styling
Smooth scrolling
Automatic sizing

Congratulations! You just built a functional JavaScript DataGrid without installing a single package.

The Complete Working Code

Here's everything together in one file you can copy and use immediately:

<!DOCTYPE html>
<html>
<head>
    <title>My First DataGrid</title>
    <script src="https://cdn.jsdelivr.net/npm/webix-grid-gpl@11.2.0/grid.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/webix-grid-gpl@11.2.0/grid.min.css">
</head>
<body>
    <script>
        var myGrid = webix.grid({
            columns: [
                { id: "country", header: "Country", fillspace: true },
                { id: "population", header: "Population (millions)", width: 180 },
                { id: "capital", header: "Capital City", width: 150 }
            ],
            data: [
                { country: "China", population: 1411, capital: "Beijing" },
                { country: "India", population: 1393, capital: "New Delhi" },
                { country: "United States", population: 331, capital: "Washington, D.C." },
                { country: "Indonesia", population: 273, capital: "Jakarta" },
                { country: "Pakistan", population: 225, capital: "Islamabad" },
                { country: "Brazil", population: 213, capital: "Brasília" },
                { country: "Nigeria", population: 211, capital: "Abuja" },
                { country: "Bangladesh", population: 166, capital: "Dhaka" }
            ]
        });

        webix.ready(() => {
            webix.grid(myGrid);
        });
    </script>
</body>
</html>

JS Grid Live Demo Example

Level Up: Adding Click-to-Sort

Want users to sort columns by clicking headers? Add the sort property to each column:

var myGrid = webix.grid({
    columns: [
        { id: "country", header: "Country", fillspace: true, sort: "string" },
        { id: "population", header: "Population (millions)", width: 180, sort: "int" },
        { id: "capital", header: "Capital City", width: 150, sort: "string" }
    ],
    data: [
        // ... your data
    ]
});

Now click any column header to sort. The grid automatically knows:

"string" — Alphabetical sorting (A to Z)
"int" — Numerical sorting (low to high)

Click again to reverse the order. It just works.

Level Up: Number Formatting

Let's make those population numbers easier to read with thousand separators:

{ 
    id: "population", 
    header: "Population (millions)", 
    width: 180, 
    sort: "int",
    format: webix.i18n.numberFormat
}

Now instead of 1411, users see 1,411. Much cleaner.

Level Up: Adding More Visual Polish

Want to make your JavaScript grid fill the entire page? Add this simple CSS:

<style>
    body { 
        margin: 0; 
        padding: 0; 
    }
</style>

Put this in your <head> section before the grid CSS link. Now your grid stretches edge-to-edge, creating a full-screen data viewer.

Common Mistakes When Creating JavaScript Grid (And How to Fix Them)

Nothing Shows Up

Check: Did you include both the .js and .css files? Did you call webix.grid(myGrid) inside webix.ready()? Both are essential.

Data Not Appearing

Check: Do your column id values match the property names in your data objects exactly? JavaScript is case-sensitive: country ≠ Country.

Grid Looks Broken

Check: Did you load the CSS file? The <link> tag is what makes the grid look professional. Without it, you'll see unstyled data.

Script Error in Console

Check: Are you using an arrow function () => in webix.ready()? Some older browsers don't support it. Use function() instead:

webix.ready(function() {
    webix.grid(myGrid);
});

Understanding the Architecture of Building JavaScript Grid (Optional Reading)

Here's what happens behind the scenes:

Browser loads your HTML → Sees the script and CSS links
Downloads Webix Grid files → From the CDN (takes ~100ms)
Reads your configuration → var myGrid = webix.grid({...})
Waits for page load → webix.ready() ensures everything's ready
Renders the grid → webix.grid(myGrid) draws it on screen

This two-phase approach (configure, then render) is powerful. You can modify myGrid before rendering it, load data from APIs, or create multiple grids with different configurations.

What You Can Do Next

This is just the beginning. Webix Grid supports:

Editing: Let users modify data directly in cells
Filtering: Add search boxes above columns
Pagination: Handle thousands of rows efficiently
Selection: Click to highlight rows
Custom styling: Conditional formatting based on values
Excel export: Download grid data as spreadsheets
Loading from APIs: Connect to real backends
Validation: Prevent invalid data entry
Subrows: Show nested data structures

The GPL version (what we used) includes most features for free. There's also a PRO version with advanced capabilities for commercial projects.

Real-World Use Cases

Here's where developers use DataGrids:

E-commerce admin panels — Manage products, orders, customers
Analytics dashboards — Display metrics and KPIs
Data entry forms — Edit database records directly
Report viewers — Show query results from databases
Inventory systems — Track stock levels in real-time
CRM tools — Manage customer relationships and sales Once you master the basics, you can build any of these.

Why Webix Grid?

After working with multiple DataGrid libraries, here's why I recommend Webix Grid for beginners:
✅ No build tools required — No npm, webpack, or terminal commands
✅ Works immediately — Copy, paste, refresh. That's it.
✅ Minimal code — Just three parts: config, data, render
✅ Free GPL version — Full-featured for learning and open-source projects
✅ Clear API — Readable, predictable method names
✅ Mature library — 10+ years of development, proven in production
✅ Great documentation — Examples for every feature

Your Learning Path

Week 1: Build the basic grid from this tutorial
Week 2: Add sorting and filtering
Week 3: Connect to a real API
Week 4: Add editing and validation
Week 5: Build something real for yourself
By week 5, you'll have a production-ready skill that companies pay for.

Next Steps

Save this tutorial — You'll reference it often
Modify the data — Use something you care about (movies, games, recipes)
Add one new feature — Try sorting or number formatting
Share your grid — Show someone what you built
Explore the docs — Visit Webix Grid documentation for advanced features

Remember: Every expert was once a beginner staring at an empty text editor. The difference? They started typing.

Questions? The best way to learn is by doing. Open that text editor and start experimenting. Break things. Fix them. That's how developers actually learn.
You've got this. Now go build something cool. 🚀

DEV Community: Viktoriya Stanishevskaya