Skip to content
This repository has been archived by the owner on May 30, 2021. It is now read-only.

Dynamically adding data

Karl edited this page Sep 3, 2017 · 26 revisions

New data of many formats can be added at any time with the insert() and import() methods as well as the rows() and columns() API.


You can quickly add a new row with an array of cell data:

var newRow = ["Cell 1", "Cell 2", "Cell 3", "Cell 4", ...];

datatable.rows().add(newRow);

The add() method also accepts a nested array for adding multiple rows:

var newRows = [
    ["Cell 1", "Cell 2", "Cell 3", "Cell 4", ...],
    ["Cell 1", "Cell 2", "Cell 3", "Cell 4", ...],
    ["Cell 1", "Cell 2", "Cell 3", "Cell 4", ...],
    ["Cell 1", "Cell 2", "Cell 3", "Cell 4", ...],
    ...
];

datatable.rows().add(newRows);

The insert() method can accept both an object or and array of key-value objects depending on your setup:

var newData = {
    headings: ["Heading 1", "Heading 2", "Heading 3", "Heading 4", ...],
    data: [
        ["Cell 1", "Cell 2", "Cell 3", "Cell 4", ...],
        ["Cell 5", "Cell 6", "Cell 7", "Cell 8", ...],
        ["Cell 9", "Cell 10", "Cell 11", "Cell 12", ...],
        ...
    ]
};

// or 

var newData = [
    {
        "Heading 1": "Cell 1",
        "Heading 2": "Cell 2",
        "Heading 3": "Cell 3",
        "Heading 4": "Cell 4",
    },
    {
        "Heading 1": "Cell 5",
        "Heading 2": "Cell 6",
        "Heading 3": "Cell 7",
        "Heading 4": "Cell 8",
    }
];

// Insert the data
datatable.insert(newData);

Note that while the key-value method doesn't require you to order the data correctly to match the table layout, the instance will still check that the given key (heading) is present and will skip the insertion if it isn't, so make sure the keys match the column labels.


JSON strings can easily be imported also:

"[{
    'Heading 1': 'Value 1',
    'Heading 2': 'Value 2',
    'Heading 3': 'Value 3',
    ...
},
{
    'Heading 1': 'Value 4',
    'Heading 2': 'Value 5',
    'Heading 3': 'Value 6',
    ...
}]"
datatable.import({
    type: "json",
    data: // the above JSON string
});

or csv strings:

Name,Ext.,City,Start Date
Hammett Gordon,8101,Wah,1998/06/09
Kyra Moses,3796,Quenast,1998/07/07
Kelly Cameron,4836,Fontaine-Valmont,1999/02/07
Theodore Duran,8971,Dhanbad,1999/04/07
...
datatable.import({
    type: "csv",
    data: // the above CSV string,
    headings: true,
    columnDelimiter: ",",
    lineDelimiter: "\n"
});
Clone this wiki locally