jQuery DataTables plugin for rendering nested DataTables in rows. Inner tables are independent of the data and layout from the outer table.
Download the latest version and include nested.datatables.min.js file
$ npm install nested-datatables
var table = new nestedTables.TableHierarchy("example", data, settings);
table.initializeTableHierarchy();Main NestedTables constructor.
Type: String
ID of a DOM element where will be table hierarchy rendered.
Type: Array.<Object>
Data used for building table hierarchy. Each item consists of property data and property kids, which represents array of child elements.
Check examples below how to define json data.
Type: Object
Settings for jQuery DataTables constructor.
Build nested table hierarchy.
Triggered when a child hierarchy is shown
// '#example' is wrapper ID for table hierarchy
var tableEle = document.querySelector("#example .table");
tableEle.addEventListener("onShowChildHierarchy", function (e) {
console.log(e);
});Triggered when a child hierarchy is hidden
// '#example' is wrapper ID for table hierarchy
var tableEle = document.querySelector("#example .table");
tableEle.addEventListener("onHideChildHierarchy", function (e) {
console.log(e);
});<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="./dist/nested.datatables.min.js"></script>
</head>
<body>
<div id="example" class="container"></div>
<script>
var dataInJson = [
{
data: {
name: "b1",
street: "s1",
city: "c1",
departments: 10,
offices: 15,
},
kids: [
{
data: {
department: "HR",
supervisor: "Isidor Bristol",
floor: 1,
employees: 15,
},
kids: [
{
data: {
name: "Klement Nikodemos",
phone: "+938462",
hire_date: "January 1, 2010",
id: 3456,
},
kids: [],
},
{
data: {
name: "Madhava Helmuth",
phone: "+348902",
hire_date: "May 23, 2002",
id: 1234,
},
kids: [],
},
{
data: {
name: "Andria Jesse",
phone: "456123",
hire_date: "October 23, 2011",
id: 9821,
},
kids: [],
},
],
},
{
data: {
department: "development",
supervisor: "Jim Linwood",
floor: 2,
employees: 18,
},
kids: [
{
data: {
name: "Origenes Maxwell",
phone: "345892",
hire_date: "February 1, 2004",
id: 6234,
},
kids: [],
},
],
},
{
data: {
department: "testing",
supervisor: "Zekeriya Seok",
floor: 4,
employees: 11,
},
kids: [],
},
],
},
{
data: {
name: "b2",
street: "s10",
city: "c2",
departments: 3,
offices: 10,
},
kids: [
{
data: {
department: "development",
supervisor: "Gallagher Howie",
floor: 8,
employees: 24,
},
kids: [
{
data: {
name: "Wat Dakota",
},
kids: [],
},
],
},
{
data: {
department: "testing",
supervisor: "Shirley Gayle",
floor: 4,
employees: 11,
},
kids: [],
},
],
},
{
data: {
name: "b3",
street: "s3",
city: "c3",
departments: 2,
offices: 1,
},
kids: [
{
data: {
department: "development",
},
kids: [
{
data: {
name: "Wat Dakota",
},
kids: [],
},
],
},
{},
],
},
{
data: {
name: "b4",
city: "c4",
},
kids: [],
},
];
var settings = {
iDisplayLength: 20,
bLengthChange: false,
bFilter: false,
bSort: false,
bInfo: false,
};
var table = new nestedTables.TableHierarchy(
"example",
dataInJson,
settings
);
table.initializeTableHierarchy();
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="./dist/nested.datatables.min.js"></script>
</head>
<body>
<div id="example" class="container"></div>
<script>
var dataInJson2 = [
{
data: {
date: "2018-08",
},
kids: [
{
data: {
" ": '<input type="checkbox" name="exampleCheckbox" value="exampleCheckbox">',
img: "<img src=https:\/\/picsum.photos\/100\/100 width=20 \/>",
like: {
value: 47,
cellClass: "likeCell",
headerClass: "likeHeader",
},
perf: { value: 130.55555555555554, cellClass: "perf" },
date: "2018-08-30",
},
kids: [],
},
{
data: {
" ": '<input type="checkbox" name="exampleCheckbox2" value="exampleCheckbox2">',
img: "<img src=https:\/\/picsum.photos\/100\/100 width=20 \/>",
like: 24,
perf: 66.66666666666667,
date: "2018-08-31",
},
kids: [],
},
],
},
];
var settings = {
iDisplayLength: 20,
bLengthChange: false,
bFilter: false,
bSort: false,
bInfo: false,
};
var table = new nestedTables.TableHierarchy(
"example",
dataInJson,
settings
);
table.initializeTableHierarchy();
</script>
</body>
</html>MIT © Andrej Gajdos