Getting Started

NOTE DataGridXL requires a commercial license.

Import the DataGridXL file

DataGridXL is available in two JavaScript flavours: as an ES6 module and as a <script> tag.

If you're using ES6 modules, import DataGridXL from the path where it's located:

import DataGridXL from "./datagridxl2.esm.js";

If you're using <script> tags instead, place the DataGridXL script tag between the <head> tags or just before the closing </body> tag, like in the example below:

html

<body>
    ...
    <script src="/scripts/datagridxl2.js"></script>
</body>

Create an empty container div

Next step: place an empty <div> somewhere inside what ends up in the <body> of your web page. This empty div will be the container for your data grid. Make sure to give it an id attribute. In this example, we use "grid" as the container id.

html

<body>
    ...
    <div id="grid"></div>
    ...
</body>

Your DataGridXL container needs a width & height. The width & height will act as your grid's viewport. If your div lacks dimensions (or if it's displayed as inline), your DataGridXL instance will not be visible.

html

<div id="grid" style="width:100%;height:400px;"></div>

You don't have to write inline styles of course. Instead, you can define your width & height in a <style> block or in an external CSS file:

css

#grid {
    width: 100%;
    height: 400px;
}

You can use any CSS unit. The grid will automatically resize along with your containing div.

Building the Data Grid

You're now ready to display your first data grid! The DataGridXL constructor takes two parameters: the id of your container div and an options object.

const options = {
    data: [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9]
    ]
};

const grid = new DataGridXL("grid", options);

The options object is entirely optional. If you don't pass any data, the grid will default to an empty 3×3 data grid.

You can supply your data as a 2D array or as an array of objects (JSON style).

Final Code

The final code for a working demo (that uses <script> tags) looks like this:

html

<!DOCTYPE html>
<html>
<head>
    <title>My Web App</title>
</head>
<body>
    <div id="grid" style="width:100%;height:400px;"></div>
    <script src="/scripts/DataGridXL3.script.js"></script>
    <script>
        const options = {
            data: [
                [1, 2, 3],
                [4, 5, 6],
                [7, 8, 9]
            ]
        };
        const grid = new DataGridXL("grid", options);
    </script>
</body>
</html>

Result

That's all the code you need! Open the file in your browser and this is what you should see:

Result

Try editing the values. Use your keyboard, your mouse. See how it works on touch screens. If you know Microsoft Excel or Google Spreadsheets it should feel familiar & comfortable.

This is just a little 3×3 data table. DataGridXL can handle thousands of rows and columns. You can customize your grid's theme, add custom context menu items, you can hook up your grid so it automatically updates a line chart, etc, etc.

Getting Started

Import the DataGridXL file

Create an empty container div

Building the Data Grid

Final Code

Result

Further Reading