Passing Data

DataGridXL handles two common data formats out of the box: array of objects (a common format for data APIs) and 2D array (array of arrays).

Array of objects ("JSON-style")

When you pass an array of objects, your grid will automatically show object fields as column headers.

// Dog breeds as array of objects ("JSON-style")
const my_data = [{
    "breed": "Kooikerhondje",
    "votes": 210,
    "origin": "The Netherlands"
}, {
    "breed": "Beagle",
    "votes": 235,
    "origin": "Great Britain"
}, {
    "breed": "Dalmatian",
    "votes": 90,
    "origin": "Croatia"
}];

2D Array (Array of arrays)

If you don't need field names (column titles), or if you want to save as much bandwidth as you possibly can, use a 2D array:

// Dog breeds as 2D array
const my_data = [
    ["Kooikerhondje", 210, "The Netherlands"],
    ["Beagle", 235, "Great Britain"],
    ["Dalmatian", 90, "Croatia"]
];

Creating Empty data

In some cases you might want to give the user a fresh start; an empty grid. DataGridXL has a helper function createEmptyData specifically for this purpose:

// create an empty data set of 100 rows * 20 columns
const my_data = DataGridXL.createEmptyData(100, 20);

Passing data to your grid

Whether your data format is a JSON-style array of objects or an array of arrays, assign it to your grid options' data property:

const my_data = [ ... ];
const grid = new DataGridXL("grid", {
    data: my_data
});

If you don't supply the data option at all, the grid will default to an empty 3×3 grid.

Column Options

You might want a different column-order for your grid. Let's say you want your data grid column order to be breed, origin, votes (instead of the default field order of your data objects). Let's also say you want to override the default column header labels.

That's where the columns option comes in.

const my_data = [{
    "breed": "Kooikerhondje",
    "votes": 210,
    "origin": "The Netherlands"
}, {
    ...
}];

const grid = new DataGridXL("grid", {
    data: my_data,
    columns: [{
        title: "Type",
        source: "breed"
    }, {
        title: "Country",
        source: "origin"
    }, {
        title: "Results",
        source: "votes"
    }]
});

You can also use the columns option to assign titles to your unnamed columns (when your data comes in a 2D array). To change the order of columns, use an index (integer) for the column's source property.

const my_data = [
    ["Kooikerhondje", 210, "The Netherlands"],
    ["Beagle", 235, "Great Britain"],
    ["Dalmatian", 90, "Croatia"]
];

const grid = new DataGridXL("grid", {
    data: my_data,
    columns: [{
        title: "Type",
        source: 0
    }, {
        title: "Country",
        source: 2
    }, {
        title: "Results",
        source: 1
    }]
});

Passing data from external sources

In many cases you'll want to display data coming from an external data source. We have seperate articles that describe how to load a CSV file, an SQL database or an Ajax API result (JSON).

Wrapping up

We've shown you how to pass data to your data grid in various ways. data is the most important option when creating your grid, but it's not the only option.

You can set and change row headers, column headers, color settings and more. To really make this grid your own, learn about setting options.