Built-In Filter Templates

The built-in filter templates enable you to both utilize the available configuration options and customize the filter settings of the TreeList.

Configuring Built-In Filters

The Kendo UI TreeList for Angular ships with built-in filters for common data types which enable you to:

Configuration Components for Filter Templates

The following ready-for-use components are available for the filter-cell template:

All built-in filter-cell components require you to bind the "column" and "filter" attributes to the template context.

<kendo-treelist-column field="name">
       <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
         <kendo-treelist-string-filter-cell [column]="column" [filter]="filter">
         </kendo-treelist-string-filter-cell>
       </ng-template>
   </kendo-treelist-column>

The following ready-for-use components are available for the filter-menu template:

All built-in filter-menu components require you to bind the "column", "filter", and "filterService" attributes to the template context.

<kendo-treelist-column field="name">
       <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
         <kendo-treelist-string-filter-menu [column]="column" [filter]="filter" [filterService]="filterService">
         </kendo-treelist-string-filter-menu>
       </ng-template>
   </kendo-treelist-column>

Hiding Row Filter Operators

To hide the list of row filter operators, set the showOperators option to false.

<kendo-treelist-column field="name">
       <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
         <kendo-treelist-string-filter-cell
           [showOperators]="false"
           [column]="column"
           [filter]="filter">
         </kendo-treelist-string-filter-cell>
       </ng-template>
   </kendo-treelist-column>

Setting the Default Filter Operator

The default operators for the built-in filter components are:

Component Default Operator
kendo-treelist-boolean-filter-cell "eq"
kendo-treelist-date-filter-cell "gte"
kendo-treelist-numeric-filter-cell "eq"
kendo-treelist-string-filter-cell "contains"
kendo-treelist-boolean-filter-menu "eq"
kendo-treelist-date-filter-menu "gte"
kendo-treelist-numeric-filter-menu "eq"
kendo-treelist-string-filter-menu "contains"

If "operator" is set to "", the TreeList will use the first operator from the defined list of operators as its default operator.

You can override the default filter operators by setting the "operator" property. The following example demonstrates how to configure a string filter and select the "startswith" operator.

<kendo-treelist-column field="name">
       <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
         <kendo-treelist-string-filter-cell [column]="column" [filter]="filter" operator="startswith">
             <kendo-filter-startswith-operator></kendo-filter-startswith-operator>
             <kendo-filter-eq-operator></kendo-filter-eq-operator>
         </kendo-treelist-string-filter-cell>
       </ng-template>
   </kendo-treelist-column>

The following example demonstrates how to set the default filter operator by using the filter menu.

<kendo-treelist-column field="name">
       <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
         <kendo-treelist-string-filter-menu
           [column]="column"
           [filter]="filter"
           [filterService]="filterService"
           operator="startswith">
             <kendo-filter-startswith-operator></kendo-filter-startswith-operator>
             <kendo-filter-eq-operator></kendo-filter-eq-operator>
         </kendo-treelist-string-filter-menu>
       </ng-template>
   </kendo-treelist-column>

Setting the Order of the Filter Operators

You can manually fine-tune the order and number of available operators by adding operator components.

The following example demonstrates how to set the order of operators by using the filter row.

<kendo-treelist-column field="name">
       <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
         <kendo-treelist-string-filter-cell [column]="column" [filter]="filter">
             <kendo-filter-contains-operator></kendo-filter-contains-operator>
             <kendo-filter-eq-operator></kendo-filter-eq-operator>
         </kendo-treelist-string-filter-cell>
       </ng-template>
   </kendo-treelist-column>

The following example demonstrates how to set the order of operators by using the filter menu.

<kendo-treelist-column field="name">
       <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
         <kendo-treelist-string-filter-menu
           [column]="column"
           [filter]="filter"
           [filterService]="filterService">
             <kendo-filter-contains-operator></kendo-filter-contains-operator>
             <kendo-filter-eq-operator></kendo-filter-eq-operator>
         </kendo-treelist-string-filter-menu>
       </ng-template>
   </kendo-treelist-column>

Implementing Custom Filters

Depending on the filtering logic your project applies, you can add custom-filter interfaces by:

Customizing Filter Rows

