fix: fixing few small issues in Examples after adding Cypress E2E tests

src/examples/slickgrid/example10.tsx

@@ -11,7 +11,7 @@ interface State {
   columnDefinitions1?: Column[];
   columnDefinitions2?: Column[];
   selectedTitle: string;
-  selectedTitles: any[];
+  selectedTitles: string;
 }
 export default class Example10 extends React.Component<Props, State> {
   title = 'Example 10: Multiple Grids with Row Selection';
@@ -41,7 +41,7 @@ export default class Example10 extends React.Component<Props, State> {
       dataset1: [],
       dataset2: [],
       selectedTitle: '',
-      selectedTitles: [],
+      selectedTitles: '',
     };
   }
 
@@ -266,7 +266,6 @@ export default class Example10 extends React.Component<Props, State> {
   // IMPORTANT, the Pagination MUST BE CREATED on initial page load before you can start toggling it
   // Basically you cannot toggle a Pagination that doesn't exist (must created at the time as the grid)
   showGrid2Pagination(showPagination: boolean) {
-    console.log('toggle grid2 pagination', showPagination)
     this.reactGrid2.paginationService!.togglePaginationVisibility(showPagination);
   }
 
@@ -306,11 +305,11 @@ export default class Example10 extends React.Component<Props, State> {
         <div className="row">
           <div className="col-sm-4" style={{ maxWidth: '170px' }}>
             Pagination
-            <button className="btn btn-outline-secondary btn-xs" data-test="goto-first-page"
+            <button className="btn btn-outline-secondary btn-xs px-1" data-test="goto-first-page"
               onClick={() => this.goToGrid1FirstPage()}>
               <i className="fa fa-caret-left fa-lg"></i>
             </button>
-            <button className="btn btn-outline-secondary btn-xs" data-test="goto-last-page" onClick={() => this.goToGrid1LastPage()}>
+            <button className="btn btn-outline-secondary btn-xs px-1" data-test="goto-last-page" onClick={() => this.goToGrid1LastPage()}>
               <i className="fa fa-caret-right fa-lg"></i>
             </button>
           </div>
@@ -345,11 +344,11 @@ export default class Example10 extends React.Component<Props, State> {
                 data-test="toggle-pagination-grid2" />
             </label>
             {this.isGrid2WithPagination && <span style={{ marginLeft: '5px' }}>
-              <button className="btn btn-outline-secondary btn-xs" data-test="goto-first-page"
+              <button className="btn btn-outline-secondary btn-xs px-1" data-test="goto-first-page"
                 onClick={() => this.goToGrid2FirstPage()}>
                 <i className="fa fa-caret-left fa-lg"></i>
               </button>
-              <button className="btn btn-outline-secondary btn-xs" data-test="goto-last-page"
+              <button className="btn btn-outline-secondary btn-xs px-1" data-test="goto-last-page"
                 onClick={() => this.goToGrid2LastPage()}>
                 <i className="fa fa-caret-right fa-lg"></i>
               </button>

src/examples/slickgrid/example16.tsx

@@ -1,4 +1,4 @@
-import { ReactGridInstance, Column, ExtensionName, Filters, Formatters, GridOption, ReactSlickgridComponent } from '../../slickgrid-react';
+import { ReactGridInstance, Column, ExtensionName, Filters, Formatters, GridOption, ReactSlickgridComponent, OnEventArgs } from '../../slickgrid-react';
 import React from 'react';
 import BaseSlickGridState from './state-slick-grid-base';
 
@@ -49,11 +49,7 @@ export default class Example16 extends React.Component<Props, State> {
     document.title = this.title;
 
     // populate the dataset once the grid is ready
-    this.setState((state: State, props: Props) => {
-      return {
-        dataset: this.getData(),
-      };
-    });
+    this.setState((state: State) => ({ dataset: this.getData() }));
   }
 
   /* Define grid Options and Columns */
@@ -251,6 +247,47 @@ export default class Example16 extends React.Component<Props, State> {
     this.reactGrid.sortService.disableSortFunctionality(true);
   }
 
+  addEditDeleteColumns() {
+    if (this.state.columnDefinitions[0].id !== 'change-symbol') {
+      const newCols = [
+        {
+          id: 'change-symbol',
+          field: 'id',
+          excludeFromColumnPicker: true,
+          excludeFromGridMenu: true,
+          excludeFromHeaderMenu: true,
+          formatter: Formatters.editIcon,
+          minWidth: 30,
+          maxWidth: 30,
+          onCellClick: (clickEvent: Event, args: OnEventArgs) => {
+            alert(`Technically we should Edit "Task ${args.dataContext.id}"`);
+          }
+        }, {
+          id: 'delete-symbol',
+          field: 'id',
+          excludeFromColumnPicker: true,
+          excludeFromGridMenu: true,
+          excludeFromHeaderMenu: true,
+          formatter: Formatters.deleteIcon,
+          minWidth: 30,
+          maxWidth: 30,
+          onCellClick: (e: Event, args: OnEventArgs) => {
+            if (confirm('Are you sure?')) {
+              this.reactGrid.gridService.deleteItemById(args.dataContext.id);
+            }
+          }
+        }
+      ];
+
+      // NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
+      // you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
+      // for example if you use the Checkbox Selector (row selection), you MUST use the code below
+      const allColumns = this.reactGrid.gridService.getAllColumnDefinitions();
+      allColumns.unshift(newCols[0], newCols[1]);
+      this.setState((state: State) => ({ ...state, columnDefinitions: [...allColumns] })); // (or use slice) reassign to column definitions for Aurelia to do dirty checking
+    }
+  }
+
   // or Toggle Filtering/Sorting functionalities
   // ---------------------------------------------
 
@@ -302,6 +339,10 @@ export default class Example16 extends React.Component<Props, State> {
               <i className="fa fa-random me-1"></i>
               Toggle Sorting
             </button>
+            <button className="btn btn-outline-secondary btn-sm" data-test="add-crud-columns-btn" onClick={() => this.addEditDeleteColumns()}>
+              <i className="fa fa-plus me-1"></i>
+              Add Edit/Delete Columns
+            </button>
           </div>
         </div>
 

src/examples/slickgrid/example18.tsx

@@ -194,7 +194,7 @@ export default class Example18 extends React.Component<Props, State> {
         }
       },
       {
-        id: 'effortDriven', name: 'Effort Driven', field: 'effortDriven',
+        id: 'effortDriven', name: 'Effort-Driven', field: 'effortDriven',
         width: 80, minWidth: 20, maxWidth: 100,
         cssClass: 'cell-effort-driven',
         sortable: true,
@@ -224,6 +224,7 @@ export default class Example18 extends React.Component<Props, State> {
       createPreHeaderPanel: true,
       showPreHeaderPanel: true,
       preHeaderPanelHeight: 40,
+      showCustomFooter: true,
       enableFiltering: true,
       // you could debounce/throttle the input text filter if you have lots of data
       // filterTypingDebounce: 250,
@@ -535,12 +536,12 @@ export default class Example18 extends React.Component<Props, State> {
                   <label htmlFor="field1" className="col-sm-3 mb-2">Group by field(s)</label>
                   {
                     this.state.selectedGroupingFields.map((groupField, index) =>
-                      <div className="form-group col-md-3" key={index}>
+                      <div className="form-group col-md-3 grouping-selects" key={index}>
                         <select className={`form-select select-group-${index}`} data-test="search-column-list" onChange={($event) => this.changeSelectedGroupByField($event, index)}>
                           <option value="''">...</option>
                           {
                             this.state.columnDefinitions.map((column) =>
-                              <option value={column.id} key={column.id}>{column.id}</option>
+                              <option value={column.id} key={column.id}>{column.name}</option>
                             )
                           }
                         </select>