fix: few more small examples fixes

src/examples/slickgrid/example1.tsx

@@ -67,14 +67,15 @@ export default class Example1 extends React.Component<Props, State> {
     // copy the same Grid Options and Column Definitions to 2nd grid
     // but also add Pagination in this grid
     const gridOptions2: GridOption = {
-      ...gridOptions1,
-      ...{
-        enablePagination: true,
-        pagination: {
-          pageSizes: [5, 10, 20, 25, 50],
-          pageSize: 5
-        },
-      }
+      gridHeight: 225,
+      gridWidth: 800,
+      enableAutoResize: false,
+      enableSorting: true,
+      enablePagination: true,
+      pagination: {
+        pageSizes: [5, 10, 20, 25, 50],
+        pageSize: 5
+      },
     };
 
     this.setState((state: State) => ({

src/examples/slickgrid/example10.tsx

@@ -296,7 +296,7 @@ export default class Example10 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example10.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example10.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example11.tsx

@@ -286,7 +286,7 @@ export default class Example11 extends React.Component {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example11.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example11.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example12.tsx

@@ -282,7 +282,7 @@ class Example12 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example12.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example12.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example13.tsx

@@ -389,7 +389,7 @@ export default class Example13 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example13.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example13.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example14.tsx

@@ -162,7 +162,7 @@ export default class Example14 extends React.Component {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example14.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example14.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example15.tsx

@@ -276,7 +276,7 @@ class Example15 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example15.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example15.tsx">
               <span className="fa fa-link me-1"></span> code
             </a>
           </span>

src/examples/slickgrid/example16.tsx

@@ -270,7 +270,7 @@ export default class Example16 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example16.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example16.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example17.tsx

@@ -49,7 +49,7 @@ export default class Example17 extends React.Component {
         for Sorting, Filtering, etc...
       </li>
       <li>
-        Soure code for this example is available <a href="https://github.com/ghiscoding/slickgrid-react/blob/master/doc/github-demo/src/examples/slickgrid/example17.ts" target="_blank">here</a>
+        Soure code for this example is available <a href="https://github.com/ghiscoding/slickgrid-react/blob/master/doc/github-demo/src/examples/slickgrid/example17.tsx" target="_blank">here</a>
       </li>
     </ul>
   `;
@@ -163,7 +163,7 @@ export default class Example17 extends React.Component {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example17.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example17.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example18.tsx

@@ -469,7 +469,7 @@ export default class Example18 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example18.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example18.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example19.tsx

@@ -119,10 +119,10 @@ export default class Example19 extends React.Component {
         // expandableOverride: (row: number, dataContext: any, grid: SlickGrid) => (dataContext.id % 2 === 1),
 
         // // Preload View Template
-        // preloadView: PLATFORM.moduleName('examples/slickgrid/example19-preload.html'),
+        // preloadView: PLATFORM.moduleName('examples/example19-preload.html'),
 
         // // ViewModel Template to load when row detail data is ready
-        // viewModel: PLATFORM.moduleName('examples/slickgrid/example19-detail-view'),
+        // viewModel: PLATFORM.moduleName('examples/example19-detail-view'),
 
         // Optionally pass your Parent Component reference to your Child Component (row detail component)
         parent: this
@@ -202,7 +202,7 @@ export default class Example19 extends React.Component {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example19.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example19.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example2.tsx

@@ -43,7 +43,6 @@ const customEnableButtonFormatter: Formatter<DataItem> = (_row: number, _cell: n
 interface Props {}
 
 export default class Example2 extends React.Component<Props, State> {
-  isGridMounted = false;
   title = 'Example 2: Grid with Formatters';
   subTitle = `
     Grid with Custom and/or included Slickgrid Formatters (<a href="https://github.com/ghiscoding/slickgrid-react/wiki/Formatters" target="_blank">Wiki docs</a>).
@@ -69,18 +68,13 @@ export default class Example2 extends React.Component<Props, State> {
       columnDefinitions: [],
       dataset: [],
     };
-
-    // define the grid options & columns and then create the grid itself
-    this.defineGrid();
   }
 
   componentDidMount() {
     document.title = this.title;
 
-    // populate the dataset once the grid is ready
-    this.setState((state: State, props: Props) => ({
-        dataset: this.getData(),
-    }));
+    // define the grid options & columns and then create the grid itself
+    this.defineGrid();
   }
 
   reactGridReady(reactGrid: ReactGridInstance) {
@@ -144,12 +138,12 @@ export default class Example2 extends React.Component<Props, State> {
       // }
     };
 
-    this.state = {
+    this.setState((state: State, props: Props) => ({
       ...this.state,
       columnDefinitions : columns,
       gridOptions,
-    };
-    this.isGridMounted = true;
+      dataset: this.getData(),
+    }));
   }
 
   // mock a dataset
@@ -204,7 +198,7 @@ export default class Example2 extends React.Component<Props, State> {
   }
 
   render() {
-    return !this.isGridMounted ? '' : (
+    return !this.state.gridOptions ? '' : (
       <div id="demo-container" className="container-fluid">
         <h2>
           {this.title}

src/examples/slickgrid/example20.tsx

@@ -356,7 +356,7 @@ export default class Example20 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example20.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example20.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example21.tsx

@@ -217,7 +217,7 @@ export default class Example21 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example21.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example21.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example22.tsx

@@ -164,7 +164,7 @@ export default class Example22 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example22.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example22.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example23.tsx

@@ -351,7 +351,7 @@ class Example23 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example23.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example23.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example24.tsx

@@ -490,7 +490,7 @@ class Example24 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example24.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example24.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example25.tsx

@@ -312,7 +312,7 @@ export default class Example25 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example25.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example25.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example26.tsx

@@ -377,7 +377,7 @@ class Example26 extends React.Component {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example26.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example26.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example27.tsx

@@ -372,7 +372,7 @@ export default class Example27 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example27.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example27.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example28.tsx

@@ -306,7 +306,7 @@ export default class Example28 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example28.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example28.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example29.tsx

@@ -88,7 +88,7 @@ export default class Example29 extends React.Component {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example29.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example29.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example3.tsx

@@ -861,13 +861,15 @@ export default class Example3 extends React.Component<Props, State> {
               </button>
               <button
                 className='btn btn-sm btn-outline-primary' 
+                data-test="add-item-btn"
                 onClick={() => this.addItem()}
                 title='Clear Filters &amp; Sorting to see it better'
               >
                 Add item
               </button>
               <button
                 className='btn btn-sm btn-outline-danger mx-1'
+                data-test="delete-item-btn"
                 onClick={() => this.deleteItem()}
               >
                 Delete item

src/examples/slickgrid/example30.tsx

@@ -994,7 +994,7 @@ export default class Example30 extends React.Component<Props, State> {
           <span className="float-Right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example30.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example30.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example31.tsx

@@ -74,7 +74,6 @@ export default class Example31 extends React.Component<Props, State> {
   }
 
   reactGridReady(reactGrid: ReactGridInstance) {
-    console.log('reactGridReady', reactGrid)
     this.reactGrid = reactGrid;
   }
 
@@ -388,7 +387,6 @@ export default class Example31 extends React.Component<Props, State> {
               }
             }
 
-            // console.log('Backend Result', backendResult);
             observer.next(backendResult);
             observer.complete();
           }, 150);
@@ -493,7 +491,7 @@ export default class Example31 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example31.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example31.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example32.tsx

@@ -837,7 +837,7 @@ export default class Example32 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example32.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example32.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example33.tsx

@@ -509,7 +509,7 @@ export default class Example32 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example32.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example32.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example34.tsx

@@ -379,7 +379,7 @@ export default class Example34 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example32.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example32.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example4.tsx

@@ -346,7 +346,7 @@ export default class Example4 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/Slickgrid-React/blob/master/src/examples/slickgrid/example4.ts">
+              href="https://github.com/ghiscoding/Slickgrid-React/blob/master/src/examples/slickgrid/example4.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example5.tsx

@@ -89,7 +89,6 @@ export default class Example5 extends React.Component<Props,State> {
   }
 
   reactGridReady(reactGrid: ReactGridInstance) {
-    console.log('reactGridReady', reactGrid)
     this.reactGrid = reactGrid;
   }
 
@@ -408,7 +407,6 @@ export default class Example5 extends React.Component<Props,State> {
   }
 
   goToLastPage() {
-    console.log('goto last page', this.reactGrid.paginationService)
     this.reactGrid.paginationService!.goToLastPage();
   }
 
@@ -504,7 +502,7 @@ export default class Example5 extends React.Component<Props,State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example5.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example5.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>

src/examples/slickgrid/example6.tsx

@@ -340,7 +340,7 @@ class Example6 extends React.Component<Props, State> {
           <span className="float-right">
             <a style={{ fontSize: '18px' }}
               target="_blank"
-              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example6.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example6.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>