You can customize the filter row through the filter-row template. The following steps demonstrate how to implement a custom checkbox filter.

  1. Add a template tag with the kendoTreeListFilterCellTemplate directive for the Boolean column.

    <kendo-treelist-column field="phone" title="Phone" [width]="180">
        <ng-template kendoTreeListFilterCellTemplate>
        </ng-template>
     </kendo-treelist-column>
  2. Inside the template tag, place the MultSelect component.

    <kendo-treelist-column field="phone" title="Phone" [width]="180">
         <ng-template kendoTreeListFilterCellTemplate>
             <kendo-maskedtextbox mask="(999) 000-0000"
                 [promptPlaceholder]="prompt" [includeLiterals]="true"
                 (valueChange)="phoneChange($event)"
             >
             </kendo-maskedtextbox>
         </ng-template>
     </kendo-treelist-column>
  3. Handle the valueChange event and set the filter. Use a new object instance to trigger a change detection cycle.

    public phoneChange(value: string): void {
           const root = { logic: 'and', filters: [], ...this.filter };
    
           if (!value || value.indexOf(this.prompt) >= 0) {
               removeFiltersForField(root)
           } else {
               const [ filter ] = flatten(root).filter(x => x.field === 'phone');
    
               if (!filter) {
                   root.filters.push({
                       field: 'phone',
                       operator: 'eq',
                       value: value
                   });
               } else {
                   filter.value = value;
               }
           }
    
           this.filter = root;
       }

The following example demonstrates the full implementation of the approach.

import { Component } from '@angular/core';
import { CompositeFilterDescriptor, isCompositeFilterDescriptor } from '@progress/kendo-data-query';
import { Employee, employees } from './employees';

const flatten = filter => {
    const filters = filter.filters;
    if (filters) {
        return filters.reduce((acc, curr) => acc.concat(curr.filters ? flatten(curr) : [curr]), []);
    }
    return [];
};

const removeFiltersForField = (filter: CompositeFilterDescriptor, field: string): void => {
    if (filter && filter.filters) {
        filter.filters = filter.filters.filter(descriptor => {
            if (removeFiltersForField(descriptor)) {
                removeFiltersForField(descriptor, field);
                return descriptor.filters.length;
            } else {
                return descriptor.field !== field;
            }
        });
    }
};

@Component({
    selector: 'my-app',
    template: `
        <kendo-treelist [kendoTreeListFlatBinding]="data" idField="id" parentIdField="managerId"
                kendoTreeListExpandable
                [height]="410"
                [filterable]="true"
                [filter]="filter"
                (filterChange)="onFilterChange($event)"
            >
            <kendo-treelist-column [expandable]="true" field="name" title="Name" [width]="250">
            </kendo-treelist-column>
            <kendo-treelist-column field="title" title="Title" [width]="180"></kendo-treelist-column>
            <kendo-treelist-column field="phone" title="Phone" [width]="180">
                <ng-template kendoTreeListFilterCellTemplate>
                    <kendo-maskedtextbox mask="(999) 000-0000"
                        [promptPlaceholder]="prompt" [includeLiterals]="true"
                        (valueChange)="phoneChange($event)"
                    >
                    </kendo-maskedtextbox>
                </ng-template>
            </kendo-treelist-column>
        </kendo-treelist>
    `
})
export class AppComponent {
    public data: Employee[] = employees;
    public filter: CompositeFilterDescriptor;
    public prompt = '_';

    public onFilterChange(filter: any): void {
        this.filter = filter;
    }

    public phoneChange(value: string): void {
        const root = { logic: 'and', filters: [], ...this.filter };

        if (!value || value.indexOf(this.prompt) >= 0) {
            removeFiltersForField(root, 'phone');
        } else {
            const [ filter ] = flatten(root).filter(x => x.field === 'phone');

            if (!filter) {
                root.filters.push({
                    field: 'phone',
                    operator: 'eq',
                    value: value
                });
            } else {
                filter.value = value;
            }
        }

        this.filter = root;
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { TreeListModule } from '@progress/kendo-angular-treelist';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';

@NgModule({
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TreeListModule,
    InputsModule
  ]
})
export class AppModule { }

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);


export interface Employee {
    id: number;
    managerId?: number;
    name: string;
    title: string;
    phone: string;
    hireDate?: Date;
}

