angular-slickgrid 9.0.0 → 9.0.2

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

@@ -1,453 +0,0 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { ExcelExportService } from '@slickgrid-universal/excel-export';
-
-import {
-  addWhiteSpaces,
-  AngularGridInstance,
-  Aggregators,
-  Column,
-  decimalFormatted,
-  Filters,
-  findItemInTreeStructure,
-  Formatter,
-  Formatters,
-  GridOption,
-  isNumber,
-  SlickDataView,
-} from '../../library';
-
-@Component({
-  templateUrl: './example28.component.html',
-  styleUrls: ['example28.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  standalone: false,
-})
-export class Example28Component implements OnInit {
-  angularGrid!: AngularGridInstance;
-  dataViewObj: any;
-  gridObj: any;
-  gridOptions!: GridOption;
-  columnDefinitions!: Column[];
-  datasetHierarchical: any[] = [];
-  isExcludingChildWhenFiltering = false;
-  isAutoApproveParentItemWhenTreeColumnIsValid = true;
-  isAutoRecalcTotalsOnFilterChange = false;
-  isRemoveLastInsertedPopSongDisabled = true;
-  lastInsertedPopSongId: number | undefined;
-  searchString = '';
-
-  ngOnInit(): void {
-    // define the grid options & columns and then create the grid itself
-    this.defineGrid();
-
-    // mock a dataset
-    this.datasetHierarchical = this.mockDataset();
-  }
-
-  defineGrid() {
-    this.columnDefinitions = [
-      {
-        id: 'file',
-        name: 'Files',
-        field: 'file',
-        width: 150,
-        formatter: this.treeFormatter,
-        filterable: true,
-        sortable: true,
-      },
-      {
-        id: 'dateModified',
-        name: 'Date Modified',
-        field: 'dateModified',
-        formatter: Formatters.dateIso,
-        type: 'dateUtc',
-        outputType: 'dateIso',
-        minWidth: 90,
-        exportWithFormatter: true,
-        filterable: true,
-        filter: { model: Filters.compoundDate },
-      },
-      {
-        id: 'description',
-        name: 'Description',
-        field: 'description',
-        minWidth: 90,
-        filterable: true,
-        sortable: true,
-      },
-      {
-        id: 'size',
-        name: 'Size',
-        field: 'size',
-        minWidth: 90,
-        type: 'number',
-        exportWithFormatter: true,
-        excelExportOptions: { autoDetectCellFormat: false },
-        filterable: true,
-        filter: { model: Filters.compoundInputNumber },
-
-        // Formatter option #1 (treeParseTotalFormatters)
-        // if you wish to use any of the GroupTotalFormatters (or even regular Formatters), we can do so with the code below
-        // use `treeTotalsFormatter` or `groupTotalsFormatter` to show totals in a Tree Data grid
-        // provide any regular formatters inside the params.formatters
-
-        // formatter: Formatters.treeParseTotals,
-        // treeTotalsFormatter: GroupTotalFormatters.sumTotalsBold,
-        // // groupTotalsFormatter: GroupTotalFormatters.sumTotalsBold,
-        // params: {
-        //   // we can also supply extra params for Formatters/GroupTotalFormatters like min/max decimals
-        //   groupFormatterSuffix: ' MB', minDecimal: 0, maxDecimal: 2,
-        // },
-
-        // OR option #2 (custom Formatter)
-        formatter: (_row, _cell, value, column, dataContext) => {
-          // parent items will a "__treeTotals" property (when creating the Tree and running Aggregation, it mutates all items, all extra props starts with "__" prefix)
-          const fieldId = column.field;
-
-          // Tree Totals, if exists, will be found under `__treeTotals` prop
-          if (dataContext?.__treeTotals !== undefined) {
-            const treeLevel = dataContext[this.gridOptions?.treeDataOptions?.levelPropName || '__treeLevel'];
-            const sumVal = dataContext?.__treeTotals?.['sum'][fieldId];
-            const avgVal = dataContext?.__treeTotals?.['avg'][fieldId];
-
-            if (avgVal !== undefined && sumVal !== undefined) {
-              // when found Avg & Sum, we'll display both
-              return isNaN(sumVal)
-                ? ''
-                : `<span class="text-primary bold">sum: ${decimalFormatted(sumVal, 0, 2)} MB</span> / <span class="avg-total">avg: ${decimalFormatted(avgVal, 0, 2)} MB</span> <span class="total-suffix">(${treeLevel === 0 ? 'total' : 'sub-total'})</span>`;
-            } else if (sumVal !== undefined) {
-              // or when only Sum is aggregated, then just show Sum
-              return isNaN(sumVal)
-                ? ''
-                : `<span class="text-primary bold">sum: ${decimalFormatted(sumVal, 0, 2)} MB</span> <span class="total-suffix">(${treeLevel === 0 ? 'total' : 'sub-total'})</span>`;
-            }
-          }
-          // reaching this line means it's a regular dataContext without totals, so regular formatter output will be used
-          return !isNumber(value) ? '' : `${value} MB`;
-        },
-      },
-    ];
-
-    this.gridOptions = {
-      autoResize: {
-        autoHeight: false,
-        container: '#demo-container',
-        rightPadding: 10,
-      },
-      enableAutoSizeColumns: true,
-      enableAutoResize: true,
-      enableExcelExport: true,
-      excelExportOptions: {
-        exportWithFormatter: true,
-        sanitizeDataExport: true,
-      },
-      externalResources: [new ExcelExportService()],
-      enableFiltering: true,
-      enableTreeData: true, // you must enable this flag for the filtering & sorting to work as expected
-      multiColumnSort: false, // multi-column sorting is not supported with Tree Data, so you need to disable it
-      treeDataOptions: {
-        columnId: 'file',
-        childrenPropName: 'files',
-        excludeChildrenWhenFilteringTree: this.isExcludingChildWhenFiltering, // defaults to false
-
-        // skip any other filter criteria(s) if the column holding the Tree (file) passes its own filter criteria
-        // (e.g. filtering with "Files = music AND Size > 7", the row "Music" and children will only show up when this flag is enabled
-        // this flag only works with the other flag set to `excludeChildrenWhenFilteringTree: false`
-        autoApproveParentItemWhenTreeColumnIsValid: this.isAutoApproveParentItemWhenTreeColumnIsValid,
-
-        // you can also optionally sort by a different column and/or change sort direction
-        // initialSort: {
-        //   columnId: 'file',
-        //   direction: 'DESC'
-        // },
-
-        // Aggregators are also supported and must always be an array even when single one is provided
-        // Note: only 5 are currently supported: Avg, Sum, Min, Max and Count
-        // Note 2: also note that Avg Aggregator will automatically give you the "avg", "count" and "sum" so if you need these 3 then simply calling Avg will give you better perf
-        // aggregators: [new Aggregators.Sum('size')]
-        aggregators: [
-          new Aggregators.Avg('size'),
-          new Aggregators.Sum('size') /* , new Aggregators.Min('size'), new Aggregators.Max('size') */,
-        ],
-
-        // should we auto-recalc Tree Totals (when using Aggregators) anytime a filter changes
-        // it is disabled by default for perf reason, by default it will only calculate totals on first load
-        autoRecalcTotalsOnFilterChange: this.isAutoRecalcTotalsOnFilterChange,
-
-        // add optional debounce time to limit number of execution that recalc is called, mostly useful on large dataset
-        // autoRecalcTotalsDebounce: 250
-      },
-      // change header/cell row height
-      headerRowHeight: 35,
-      rowHeight: 33,
-      showCustomFooter: true,
-
-      // we can also preset collapsed items via Grid Presets (parentId: 4 => is the "pdf" folder)
-      presets: {
-        treeData: { toggledItems: [{ itemId: 4, isCollapsed: true }] },
-      },
-      // use Material Design SVG icons
-      contextMenu: {
-        iconCollapseAllGroupsCommand: 'mdi mdi-arrow-collapse',
-        iconExpandAllGroupsCommand: 'mdi mdi-arrow-expand',
-        iconClearGroupingCommand: 'mdi mdi-close',
-        iconCopyCellValueCommand: 'mdi mdi-content-copy',
-        iconExportCsvCommand: 'mdi mdi-download',
-        iconExportExcelCommand: 'mdi mdi-file-excel-outline',
-        iconExportTextDelimitedCommand: 'mdi mdi-download',
-      },
-      gridMenu: {
-        iconCssClass: 'mdi mdi-menu',
-        iconClearAllFiltersCommand: 'mdi mdi-filter-remove-outline',
-        iconClearAllSortingCommand: 'mdi mdi-swap-vertical',
-        iconExportCsvCommand: 'mdi mdi-download',
-        iconExportExcelCommand: 'mdi mdi-file-excel-outline',
-        iconExportTextDelimitedCommand: 'mdi mdi-download',
-        iconRefreshDatasetCommand: 'mdi mdi-sync',
-        iconToggleFilterCommand: 'mdi mdi-flip-vertical',
-        iconTogglePreHeaderCommand: 'mdi mdi-flip-vertical',
-      },
-      headerMenu: {
-        iconClearFilterCommand: 'mdi mdi mdi-filter-remove-outline',
-        iconClearSortCommand: 'mdi mdi-swap-vertical',
-        iconSortAscCommand: 'mdi mdi-sort-ascending',
-        iconSortDescCommand: 'mdi mdi-flip-v mdi-sort-descending',
-        iconColumnHideCommand: 'mdi mdi-close',
-      },
-    };
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-    this.gridObj = angularGrid.slickGrid;
-    this.dataViewObj = angularGrid.dataView;
-  }
-
-  changeAutoApproveParentItem() {
-    this.isAutoApproveParentItemWhenTreeColumnIsValid = !this.isAutoApproveParentItemWhenTreeColumnIsValid;
-    this.gridOptions.treeDataOptions!.autoApproveParentItemWhenTreeColumnIsValid = this.isAutoApproveParentItemWhenTreeColumnIsValid;
-    this.angularGrid.slickGrid.setOptions(this.gridOptions);
-    this.angularGrid.filterService.refreshTreeDataFilters();
-    return true;
-  }
-
-  changeAutoRecalcTotalsOnFilterChange() {
-    this.isAutoRecalcTotalsOnFilterChange = !this.isAutoRecalcTotalsOnFilterChange;
-    this.gridOptions.treeDataOptions!.autoRecalcTotalsOnFilterChange = this.isAutoRecalcTotalsOnFilterChange;
-    this.angularGrid.slickGrid?.setOptions(this.gridOptions);
-
-    // since it doesn't take current filters in consideration, we better clear them
-    this.angularGrid.filterService.clearFilters();
-    this.angularGrid.treeDataService.enableAutoRecalcTotalsFeature();
-    return true;
-  }
-
-  changeExcludeChildWhenFiltering() {
-    this.isExcludingChildWhenFiltering = !this.isExcludingChildWhenFiltering;
-    this.gridOptions.treeDataOptions!.excludeChildrenWhenFilteringTree = this.isExcludingChildWhenFiltering;
-    this.angularGrid.slickGrid.setOptions(this.gridOptions);
-    this.angularGrid.filterService.refreshTreeDataFilters();
-    return true;
-  }
-
-  clearSearch() {
-    this.searchString = '';
-    this.updateFilter();
-  }
-
-  searchStringChanged() {
-    this.updateFilter();
-  }
-
-  updateFilter() {
-    this.angularGrid.filterService.updateFilters([{ columnId: 'file', searchTerms: [this.searchString] }], true, false, true);
-  }
-
-  treeFormatter: Formatter = (_row, _cell, value, _columnDef, dataContext, grid) => {
-    const gridOptions = grid.getOptions();
-    const treeLevelPropName = (gridOptions.treeDataOptions && gridOptions.treeDataOptions.levelPropName) || '__treeLevel';
-    if (value === null || value === undefined || dataContext === undefined) {
-      return '';
-    }
-    const dataView = grid.getData<SlickDataView>();
-    const data = dataView.getItems();
-    const identifierPropName = dataView.getIdPropertyName() || 'id';
-    const idx = dataView.getIdxById(dataContext[identifierPropName]) as number;
-    const prefix = this.getFileIcon(value);
-    const treeLevel = dataContext[treeLevelPropName];
-    const exportIndentationLeadingChar = '.';
-
-    value = value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-    const spacer = `<span style="display:inline-block; width:${15 * treeLevel}px;"></span>`;
-    const indentSpacer = addWhiteSpaces(5 * treeLevel);
-
-    if (data[idx + 1]?.[treeLevelPropName] > data[idx][treeLevelPropName] || data[idx]['__hasChildren']) {
-      const folderPrefix = `<span class="mdi icon ${dataContext.__collapsed ? 'mdi-folder' : 'mdi-folder-open'}"></span>`;
-      if (dataContext.__collapsed) {
-        return `<span class="hidden">${exportIndentationLeadingChar}</span>${spacer}${indentSpacer} <span class="slick-group-toggle collapsed" level="${treeLevel}"></span>${folderPrefix} ${prefix} ${value}`;
-      } else {
-        return `<span class="hidden">${exportIndentationLeadingChar}</span>${spacer}${indentSpacer} <span class="slick-group-toggle expanded" level="${treeLevel}"></span>${folderPrefix} ${prefix} ${value}`;
-      }
-    } else {
-      return `<span class="hidden">${exportIndentationLeadingChar}</span>${spacer}${indentSpacer} <span class="slick-group-toggle" level="${treeLevel}"></span>${prefix} ${value}`;
-    }
-  };
-
-  getFileIcon(value: string) {
-    let prefix = '';
-    if (value.includes('.pdf')) {
-      prefix = '<span class="mdi icon mdi-file-pdf-outline"></span>';
-    } else if (value.includes('.txt')) {
-      prefix = '<span class="mdi icon mdi-file-document-outline"></span>';
-    } else if (value.includes('.xls')) {
-      prefix = '<span class="mdi icon mdi-file-excel-outline"></span>';
-    } else if (value.includes('.mp3')) {
-      prefix = '<span class="mdi icon mdi-file-music-outline"></span>';
-    }
-    return prefix;
-  }
-
-  /**
-   * A simple method to add a new item inside the first group that we find.
-   * After adding the item, it will sort by parent/child recursively
-   */
-  addNewFile() {
-    const newId = this.dataViewObj.getLength() + 50;
-
-    // find first parent object and add the new item as a child
-    const tmpDatasetHierarchical = [...this.datasetHierarchical];
-    const popFolderItem = findItemInTreeStructure(tmpDatasetHierarchical, (x) => x.file === 'pop', 'files');
-
-    if (popFolderItem && Array.isArray(popFolderItem.files)) {
-      popFolderItem.files.push({
-        id: newId,
-        file: `pop-${newId}.mp3`,
-        dateModified: new Date(),
-        size: newId + 3,
-      });
-      this.lastInsertedPopSongId = newId;
-      this.isRemoveLastInsertedPopSongDisabled = false;
-
-      // overwrite hierarchical dataset which will also trigger a grid sort and rendering
-      this.datasetHierarchical = tmpDatasetHierarchical;
-
-      // scroll into the position, after insertion cycle, where the item was added
-      setTimeout(() => {
-        const rowIndex = this.dataViewObj.getRowById(popFolderItem.id);
-        this.gridObj.scrollRowIntoView(rowIndex + 3);
-      }, 10);
-    }
-  }
-
-  deleteFile() {
-    const tmpDatasetHierarchical = [...this.datasetHierarchical];
-    const popFolderItem = findItemInTreeStructure(this.datasetHierarchical, (x) => x.file === 'pop', 'files');
-    const songItemFound = findItemInTreeStructure(this.datasetHierarchical, (x) => x.id === this.lastInsertedPopSongId, 'files');
-
-    if (popFolderItem && songItemFound) {
-      const songIdx = popFolderItem.files.findIndex((f: any) => f.id === songItemFound.id);
-      if (songIdx >= 0) {
-        popFolderItem.files.splice(songIdx, 1);
-        this.lastInsertedPopSongId = undefined;
-        this.isRemoveLastInsertedPopSongDisabled = true;
-
-        // overwrite hierarchical dataset which will also trigger a grid sort and rendering
-        this.datasetHierarchical = tmpDatasetHierarchical;
-      }
-    }
-  }
-
-  clearFilters() {
-    this.angularGrid.filterService.clearFilters();
-  }
-
-  collapseAll() {
-    this.angularGrid.treeDataService.toggleTreeDataCollapse(true);
-  }
-
-  expandAll() {
-    this.angularGrid.treeDataService.toggleTreeDataCollapse(false);
-  }
-
-  logHierarchicalStructure() {
-    console.log('exploded array', this.angularGrid.treeDataService.datasetHierarchical);
-  }
-
-  logFlatStructure() {
-    console.log('flat array', this.angularGrid.treeDataService.dataset);
-  }
-
-  mockDataset() {
-    return [
-      { id: 24, file: 'bucket-list.txt', dateModified: '2012-03-05T12:44:00.123Z', size: 0.5 },
-      { id: 18, file: 'something.txt', dateModified: '2015-03-03T03:50:00.123Z', size: 90 },
-      {
-        id: 21,
-        file: 'documents',
-        files: [
-          {
-            id: 2,
-            file: 'txt',
-            files: [
-              { id: 3, file: 'todo.txt', description: 'things to do someday maybe', dateModified: '2015-05-12T14:50:00.123Z', size: 0.7 },
-            ],
-          },
-          {
-            id: 4,
-            file: 'pdf',
-            files: [
-              { id: 22, file: 'map2.pdf', dateModified: '2015-07-21T08:22:00.123Z', size: 2.9 },
-              { id: 5, file: 'map.pdf', dateModified: '2015-05-21T10:22:00.123Z', size: 3.1 },
-              { id: 6, file: 'internet-bill.pdf', dateModified: '2015-05-12T14:50:00.123Z', size: 1.3 },
-              { id: 23, file: 'phone-bill.pdf', dateModified: '2015-05-01T07:50:00.123Z', size: 1.5 },
-            ],
-          },
-          { id: 9, file: 'misc', files: [{ id: 10, file: 'warranties.txt', dateModified: '2015-02-26T16:50:00.123Z', size: 0.4 }] },
-          { id: 7, file: 'xls', files: [{ id: 8, file: 'compilation.xls', dateModified: '2014-10-02T14:50:00.123Z', size: 2.3 }] },
-          { id: 55, file: 'unclassified.csv', dateModified: '2015-04-08T03:44:12.333Z', size: 0.25 },
-          { id: 56, file: 'unresolved.csv', dateModified: '2015-04-03T03:21:12.000Z', size: 0.79 },
-          { id: 57, file: 'zebra.dll', dateModified: '2016-12-08T13:22:12.432', size: 1.22 },
-        ],
-      },
-      {
-        id: 11,
-        file: 'music',
-        files: [
-          {
-            id: 12,
-            file: 'mp3',
-            files: [
-              { id: 16, file: 'rock', files: [{ id: 17, file: 'soft.mp3', dateModified: '2015-05-13T13:50:00Z', size: 98 }] },
-              {
-                id: 14,
-                file: 'pop',
-                files: [
-                  { id: 15, file: 'theme.mp3', description: 'Movie Theme Song', dateModified: '2015-03-01T17:05:00Z', size: 47 },
-                  { id: 25, file: 'song.mp3', description: 'it is a song...', dateModified: '2016-10-04T06:33:44Z', size: 6.3 },
-                ],
-              },
-              { id: 33, file: 'other', files: [] },
-            ],
-          },
-        ],
-      },
-      {
-        id: 26,
-        file: 'recipes',
-        description: 'Cake Recipes',
-        dateModified: '2012-03-05T12:44:00.123Z',
-        files: [
-          { id: 29, file: 'cheesecake', description: 'strawberry cheesecake', dateModified: '2012-04-04T13:52:00.123Z', size: 0.2 },
-          {
-            id: 30,
-            file: 'chocolate-cake',
-            description: 'tasty sweet chocolate cake',
-            dateModified: '2012-05-05T09:22:00.123Z',
-            size: 0.2,
-          },
-          { id: 31, file: 'coffee-cake', description: 'chocolate coffee cake', dateModified: '2012-01-01T08:08:48.123Z', size: 0.2 },
-        ],
-      },
-    ];
-  }
-}

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

@@ -1,30 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    Example 29: Custom header & footer Templates
-    <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-header-footer.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle">
-    Basic Grid with templates for custom headers and footers
-    <ul>
-      <li>Pass in custom templates to be rendered at predefined header and footer destinations</li>
-    </ul>
-  </div>
-
-  <angular-slickgrid gridId="grid1" [columns]="columnDefinitions" [options]="gridOptions" [dataset]="dataset">
-    <ng-template #slickgridHeader>
-      <h3>Grid with header and footer slot</h3>
-    </ng-template>
-
-    <ng-template #slickgridFooter>
-      <custom-footer></custom-footer>
-    </ng-template>
-  </angular-slickgrid>
-</div>

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

@@ -1,70 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Column, GridOption, Formatters } from '../../library';
-
-const NB_ITEMS = 995;
-
-@Component({
-  template: `<button (click)="clickMe()">I'm a button from an Angular component (click me)</button>
-    <div *ngIf="clickedTimes">You've clicked me {{ clickedTimes }} time(s)</div>`,
-  selector: 'custom-footer',
-  standalone: false,
-})
-export class CustomFooterComponent {
-  clickedTimes = 0;
-
-  clickMe() {
-    this.clickedTimes++;
-  }
-}
-
-@Component({
-  templateUrl: './example29.component.html',
-  standalone: false,
-})
-export class Example29Component implements OnInit {
-  columnDefinitions: Column[] = [];
-  gridOptions!: GridOption;
-  dataset!: any[];
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      { 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.gridOptions = {
-      enableAutoResize: false,
-      enableSorting: true,
-      gridHeight: 225,
-      gridWidth: 800,
-    };
-
-    this.dataset = 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: new Date(randomYear, randomMonth + 1, randomDay),
-        finish: new Date(randomYear + 1, randomMonth + 1, randomDay),
-        effortDriven: i % 5 === 0,
-      };
-    }
-
-    return mockDataset;
-  }
-}

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

