Simple-datatables supports colspan attributes in table cells, allowing cells to span multiple columns. This works for both tables loaded from HTML and data loaded from JSON/JavaScript.
When initializing from an existing HTML table, colspan attributes are automatically preserved.
| ID | First Name | Last Name | Department | |
|---|---|---|---|---|
| 1 | John Doe | Engineering | john.doe@example.com | |
| 2 | Jane | Smith | Marketing - jane.smith@example.com | |
| 3 | Bob | Johnson | Sales | bob.johnson@example.com |
| Alice Williams (Former Employee) | HR | alice.w@example.com | ||
When loading data programmatically, you can specify colspan by including an attributes object in your cell data.
const data = {
headings: ["ID", "Name", "Department", "Email", "Phone"],
data: [
{
cells: [
"1",
{
data: "Full Name Here",
attributes: { colspan: "2" } // Spans 2 columns
},
"email@example.com",
"555-1234"
]
}
]
};
This example demonstrates more complex colspan scenarios, including cells spanning different numbers of columns.
This example shows colspan used in regular data cells (heading colspan support coming soon).