Skip to content

mlrv/ng-material-treetable

Repository files navigation

Angular Material TreeTable Component

Build Status Licence semantic-release Npm

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

Gif Demo

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

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);
}