Simple-datatables supports rowspan attributes in table cells, allowing cells to span multiple rows. This works for both tables loaded from HTML and data loaded from JSON/JavaScript.
When initializing from an existing HTML table, rowspan attributes are automatically preserved.
| Department | Team | Employee | Position | |
|---|---|---|---|---|
| Engineering | Frontend | Alice Johnson | Lead Developer | alice@example.com |
| Bob Smith | Developer | bob@example.com | ||
| Backend | Carol Williams | Senior Developer | carol@example.com | |
| Marketing | Social Media | David Brown | Social Media Manager | david@example.com |
| Content | Eve Davis | Content Writer | eve@example.com |
When loading data programmatically, you can specify rowspan by including an attributes object in your cell data.
const data = {
headings: ["Department", "Employee", "Position", "Email", "Phone"],
data: [
{
cells: [
{
data: "Engineering",
attributes: { rowspan: "2" } // Spans 2 rows
},
"John Doe",
"Senior Developer",
"john@example.com",
"555-1234"
]
},
[
"Jane Smith",
"Developer",
"jane@example.com",
"555-5678"
]
]
};
This example demonstrates more complex rowspan scenarios, including nested groupings.
Cells can have both colspan and rowspan attributes simultaneously.