angular-slickgrid 8.14.0 → 9.0.0

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

@@ -0,0 +1,245 @@
+[
+  "Afghanistan",
+  "Åland Islands",
+  "Albania",
+  "Algeria",
+  "American Samoa",
+  "AndorrA",
+  "Angola",
+  "Anguilla",
+  "Antarctica",
+  "Antigua and Barbuda",
+  "Argentina",
+  "Armenia",
+  "Aruba",
+  "Australia",
+  "Austria",
+  "Azerbaijan",
+  "Bahamas",
+  "Bahrain",
+  "Bangladesh",
+  "Barbados",
+  "Belarus",
+  "Belgium",
+  "Belize",
+  "Benin",
+  "Bermuda",
+  "Bhutan",
+  "Bolivia",
+  "Bosnia and Herzegovina",
+  "Botswana",
+  "Bouvet Island",
+  "Brazil",
+  "British Indian Ocean Territory",
+  "Brunei Darussalam",
+  "Bulgaria",
+  "Burkina Faso",
+  "Burundi",
+  "Cambodia",
+  "Cameroon",
+  "Canada",
+  "Cape Verde",
+  "Cayman Islands",
+  "Central African Republic",
+  "Chad",
+  "Chile",
+  "China",
+  "Christmas Island",
+  "Cocos (Keeling) Islands",
+  "Colombia",
+  "Comoros",
+  "Congo",
+  "Congo, The Democratic Republic of the",
+  "Cook Islands",
+  "Costa Rica",
+  "Cote D'Ivoire",
+  "Croatia",
+  "Cuba",
+  "Cyprus",
+  "Czech Republic",
+  "Denmark",
+  "Djibouti",
+  "Dominica",
+  "Dominican Republic",
+  "Ecuador",
+  "Egypt",
+  "El Salvador",
+  "Equatorial Guinea",
+  "Eritrea",
+  "Estonia",
+  "Ethiopia",
+  "Falkland Islands (Malvinas)",
+  "Faroe Islands",
+  "Fiji",
+  "Finland",
+  "France",
+  "French Guiana",
+  "French Polynesia",
+  "French Southern Territories",
+  "Gabon",
+  "Gambia",
+  "Georgia",
+  "Germany",
+  "Ghana",
+  "Gibraltar",
+  "Greece",
+  "Greenland",
+  "Grenada",
+  "Guadeloupe",
+  "Guam",
+  "Guatemala",
+  "Guernsey",
+  "Guinea",
+  "Guinea-Bissau",
+  "Guyana",
+  "Haiti",
+  "Heard Island and Mcdonald Islands",
+  "Holy See (Vatican City State)",
+  "Honduras",
+  "Hong Kong",
+  "Hungary",
+  "Iceland",
+  "India",
+  "Indonesia",
+  "Iran, Islamic Republic Of",
+  "Iraq",
+  "Ireland",
+  "Isle of Man",
+  "Israel",
+  "Italy",
+  "Jamaica",
+  "Japan",
+  "Jersey",
+  "Jordan",
+  "Kazakhstan",
+  "Kenya",
+  "Kiribati",
+  "Korea, Democratic People'S Republic of",
+  "Korea, Republic of",
+  "Kuwait",
+  "Kyrgyzstan",
+  "Lao People'S Democratic Republic",
+  "Latvia",
+  "Lebanon",
+  "Lesotho",
+  "Liberia",
+  "Libyan Arab Jamahiriya",
+  "Liechtenstein",
+  "Lithuania",
+  "Luxembourg",
+  "Macao",
+  "Macedonia, The Former Yugoslav Republic of",
+  "Madagascar",
+  "Malawi",
+  "Malaysia",
+  "Maldives",
+  "Mali",
+  "Malta",
+  "Marshall Islands",
+  "Martinique",
+  "Mauritania",
+  "Mauritius",
+  "Mayotte",
+  "Mexico",
+  "Micronesia, Federated States of",
+  "Moldova, Republic of",
+  "Monaco",
+  "Mongolia",
+  "Montserrat",
+  "Morocco",
+  "Mozambique",
+  "Myanmar",
+  "Namibia",
+  "Nauru",
+  "Nepal",
+  "Netherlands",
+  "Netherlands Antilles",
+  "New Caledonia",
+  "New Zealand",
+  "Nicaragua",
+  "Niger",
+  "Nigeria",
+  "Niue",
+  "Norfolk Island",
+  "Northern Mariana Islands",
+  "Norway",
+  "Oman",
+  "Pakistan",
+  "Palau",
+  "Palestinian Territory, Occupied",
+  "Panama",
+  "Papua New Guinea",
+  "Paraguay",
+  "Peru",
+  "Philippines",
+  "Pitcairn",
+  "Poland",
+  "Portugal",
+  "Puerto Rico",
+  "Qatar",
+  "Reunion",
+  "Romania",
+  "Russian Federation",
+  "RWANDA",
+  "Saint Helena",
+  "Saint Kitts and Nevis",
+  "Saint Lucia",
+  "Saint Pierre and Miquelon",
+  "Saint Vincent and the Grenadines",
+  "Samoa",
+  "San Marino",
+  "Sao Tome and Principe",
+  "Saudi Arabia",
+  "Senegal",
+  "Serbia and Montenegro",
+  "Seychelles",
+  "Sierra Leone",
+  "Singapore",
+  "Slovakia",
+  "Slovenia",
+  "Solomon Islands",
+  "Somalia",
+  "South Africa",
+  "South Georgia and the South Sandwich Islands",
+  "Spain",
+  "Sri Lanka",
+  "Sudan",
+  "Suriname",
+  "Svalbard and Jan Mayen",
+  "Swaziland",
+  "Sweden",
+  "Switzerland",
+  "Syrian Arab Republic",
+  "Taiwan, Province of China",
+  "Tajikistan",
+  "Tanzania, United Republic of",
+  "Thailand",
+  "Timor-Leste",
+  "Togo",
+  "Tokelau",
+  "Tonga",
+  "Trinidad and Tobago",
+  "Tunisia",
+  "Turkey",
+  "Turkmenistan",
+  "Turks and Caicos Islands",
+  "Tuvalu",
+  "Uganda",
+  "Ukraine",
+  "United Arab Emirates",
+  "United Kingdom",
+  "United States",
+  "United States Minor Outlying Islands",
+  "Uruguay",
+  "Uzbekistan",
+  "Vanuatu",
+  "Venezuela",
+  "Viet Nam",
+  "Virgin Islands, British",
+  "Virgin Islands, U.S.",
+  "Wallis and Futuna",
+  "Western Sahara",
+  "Yemen",
+  "Zambia",
+  "Zimbabwe"
+]

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

@@ -0,0 +1,102 @@
+[
+  {"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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,48 @@
+<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

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,45 @@
+<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>