export const employees: Employee[] = [
    {
        id: 1,
        name: 'Daryl Sweeney',
        title: 'Chief Executive Officer',
        phone: '(555) 924-9726',
        managerId: null,
        hireDate: new Date('2019-01-15')
    },
    {
        id: 2,
        name: 'Guy Wooten',
        title: 'Chief Technical Officer',
        phone: '(438) 738-4935',
        managerId: 1,
        hireDate: new Date('2019-02-19')
    },
    {
        id: 32,
        name: 'Buffy Weber',
        title: 'VP, Engineering',
        phone: '(699) 838-6121',
        managerId: 2,
        hireDate: new Date('2019-04-13')
    },
    {
        id: 11,
        name: 'Hyacinth Hood',
        title: 'Team Lead',
        phone: '(889) 345-2438',
        managerId: 32,
        hireDate: new Date('2018-01-17')
    },
    {
        id: 60,
        name: 'Akeem Carr',
        title: 'Junior Software Developer',
        phone: '(738) 136-2814',
        managerId: 11,
        hireDate: new Date('2018-01-18')
    },
    {
        id: 78,
        name: 'Rinah Simon',
        title: 'Software Developer',
        phone: '(285) 912-5271',
        managerId: 11,
        hireDate: new Date('2018-03-17')
    },
    {
        id: 42,
        name: 'Gage Daniels',
        title: 'Software Architect',
        phone: '(107) 290-6260',
        managerId: 32,
        hireDate: new Date('2019-03-14')
    },
    {
        id: 43,
        name: 'Constance Vazquez',
        title: 'Director, Engineering',
        phone: '(800) 301-1978',
        managerId: 32,
        hireDate: new Date('2018-03-18')
    },
    {
        id: 46,
        name: 'Darrel Solis',
        title: 'Team Lead',
        phone: '(327) 977-0216',
        managerId: 43,
        hireDate: new Date('2019-04-15')
    },
    {
        id: 47,
        name: 'Brian Yang',
        title: 'Senior Software Developer',
        phone: '(565) 146-5435',
        managerId: 46,
        hireDate: new Date('2019-02-21')
    },
    {
        id: 50,
        name: 'Lillian Bradshaw',
        title: 'Software Developer',
        phone: '(323) 509-3479',
        managerId: 46,
        hireDate: new Date('2019-05-23')
    },
    {
        id: 51,
        name: 'Christian Palmer',
        title: 'Technical Lead',
        phone: '(490) 421-8718',
        managerId: 46,
        hireDate: new Date('2019-04-16')
    },
    {
        id: 55,
        name: 'Summer Mosley',
        title: 'QA Engineer',
        phone: '(784) 962-2301',
        managerId: 46,
        hireDate: new Date('2019-09-21')
    },
    {
        id: 56,
        name: 'Barry Ayers',
        title: 'Software Developer',
        phone: '(452) 373-9227',
        managerId: 46,
        hireDate: new Date('2018-04-16')
    },
    {
        id: 59,
        name: 'Keiko Espinoza',
        title: 'Junior QA Engineer',
        phone: '(226) 600-5305',
        managerId: 46,
        hireDate: new Date('2018-01-22')
    },
    {
        id: 61,
        name: 'Candace Pickett',
        title: 'Support Officer',
        phone: '(120) 117-7475',
        managerId: 46,
        hireDate: new Date('2018-09-18')
    },
    {
        id: 63,
        name: 'Mia Caldwell',
        title: 'Team Lead',
        phone: '(848) 636-6470',
        managerId: 43,
        hireDate: new Date('2018-07-17')
    },
    {
        id: 65,
        name: 'Thomas Terry',
        title: 'Senior Enterprise Support Officer',
        phone: '(764) 831-4248',
        managerId: 63,
        hireDate: new Date('2018-07-14')
    },
    {
        id: 67,
        name: 'Ruth Downs',
        title: 'Senior Software Developer',
        phone: '(138) 991-1440',
        managerId: 63,
        hireDate: new Date('2018-08-14')
    },
    {
        id: 70,
        name: 'Yasir Wilder',
        title: 'Senior QA Engineer',
        phone: '(759) 701-8665',
        managerId: 63,
        hireDate: new Date('2019-08-17')
    },
    {
        id: 71,
        name: 'Flavia Short',
        title: 'Support Officer',
        phone: '(370) 133-9238',
        managerId: 63,
        hireDate: new Date('2018-06-15')
    },
    {
        id: 74,
        name: 'Aaron Roach',
        title: 'Junior Software Developer',
        phone: '(958) 717-9230',
        managerId: 63,
        hireDate: new Date('2018-09-18')
    },
    {
        id: 75,
        name: 'Eric Russell',
        title: 'Software Developer',
        phone: '(516) 575-8505',
        managerId: 63,
        hireDate: new Date('2019-09-13')
    },
    {
        id: 76,
        name: 'Cheyenne Olson',
        title: 'Software Developer',
        phone: '(241) 645-0257',
        managerId: 63,
        hireDate: new Date('2018-09-18')
    },
    {
        id: 77,
        name: 'Shaine Avila',
        title: 'UI Designer',
        phone: '(844) 435-1360',
        managerId: 63,
        hireDate: new Date('2018-01-22')
    },
    {
        id: 81,
        name: 'Chantale Long',
        title: 'Senior QA Engineer',
        phone: '(252) 419-6891',
        managerId: 63,
        hireDate: new Date('2018-09-14')
    },
    {
        id: 83,
        name: 'Dane Cruz',
        title: 'Junior Software Developer',
        phone: '(946) 701-6165',
        managerId: 63,
        hireDate: new Date('2019-03-15')
    },
    {
        id: 84,
        name: 'Regan Patterson',
        title: 'Technical Writer',
        phone: '(265) 946-1765',
        managerId: 63,
        hireDate: new Date('2019-05-17')
    },
    {
        id: 85,
        name: 'Drew Mckay',
        title: 'Senior Software Developer',
        phone: '(327) 293-0162',
        managerId: 63,
        hireDate: new Date('2019-05-21')
    },
    {
        id: 88,
        name: 'Bevis Miller',
        title: 'Senior Software Developer',
        phone: '(525) 557-0169',
        managerId: 63,
        hireDate: new Date('2018-08-15')
    },
    {
        id: 89,
        name: 'Bruce Mccarty',
        title: 'Support Officer',
        phone: '(936) 777-8730',
        managerId: 63,
        hireDate: new Date('2019-10-21')
    },
    {
        id: 90,
        name: 'Ocean Blair',
        title: 'Team Lead',
        phone: '(343) 586-6614',
        managerId: 43,
        hireDate: new Date('2018-06-20')
    },
    {
        id: 91,
        name: 'Guinevere Osborn',
        title: 'Software Developer',
        phone: '(424) 741-0006',
        managerId: 90,
        hireDate: new Date('2019-06-17')
    },
    {
        id: 92,
        name: 'Olga Strong',
        title: 'Graphic Designer',
        phone: '(949) 417-1168',
        managerId: 90,
        hireDate: new Date('2018-06-15')
    },
    {
        id: 93,
        name: 'Robert Orr',
        title: 'Support Officer',
        phone: '(977) 341-3721',
        managerId: 90,
        hireDate: new Date('2018-06-22')
    },
    {
        id: 95,
        name: 'Odette Sears',
        title: 'Senior Software Developer',
        phone: '(264) 818-6576',
        managerId: 90,
        hireDate: new Date('2019-05-20')
    },
    {
        id: 45,
        name: 'Zelda Medina',
        title: 'QA Architect',
        phone: '(563) 359-6023',
        managerId: 32,
        hireDate: new Date('2018-08-16')
    },
    {
        id: 3,
        name: 'Priscilla Frank',
        title: 'Chief Product Officer',
        phone: '(217) 280-5300',
        managerId: 1,
        hireDate: new Date('2019-04-22')
    },
    {
        id: 4,
        name: 'Ursula Holmes',
        title: 'EVP, Product Strategy',
        phone: '(370) 983-8796',
        managerId: 3,
        hireDate: new Date('2018-01-15')
    },
    {
        id: 24,
        name: 'Melvin Carrillo',
        title: 'Director, Developer Relations',
        phone: '(344) 496-9555',
        managerId: 3,
        hireDate: new Date('2018-01-17')
    },
    {
        id: 29,
        name: 'Martha Chavez',
        title: 'Developer Advocate',
        phone: '(140) 772-7509',
        managerId: 24,
        hireDate: new Date('2018-05-14')
    },
    {
        id: 30,
        name: 'Oren Fox',
        title: 'Developer Advocate',
        phone: '(714) 284-2408',
        managerId: 24,
        hireDate: new Date('2018-07-19')
    },
    {
        id: 41,
        name: 'Amos Barr',
        title: 'Developer Advocate',
        phone: '(996) 587-8405',
        managerId: 24,
        hireDate: new Date('2019-01-16')
    }
  ];

