datatables.treeview.js

DataTables Tree View Plugin

Usage no npm install needed!

<script type="module">
  import datatablesTreeviewJs from 'https://cdn.skypack.dev/datatables.treeview.js';
</script>

README

datatables.treeview.js

DataTables plugin to display child rows.

Installation

$ npm install datatables.treeview.js --save

Add node_modules/datatables.treeview/datatables.treeview.js to your files.

Usage

$().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;
}

Available options

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

Make changes

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