View on GitHub

Nested-datatables

jQuery DataTables plugin for rendering nested DataTables in rows. Inner tables are independent of the data and layout from the outer table.

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

jsfiddle

Demo with inner html elements and custom table header and cell classes

Installation

Download the latest version and include nested.datatables.min.js file

NPM

$ npm install nested-datatables

Usage

var table = new nestedTables.TableHierarchy("example", data, settigns);
table.initializeTableHierarchy();

Methods

nestedTables.TableHierarchy(wrapperID, data, settings)

Main NestedTables constructor.

wrapperID

Type: String

ID of a DOM element where will be table hierarchy rendered.

data

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 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


    // '#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


    // '#example' is wrapper ID for table hierarchy
    var tableEle = document.querySelector( "#example .table" );
    tableEle.addEventListener("onHideChildHierarchy", function(e) {
        console.log(e);
    });
      

Example

<!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 settigns = {
     			"iDisplayLength": 20,
     			"bLengthChange": false,
     			"bFilter": false,
     			"bSort": false,
     			"bInfo": false
       };

         var table = new lib.NestedTables("example", dataInJson, settigns);
         table.initializeTableHierarchy();

    </script>

  </body>
</html>

Example with inner html elements and custom table header and cell classes


        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":[  

            ]
         }
      ]
   }
];