angular-slickgrid 9.0.0 → 9.0.2

package/src/demos/examples/data/customers_100.json

@@ -1,102 +0,0 @@
-[
-  {"name":"Ethel Price","gender":"female","company":"Enersol","id":1,"category":{"id":1,"name":"Gold"}},
-  {"name":"Claudine Neal","gender":"female","company":"Sealoud","id":2,"category":{"id":1,"name":"Gold"}},
-  {"name":"Beryl Rice","gender":"female","company":"Velity","id":3,"category":{"id":1,"name":"Gold"}},
-  {"name":"Wilder Gonzales","gender":"male","company":"Geekko","id":4,"category":{"id":1,"name":"Gold"}},
-  {"name":"Georgina Schultz","gender":"female","company":"Suretech","id":5,"category":{"id":1,"name":"Gold"}},
-  {"name":"Carroll Buchanan","gender":"male","company":"Ecosys","id":6,"category":{"id":1,"name":"Gold"}},
-  {"name":"Valarie Atkinson","gender":"female","company":"Hopeli","id":7,"category":{"id":1,"name":"Gold"}},
-  {"name":"Schroeder Mathews","gender":"male","company":"Polarium","id":8,"category":{"id":1,"name":"Gold"}},
-  {"name":"Lynda Mendoza","gender":"female","company":"Dogspa","id":9,"category":{"id":1,"name":"Gold"}},
-  {"name":"Sarah Massey","gender":"female","company":"Bisba","id":10,"category":{"id":1,"name":"Gold"}},
-  {"name":"Robles Boyle","gender":"male","company":"Comtract","id":11,"category":{"id":1,"name":"Gold"}},
-  {"name":"Evans Hickman","gender":"male","company":"Parleynet","id":12,"category":{"id":1,"name":"Gold"}},
-  {"name":"Dawson Barber","gender":"male","company":"Dymi","id":13,"category":{"id":1,"name":"Gold"}},
-  {"name":"Bruce Strong","gender":"male","company":"Xyqag","id":14,"category":{"id":1,"name":"Gold"}},
-  {"name":"Nellie Whitfield","gender":"female","company":"Exospace","id":15,"category":{"id":1,"name":"Gold"}},
-  {"name":"Jackson Macias","gender":"male","company":"Aquamate","id":16,"category":{"id":1,"name":"Gold"}},
-  {"name":"Pena Pena","gender":"male","company":"Quarx","id":17,"category":{"id":1,"name":"Gold"}},
-  {"name":"Lelia Gates","gender":"female","company":"Proxsoft","id":18,"category":{"id":1,"name":"Gold"}},
-  {"name":"Letitia Vasquez","gender":"female","company":"Slumberia","id":19,"category":{"id":1,"name":"Gold"}},
-  {"name":"Trevino Moreno","gender":"male","company":"Conjurica","id":20,"category":{"id":1,"name":"Gold"}},
-  {"name":"Barr Page","gender":"male","company":"Apex","id":21,"category":{"id":1,"name":"Gold"}},
-  {"name":"Kirkland Merrill","gender":"male","company":"Utara","id":22,"category":{"id":1,"name":"Gold"}},
-  {"name":"Blanche Conley","gender":"female","company":"Imkan","id":23,"category":{"id":1,"name":"Gold"}},
-  {"name":"Atkins Dunlap","gender":"male","company":"Comveyor","id":24,"category":{"id":1,"name":"Gold"}},
-  {"name":"Everett Foreman","gender":"male","company":"Maineland","id":25,"category":{"id":1,"name":"Gold"}},
-  {"name":"Gould Randolph","gender":"male","company":"Intergeek","id":26,"category":{"id":1,"name":"Gold"}},
-  {"name":"Kelli Leon","gender":"female","company":"Verbus","id":27,"category":{"id":1,"name":"Gold"}},
-  {"name":"Freda Mason","gender":"female","company":"Accidency","id":28,"category":{"id":1,"name":"Gold"}},
-  {"name":"Tucker Maxwell","gender":"male","company":"Lumbrex","id":29,"category":{"id":1,"name":"Gold"}},
-  {"name":"Yvonne Parsons","gender":"female","company":"Zolar","id":30,"category":{"id":1,"name":"Gold"}},
-  {"name":"Woods Key","gender":"male","company":"Bedder","id":31,"category":{"id":1,"name":"Gold"}},
-  {"name":"Stephens Reilly","gender":"male","company":"Acusage","id":32,"category":{"id":1,"name":"Gold"}},
-  {"name":"Mcfarland Sparks","gender":"male","company":"Comvey","id":33,"category":{"id":2,"name":"Silver"}},
-  {"name":"Jocelyn Sawyer","gender":"female","company":"Fortean","id":34,"category":{"id":2,"name":"Silver"}},
-  {"name":"Renee Barr","gender":"female","company":"Kiggle","id":35,"category":{"id":2,"name":"Silver"}},
-  {"name":"Gaines Beck","gender":"male","company":"Sequitur","id":36,"category":{"id":2,"name":"Silver"}},
-  {"name":"Luisa Farrell","gender":"female","company":"Cinesanct","id":37,"category":{"id":2,"name":"Silver"}},
-  {"name":"Robyn Strickland","gender":"female","company":"Obones","id":38,"category":{"id":2,"name":"Silver"}},
-  {"name":"Roseann Jarvis","gender":"female","company":"Aquazure","id":39,"category":{"id":2,"name":"Silver"}},
-  {"name":"Johnston Park","gender":"male","company":"Netur","id":40,"category":{"id":2,"name":"Silver"}},
-  {"name":"Wong Craft","gender":"male","company":"Opticall","id":41,"category":{"id":2,"name":"Silver"}},
-  {"name":"Merritt Cole","gender":"male","company":"Techtrix","id":42,"category":{"id":2,"name":"Silver"}},
-  {"name":"Dale Byrd","gender":"female","company":"Kneedles","id":43,"category":{"id":2,"name":"Silver"}},
-  {"name":"Sara Delgado","gender":"female","company":"Netagy","id":44,"category":{"id":2,"name":"Silver"}},
-  {"name":"Alisha Myers","gender":"female","company":"Intradisk","id":45,"category":{"id":2,"name":"Silver"}},
-  {"name":"Felecia Smith","gender":"female","company":"Futurity","id":46,"category":{"id":2,"name":"Silver"}},
-  {"name":"Neal Harvey","gender":"male","company":"Pyramax","id":47,"category":{"id":2,"name":"Silver"}},
-  {"name":"Nola Miles","gender":"female","company":"Sonique","id":48,"category":{"id":2,"name":"Silver"}},
-  {"name":"Herring Pierce","gender":"male","company":"Geeketron","id":49,"category":{"id":2,"name":"Silver"}},
-  {"name":"Shelley Rodriquez","gender":"female","company":"Bostonic","id":50,"category":{"id":2,"name":"Silver"}},
-  {"name":"Cora Chase","gender":"female","company":"Isonus","id":51,"category":{"id":2,"name":"Silver"}},
-  {"name":"Mckay Santos","gender":"male","company":"Amtas","id":52,"category":{"id":2,"name":"Silver"}},
-  {"name":"Hilda Crane","gender":"female","company":"Jumpstack","id":53,"category":{"id":2,"name":"Silver"}},
-  {"name":"Jeanne Lindsay","gender":"female","company":"Genesynk","id":54,"category":{"id":2,"name":"Silver"}},
-  {"name":"Frye Sharpe","gender":"male","company":"Eplode","id":55,"category":{"id":2,"name":"Silver"}},
-  {"name":"Velma Fry","gender":"female","company":"Ronelon","id":56,"category":{"id":2,"name":"Silver"}},
-  {"name":"Reyna Espinoza","gender":"female","company":"Prismatic","id":57,"category":{"id":2,"name":"Silver"}},
-  {"name":"Spencer Sloan","gender":"male","company":"Comverges","id":58,"category":{"id":2,"name":"Silver"}},
-  {"name":"Graham Marsh","gender":"male","company":"Medifax","id":59,"category":{"id":2,"name":"Silver"}},
-  {"name":"Hale Boone","gender":"male","company":"Digial","id":60,"category":{"id":2,"name":"Silver"}},
-  {"name":"Wiley Hubbard","gender":"male","company":"Zensus","id":61,"category":{"id":2,"name":"Silver"}},
-  {"name":"Blackburn Drake","gender":"male","company":"Frenex","id":62,"category":{"id":2,"name":"Silver"}},
-  {"name":"Franco Hunter","gender":"male","company":"Rockabye","id":63,"category":{"id":2,"name":"Silver"}},
-  {"name":"Barnett Case","gender":"male","company":"Norali","id":64,"category":{"id":2,"name":"Silver"}},
-  {"name":"Alexander Foley","gender":"male","company":"Geekosis","id":65,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Lynette Stein","gender":"female","company":"Macronaut","id":66,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Anthony Joyner","gender":"male","company":"Senmei","id":67,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Garrett Brennan","gender":"male","company":"Bluegrain","id":68,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Betsy Horton","gender":"female","company":"Zilla","id":69,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Patton Small","gender":"male","company":"Genmex","id":70,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Lakisha Huber","gender":"female","company":"Insource","id":71,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Lindsay Avery","gender":"female","company":"Unq","id":72,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Ayers Hood","gender":"male","company":"Accuprint","id":73,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Torres Durham","gender":"male","company":"Uplinx","id":74,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Vincent Hernandez","gender":"male","company":"Talendula","id":75,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Baird Ryan","gender":"male","company":"Aquasseur","id":76,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Georgia Mercer","gender":"female","company":"Skyplex","id":77,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Francesca Elliott","gender":"female","company":"Nspire","id":78,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Lyons Peters","gender":"male","company":"Quinex","id":79,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Kristi Brewer","gender":"female","company":"Oronoko","id":80,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Tonya Bray","gender":"female","company":"Insuron","id":81,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Valenzuela Huff","gender":"male","company":"Applideck","id":82,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Tiffany Anderson","gender":"female","company":"Zanymax","id":83,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Jerri King","gender":"female","company":"Eventex","id":84,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Rocha Meadows","gender":"male","company":"Goko","id":85,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Marcy Green","gender":"female","company":"Pharmex","id":86,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Kirk Cross","gender":"male","company":"Portico","id":87,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Hattie Mullen","gender":"female","company":"Zilencio","id":88,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Deann Bridges","gender":"female","company":"Equitox","id":89,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Chaney Roach","gender":"male","company":"Qualitern","id":90,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Consuelo Dickson","gender":"female","company":"Poshome","id":91,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Billie Rowe","gender":"female","company":"Cemention","id":92,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Bean Donovan","gender":"male","company":"Mantro","id":93,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Lancaster Patel","gender":"male","company":"Krog","id":94,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Rosa Dyer","gender":"female","company":"Netility","id":95,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Christine Compton","gender":"female","company":"Bleeko","id":96,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Milagros Finch","gender":"female","company":"Handshake","id":97,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Ericka Alvarado","gender":"female","company":"Lyrichord","id":98,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Sylvia Sosa","gender":"female","company":"Circum","id":99,"category":{"id":3,"name":"Bronze"}},
-  {"name":"Humphrey Curtis","gender":"male","company":"Corepan","id":100,"category":{"id":3,"name":"Bronze"}}
-]

