Skip to content

Tree Data Grid

Jump to bottom
Ghislain B edited this page May 11, 2021 · 43 revisions

Index

Description

Tree Data allows you to display a hierarchical (tree) dataset into the grid, it is visually very similar to Grouping but also very different in its implementation. A hierarchical dataset is commonly used for a parent/child relation and a great example is a Bill of Material (BOM), which you can't do with Grouping because parent/child relationship could be infinite tree level while Grouping is a defined and known level of Grouping.

Demo

Demo Parent/Child Relationship / Component

Hierarchial Dataset / Component

Parent/Child Relation Dataset

This is the most common Tree Data to use, we only use that one in our projects, and requires you to provide a key representing the relation between the parent and children (typically a parentId, which the default key when nothing is provided).

For example, we can see below that what we have is a regular flat dataset with items having a parentId defined which tells us the relationship between the parent and child.

dataset sample
const dataset = [
  { id: 0, file: 'documents', parentId: null, },
  { id: 1, file: 'vacation.txt', parentId: 0, }, 
  { id: 2, file: 'bills.txt', parentId: 0, }, 
  { id: 55: file: 'music', parentId: null, },
  { id: 60, file: 'favorite-song.mp3', parentId: 55, }, 
  { id: 61, file: 'blues.mp3', parentId: 61, }, 
];

For the full list of options, refer to the treeDataOptions interface

grid options configurations
this.gridOptions = {
  enableFiltering: true,  // <<-- REQUIRED, it won't work without filtering enabled
  multiColumnSort: false, // <<-- REQUIRED to be Disabled since multi-column sorting is not currently supported with Tree Data

  treeDataOptions: {
    columnId: 'title',           // the column where you will have the Tree with collapse/expand icons
    parentPropName: 'parentId',  // the parent/child key relation in your dataset
    levelPropName: 'treeLevel',  // optionally, you can define the tree level property name, it nothing is provided it will use "__treeLevel"
    indentMarginLeft: 15,        // optionally provide the indent spacer width in pixel, for example if you provide 10 and your tree level is 2 then it will have 20px of indentation
    exportIndentMarginLeft: 4,   // similar to `indentMarginLeft` but represent a space instead of pixels for the Export CSV/Excel

    // you can optionally sort by a different column and/or sort direction
    // this is the RECOMMENDED approach, unless you are 100% that your original array is already sorted (in most cases it's not)
    initialSort: {
      columnId: 'title',         // which column are we using to do the initial sort? it doesn't have to be the tree column, it could be any column
      direction: 'ASC'
    },

    // we can also add a Custom Formatter just for the title text portion
    titleFormatter: (_row, _cell, value, _def, dataContext) => {
      let prefix = '';
      if (dataContext.treeLevel > 0) {
        prefix = `<span class="mdi mdi-subdirectory-arrow-right"></span>`;
      }
      return `${prefix}<span class="bold">${value}</span><span style="font-size:11px; margin-left: 15px;">(parentId: ${dataContext.parentId})</span>`;
    },
  },
};

Hierarchical (Tree) Dataset

This is when your dataset is already in hierarchical (tree) structure, for example your items already the tree and when a parent as children, then we assume it is in a defined children array.

For example, we can see below the children are in the files array and the entire dataset is already in a hierarchical (tree) structure.

For the full list of options, refer to the treeDataOptions interface

dataset sample
const dataset = [
  { id: 0, file: 'documents', files: [
      { id: 1, file: 'vacation.txt', size: 12 }, 
      { id: 2, file: 'bills.txt', size: 0.5 }
    ] 
  },
  { id: 55: file: 'music', files: [
      { id: 60, file: 'favorite-song.mp3': size: 2.3 }, 
      { id: 61, file: 'blues.mp3', size: 5.5 }
    ] 
  },
];
grid options configurations
this.gridOptions = {
  enableFiltering: true,  // <<-- REQUIRED, it won't work without filtering enabled
  multiColumnSort: false, // <<-- REQUIRED to be Disabled since multi-column sorting is not currently supported with Tree Data

  treeDataOptions: {
    columnId: 'file',
    childrenPropName: 'files',

    // you can optionally sort by a different column and/or sort direction
    // initialSort: {
    //   columnId: 'size',
    //   direction: 'DESC'
    // }
  },
};

Tree Custom Title Formatter

The column with the Tree already has a Formatter, so how can we add our own Formatter without impacting the Tree collapse/expand icons? You can use the titleFormatter in your treeDataOptions, it will style the text title but won't impact the collapsing icons.

grid options configurations
this.gridOptions = {
  enableFiltering: true,  // <<-- REQUIRED, it won't work without filtering enabled
  multiColumnSort: false, // <<-- REQUIRED to be Disabled since multi-column sorting is not currently supported with Tree Data

  treeDataOptions: {
    columnId: 'title',           // the column where you will have the Tree with collapse/expand icons
    // ...

    // we can also add a Custom Formatter just for the title text portion
    titleFormatter: (_row, _cell, value, _def, dataContext) => {
      let prefix = '';
      if (dataContext.treeLevel > 0) {
        prefix = `<span class="mdi mdi-subdirectory-arrow-right"></span>`;
      }
      return `${prefix}<span class="bold">${value}</span><span style="font-size:11px; margin-left: 15px;">(parentId: ${dataContext.parentId})</span>`;
    },
  },
};
Clone this wiki locally