Skip to content

AndrejGajdos/nested-datatables

Folders and files

NameName
Last commit message
Last commit date

Latest commit

4c9b46c · Mar 1, 2024

History

57 Commits
Dec 15, 2018
Dec 15, 2018
Jul 25, 2017
Apr 19, 2018
Apr 7, 2018
Apr 7, 2018
Jul 24, 2017
Apr 30, 2019
Jun 1, 2023
Jul 24, 2017
Mar 1, 2024
Mar 4, 2018
Dec 15, 2018
Jun 1, 2023
Apr 19, 2018

Repository files navigation

Nested-datatables

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

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

Notion Api Connector · SalesforceToNotion

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3