Angular Material TreeTable Component

A simple, customisable, and easy to use Angular Material TreeTable component with Custom Template injection.

This is based on https://www.npmjs.com/package/ng-material-treetable

Table of Contents

1. Installation
2. Data Format
3. Options
4. Events

Installation

Simply install the package through npm

npm i c-treetable --save

Make sure you have the angular material packages installed

npm i @angular/material @angular/cdk @angular/animations --save

import the main module

import { TreetableModule } from 'c-treetable';

@NgModule({
    ...
  imports: [
    ...
    TreetableModule
  ],
  ...
})
export class AppModule { }

and use the component in your template

<c-treetable [tree]="yourTreeDataStructure"></c-treetable>

Finally, make sure you import the required material icons font in your styles.css

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');

Data Format

The tree object that's rendered by the component can either be a Node<T> or a Node<T>[] where Node<T> is the following interface

import { Node } from 'c-treetable';

interface Node<T> {
  value: T;
  children: Node<T>[];
}

Here's a simple example.

{
  value: {
    name: 'Reports',
    owner: 'Eric',
    protected: true,
    backup: true
  },
  children: [
    {
      value: {
        name: 'Charts',
        owner: 'Stephanie',
        protected: false,
        backup: true
      },
      children: []
    },
    {
      value: {
        name: 'Sales',
        owner: 'Virginia',
        protected: false,
        backup: true
      },
      children: []
    },
    {
      value: {
        name: 'US',
        owner: 'Alison',
        protected: true,
        backup: false
      },
      children: [
        {
          value: {
            name: 'California',
            owner: 'Claire',
            protected: false,
            backup: false
          },
          children: []
        },
        {
          value: {
            name: 'Washington',
            owner: 'Colin',
            protected: false,
            backup: true
          },
          children: [
            {
              value: {
                name: 'Domestic',
                owner: 'Oliver',
                protected: true,
                backup: false
              },
              children: []
            },
            {
              value: {
                name: 'International',
                owner: 'Oliver',
                protected: true,
                backup: true
              },
              children: []
            }
          ]
        }
      ]
    }
  ]
}

Options

Work in Progress...

An option input property can be used to customise the component

import { Node, Options } from 'c-treetable';

<treetable
  [tree]="yourTreeDataStructure"
  [options]="yourOptions">
</treetable>

| Name | Description | Type | Default | |-----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|---------| | verticalSeparator | If true, separates table columns with vertical lines. | boolean | true | | capitalisedHeader | If true, capitalise the first letter of each column header. | boolean | - | | highlightRowOnHover | If true, hovering the mouse over a row highlights its background. | boolean | true | | customColumnOrder | By default, the columns are ordered following the array generated by calling Object.keys() on the nodes of the tree object; this option can be used to specify a custom order. Note that customColumnOrder needs to be an array containing all the keys present in the node object. | Array | - | | elevation | Sets the elevation of the card element wrapping the tree component. | number | 5 |

Templating

By default name of a node is displayed inside a tree node, in case you need to place custom content define a Template (ng-template) that gets the treenode as an implicit variable.

Example below places an input field to create editable treenodes.

<treetable [tree]="arrayOfNodesTree" [body]="myElement">
</treetable>

<ng-template #myElement let-obj>
    <div>custom content</div>
</ng-template>

The default behaviour is as follows :

<!-- Default Body Element -->
<ng-template #defaultBodyElement let-el>
  <!-- 
    el : {
           element : any ,
           column : any 
         }
  -->
    <div>{{el.element.value[el.column]}}</div>
</ng-template>

customColumnOrder

Given a tree data type like

interface Person {
  name: string;
  age: number;
  married: boolean;
}

const tree: Node<Person> = ...

a custom column order can be specified with the following options object

const opts: Options<Person> = {
  customColumnOrder: ['married', 'age', 'name']
}

an incomplete or incorrect customColumnOrder value will result in an error

customColumnOrder: ['married', 'age'] // 'name' missing
customColumnOrder: ['married', 'age', 'name', 'surname'] // 'surname' is not a valid key

Events

Work in Progress...

| Name | Description | Type | |---------------|------------------------------------------------------------------------------------------|-----------| | nodeClicked | Whenever a node is expanded or collapsed, emits an event with the new status of the node | Node<T> |

nodeClicked

<treetable
  [tree]="yourTreeDataStructure"
  (nodeClicked)="logToggledNode($event)">
</treetable>

logToggledNode(node: Node<SomeNodeType>): void {
  console.log(node);
}