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