Customizing Filter Menus

You can customize the filter menu through the filter-menu template. The following steps demonstrate how to implement a custom multi-select filter.

  1. Add a template tag with the kendoTreeListFilterMenuTemplate directive for the title column.

    <kendo-treelist-column field="title" title="Title" [width]="180">
       <ng-template kendoTreeListFilterMenuTemplate
           let-column="column"
           let-filter="filter"
           let-filterService="filterService"
           >
       </ng-template>
    </kendo-treelist-column>
  2. Inside the template tag, place the MultiSelect component.

    <kendo-treelist-column field="title" title="Title" [width]="180">
       <ng-template kendoTreeListFilterMenuTemplate
           let-column="column"
           let-filter="filter"
           let-filterService="filterService"
           >
           <kendo-multiselect
               style="width:220px"
               [data]="titles"
               [valuePrimitive]="true"
               [value]="titleFilters(filter)"
               (valueChange)="titleChange($event, filterService)"
               >
           </kendo-multiselect>
       </ng-template>
    </kendo-treelist-column>
  3. Handle the valueChange event and set the filter through the filterService instance.

    public titleChange(values: any[], filterService: FilterService): void {
           filterService.filter({
               filters: values.map(value => ({
                   field: 'title',
                   operator: 'eq',
                   value
               })),
               logic: 'or'
           });
       }