@@ -1,116 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    Example 30: Composite Editor Modal
-    <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-composite-editor.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-    <button class="ms-2 btn btn-outline-secondary btn-sm btn-icon" type="button" data-test="toggle-subtitle" (click)="toggleSubTitle()">
-      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
-    </button>
-    <button class="btn btn-outline-secondary btn-sm" (click)="toggleDarkMode()" data-test="toggle-dark-mode">
-      <span class="mdi mdi-theme-light-dark"></span>
-      <span>Toggle Dark Mode</span>
-    </button>
-  </h2>
-  <div class="subtitle">
-    Composite Editor allows you to Create, Clone, Edit, Mass Update & Mass Selection Changes inside a nice Modal Window.
-    <br />The modal is simply populated by looping through your column definition list and also uses a lot of the same logic as inline
-    editing (see
-    <a href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/composite-editor-modal" target="_blank"
-      >Composite Editor - Wiki</a
-    >.)
-  </div>
-
-  <div class="mb-2">
-    <div class="btn-group btn-group-sm" role="group" aria-label="Basic Editing Commands">
-      <button type="button" class="btn btn-outline-secondary btn-icon" data-test="toggle-readonly-btn" (click)="toggleGridEditReadonly()">
-        <i class="mdi mdi-table-edit"></i> Toggle Edit/Readonly Grid
-      </button>
-      <button type="button" class="btn btn-outline-secondary btn-icon" data-test="undo-last-edit-btn" (click)="undoLastEdit()">
-        <i class="mdi mdi-undo"></i> Undo Last Edit
-      </button>
-      <button type="button" class="btn btn-outline-secondary btn-icon" data-test="undo-open-editor-btn" (click)="undoLastEdit(true)">
-        <i class="mdi mdi-undo"></i> Undo Last Edit &amp; Open Editor
-      </button>
-      <button type="button" class="btn btn-outline-secondary btn-icon" data-test="undo-all-edits-btn" (click)="undoAllEdits()">
-        <i class="mdi mdi-history"></i> Undo All Edits
-      </button>
-      <button type="button" class="btn btn-outline-secondary btn-icon" data-test="save-all-btn" (click)="saveAll()">
-        <span>Save All</span>
-      </button>
-    </div>
-  </div>
-
-  <div class="mb-3">
-    <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
-      <button
-        type="button"
-        class="btn btn-outline-secondary btn-icon"
-        data-test="open-modal-create-btn"
-        (click)="openCompositeModal('create')"
-        [disabled]="isCompositeDisabled"
-      >
-        <i class="mdi mdi-shape-square-plus"></i> Item Create
-      </button>
-      <button
-        type="button"
-        class="btn btn-outline-secondary btn-icon"
-        data-test="open-modal-clone-btn"
-        (click)="openCompositeModal('clone')"
-        [disabled]="isCompositeDisabled"
-      >
-        <i class="mdi mdi-content-copy"></i> Item Clone
-      </button>
-      <button
-        type="button"
-        class="btn btn-outline-secondary btn-icon"
-        data-test="open-modal-edit-btn"
-        (click)="openCompositeModal('edit')"
-        [disabled]="isCompositeDisabled"
-      >
-        <i class="mdi mdi-pencil"></i> Item Edit
-      </button>
-      <button
-        type="button"
-        class="btn btn-outline-secondary btn-icon"
-        data-test="open-modal-mass-update-btn"
-        (click)="openCompositeModal('mass-update')"
-        [disabled]="isCompositeDisabled"
-      >
-        <i class="mdi mdi-pencil-box-multiple-outline"></i> Mass Update
-      </button>
-      <button
-        type="button"
-        class="btn btn-outline-secondary btn-icon"
-        data-test="open-modal-mass-selection-btn"
-        (click)="openCompositeModal('mass-selection')"
-        [disabled]="isMassSelectionDisabled"
-      >
-        <i class="mdi mdi-order-bool-ascending-variant"></i> Update Selected
-      </button>
-    </div>
-  </div>
-
-  <angular-slickgrid
-    gridId="grid30"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [dataset]="dataset"
-    (onAngularGridCreated)="angularGridReady($event.detail)"
-    (onBeforeEditCell)="handleOnBeforeEditCell($event.detail.eventData, $event.detail.args)"
-    (onCellChange)="handleOnCellChange($event.detail.eventData, $event.detail.args)"
-    (onClick)="handleOnCellClicked($event.detail.eventData, $event.detail.args)"
-    (onCompositeEditorChange)="handleOnCompositeEditorChange($event.detail.eventData, $event.detail.args)"
-    (onItemsDeleted)="handleItemDeleted($event.detail)"
-    (onGridStateChanged)="handleOnGridStateChanged($event.detail)"
-    (onRowsOrCountChanged)="handleReRenderUnsavedStyling()"
-    (onValidationError)="handleValidationError($event.detail.eventData, $event.detail.args)"
-  >
-  </angular-slickgrid>
-</div>