package/src/demos/examples/data/users.csv

@@ -1,5 +0,0 @@
-First Name,Last Name,Age,User Type
-John,Doe,20,Student
-Bob,Smith,33,Assistant Teacher
-Jane,Doe,21,Student
-Robert,Ken,42,Teacher

package/src/demos/examples/editor-ng-select.component.ts

@@ -1,38 +0,0 @@
-import { Component } from '@angular/core';
-import { Subject } from 'rxjs';
-
-// the appendTo="body" (necessary for SlickGrid filter) requires the body to be position relative like so
-// <body style="position: relative">
-@Component({
-  template: ` <ng-select
-    class="no-style-select"
-    [items]="collection"
-    autofocus
-    bindValue="id"
-    bindLabel="name"
-    appendTo="body"
-    [clearable]="false"
-    (change)="onChange($event)"
-    [(ngModel)]="selectedId"
-  >
-    <ng-template ng-label-tmp ng-option-tmp let-item="item">
-      {{ item?.name }}
-    </ng-template>
-  </ng-select>`,
-  standalone: false,
-})
-export class EditorNgSelectComponent {
-  selectedId = '';
-  selectedItem: any;
-  collection?: any[]; // this will be filled by the collection of your column definition
-  onItemChanged = new Subject<any>(); // object
-
-  onChange(item: any) {
-    this.selectedItem = item;
-    this.onItemChanged.next(item);
-  }
-
-  focus() {
-    // do a focus
-  }
-}

