@c8y/tutorial 1021.80.1 → 1021.81.0

package/cumulocity.config.ts

@@ -415,6 +415,13 @@ export default {
         description: 'An example for a server data grid.',
         scope: 'self'
       },
+      {
+        name: 'Tree grid example',
+        module: 'TreeGridExampleModule',
+        path: './src/grids/tree-grid-example/tree-grid-example.module.ts',
+        description: 'An example for a tree data grid.',
+        scope: 'self'
+      },
       {
         name: 'Device grid example',
         module: 'DeviceGridExampleModule',

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1021.80.1",
+  "version": "1021.81.0",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/style": "1021.80.1",
-    "@c8y/ngx-components": "1021.80.1",
-    "@c8y/client": "1021.80.1",
-    "@c8y/bootstrap": "1021.80.1",
+    "@c8y/style": "1021.81.0",
+    "@c8y/ngx-components": "1021.81.0",
+    "@c8y/client": "1021.81.0",
+    "@c8y/bootstrap": "1021.81.0",
     "@angular/cdk": "^18.2.14",
     "ngx-bootstrap": "18.0.0",
     "leaflet": "1.9.4",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@c8y/options": "1021.80.1",
-    "@c8y/devkit": "1021.80.1"
+    "@c8y/options": "1021.81.0",
+    "@c8y/devkit": "1021.81.0"
   },
   "peerDependencies": {
     "@angular/common": ">=18 <19"

package/src/grids/server-grid-example/server-grid-example.component.html

@@ -1,12 +1,14 @@
 <c8y-title>Data grid examples</c8y-title>
 
 <c8y-data-grid
+  class="content-fullpage d-flex d-col border-top border-bottom"
   [title]="title"
   [loadMoreItemsLabel]="loadMoreItemsLabel"
   [loadingItemsLabel]="loadingItemsLabel"
   [displayOptions]="displayOptions"
   [columns]="columns"
   [pagination]="pagination"
+  [childNodePagination]="childNodePagination"
   [infiniteScroll]="infiniteScroll"
   [serverSideDataCallback]="serverSideDataCallback"
   [refresh]="refresh"
@@ -16,7 +18,6 @@
   (itemsSelect)="onItemsSelect($event)"
   [bulkActionControls]="bulkActionControls"
   (onConfigChange)="onConfigChange($event)"
-  class="content-fullpage d-flex d-col border-top border-bottom"
 >
   <c8y-ui-empty-state
     [icon]="'search'"

package/src/grids/tree-grid-example/client-tree-grid-example.component.html

@@ -0,0 +1,18 @@
+<c8y-title>Data grid examples</c8y-title>
+
+<c8y-data-grid
+  class="content-fullpage d-flex d-col border-top border-bottom"
+  [title]="title"
+  [columns]="columns"
+  [rows]="data"
+  [treeGrid]="true"
+  [pagination]="pagination"
+  [selectable]="selectable"
+  (itemsSelect)="onItemsSelect($event)"
+  [actionControls]="actionControls"
+  [bulkActionControls]="bulkActionControls"
+  (onConfigChange)="onConfigChange($event)"
+  (onFilter)="onFilter($event)"
+  (onAddCustomColumn)="onAddCustomColumn($event)"
+  (onRemoveCustomColumn)="onRemoveCustomColumn($event)"
+></c8y-data-grid>

package/src/grids/tree-grid-example/client-tree-grid-example.component.ts

@@ -0,0 +1,169 @@
+import { Component, OnInit } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import {
+  ActionControl,
+  BuiltInActionType,
+  BulkActionControl,
+  Column,
+  CoreModule,
+  CustomColumnConfig,
+  GridConfig,
+  Pagination,
+  Row
+} from '@c8y/ngx-components';
+import { DeviceGridModule } from '@c8y/ngx-components/device-grid';
+import { data } from './client-tree-grid.data';
+
+/**
+ * This is an example of using DataGridComponent to display a static set of data
+ * and allow user for filering and sorting it on client side.
+ */
+@Component({
+  selector: 'c8y-client-tree-grid-example',
+  templateUrl: './client-tree-grid-example.component.html',
+  standalone: true,
+  imports: [CoreModule, DeviceGridModule, RouterModule]
+})
+export class ClientGridExampleComponent implements OnInit {
+  /** This will be used as a title for the data grid. */
+  title = 'Devices';
+  /**
+   * This defines what columns will be displayed in the grid.
+   * In this example we're just displaying properties from the items from the loaded data file.
+   */
+  columns: Column[] = [
+    {
+      name: 'name',
+      header: 'Name',
+      path: 'name',
+      filterable: true
+    },
+    {
+      name: 'id',
+      header: 'ID',
+      path: 'id',
+      filterable: true
+    },
+    {
+      name: 'serialNumber',
+      header: 'Serial number',
+      path: 'serialNumber',
+      filterable: true
+    },
+    {
+      name: 'firmwareVersion',
+      header: 'Firmware',
+      path: 'firmwareVersion',
+      filterable: true
+    }
+  ];
+  /** Initial pagination settings. */
+  pagination: Pagination = {
+    pageSize: 30,
+    currentPage: 1
+  };
+  /** Will allow for selecting items and perform bulk actions on them. */
+  selectable = true;
+  /**
+   * Defines actions for individual rows.
+   * `type` can be one of the predefined ones, or a custom one.
+   * `callback` executes the action (based on the selected item object).
+   */
+  actionControls: ActionControl[] = [
+    {
+      type: BuiltInActionType.Edit,
+      callback: selectedItem => this.onItemEdit(selectedItem)
+    },
+    {
+      type: BuiltInActionType.Delete,
+      callback: selectedItem => this.onItemDelete(selectedItem)
+    }
+  ];
+  /**
+   * Defines actions for multiple rows.
+   * `type` can be one of the predefined ones, or a custom one.
+   * `callback` executes the action (based on the ids of selected items).
+   */
+  bulkActionControls: BulkActionControl[] = [
+    {
+      type: BuiltInActionType.Export,
+      callback: selectedItemIds => this.onItemsExport(selectedItemIds)
+    },
+    {
+      type: BuiltInActionType.Delete,
+      callback: selectedItemIds => this.onItemsDelete(selectedItemIds)
+    }
+  ];
+  /** Static data to display. */
+  data: any[];
+
+  ngOnInit() {
+    // load static data from another file, could be loaded from anywhere
+    this.data = this.dataToRows(data);
+    console.log('data loaded:', this.data);
+  }
+
+  /** Executes an edit action on the selected item. */
+  onItemEdit(selectedItem) {
+    console.log('item to edit:');
+    console.dir(selectedItem);
+  }
+
+  /** Executes a delete action on the selected item. */
+  onItemDelete(selectedItem) {
+    console.log('item to delete:');
+    console.dir(selectedItem);
+  }
+
+  /** Executes an action on selected items, whenever the selection changes. */
+  onItemsSelect(selectedItemIds) {
+    console.log('selected items:');
+    console.dir(selectedItemIds);
+  }
+
+  /** Executes an export action of the selected multiple items. */
+  onItemsExport(selectedItemIds) {
+    console.log('items to export:');
+    console.dir(selectedItemIds);
+  }
+
+  /** Executes a delete action on the selected multiple items. */
+  onItemsDelete(selectedItemIds) {
+    console.log('items to delete:');
+    console.dir(selectedItemIds);
+  }
+
+  /** Executes logic when data grid config changes. */
+  onConfigChange(config: GridConfig) {
+    console.log('configuration changed:');
+    console.dir(config);
+  }
+
+  onFilter(filter) {
+    console.log('filter changed:');
+    console.log(filter);
+  }
+
+  onAddCustomColumn(customColumnConfig: CustomColumnConfig) {
+    console.log('custom column added:');
+    console.log(customColumnConfig);
+  }
+
+  onRemoveCustomColumn(column: Column) {
+    console.log('custom column removed:');
+    console.log(column);
+  }
+
+  private dataToRows(data: any[], parentRow?: Row): Row[] {
+    return data.map(item => {
+      const row = {
+        ...item,
+        hasChildren: item.childNodes?.length > 0,
+        parentRow
+      };
+      row.childNodes =
+        item.childNodes?.length > 0 ? this.dataToRows(item.childNodes, row) : undefined;
+      return row;
+    });
+  }
+}

package/src/grids/tree-grid-example/client-tree-grid.data.ts

@@ -0,0 +1,147 @@
+/** Just a sample set of data. */
+export const data = [
+  {
+    id: '1000000001',
+    name: 'SmartTemp XT-200 Environmental Sensor',
+    serialNumber: 'SN-XT200-9F4G7K',
+    firmwareVersion: '1.3.2',
+    childNodes: [
+      {
+        id: '1000000101',
+        name: 'Temperature Probe',
+        serialNumber: 'CH-TEMP-234XF',
+        firmwareVersion: '2.1.0',
+        childNodes: [
+          {
+            id: '1000000111',
+            name: 'Thermistor Core',
+            serialNumber: 'CMP-TC-0021',
+            firmwareVersion: '1.0.5'
+          },
+          {
+            id: '1000000112',
+            name: 'Shielding Module',
+            serialNumber: 'CMP-SH-3992',
+            firmwareVersion: '1.1.1'
+          }
+        ]
+      },
+      {
+        id: '1000000102',
+        name: 'Humidity Sensor',
+        serialNumber: 'CH-HMD-92JF3',
+        firmwareVersion: '2.0.3',
+        childNodes: [
+          {
+            id: '1000000121',
+            name: 'Moisture Grid',
+            serialNumber: 'CMP-MG-1200',
+            firmwareVersion: '1.0.2'
+          },
+          {
+            id: '1000000122',
+            name: 'Condensation Shield',
+            serialNumber: 'CMP-CS-8902',
+            firmwareVersion: '1.0.7'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: '1000000002',
+    name: 'AquaSense Flow Meter V3',
+    serialNumber: 'SN-AQ3-V3J8L2',
+    firmwareVersion: '4.0.1',
+    childNodes: [
+      {
+        id: '1000000201',
+        name: 'Flow Rate Sensor',
+        serialNumber: 'CH-FLOW-12LD9',
+        firmwareVersion: '3.2.0',
+        childNodes: [
+          {
+            id: '1000000211',
+            name: 'Turbine Core',
+            serialNumber: 'CMP-TUR-3456',
+            firmwareVersion: '1.1.3'
+          },
+          {
+            id: '1000000212',
+            name: 'Velocity Encoder',
+            serialNumber: 'CMP-VEL-0082',
+            firmwareVersion: '1.0.9'
+          }
+        ]
+      },
+      {
+        id: '1000000202',
+        name: 'Pressure Gauge',
+        serialNumber: 'CH-PRES-77XMN',
+        firmwareVersion: '3.1.1',
+        childNodes: [
+          {
+            id: '1000000221',
+            name: 'Sensor Diaphragm',
+            serialNumber: 'CMP-DIA-4712',
+            firmwareVersion: '1.2.5'
+          },
+          {
+            id: '1000000222',
+            name: 'Analog-to-Digital Module',
+            serialNumber: 'CMP-ADM-9913',
+            firmwareVersion: '1.3.0'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: '1000000003',
+    name: 'SkyLink Drone Beacon',
+    serialNumber: 'SN-SKYB-239DKT',
+    firmwareVersion: '2.5.0',
+    childNodes: [
+      {
+        id: '1000000301',
+        name: 'GPS Module',
+        serialNumber: 'CH-GPS-0039H',
+        firmwareVersion: '1.9.0',
+        childNodes: [
+          {
+            id: '1000000311',
+            name: 'Antenna Array',
+            serialNumber: 'CMP-ANT-2100',
+            firmwareVersion: '1.0.4'
+          },
+          {
+            id: '1000000312',
+            name: 'Triangulation Processor',
+            serialNumber: 'CMP-TRI-3029',
+            firmwareVersion: '1.1.2'
+          }
+        ]
+      },
+      {
+        id: '1000000302',
+        name: 'Altitude Sensor',
+        serialNumber: 'CH-ALT-112PK',
+        firmwareVersion: '2.4.3',
+        childNodes: [
+          {
+            id: '1000000321',
+            name: 'Barometric Core',
+            serialNumber: 'CMP-BAR-0192',
+            firmwareVersion: '1.0.8'
+          },
+          {
+            id: '1000000322',
+            name: 'Drift Compensator',
+            serialNumber: 'CMP-DRF-6674',
+            firmwareVersion: '1.2.1'
+          }
+        ]
+      }
+    ]
+  }
+];

package/src/grids/tree-grid-example/server-tree-grid-example.component.html

@@ -0,0 +1,30 @@
+<c8y-title>Data grid examples</c8y-title>
+
+<c8y-data-grid
+  class="content-fullpage d-flex d-col border-top border-bottom"
+  [title]="title"
+  [loadMoreItemsLabel]="loadMoreItemsLabel"
+  [loadingItemsLabel]="loadingItemsLabel"
+  [displayOptions]="displayOptions"
+  [columns]="columns"
+  [pagination]="pagination"
+  [childNodePagination]="childNodePagination"
+  [infiniteScroll]="infiniteScroll"
+  [treeGrid]="true"
+  [serverSideDataCallback]="serverSideDataCallback"
+  [refresh]="refresh"
+  (rowClick)="onRowClick($event)"
+  [actionControls]="actionControls"
+  [selectable]="selectable"
+  parentNodeLabelProperty="name"
+  (itemsSelect)="onItemsSelect($event)"
+  [bulkActionControls]="bulkActionControls"
+  (onConfigChange)="onConfigChange($event)"
+>
+  <c8y-ui-empty-state
+    [icon]="'search'"
+    [title]="'No results to display.' | translate"
+    [subtitle]="'Refine your search terms or check your spelling.' | translate"
+    [horizontal]="true"
+  ></c8y-ui-empty-state>
+</c8y-data-grid>

package/src/grids/tree-grid-example/server-tree-grid-example.component.ts

@@ -0,0 +1,156 @@
+import { Component, EventEmitter } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import {
+  ActionControl,
+  BulkActionControl,
+  Column,
+  CoreModule,
+  DataSourceModifier,
+  DisplayOptions,
+  GridConfig,
+  GridConfigContext,
+  GridConfigContextProvider,
+  LoadMoreMode,
+  Pagination,
+  Row,
+  ServerSideDataResult
+} from '@c8y/ngx-components';
+import { DeviceGridModule } from '@c8y/ngx-components/device-grid';
+import { ServerTreeGridExampleService } from './server-tree-grid-example.service';
+
+/**
+ * This is an example of using DataGridComponent for displaying, filtering and sorting managed objects
+ * using customized columns and dynamically built inventory queries.
+ */
+@Component({
+  selector: 'c8y-server-tree-grid-example',
+  templateUrl: './server-tree-grid-example.component.html',
+  standalone: true,
+  imports: [CoreModule, DeviceGridModule, RouterModule],
+  providers: [ServerTreeGridExampleService]
+})
+export class ServerTreeGridExampleComponent implements GridConfigContextProvider {
+  title = 'Managed objects';
+  loadMoreItemsLabel = 'Load more managed objects';
+  loadingItemsLabel = 'Loading managed objects…';
+
+  displayOptions: DisplayOptions = {
+    bordered: true,
+    striped: true,
+    filter: true,
+    gridHeader: true,
+    hover: true
+  };
+
+  columns: Column[];
+  pagination: Pagination;
+  childNodePagination: Pagination;
+  infiniteScroll: LoadMoreMode = 'auto';
+  serverSideDataCallback: any;
+
+  refresh: EventEmitter<any> = new EventEmitter<any>();
+
+  selectable = true;
+  actionControls: ActionControl[];
+  bulkActionControls: BulkActionControl[];
+
+  constructor(private service: ServerTreeGridExampleService) {
+    this.columns = this.service.getColumns();
+    this.pagination = this.service.getPagination();
+    this.childNodePagination = this.service.getChildNodePagination();
+    this.actionControls = this.service.getActionControls();
+    this.bulkActionControls = this.service.getBulkActionControls();
+    // we're setting up `serverSideDataCallback` to execute a method from this component with bound `this`
+    this.serverSideDataCallback = this.onDataSourceModifier.bind(this);
+    // we're setting up `onRefreshClick` to be executed on refresh event
+    this.refresh.subscribe(() => this.onRefreshClick());
+  }
+
+  getGridConfigContext(): GridConfigContext {
+    return {
+      /**
+       * You can provide data here that can be used for grid configration storage,
+       * action control matchers, etc.
+       */
+      key: 'server-grid-example'
+    };
+  }
+
+  /** Used in ngFor for columns iteration. */
+  trackByName(_index, column: Column): string {
+    return column.name;
+  }
+
+  /**
+   * This method loads data when data grid requests it (e.g. on initial load or on column settings change).
+   * It gets the object with current data grid setup and is supposed to return:
+   * full response, list of items, paging object, the number of items in the filtered subset, the number of all items.
+   */
+  async onDataSourceModifier(
+    dataSourceModifier: DataSourceModifier
+  ): Promise<ServerSideDataResult> {
+    const { parentRow } = dataSourceModifier;
+    if (parentRow) {
+      const { res, data, paging } = await this.service.getChildDevices(
+        parentRow?.id,
+        parentRow?.pagination
+      );
+
+      data.forEach(row => {
+        row.hasChildren = row.childDevices.count > 0;
+      });
+
+      const serverSideDataResult: ServerSideDataResult = {
+        res,
+        data,
+        paging,
+        filteredSize: parentRow.childDevices.count,
+        size: parentRow.childDevices.count,
+        parentRow
+      };
+      return serverSideDataResult;
+    } else {
+      const { res, data, paging } = await this.service.getData(
+        dataSourceModifier.columns,
+        dataSourceModifier.pagination
+      );
+
+      data.forEach(row => {
+        row.hasChildren = row.childDevices.count > 0;
+      });
+
+      const filteredSize: number = await this.service.getCount(
+        dataSourceModifier.columns,
+        dataSourceModifier.pagination
+      );
+      const size: number = await this.service.getTotal();
+
+      const serverSideDataResult: ServerSideDataResult = { res, data, paging, filteredSize, size };
+      return serverSideDataResult;
+    }
+  }
+
+  /** Executes an action on row click. */
+  onRowClick(row: Row) {
+    console.log('row clicked:');
+    console.dir(row);
+  }
+
+  /** Executes an action on the selected items. */
+  onItemsSelect(selectedItemIds: string[]) {
+    console.log('selected item ids:');
+    console.dir(selectedItemIds);
+  }
+
+  /** Executes an action on grid config change. */
+  onConfigChange(gridConfig: GridConfig) {
+    console.log('grid config changed:');
+    console.dir(gridConfig);
+  }
+
+  /** Executes an action on refresh event. */
+  onRefreshClick() {
+    console.log('refresh clicked');
+  }
+}

package/src/grids/tree-grid-example/server-tree-grid-example.service.ts

@@ -0,0 +1,255 @@
+import { Injectable } from '@angular/core';
+import { transform } from 'lodash-es';
+
+import { IManagedObject, InventoryService, QueriesUtil } from '@c8y/client';
+import {
+  ActionControl,
+  BuiltInActionType,
+  BulkActionControl,
+  Column,
+  Pagination
+} from '@c8y/ngx-components';
+
+import { assign, get, identity } from 'lodash-es';
+
+/** Model for custom type filtering form. */
+export interface TypeFilteringModel {
+  group?: boolean;
+  device?: boolean;
+  smartRule?: boolean;
+  dashboard?: boolean;
+  file?: boolean;
+  application?: boolean;
+}
+
+/**
+ * This is the example service for a data grid:
+ * provides the list of columns, initial pagination object, actions;
+ * as well as performs the query for data based on the current grid setup.
+ */
+@Injectable()
+export class ServerTreeGridExampleService {
+  /** This will be used to build the inventory queries. */
+  protected queriesUtil: QueriesUtil;
+
+  constructor(protected inventoryService: InventoryService) {
+    this.queriesUtil = new QueriesUtil();
+  }
+
+  /**
+   * Returns a list of columns.
+   * We define 2 columns with inline objects (they display simple properties
+   * and use default header, cell and filtring form).
+   * The last column is defined via a class instance (it displays a value based on
+   * several properties of the row item and has custom header, cell and filtering form).
+   */
+  getColumns(): Column[] {
+    const columns = [
+      {
+        name: 'id',
+        header: 'ID',
+        path: 'id',
+        filterable: true,
+        sortable: true
+      },
+      {
+        name: 'name',
+        header: 'Name',
+        path: 'name',
+        filterable: true,
+        sortable: true
+      }
+    ];
+
+    return columns;
+  }
+
+  /** Returns initial pagination object. */
+  getPagination(): Pagination {
+    return {
+      pageSize: 10,
+      currentPage: 1
+    };
+  }
+
+  /** Returns initial child node pagination object. */
+  getChildNodePagination(): Pagination {
+    return {
+      pageSize: 2,
+      currentPage: 1
+    };
+  }
+
+  /** Returns an array of individual row actions. */
+  getActionControls(): ActionControl[] {
+    return [
+      { type: BuiltInActionType.Edit, callback: item => console.dir(item) },
+      { type: BuiltInActionType.Export, callback: item => console.dir(item) },
+      { type: BuiltInActionType.Delete, callback: item => console.dir(item) },
+      {
+        type: 'customAction',
+        icon: 'online',
+        text: 'Custom action',
+        callback: item => console.dir(item)
+      }
+    ];
+  }
+
+  /** Returns an array of bulk row actions. */
+  getBulkActionControls(): BulkActionControl[] {
+    return [
+      {
+        type: BuiltInActionType.Export,
+        callback: selectedItemIds => console.dir(selectedItemIds)
+      },
+      {
+        type: BuiltInActionType.Delete,
+        callback: selectedItemIds => console.dir(selectedItemIds)
+      },
+      {
+        type: 'customAction',
+        icon: 'online',
+        iconClasses: 'm-r-4',
+        text: 'Custom action',
+        showIf: selectedItemIds => selectedItemIds?.every(id => Number.parseInt(id) % 2 === 0),
+        callback: selectedItemIds => console.dir(selectedItemIds)
+      }
+    ];
+  }
+
+  /** Returns data for current columns and pagination setup. */
+  async getData(columns: Column[], pagination: Pagination) {
+    // build filters based on columns and pagination
+    const filters = this.getFilters(columns, pagination);
+    // execute inventory query for the list of managed objects
+    return this.inventoryService.list(filters);
+  }
+
+  /** Returns the number of items matching current columns and pagination setup. */
+  async getCount(columns: Column[], pagination: Pagination) {
+    const filters = {
+      ...this.getFilters(columns, pagination),
+      withTotalElements: true
+    };
+    return (await this.inventoryService.list(filters)).paging.totalElements;
+  }
+
+  /** Returns the total number of items (with no filters). */
+  async getTotal(): Promise<number> {
+    const filters = {
+      withTotalElements: true
+    };
+    return (await this.inventoryService.list(filters)).paging.totalElements;
+  }
+
+  async getChildDevices(parentId: string, pagination: Pagination) {
+    const filters = {
+      ...this.getFilters([], pagination),
+      withChildren: false,
+      withChildrenCount: true
+    };
+    return this.inventoryService.childDevicesList(parentId, filters);
+  }
+
+  /** Returns an icon and label representing the type of the managed object. */
+  getTypeIconAndLabel(mo: IManagedObject): { icon: string; label: string } {
+    let icon = 'question';
+    let label = 'Other';
+
+    if (mo.type === 'c8y_DeviceGroup') {
+      icon = 'c8y-group';
+      label = 'Group';
+    }
+
+    if (mo.c8y_IsDevice !== undefined) {
+      icon = 'exchange';
+      label = 'Device';
+    }
+
+    if (mo.type === 'c8y_SmartRule' || mo.type === 'c8y_PrivateSmartRule') {
+      icon = 'c8y-smart-rules';
+      label = 'Smart rule';
+    }
+
+    if (mo.c8y_Dashboard !== undefined) {
+      icon = 'th';
+      label = 'Dashboard';
+    }
+
+    if (mo.c8y_IsBinary !== undefined) {
+      icon = 'file';
+      label = 'File';
+    }
+
+    if (mo.type && mo.type.startsWith('c8y_Application')) {
+      icon = 'c8y-atom';
+      label = 'Application';
+    }
+
+    return { icon, label };
+  }
+
+  /** Returns filters for given columns and pagination setup. */
+  private getFilters(columns: Column[], pagination: Pagination) {
+    return {
+      query: this.getQueryString(columns),
+      pageSize: pagination.pageSize,
+      currentPage: pagination.currentPage,
+      withChildren: false,
+      withChildrenCount: true,
+      withTotalPages: true
+    };
+  }
+
+  /** Returns a query string based on columns setup. */
+  private getQueryString(columns: Column[]): string {
+    const fullQuery = this.getQueryObj(columns);
+    return this.queriesUtil.buildQuery(fullQuery);
+  }
+
+  /** Returns a query object based on columns setup. */
+  private getQueryObj(columns: Column[], defaultFilter = {}): any {
+    return transform(columns, (query, column) => this.addColumnQuery(query, column), {
+      __filter: {},
+      __orderby: [],
+      ...defaultFilter
+    });
+  }
+
+  /** Extends given query with a part based on the setup of given column. */
+  private addColumnQuery(query: any, column: Column): void {
+    // when a column is marked as filterable
+    if (column.filterable) {
+      // in the case of default filtering form, `filterPredicate` will contain the string entered by a user
+      if (column.filterPredicate) {
+        // so we use it as the expected value, * allow to search for it anywhere in the property
+        query.__filter[column.path] = `*${column.filterPredicate}*`;
+      }
+
+      // in the case of custom filtering form, we're storing the query in `externalFilterQuery.query`
+      if (column.externalFilterQuery) {
+        const getFilter = column.filteringConfig.getFilter || identity;
+        const queryObj = getFilter(column.externalFilterQuery);
+
+        if (queryObj.__or) {
+          query.__filter.__and = query.__filter.__and || [];
+          query.__filter.__and.push(queryObj);
+        } else if (queryObj.__and && get(query, '__filter.__and')) {
+          queryObj.__and.map(obj => query.__filter.__and.push(obj));
+        } else {
+          assign(query.__filter, queryObj);
+        }
+      }
+    }
+
+    // when a column is sortable and has a specified sorting order
+    if (column.sortable && column.sortOrder) {
+      // add sorting condition for the configured column `path`
+      query.__orderby.push({
+        [column.path]: column.sortOrder === 'asc' ? 1 : -1
+      });
+    }
+
+    return query;
+  }
+}

package/src/grids/tree-grid-example/tree-grid-example-tab.factory.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Tab, TabFactory } from '@c8y/ngx-components';
+
+@Injectable()
+export class TreeGridTabFactory implements TabFactory {
+  constructor(public router: Router) {}
+  get() {
+    const tabs: Tab[] = [];
+    if (this.router.url.match(/grids\/tree-grid-example/g)) {
+      tabs.push(
+        {
+          path: 'grids/tree-grid-example/server',
+          label: 'Server side data',
+          icon: 'server',
+          priority: 1050,
+          orientation: 'horizontal'
+        } as Tab,
+        {
+          path: 'grids/tree-grid-example/client',
+          label: 'Client side data',
+          icon: 'house',
+          priority: 1000,
+          orientation: 'horizontal'
+        } as Tab
+      );
+    }
+
+    return tabs;
+  }
+}

package/src/grids/tree-grid-example/tree-grid-example.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import {
+  CommonModule,
+  hookNavigator,
+  hookRoute,
+  hookTab,
+  NavigatorNode
+} from '@c8y/ngx-components';
+import { TreeGridTabFactory } from './tree-grid-example-tab.factory';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'grids/tree-grid-example/server',
+      loadComponent: () =>
+        import('./server-tree-grid-example.component').then(m => m.ServerTreeGridExampleComponent)
+    }),
+    hookRoute({
+      path: 'grids/tree-grid-example/client',
+      loadComponent: () =>
+        import('./client-tree-grid-example.component').then(m => m.ClientGridExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 20,
+        path: 'grids/tree-grid-example/server',
+        icon: 'tree-structure',
+        label: 'Tree grid',
+        parent: 'Data grid examples'
+      })
+    ),
+    hookTab(TreeGridTabFactory)
+  ]
+})
+export class TreeGridExampleModule {}