Skip to content
jQuery DataTables plugin for rendering nested DataTables in rows. Inner tables are independent of the data and layout from the outer table.
Branch: master
Clone or download
Latest commit 1308d4c May 27, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist final bundles update Dec 15, 2018
src console.log delete Dec 15, 2018
.gitattributes Set project language javascript Jul 25, 2017
.gitignore gitignore update Apr 19, 2018
Gemfile homepage update Apr 7, 2018
Gemfile.lock homepage update Apr 7, 2018
LICENSE Initial commit Jul 24, 2017
README.html Fix more typos in README. Apr 30, 2019
README.md Fix more typos in README. Apr 30, 2019
_config.yml Set theme jekyll-theme-slate Jul 24, 2017
index.html html page update Dec 15, 2018
index.js Revert "Revert "adding show/hide event listeners"" Mar 4, 2018
package-lock.json 0.1.2 Dec 15, 2018
package.json 0.1.2 Dec 15, 2018
webpack.config.js babel polyfill added Apr 19, 2018

README.md

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

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

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

      var table = new nestedTables.TableHierarchy(
        'example',
        dataInJson,
        settings
      );
      table.initializeTableHierarchy();
    </script>
  </body>
</html>

Example 2

<!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: {
                ' ':
                  '&lt;input type="checkbox" name="exampleCheckbox" value="exampleCheckbox"&gt;',
                img:
                  '&lt;img src=https:\/\/picsum.photos\/100\/100 width=20 \/&gt;',
                like: {
                  value: 47,
                  cellClass: 'likeCell',
                  headerClass: 'likeHeader'
                },
                perf: { value: 130.55555555555554, cellClass: 'perf' },
                date: '2018-08-30'
              },
              kids: []
            },
            {
              data: {
                ' ':
                  '&lt;input type="checkbox" name="exampleCheckbox2" value="exampleCheckbox2"&gt;',
                img:
                  '&lt;img src=https:\/\/picsum.photos\/100\/100 width=20 \/&gt;',
                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>

License

MIT © Andrej Gajdos

You can’t perform that action at this time.