package/src/demos/examples/example01.component.html

@@ -1,48 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    Example 1: Basic Grids
-    <span class="float-end">
-      <a
-        style="font-size: 18px"
-        target="_blank"
-        href="https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/example01.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle">
-    Basic Grids with fixed sizes (800 x 225) set by "gridHeight" &amp; "gridWidth"
-    <ul>
-      <li><a href="https://ghiscoding.gitbook.io/angular-slickgrid/getting-started/quick-start" target="_blank">Wiki HOWTO link</a></li>
-    </ul>
-  </div>
-
-  <h3>
-    <div class="column">
-      <span class="mr-3">Grid 1</span>
-      <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="toggleDarkModeGrid1()" data-test="toggle-dark-mode">
-        <i class="mdi mdi-theme-light-dark"></i>
-        <span>Toggle Dark Mode</span>
-      </button>
-    </div>
-  </h3>
-
-  <div class="grid-container1">
-    <angular-slickgrid
-      gridId="grid1"
-      [columns]="columnDefinitions1"
-      [options]="gridOptions1"
-      [dataset]="dataset1"
-      (onAngularGridCreated)="angularGridReady1($event.detail)"
-    >
-    </angular-slickgrid>
-  </div>
-
-  <hr />
-
-  <h3>Grid 2 <small>(with local Pagination)</small></h3>
-  <div class="grid-container">
-    <angular-slickgrid gridId="grid2" [columns]="columnDefinitions2" [options]="gridOptions2" [dataset]="dataset2"> </angular-slickgrid>
-  </div>
-</div>

