README.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta charset="utf-8"/>
</head>
<body>

<h1 id="nested-datatables">Nested-datatables</h1>

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

<h3 id="demohttps:andrejgajdos.github.ionested-datatables"><a href="https://andrejgajdos.github.io/nested-datatables/">Demo</a></h3>

<h3 id="jsfiddlehttps:jsfiddle.netandrej_gajdoszu11wk2o37"><a href="https://jsfiddle.net/andrej_gajdos/zu11wk2o/37/">JSFiddle</a></h3>

<h2 id="installation">Installation</h2>

<p>Download the <a href="https://github.com/AndrejGajdos/nested-datatables/archive/master.zip">latest version</a> and include <a href="https://github.com/AndrejGajdos/nested-datatables/blob/master/dist/nested.datatables.js">nested.datatables.min.js</a> file</p>

<h3 id="npm">NPM</h3>

<pre><code>$ npm install nested-datatables
</code></pre>

<h3 id="usage">Usage</h3>

<pre><code class="js">var table = new nestedTables.TableHierarchy('example', data, settings);
table.initializeTableHierarchy();
</code></pre>

<h2 id="methods">Methods</h2>

<h3 id="tablehierarchywrapperiddatasettings">TableHierarchy(wrapperID, data, settings)</h3>

<p>Main NestedTables constructor.</p>

<h4 id="wrapperid">wrapperID</h4>

<p>Type: <code>String</code></p>

<p>ID of a DOM element where will be table hierarchy rendered.</p>

<h4 id="data">data</h4>

<p>Type: <code>Array.&lt;Object&gt;</code></p>

<p>Data used for building table hierarchy. Each item consists of property <code>data</code> and property <code>kids</code>, which represents array of child elements.</p>

<p>Check examples below how to define json data.</p>

<h4 id="settings">settings</h4>

<p>Type: <code>Object</code></p>

<p>Settings for jQuery DataTables constructor.</p>

<h3 id=".initializetablehierarchy">.initializeTableHierarchy()</h3>

<p>Build nested table hierarchy.</p>

<h2 id="events">Events</h2>

<h4 id="onshowchildhierarchy">onShowChildHierarchy</h4>

<p>Triggered when a child hierarchy is shown</p>

<pre><code class="js">// '#example' is wrapper ID for table hierarchy
var tableEle = document.querySelector('#example .table');
tableEle.addEventListener('onShowChildHierarchy', function(e) {
  console.log(e);
});
</code></pre>

<h4 id="onhidechildhierarchy">onHideChildHierarchy</h4>

<p>Triggered when a child hierarchy is hidden</p>

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

<h2 id="example">Example</h2>

<pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;

    &lt;script src=&quot;./dist/nested.datatables.min.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;example&quot; class=&quot;container&quot;&gt;&lt;/div&gt;

    &lt;script&gt;
      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();
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<h2 id="example2">Example 2</h2>

<pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;

    &lt;script src=&quot;./dist/nested.datatables.min.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;example&quot; class=&quot;container&quot;&gt;&lt;/div&gt;

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

<h2 id="license">License</h2>

<p>MIT © <a href="http://andrejgajdos.com">Andrej Gajdos</a></p>

</body>
</html>