simple-datatables

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

---

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

let 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:

let 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:

let 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

let 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',
    ...
}]"

import {
  DataTable,
  convertJSON
} from "simple-datatables"
const dataTable = new DataTable("#myTable")
const convertedData = convertJSON({
  data: // the above JSON string
})
dataTable.insert(convertedData)

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
...

import {
  DataTable,
  convertCSV
} from "simple-datatables"
const dataTable = new DataTable("#myTable")
const convertedData = convertJSON({
  data: // the above CSV string,
  headings: true,
  columnDelimiter: ",",
  lineDelimiter: "\n"
})
dataTable.insert(convertedData)

This site is open source. Improve this page.