package/src/demos/examples/example01.component.ts

@@ -1,109 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Column, GridOption, Formatters, AngularGridInstance } from '../../library';
-
-import { zeroPadding } from './utilities';
-
-const NB_ITEMS = 995;
-
-@Component({
-  templateUrl: './example01.component.html',
-  standalone: false,
-})
-export class Example1Component implements OnDestroy, OnInit {
-  private _darkModeGrid1 = false;
-  angularGrid1!: AngularGridInstance;
-  columnDefinitions1: Column[] = [];
-  columnDefinitions2: Column[] = [];
-  gridOptions1!: GridOption;
-  gridOptions2!: GridOption;
-  dataset1!: any[];
-  dataset2!: any[];
-
-  ngOnInit(): void {
-    this.prepareGrid();
-  }
-
-  ngOnDestroy() {
-    document.querySelector('.panel-wm-content')!.classList.remove('dark-mode');
-    document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'light';
-  }
-
-  angularGridReady1(angularGrid: AngularGridInstance) {
-    this.angularGrid1 = angularGrid;
-  }
-
-  isBrowserDarkModeEnabled() {
-    return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
-  }
-
-  prepareGrid() {
-    this.columnDefinitions1 = [
-      { id: 'title', name: 'Title', field: 'title', sortable: true },
-      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true },
-      { id: '%', name: '% Complete', field: 'percentComplete', sortable: true },
-      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso },
-      { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso },
-      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true },
-    ];
-    this._darkModeGrid1 = this.isBrowserDarkModeEnabled();
-    this.gridOptions1 = {
-      darkMode: this._darkModeGrid1,
-      enableAutoResize: false,
-      enableSorting: true,
-      gridHeight: 225,
-      gridWidth: 800,
-    };
-
-    // copy the same Grid Options and Column Definitions to 2nd grid
-    // but also add Pagination in this grid
-    this.columnDefinitions2 = this.columnDefinitions1;
-    this.gridOptions2 = {
-      ...this.gridOptions1,
-      ...{
-        darkMode: false,
-        enablePagination: true,
-        pagination: {
-          pageSizes: [5, 10, 20, 25, 50],
-          pageSize: 5,
-        },
-      },
-    };
-
-    // mock some data (different in each dataset)
-    this.dataset1 = this.mockData(NB_ITEMS);
-    this.dataset2 = this.mockData(NB_ITEMS);
-  }
-
-  mockData(count: number) {
-    // mock a dataset
-    const mockDataset = [];
-    for (let i = 0; i < count; i++) {
-      const randomYear = 2000 + Math.floor(Math.random() * 10);
-      const randomMonth = Math.floor(Math.random() * 11);
-      const randomDay = Math.floor(Math.random() * 29);
-      const randomPercent = Math.round(Math.random() * 100);
-
-      mockDataset[i] = {
-        id: i,
-        title: 'Task ' + i,
-        duration: Math.round(Math.random() * 100) + '',
-        percentComplete: randomPercent,
-        start: `${zeroPadding(randomYear)}-${zeroPadding(randomMonth + 1)}-${zeroPadding(randomDay)}`,
-        finish: `${zeroPadding(randomYear + 1)}-${zeroPadding(randomMonth + 1)}-${zeroPadding(randomDay)}`,
-        effortDriven: i % 5 === 0,
-      };
-    }
-
-    return mockDataset;
-  }
-
-  toggleDarkModeGrid1() {
-    this._darkModeGrid1 = !this._darkModeGrid1;
-    if (this._darkModeGrid1) {
-      document.querySelector('.grid-container1')?.classList.add('dark-mode');
-    } else {
-      document.querySelector('.grid-container1')?.classList.remove('dark-mode');
-    }
-    this.angularGrid1.slickGrid?.setOptions({ darkMode: this._darkModeGrid1 });
-  }
-}

