DataTables plugin to display child rows.
$ npm install datatables.treeview.js --save
Add node_modules/datatables.treeview/datatables.treeview.js
to your files.
$().dataTables({
treeView: {
hasChildren: row => row.children.length > 0,
getChildren: (row, callback) => callback(row.children),
},
/* ... */
});
With custom options:
$().dataTables({
treeView: {
loadingIcon: '<svg>...</svg>',
},
/* ... */
});
Each child row will be prepended with a spacer that you have to style.
For instance:
.dt-tree-spacer {
margin-left: 12px;
}
-
spacer
appended at the start of each child row -
expandIcon
default + icon -
collapseIcon
if null, will not change the toggle element, but simply add a CSS class to it -
loadingIcon
shows until data comes back
You can change the default options by altering $.fn.dataTable.TreeView.defaultOption
.
DO NOT make any change to datatables.treeview.js
directly. It is compiled from src/
.
Use the following commands:
-
gulp build
compiles all source files (once) -
gulp demo
runs the demo server and compiles for any change -
gulp lint
checks for linting -
npm test
runs tests once -
npm run test:watch
run tests + karma server