# Nested-datatables jQuery DataTables plugin for rendering nested DataTables in rows. Inner tables are independent of the data and layout from the outer table. ### [Demo](https://andrejgajdos.github.io/nested-datatables/) ### [JSFiddle](https://jsfiddle.net/andrej_gajdos/zu11wk2o/37/) ## Installation Download the [latest version](https://github.com/AndrejGajdos/nested-datatables/archive/master.zip) and include [nested.datatables.min.js](https://github.com/AndrejGajdos/nested-datatables/blob/master/dist/nested.datatables.js) file ### NPM ``` $ npm install nested-datatables ``` ### Usage ```js var table = new nestedTables.TableHierarchy("example", data, settings); table.initializeTableHierarchy(); ``` ## Methods ### TableHierarchy(wrapperID, data, settings) Main NestedTables constructor. #### wrapperID Type: `String` ID of a DOM element where will be table hierarchy rendered. #### data Type: `Array.` 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. #### settings Type: `Object` Settings for jQuery DataTables constructor. ### .initializeTableHierarchy() Build nested table hierarchy. ## Events #### onShowChildHierarchy Triggered when a child hierarchy is shown ```js // '#example' is wrapper ID for table hierarchy var tableEle = document.querySelector("#example .table"); tableEle.addEventListener("onShowChildHierarchy", function (e) { console.log(e); }); ``` #### onHideChildHierarchy Triggered when a child hierarchy is hidden ```js // '#example' is wrapper ID for table hierarchy var tableEle = document.querySelector("#example .table"); tableEle.addEventListener("onHideChildHierarchy", function (e) { console.log(e); }); ``` ## Example ```html
``` ## Example 2 ```html
``` ## License MIT © [Andrej Gajdos](http://andrejgajdos.com) [Notion Api Connector](https://notionapiconnector.com/) · [SalesforceToNotion](https://salesforcetonotion.com/)