package/src/demos/examples/example02.component.html

@@ -1,45 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    Example 2: Grid with Formatters
-    <span class="float-end">
-      <a
-        style="font-size: 18px"
-        target="_blank"
-        href="https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-formatter.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle">
-    Grid with Custom and/or included Slickgrid Formatters (<a
-      href="https://ghiscoding.gitbook.io/angular-slickgrid/column-functionalities/formatters"
-      target="_blank"
-      >Wiki docs</a
-    >).
-    <ul>
-      <li>The 2 last columns are using Custom Formatters</li>
-      <ul>
-        <li>The "Completed" column uses a the "onCellClick" event and a formatter to simulate a toggle action</li>
-      </ul>
-      <li>
-        Support Excel Copy Buffer (SlickGrid Copy Manager Plugin), you can use it by simply enabling "enableExcelCopyBuffer" flag. Note that
-        it will only evaluate Formatter when the "exportWithFormatter" flag is enabled (through "ExportOptions" or the column definition)
-      </li>
-      <li>This example also has auto-resize enabled, and we also demo how you can pause the resizer if you wish to</li>
-    </ul>
-  </div>
-
-  <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="togglePauseResizer()">
-    Pause auto-resize: <b>{{ resizerPaused }}</b>
-  </button>
-
-  <angular-slickgrid
-    gridId="grid2"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [dataset]="dataset"
-    (onAngularGridCreated)="angularGridReady($event.detail)"
-  >
-  </angular-slickgrid>
-</div>

package/src/demos/examples/example02.component.ts

