@vaseap/ng-material-treetable v0.2.0

Angular Material TreeTable Component

This is an extensions of the ng-material-treetable library.

A simple, customisable, and easy to use Angular Material TreeTable component.

Live Demo

StackBlitz Demo

Table of Contents

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

Installation

Simply install the package through npm

npm i ng-material-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 'ng-material-treetable';

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

and use the component in your template

<treetable [tree]="yourTreeDataStructure"></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 'ng-material-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 'ng-material-treetable';

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

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

nodeClicked

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

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