A customisable Angular Material TreeTable component with Custom template injection
npm install c-treetablenpm
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
`typescript
import { TreetableModule } from 'c-treetable';
@NgModule({
...
imports: [
...
TreetableModule
],
...
})
export class AppModule { }
`
and use the component in your template
`html
`
Finally, make sure you import the required material icons font in your styles.css
`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 or a Node where Node is the following interface
`typescript
import { Node } from 'c-treetable';
interface Node {
value: T;
children: Node[];
}
`
Here's a simple example.
`javascript
{
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
`typescript
import { Node, Options } from 'c-treetable';
`
---
`html
[options]="yourOptions">
`
| 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.
`html
custom content
`
The default behaviour is as follows :
`html
{{el.element.value[el.column]}}
`
---
$3
Given a tree data type like
`typescript
interface Person {
name: string;
age: number;
married: boolean;
}
const tree: Node = ...
`
a custom column order can be specified with the following options object
`typescript
const opts: Options = {
customColumnOrder: ['married', 'age', 'name']
}
`
an incomplete or incorrect customColumnOrder value will result in an error
`typescript
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 |
$3
`html
(nodeClicked)="logToggledNode($event)">
`
---
`typescript
logToggledNode(node: Node): void {
console.log(node);
}
``