A simple component to display tree-hierarchically data in table.

Usage no npm install needed!

<script type="module">
  import codehintNgTreeTable from 'https://cdn.skypack.dev/@codehint-ng/tree-table';



A simple component to display tree-hierarchically data in table.


For example: You have some tree data like this:

    interface CustomItem {
        id: number;
        parentId: number;
        data1: string;
        data2: string;
        data3: string;
    myCustomData: CustomItem[] = [...];
  1. Register the @codehint-ng/tree-table in your module:

     import { CngTreeTableModule } from '@codehint-ng/tree-table';
     imports: [
  2. Then define displaying cng-tree-table in your component template:

             {title: 'Column1', template: tmplColumn1},
             {title: 'Column2', template: tmplColumn2},
             {title: 'Column3', template: tmplColumn3}
     <ng-template #tmplColumn1 let-treeTableItem>
         {{ treeTableItem.data.data1 }}
     <ng-template #tmplColumn2 let-treeTableItem>
         {{ treeTableItem.data.data2 }}
     <ng-template #tmplColumn3 let-treeTableItem>
         {{ treeTableItem.data.data3 }}
  3. Prepare your custom tree-hierarchically data for passing it into cng-tree-table component:

    So you need to map it into structure TreeTableItem that cng-tree-table can display, like this:

     function customDataToTreeTableItems(customData: CustomItem[])
             : TreeTableItem<CustomItem>[] {
         const treeTableItems = (customData || []).map((customItem: CustomItem) => {
             const item: TreeTableItem<CustomItem> = {
                 id: customItem.id,
                 parentId: customItem.parentId || 0,
                 data: customItem
             return item;
         return treeTableItems;
  4. Append your treeTableItems into cng-tree-table:

     myCustomData: CustomItem[] = [...];
     @ViewChild(CngTreeTableComponent, {static: true}) cngTreeTable: CngTreeTableComponent<CustomItem>;
     ngOnInit() {
         const treeTableItems = customDataToTreeTableItems(this.myCustomData);