@@ -1,218 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { AngularGridInstance, Column, Formatter, Formatters, GridOption } from '../../library';
-
-interface DataItem {
-  id: number;
-  title: string;
-  duration: string;
-  percentComplete: number;
-  percentComplete2: number;
-  start: Date;
-  finish: Date;
-  effortDriven: boolean;
-  phone: string;
-  completed: number;
-}
-
-// create my custom Formatter with the Formatter type
-const myCustomCheckmarkFormatter: Formatter<DataItem> = (_row, _cell, value) => {
-  // you can return a string of a object (of type FormatterResultObject), the 2 types are shown below
-  return value
-    ? `<i class="mdi mdi-fire red" aria-hidden="true"></i>`
-    : { text: '<i class="mdi mdi-snowflake" aria-hidden="true"></i>', addClasses: 'lightblue', toolTip: 'Freezing' };
-};
-
-const customEnableButtonFormatter: Formatter<DataItem> = (_row: number, _cell: number, value: any) => {
-  return `<span style="margin-left: 5px">
-      <button class="btn btn-xs btn-default btn-icon">
-        <i class="mdi ${value ? 'mdi-check-circle' : 'mdi-circle'}" style="color: ${value ? 'black' : 'lavender'}"></i>
-      </button>
-    </span>`;
-};
-
-@Component({
-  templateUrl: './example02.component.html',
-  standalone: false,
-})
-export class Example2Component implements OnInit {
-  columnDefinitions: Column<DataItem>[] = [];
-  gridOptions!: GridOption;
-  dataset!: any[];
-  angularGrid!: AngularGridInstance;
-  resizerPaused = false;
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      { id: 'title', name: 'Title', field: 'title', sortable: true, width: 70 },
-      {
-        id: 'phone',
-        name: 'Phone Number using mask',
-        field: 'phone',
-        sortable: true,
-        type: 'number',
-        minWidth: 100,
-        formatter: Formatters.mask,
-        params: { mask: '(000) 000-0000' },
-      },
-      {
-        id: 'duration',
-        name: 'Duration (days)',
-        field: 'duration',
-        formatter: Formatters.decimal,
-        params: { minDecimal: 1, maxDecimal: 2 },
-        sortable: true,
-        type: 'number',
-        minWidth: 90,
-        exportWithFormatter: true,
-      },
-      {
-        id: 'complete',
-        name: '% Complete',
-        field: 'percentComplete',
-        formatter: Formatters.percentCompleteBar,
-        type: 'number',
-        sortable: true,
-        minWidth: 100,
-      },
-      {
-        id: 'percent2',
-        name: '% Complete',
-        field: 'percentComplete2',
-        formatter: Formatters.progressBar,
-        type: 'number',
-        sortable: true,
-        minWidth: 100,
-      },
-      {
-        id: 'start',
-        name: 'Start',
-        field: 'start',
-        formatter: Formatters.dateIso,
-        sortable: true,
-        type: 'date',
-        minWidth: 90,
-        exportWithFormatter: true,
-      },
-      {
-        id: 'finish',
-        name: 'Finish',
-        field: 'finish',
-        formatter: Formatters.dateIso,
-        sortable: true,
-        type: 'date',
-        minWidth: 90,
-        exportWithFormatter: true,
-      },
-      {
-        id: 'effort-driven',
-        name: 'Effort Driven',
-        field: 'effortDriven',
-        formatter: myCustomCheckmarkFormatter,
-        type: 'number',
-        sortable: true,
-        minWidth: 100,
-      },
-      {
-        id: 'completed',
-        name: 'Completed',
-        field: 'completed',
-        type: 'number',
-        sortable: true,
-        minWidth: 100,
-        formatter: customEnableButtonFormatter,
-        onCellClick: (e, args) => {
-          this.toggleCompletedProperty(args && args.dataContext);
-        },
-      },
-    ];
-
-    this.gridOptions = {
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10,
-      },
-      enableAutoResize: true,
-      enableCellNavigation: true,
-      showCustomFooter: true, // display some metrics in the bottom custom footer
-      customFooterOptions: {
-        // optionally display some text on the left footer container
-        leftFooterText: 'custom footer text',
-        hideTotalItemCount: true,
-        hideLastUpdateTimestamp: true,
-      },
-
-      // you customize all formatter at once certain options through "formatterOptions" in the Grid Options
-      // or independently through the column definition "params", the option names are the same
-      /*
-      formatterOptions: {
-        dateSeparator: '.',
-        decimalSeparator: ',',
-        displayNegativeNumberWithParentheses: true,
-        minDecimal: 0,
-        maxDecimal: 2,
-        thousandSeparator: '_'
-      },
-      */
-
-      // when using the ExcelCopyBuffer, you can see what the selection range is
-      enableExcelCopyBuffer: true,
-      // excelCopyBufferOptions: {
-      //   onCopyCells: (e, args: { ranges: SelectedRange[] }) => console.log('onCopyCells', args.ranges),
-      //   onPasteCells: (e, args: { ranges: SelectedRange[] }) => console.log('onPasteCells', args.ranges),
-      //   onCopyCancelled: (e, args: { ranges: SelectedRange[] }) => console.log('onCopyCancelled', args.ranges),
-      // }
-    };
-
-    // mock a dataset
-    const tmpData = [];
-    for (let i = 0; i < 500; i++) {
-      const randomYear = 2000 + Math.floor(Math.random() * 10);
-      const randomMonth = Math.floor(Math.random() * 11);
-      const randomDay = Math.floor(Math.random() * 29);
-      const randomPercent = Math.round(Math.random() * 100);
-
-      tmpData[i] = {
-        id: i,
-        title: 'Task ' + i,
-        phone: this.generatePhoneNumber(),
-        duration: i % 33 === 0 ? null : Math.random() * 100 + '',
-        percentComplete: randomPercent,
-        percentComplete2: randomPercent,
-        percentCompleteNumber: randomPercent,
-        start: new Date(randomYear, randomMonth, randomDay),
-        finish: new Date(randomYear, randomMonth + 1, randomDay),
-        effortDriven: i % 5 === 0,
-      };
-    }
-    this.dataset = tmpData;
-  }
-
-  generatePhoneNumber(): string {
-    let phone = '';
-    for (let i = 0; i < 10; i++) {
-      phone += Math.round(Math.random() * 9) + '';
-    }
-    return phone;
-  }
-
-  togglePauseResizer() {
-    this.resizerPaused = !this.resizerPaused;
-    this.angularGrid.resizerService.pauseResizer(this.resizerPaused);
-  }
-
-  toggleCompletedProperty(item: any) {
-    // toggle property
-    if (typeof item === 'object') {
-      item.completed = !item.completed;
-
-      // simulate a backend http call and refresh the grid row after delay
-      setTimeout(() => {
-        this.angularGrid.gridService.updateItemById(item.id, item, { highlightRow: false });
-      }, 250);
-    }
-  }
-}