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