DEV Community

Cover image for Building Your First JavaScript DataGrid in 5 Minutes (No Installation Required)
Viktoriya Stanishevskaya
Viktoriya Stanishevskaya

Posted on

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

#javascript #webdev #beginners

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

JavaScript DataGrig result

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>
Enter fullscreen mode Exit fullscreen mode

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 }
    ]
});
Enter fullscreen mode Exit fullscreen mode

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" }
    ]
});
Enter fullscreen mode Exit fullscreen mode

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);
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
    ]
});
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
});
Enter fullscreen mode Exit fullscreen mode

Understanding the Architecture of Building JavaScript Grid (Optional Reading)

Here's what happens behind the scenes:

  1. Browser loads your HTML → Sees the script and CSS links
  2. Downloads Webix Grid files → From the CDN (takes ~100ms)
  3. Reads your configuration → var myGrid = webix.grid({...})
  4. Waits for page load → webix.ready() ensures everything's ready
  5. 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. 🚀

Top comments (0)