{"id":15107532,"url":"https://github.com/fullengineer/nested-datatables","last_synced_at":"2026-01-18T00:22:50.503Z","repository":{"id":254087868,"uuid":"845447906","full_name":"fullengineer/nested-datatables","owner":"fullengineer","description":"jQuery DataTables plugin for rendering nested DataTables in rows. Inner tables are independent of the data and layout from the outer table.","archived":false,"fork":false,"pushed_at":"2024-08-21T09:23:25.000Z","size":1303,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-18T11:13:47.785Z","etag":null,"topics":["datatables","hierarchy","innersource","javascript","jquery","nested-objects","nested-structures"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fullengineer.png","metadata":{"files":{"readme":"README.html","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-21T09:16:49.000Z","updated_at":"2024-08-21T09:24:39.000Z","dependencies_parsed_at":"2024-08-21T10:48:45.871Z","dependency_job_id":"f4449e58-bc18-4d90-9f94-8ed054515390","html_url":"https://github.com/fullengineer/nested-datatables","commit_stats":null,"previous_names":["fullengineer/nested-datatables"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullengineer%2Fnested-datatables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullengineer%2Fnested-datatables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullengineer%2Fnested-datatables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullengineer%2Fnested-datatables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fullengineer","download_url":"https://codeload.github.com/fullengineer/nested-datatables/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247353679,"owners_count":20925324,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datatables","hierarchy","innersource","javascript","jquery","nested-objects","nested-structures"],"created_at":"2024-09-25T21:25:20.358Z","updated_at":"2026-01-18T00:22:50.462Z","avatar_url":"https://github.com/fullengineer.png","language":"JavaScript","readme":"\u003c!DOCTYPE html\u003e\n\u003chtml xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"en\"\u003e\n\u003chead\u003e\n\t\u003cmeta charset=\"utf-8\"/\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003ch1 id=\"nested-datatables\"\u003eNested-datatables\u003c/h1\u003e\n\n\u003cp\u003ejQuery DataTables plugin for rendering nested DataTables in rows. Inner tables are independent of the data and layout from the outer table.\u003c/p\u003e\n\n\u003ch3 id=\"demohttps:andrejgajdos.github.ionested-datatables\"\u003e\u003ca href=\"https://andrejgajdos.github.io/nested-datatables/\"\u003eDemo\u003c/a\u003e\u003c/h3\u003e\n\n\u003ch3 id=\"jsfiddlehttps:jsfiddle.netandrej_gajdoszu11wk2o37\"\u003e\u003ca href=\"https://jsfiddle.net/andrej_gajdos/zu11wk2o/37/\"\u003eJSFiddle\u003c/a\u003e\u003c/h3\u003e\n\n\u003ch2 id=\"installation\"\u003eInstallation\u003c/h2\u003e\n\n\u003cp\u003eDownload the \u003ca href=\"https://github.com/AndrejGajdos/nested-datatables/archive/master.zip\"\u003elatest version\u003c/a\u003e and include \u003ca href=\"https://github.com/AndrejGajdos/nested-datatables/blob/master/dist/nested.datatables.js\"\u003enested.datatables.min.js\u003c/a\u003e file\u003c/p\u003e\n\n\u003ch3 id=\"npm\"\u003eNPM\u003c/h3\u003e\n\n\u003cpre\u003e\u003ccode\u003e$ npm install nested-datatables\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch3 id=\"usage\"\u003eUsage\u003c/h3\u003e\n\n\u003cpre\u003e\u003ccode class=\"js\"\u003evar table = new nestedTables.TableHierarchy('example', data, settings);\ntable.initializeTableHierarchy();\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2 id=\"methods\"\u003eMethods\u003c/h2\u003e\n\n\u003ch3 id=\"tablehierarchywrapperiddatasettings\"\u003eTableHierarchy(wrapperID, data, settings)\u003c/h3\u003e\n\n\u003cp\u003eMain NestedTables constructor.\u003c/p\u003e\n\n\u003ch4 id=\"wrapperid\"\u003ewrapperID\u003c/h4\u003e\n\n\u003cp\u003eType: \u003ccode\u003eString\u003c/code\u003e\u003c/p\u003e\n\n\u003cp\u003eID of a DOM element where will be table hierarchy rendered.\u003c/p\u003e\n\n\u003ch4 id=\"data\"\u003edata\u003c/h4\u003e\n\n\u003cp\u003eType: \u003ccode\u003eArray.\u0026lt;Object\u0026gt;\u003c/code\u003e\u003c/p\u003e\n\n\u003cp\u003eData used for building table hierarchy. Each item consists of property \u003ccode\u003edata\u003c/code\u003e and property \u003ccode\u003ekids\u003c/code\u003e, which represents array of child elements.\u003c/p\u003e\n\n\u003cp\u003eCheck examples below how to define json data.\u003c/p\u003e\n\n\u003ch4 id=\"settings\"\u003esettings\u003c/h4\u003e\n\n\u003cp\u003eType: \u003ccode\u003eObject\u003c/code\u003e\u003c/p\u003e\n\n\u003cp\u003eSettings for jQuery DataTables constructor.\u003c/p\u003e\n\n\u003ch3 id=\".initializetablehierarchy\"\u003e.initializeTableHierarchy()\u003c/h3\u003e\n\n\u003cp\u003eBuild nested table hierarchy.\u003c/p\u003e\n\n\u003ch2 id=\"events\"\u003eEvents\u003c/h2\u003e\n\n\u003ch4 id=\"onshowchildhierarchy\"\u003eonShowChildHierarchy\u003c/h4\u003e\n\n\u003cp\u003eTriggered when a child hierarchy is shown\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"js\"\u003e// '#example' is wrapper ID for table hierarchy\nvar tableEle = document.querySelector('#example .table');\ntableEle.addEventListener('onShowChildHierarchy', function(e) {\n  console.log(e);\n});\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch4 id=\"onhidechildhierarchy\"\u003eonHideChildHierarchy\u003c/h4\u003e\n\n\u003cp\u003eTriggered when a child hierarchy is hidden\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"js\"\u003e// '#example' is wrapper ID for table hierarchy\nvar tableEle = document.querySelector('#example .table');\ntableEle.addEventListener('onHideChildHierarchy', function(e) {\n  console.log(e);\n});\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2 id=\"example\"\u003eExample\u003c/h2\u003e\n\n\u003cpre\u003e\u003ccode class=\"html\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\n\u0026lt;html\u0026gt;\n  \u0026lt;head\u0026gt;\n    \u0026lt;meta charset=\u0026quot;UTF-8\u0026quot; /\u0026gt;\n\n    \u0026lt;script src=\u0026quot;./dist/nested.datatables.min.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\n  \u0026lt;/head\u0026gt;\n  \u0026lt;body\u0026gt;\n    \u0026lt;div id=\u0026quot;example\u0026quot; class=\u0026quot;container\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\n\n    \u0026lt;script\u0026gt;\n      var dataInJson = [\n        {\n          data: {\n            name: 'b1',\n            street: 's1',\n            city: 'c1',\n            departments: 10,\n            offices: 15\n          },\n          kids: [\n            {\n              data: {\n                department: 'HR',\n                supervisor: 'Isidor Bristol',\n                floor: 1,\n                employees: 15\n              },\n              kids: [\n                {\n                  data: {\n                    name: 'Klement Nikodemos',\n                    phone: '+938462',\n                    hire_date: 'January 1, 2010',\n                    id: 3456\n                  },\n                  kids: []\n                },\n                {\n                  data: {\n                    name: 'Madhava Helmuth',\n                    phone: '+348902',\n                    hire_date: 'May 23, 2002',\n                    id: 1234\n                  },\n                  kids: []\n                },\n                {\n                  data: {\n                    name: 'Andria Jesse',\n                    phone: '456123',\n                    hire_date: 'October 23, 2011',\n                    id: 9821\n                  },\n                  kids: []\n                }\n              ]\n            },\n            {\n              data: {\n                department: 'development',\n                supervisor: 'Jim Linwood',\n                floor: 2,\n                employees: 18\n              },\n              kids: [\n                {\n                  data: {\n                    name: 'Origenes Maxwell',\n                    phone: '345892',\n                    hire_date: 'February 1, 2004',\n                    id: 6234\n                  },\n                  kids: []\n                }\n              ]\n            },\n            {\n              data: {\n                department: 'testing',\n                supervisor: 'Zekeriya Seok',\n                floor: 4,\n                employees: 11\n              },\n              kids: []\n            }\n          ]\n        },\n        {\n          data: {\n            name: 'b2',\n            street: 's10',\n            city: 'c2',\n            departments: 3,\n            offices: 10\n          },\n          kids: [\n            {\n              data: {\n                department: 'development',\n                supervisor: 'Gallagher Howie',\n                floor: 8,\n                employees: 24\n              },\n              kids: [\n                {\n                  data: {\n                    name: 'Wat Dakota'\n                  },\n                  kids: []\n                }\n              ]\n            },\n            {\n              data: {\n                department: 'testing',\n                supervisor: 'Shirley Gayle',\n                floor: 4,\n                employees: 11\n              },\n              kids: []\n            }\n          ]\n        },\n        {\n          data: {\n            name: 'b3',\n            street: 's3',\n            city: 'c3',\n            departments: 2,\n            offices: 1\n          },\n          kids: [\n            {\n              data: {\n                department: 'development'\n              },\n              kids: [\n                {\n                  data: {\n                    name: 'Wat Dakota'\n                  },\n                  kids: []\n                }\n              ]\n            },\n            {}\n          ]\n        },\n\n        {\n          data: {\n            name: 'b4',\n            city: 'c4'\n          },\n          kids: []\n        }\n      ];\n\n      var settings = {\n        iDisplayLength: 20,\n        bLengthChange: false,\n        bFilter: false,\n        bSort: false,\n        bInfo: false\n      };\n\n      var table = new nestedTables.TableHierarchy(\n        'example',\n        dataInJson,\n        settings\n      );\n      table.initializeTableHierarchy();\n    \u0026lt;/script\u0026gt;\n  \u0026lt;/body\u0026gt;\n\u0026lt;/html\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2 id=\"example2\"\u003eExample 2\u003c/h2\u003e\n\n\u003cpre\u003e\u003ccode class=\"html\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\n\u0026lt;html\u0026gt;\n  \u0026lt;head\u0026gt;\n    \u0026lt;meta charset=\u0026quot;UTF-8\u0026quot; /\u0026gt;\n\n    \u0026lt;script src=\u0026quot;./dist/nested.datatables.min.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\n  \u0026lt;/head\u0026gt;\n  \u0026lt;body\u0026gt;\n    \u0026lt;div id=\u0026quot;example\u0026quot; class=\u0026quot;container\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\n\n    \u0026lt;script\u0026gt;\n      var dataInJson2 = [\n        {\n          data: {\n            date: '2018-08'\n          },\n          kids: [\n            {\n              data: {\n                ' ':\n                  '\u0026amp;lt;input type=\u0026quot;checkbox\u0026quot; name=\u0026quot;exampleCheckbox\u0026quot; value=\u0026quot;exampleCheckbox\u0026quot;\u0026amp;gt;',\n                img:\n                  '\u0026amp;lt;img src=https:\\/\\/picsum.photos\\/100\\/100 width=20 \\/\u0026amp;gt;',\n                like: {\n                  value: 47,\n                  cellClass: 'likeCell',\n                  headerClass: 'likeHeader'\n                },\n                perf: { value: 130.55555555555554, cellClass: 'perf' },\n                date: '2018-08-30'\n              },\n              kids: []\n            },\n            {\n              data: {\n                ' ':\n                  '\u0026amp;lt;input type=\u0026quot;checkbox\u0026quot; name=\u0026quot;exampleCheckbox2\u0026quot; value=\u0026quot;exampleCheckbox2\u0026quot;\u0026amp;gt;',\n                img:\n                  '\u0026amp;lt;img src=https:\\/\\/picsum.photos\\/100\\/100 width=20 \\/\u0026amp;gt;',\n                like: 24,\n                perf: 66.66666666666667,\n                date: '2018-08-31'\n              },\n              kids: []\n            }\n          ]\n        }\n      ];\n\n      var settings = {\n        iDisplayLength: 20,\n        bLengthChange: false,\n        bFilter: false,\n        bSort: false,\n        bInfo: false\n      };\n\n      var table = new nestedTables.TableHierarchy(\n        'example',\n        dataInJson,\n        settings\n      );\n      table.initializeTableHierarchy();\n    \u0026lt;/script\u0026gt;\n  \u0026lt;/body\u0026gt;\n\u0026lt;/html\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2 id=\"license\"\u003eLicense\u003c/h2\u003e\n\n\u003cp\u003eMIT © \u003ca href=\"http://andrejgajdos.com\"\u003eAndrej Gajdos\u003c/a\u003e\u003c/p\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullengineer%2Fnested-datatables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffullengineer%2Fnested-datatables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullengineer%2Fnested-datatables/lists"}