JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<h3>Sub-Table by itself: does not inherit style or sorting :)</h3>
<table class='subtable'>
<thead>
<tr>
<td>Project</td>
<td>Role</td>
</tr>
</thead>
<tbody>
<tr>
<td>Alpha</td>
<td>Leader</td>
</tr>
<tr>
<td>Beta</td>
<td>Assistant</td>
</tr>
</tbody>
</table>
<h3>DataTable including Sub-Tables: inherits unwanted styles and sorting behaviour :(</h3>
<table id="dataTable" class="row-border cell-border order-column stripe"></table>
CSS
h3 {
color: steelblue;
}
.subtable {
margin: 0px;
padding: 0px;
border: 0px;
}
.subtable td {
margin: 0px;
padding: 0px;
border: 0px;
}
JavaScript
$(document).ready(function () {
var myData = [{
employee : "Bob Smith",
projects : [{
project : "Alpha",
role : "Leader"
}, {
project : "Beta",
role : "Assistant"
}
]
}, {
employee : "Tom Peterson",
projects : [{
project : "Alpha",
role : "Assistant"
}, {
project : "Beta",
role : "Leader"
}
]
}
];
var myColumns = [
{
title : "Employee",
data : "employee"
},
{
title : "Projects",
data : null,
render : function (data, type, row, meta) {
var subtableHtml = "<table class='subtable'>";
subtableHtml += "<thead><tr><td>Project</td><td>Role</td></tr></thead>";
subtableHtml += "<tbody>"
for (var i = 0; i < data.projects.length; i++) {
subtableHtml += "<tr>";
subtableHtml += "<td>" + data.projects[i].project + "</td>";
subtableHtml += "<td>" + data.projects[i].role + "</td>";
subtableHtml += "</tr>";
};
subtableHtml += "</tbody></table>";
return subtableHtml;
}
}
];
$('#dataTable').dataTable({
searching: false,
paging: false,
data : myData,
columns : myColumns
});
});