The following example demonstrates the full implementation of the approach.

import { Component } from '@angular/core';
import { filterBy, FilterDescriptor, CompositeFilterDescriptor } from '@progress/kendo-data-query';
import { Employee, employees } from './employees';
import { FilterService } from '@progress/kendo-angular-treelist';

const flatten = filter => {
    const filters = (filter || {}).filters;
    if (filters) {
        return filters.reduce((acc, curr) => acc.concat(curr.filters ? flatten(curr) : [curr]), []);
    }
    return [];
};

const distinctTitles = data => data
    .map(item => item.title)
    .filter((title, idx, arr) => arr.findIndex(t => t === title) === idx);

@Component({
    selector: 'my-app',
    template: `
        <kendo-treelist [kendoTreeListFlatBinding]="data" idField="id" parentIdField="managerId"
                kendoTreeListExpandable
                [height]="410"
                filterable="menu"
                [filter]="filter"
                (filterChange)="onFilterChange($event)"
            >
            <kendo-treelist-column [expandable]="true" field="name" title="Name" [width]="250">
            </kendo-treelist-column>
            <kendo-treelist-column field="title" title="Title" [width]="180">
                <ng-template kendoTreeListFilterMenuTemplate
                    let-column="column"
                    let-filter="filter"
                    let-filterService="filterService"
                    >
                    <kendo-multiselect
                        style="width:220px"
                        [data]="titles"
                        [valuePrimitive]="true"
                        [value]="titleFilters(filter)"
                        (valueChange)="titleChange($event, filterService)"
                        >
                    </kendo-multiselect>
                </ng-template>
            </kendo-treelist-column>
            <kendo-treelist-column field="phone" title="Phone" [width]="180">
            </kendo-treelist-column>
        </kendo-treelist>
    `
})
export class AppComponent {
    public data: Employee[] = employees;
    public filter: CompositeFilterDescriptor;
    public titles = distinctTitles(employees);
    private titleFilter: string[] = [];

    public onFilterChange(filter: any): void {
        this.filter = filter;
    }

    public titleChange(values: any[], filterService: FilterService): void {
        filterService.filter({
            filters: values.map(value => ({
                field: 'title',
                operator: 'eq',
                value
            })),
            logic: 'or'
        });
    }

    public titleFilters(filter: CompositeFilterDescriptor): FilterDescriptor[] {
        this.titleFilter.splice(
            0, this.titleFilter.length,
            ...flatten(filter).map(({ value }) => value)
          );
        return this.titleFilter;
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { TreeListModule } from '@progress/kendo-angular-treelist';
import { MultiSelectModule } from '@progress/kendo-angular-dropdowns';
import { AppComponent } from './app.component';

@NgModule({
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TreeListModule,
    MultiSelectModule
  ]
})
export class AppModule { }
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);


export interface Employee {
    id: number;
    managerId?: number;
    name: string;
    title: string;
    phone: string;
    hireDate?: Date;
}

