GridTableJS - Complex Table Layouts, Simplified.
GridTableJS is a lightweight javascript library that helps simplify the creation of web tables with complicated layouts. Users are provided with simple row- and column-based alignment mechanisms, freeing them from worries of misaligned cells across rows.
Absolutely! GridTableJS has been released under the GPL license, and I encourage anyone who wishes to make improvements to do so! Please also remember to release any changes you've made back to the public under the same GPL license!
- An ES6-compliant browser
Download a copy of the gridtable.js
file from the /src folder in this repository, host it where it's required and import it into your project.
Once GridTableJS has been imported into your project, creating a new managed table is simple:
table = gridtablejs.createTable(parentElemId = "parentElementIdHere");
// Individually adding a cell.
table.addCell(
row = 0,
column = 0,
content = "Hello, World!",
customAttributes = {
"rowspan": 3,
"colspan": 5,
"class": "my-class"
},
domTag = "td"
);
/**
* Adding an individual cell without the "customAttributes" or "domTag" properties
* is also possible. In this case, no HTML attributes will be applied to the resultant
* cell, and it is assumed to be a "td" element.
*/
table.addCell(
row = 0,
column = 1,
content = "Hello again, World!"
);
// Adding a group of cells. The "customAttributes" provided will be applied to all cells.
table.addCells(
row = 100,
column = 100,
cellContents = [
"This is the first cell",
"This is the second...",
"...and this is the third."
],
customAttributes = {
"custom-attribute": "custom-value"
},
domTag = "th"
);
/**
* As with individual cell creation, it is also possible to create a group of cells
* without the "customAttributes" or "domTag" properties.
*/
table.addCells(
row = 10,
column = 10,
cellContents = [
"Cell #1",
"Cell #2"
]
);
Once the table has been completely populated, a render call will create and display the table:
table.render()
If an attempt is made to insert a cell into a location that clashes with a previously-inserted cell, a warning will be displayed in the browser console.