UNPKG

simple-datatables

Version:

A lightweight, dependency-free JavaScript HTML table plugin.

121 lines (99 loc) 2.7 kB
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: ```javascript 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: ```javascript 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: ```javascript 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: ```json "[{ 'Heading 1': 'Value 1', 'Heading 2': 'Value 2', 'Heading 3': 'Value 3', ... }, { 'Heading 1': 'Value 4', 'Heading 2': 'Value 5', 'Heading 3': 'Value 6', ... }]" ``` ```javascript 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: ```text 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 ... ``` ```javascript 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) ```