export const employees: Employee[] = [
    {
        id: 1,
        name: 'Daryl Sweeney',
        title: 'Chief Executive Officer',
        phone: '(555) 924-9726',
        managerId: null,
        hireDate: new Date('2019-01-15')
    },
    {
        id: 2,
        name: 'Guy Wooten',
        title: 'Chief Technical Officer',
        phone: '(438) 738-4935',
        managerId: 1,
        hireDate: new Date('2019-02-19')
    },
    {
        id: 32,
        name: 'Buffy Weber',
        title: 'VP, Engineering',
        phone: '(699) 838-6121',
        managerId: 2,
        hireDate: new Date('2019-04-13')
    },
    {
        id: 11,
        name: 'Hyacinth Hood',
        title: 'Team Lead',
        phone: '(889) 345-2438',
        managerId: 32,
        hireDate: new Date('2018-01-17')
    },
    {
        id: 60,
        name: 'Akeem Carr',
        title: 'Junior Software Developer',
        phone: '(738) 136-2814',
        managerId: 11,
        hireDate: new Date('2018-01-18')
    },
    {
        id: 78,
        name: 'Rinah Simon',
        title: 'Software Developer',
        phone: '(285) 912-5271',
        managerId: 11,
        hireDate: new Date('2018-03-17')
    },
    {
        id: 42,
        name: 'Gage Daniels',
        title: 'Software Architect',
        phone: '(107) 290-6260',
        managerId: 32,
        hireDate: new Date('2019-03-14')
    },
    {
        id: 43,
        name: 'Constance Vazquez',
        title: 'Director, Engineering',
        phone: '(800) 301-1978',
        managerId: 32,
        hireDate: new Date('2018-03-18')
    },
    {
        id: 46,
        name: 'Darrel Solis',
        title: 'Team Lead',
        phone: '(327) 977-0216',
        managerId: 43,
        hireDate: new Date('2019-04-15')
    },
    {
        id: 47,
        name: 'Brian Yang',
        title: 'Senior Software Developer',
        phone: '(565) 146-5435',
        managerId: 46,
        hireDate: new Date('2019-02-21')
    },
    {
        id: 50,
        name: 'Lillian Bradshaw',
        title: 'Software Developer',
        phone: '(323) 509-3479',
        managerId: 46,
        hireDate: new Date('2019-05-23')
    },
    {
        id: 51,
        name: 'Christian Palmer',
        title: 'Technical Lead',
        phone: '(490) 421-8718',
        managerId: 46,
        hireDate: new Date('2019-04-16')
    },
    {
        id: 55,
        name: 'Summer Mosley',
        title: 'QA Engineer',
        phone: '(784) 962-2301',
        managerId: 46,
        hireDate: new Date('2019-09-21')
    },
    {
        id: 56,
        name: 'Barry Ayers',
        title: 'Software Developer',
        phone: '(452) 373-9227',
        managerId: 46,
        hireDate: new Date('2018-04-16')
    },
    {
        id: 59,
        name: 'Keiko Espinoza',
        title: 'Junior QA Engineer',
        phone: '(226) 600-5305',
        managerId: 46,
        hireDate: new Date('2018-01-22')
    },
    {
        id: 61,
        name: 'Candace Pickett',
        title: 'Support Officer',
        phone: '(120) 117-7475',
        managerId: 46,
        hireDate: new Date('2018-09-18')
    },
    {
        id: 63,
        name: 'Mia Caldwell',
        title: 'Team Lead',
        phone: '(848) 636-6470',
        managerId: 43,
        hireDate: new Date('2018-07-17')
    },
    {
        id: 65,
        name: 'Thomas Terry',
        title: 'Senior Enterprise Support Officer',
        phone: '(764) 831-4248',
        managerId: 63,
        hireDate: new Date('2018-07-14')
    },
    {
        id: 67,
        name: 'Ruth Downs',
        title: 'Senior Software Developer',
        phone: '(138) 991-1440',
        managerId: 63,
        hireDate: new Date('2018-08-14')
    },
    {
        id: 70,
        name: 'Yasir Wilder',
        title: 'Senior QA Engineer',
        phone: '(759) 701-8665',
        managerId: 63,
        hireDate: new Date('2019-08-17')
    },
    {
        id: 71,
        name: 'Flavia Short',
        title: 'Support Officer',
        phone: '(370) 133-9238',
        managerId: 63,
        hireDate: new Date('2018-06-15')
    },
    {
        id: 74,
        name: 'Aaron Roach',
        title: 'Junior Software Developer',
        phone: '(958) 717-9230',
        managerId: 63,
        hireDate: new Date('2018-09-18')
    },
    {
        id: 75,
        name: 'Eric Russell',
        title: 'Software Developer',
        phone: '(516) 575-8505',
        managerId: 63,
        hireDate: new Date('2019-09-13')
    },
    {
        id: 76,
        name: 'Cheyenne Olson',
        title: 'Software Developer',
        phone: '(241) 645-0257',
        managerId: 63,
        hireDate: new Date('2018-09-18')
    },
    {
        id: 77,
        name: 'Shaine Avila',
        title: 'UI Designer',
        phone: '(844) 435-1360',
        managerId: 63,
        hireDate: new Date('2018-01-22')
    },
    {
        id: 81,
        name: 'Chantale Long',
        title: 'Senior QA Engineer',
        phone: '(252) 419-6891',
        managerId: 63,
        hireDate: new Date('2018-09-14')
    },
    {
        id: 83,
        name: 'Dane Cruz',
        title: 'Junior Software Developer',
        phone: '(946) 701-6165',
        managerId: 63,
        hireDate: new Date('2019-03-15')
    },
    {
        id: 84,
        name: 'Regan Patterson',
        title: 'Technical Writer',
        phone: '(265) 946-1765',
        managerId: 63,
        hireDate: new Date('2019-05-17')
    },
    {
        id: 85,
        name: 'Drew Mckay',
        title: 'Senior Software Developer',
        phone: '(327) 293-0162',
        managerId: 63,
        hireDate: new Date('2019-05-21')
    },
    {
        id: 88,
        name: 'Bevis Miller',
        title: 'Senior Software Developer',
        phone: '(525) 557-0169',
        managerId: 63,
        hireDate: new Date('2018-08-15')
    },
    {
        id: 89,
        name: 'Bruce Mccarty',
        title: 'Support Officer',
        phone: '(936) 777-8730',
        managerId: 63,
        hireDate: new Date('2019-10-21')
    },
    {
        id: 90,
        name: 'Ocean Blair',
        title: 'Team Lead',
        phone: '(343) 586-6614',
        managerId: 43,
        hireDate: new Date('2018-06-20')
    },
    {
        id: 91,
        name: 'Guinevere Osborn',
        title: 'Software Developer',
        phone: '(424) 741-0006',
        managerId: 90,
        hireDate: new Date('2019-06-17')
    },
    {
        id: 92,
        name: 'Olga Strong',
        title: 'Graphic Designer',
        phone: '(949) 417-1168',
        managerId: 90,
        hireDate: new Date('2018-06-15')
    },
    {
        id: 93,
        name: 'Robert Orr',
        title: 'Support Officer',
        phone: '(977) 341-3721',
        managerId: 90,
        hireDate: new Date('2018-06-22')
    },
    {
        id: 95,
        name: 'Odette Sears',
        title: 'Senior Software Developer',
        phone: '(264) 818-6576',
        managerId: 90,
        hireDate: new Date('2019-05-20')
    },
    {
        id: 45,
        name: 'Zelda Medina',
        title: 'QA Architect',
        phone: '(563) 359-6023',
        managerId: 32,
        hireDate: new Date('2018-08-16')
    },
    {
        id: 3,
        name: 'Priscilla Frank',
        title: 'Chief Product Officer',
        phone: '(217) 280-5300',
        managerId: 1,
        hireDate: new Date('2019-04-22')
    },
    {
        id: 4,
        name: 'Ursula Holmes',
        title: 'EVP, Product Strategy',
        phone: '(370) 983-8796',
        managerId: 3,
        hireDate: new Date('2018-01-15')
    },
    {
        id: 24,
        name: 'Melvin Carrillo',
        title: 'Director, Developer Relations',
        phone: '(344) 496-9555',
        managerId: 3,
        hireDate: new Date('2018-01-17')
    },
    {
        id: 29,
        name: 'Martha Chavez',
        title: 'Developer Advocate',
        phone: '(140) 772-7509',
        managerId: 24,
        hireDate: new Date('2018-05-14')
    },
    {
        id: 30,
        name: 'Oren Fox',
        title: 'Developer Advocate',
        phone: '(714) 284-2408',
        managerId: 24,
        hireDate: new Date('2018-07-19')
    },
    {
        id: 41,
        name: 'Amos Barr',
        title: 'Developer Advocate',
        phone: '(996) 587-8405',
        managerId: 24,
        hireDate: new Date('2019-01-16')
    }
  ];

In this article