From 4ffc69457633e99aef71c7879087e4e2919af22e Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Sat, 3 Dec 2022 19:24:27 -0500
Subject: [PATCH] fix: few more small examples fixes

---
 src/examples/slickgrid/example1.tsx            | 17 +++++++++--------
 src/examples/slickgrid/example10.tsx           |  2 +-
 src/examples/slickgrid/example11.tsx           |  2 +-
 src/examples/slickgrid/example12.tsx           |  2 +-
 src/examples/slickgrid/example13.tsx           |  2 +-
 src/examples/slickgrid/example14.tsx           |  2 +-
 src/examples/slickgrid/example15.tsx           |  2 +-
 src/examples/slickgrid/example16.tsx           |  2 +-
 src/examples/slickgrid/example17.tsx           |  4 ++--
 src/examples/slickgrid/example18.tsx           |  2 +-
 src/examples/slickgrid/example19.tsx           |  6 +++---
 src/examples/slickgrid/example2.tsx            | 18 ++++++------------
 src/examples/slickgrid/example20.tsx           |  2 +-
 src/examples/slickgrid/example21.tsx           |  2 +-
 src/examples/slickgrid/example22.tsx           |  2 +-
 src/examples/slickgrid/example23.tsx           |  2 +-
 src/examples/slickgrid/example24.tsx           |  2 +-
 src/examples/slickgrid/example25.tsx           |  2 +-
 src/examples/slickgrid/example26.tsx           |  2 +-
 src/examples/slickgrid/example27.tsx           |  2 +-
 src/examples/slickgrid/example28.tsx           |  2 +-
 src/examples/slickgrid/example29.tsx           |  2 +-
 src/examples/slickgrid/example3.tsx            |  2 ++
 src/examples/slickgrid/example30.tsx           |  2 +-
 src/examples/slickgrid/example31.tsx           |  4 +---
 src/examples/slickgrid/example32.tsx           |  2 +-
 src/examples/slickgrid/example33.tsx           |  2 +-
 src/examples/slickgrid/example34.tsx           |  2 +-
 src/examples/slickgrid/example4.tsx            |  2 +-
 src/examples/slickgrid/example5.tsx            |  4 +---
 src/examples/slickgrid/example6.tsx            |  2 +-
 src/examples/slickgrid/example7.tsx            |  2 +-
 src/examples/slickgrid/example8.tsx            |  2 +-
 src/examples/slickgrid/example9.tsx            |  2 +-
 .../components/slickgrid-react.tsx             |  5 +----
 35 files changed, 52 insertions(+), 62 deletions(-)

diff --git a/src/examples/slickgrid/example1.tsx b/src/examples/slickgrid/example1.tsx
index 74581702..1a5281dc 100644
--- a/src/examples/slickgrid/example1.tsx
+++ b/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) => ({
diff --git a/src/examples/slickgrid/example10.tsx b/src/examples/slickgrid/example10.tsx
index f24289db..2f4f49ef 100644
--- a/src/examples/slickgrid/example10.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example11.tsx b/src/examples/slickgrid/example11.tsx
index e25864f2..28983483 100644
--- a/src/examples/slickgrid/example11.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example12.tsx b/src/examples/slickgrid/example12.tsx
index 675cbf9f..78be372b 100644
--- a/src/examples/slickgrid/example12.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example13.tsx b/src/examples/slickgrid/example13.tsx
index be6b2133..737f403d 100644
--- a/src/examples/slickgrid/example13.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example14.tsx b/src/examples/slickgrid/example14.tsx
index 5aade662..01c052e4 100644
--- a/src/examples/slickgrid/example14.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example15.tsx b/src/examples/slickgrid/example15.tsx
index ad05bdc3..37e78558 100644
--- a/src/examples/slickgrid/example15.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example16.tsx b/src/examples/slickgrid/example16.tsx
index e2175e9d..66f1de79 100644
--- a/src/examples/slickgrid/example16.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example17.tsx b/src/examples/slickgrid/example17.tsx
index 78524399..faeb11b3 100644
--- a/src/examples/slickgrid/example17.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example18.tsx b/src/examples/slickgrid/example18.tsx
index 35210b84..bc1f8b58 100644
--- a/src/examples/slickgrid/example18.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example19.tsx b/src/examples/slickgrid/example19.tsx
index 495b9878..9a19538c 100644
--- a/src/examples/slickgrid/example19.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example2.tsx b/src/examples/slickgrid/example2.tsx
index 27f1b71b..fa1f7999 100644
--- a/src/examples/slickgrid/example2.tsx
+++ b/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}
diff --git a/src/examples/slickgrid/example20.tsx b/src/examples/slickgrid/example20.tsx
index 4ea8f16d..6d3328a5 100644
--- a/src/examples/slickgrid/example20.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example21.tsx b/src/examples/slickgrid/example21.tsx
index 447fae1f..b9556dd4 100644
--- a/src/examples/slickgrid/example21.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example22.tsx b/src/examples/slickgrid/example22.tsx
index 1976adda..26451206 100644
--- a/src/examples/slickgrid/example22.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example23.tsx b/src/examples/slickgrid/example23.tsx
index d0b06ebd..7eec7623 100644
--- a/src/examples/slickgrid/example23.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example24.tsx b/src/examples/slickgrid/example24.tsx
index dda6d11b..d34bb526 100644
--- a/src/examples/slickgrid/example24.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example25.tsx b/src/examples/slickgrid/example25.tsx
index 74d4de88..4e081d56 100644
--- a/src/examples/slickgrid/example25.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example26.tsx b/src/examples/slickgrid/example26.tsx
index 201b37c8..371a53ff 100644
--- a/src/examples/slickgrid/example26.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example27.tsx b/src/examples/slickgrid/example27.tsx
index e6da3621..9b140d24 100644
--- a/src/examples/slickgrid/example27.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example28.tsx b/src/examples/slickgrid/example28.tsx
index 6e9bcda6..a8d477de 100644
--- a/src/examples/slickgrid/example28.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example29.tsx b/src/examples/slickgrid/example29.tsx
index 5f0d2a20..df2e9fde 100644
--- a/src/examples/slickgrid/example29.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example3.tsx b/src/examples/slickgrid/example3.tsx
index eb467f37..a42f395c 100644
--- a/src/examples/slickgrid/example3.tsx
+++ b/src/examples/slickgrid/example3.tsx
@@ -861,6 +861,7 @@ 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'
               >
@@ -868,6 +869,7 @@ export default class Example3 extends React.Component<Props, State> {
               </button>
               <button
                 className='btn btn-sm btn-outline-danger mx-1'
+                data-test="delete-item-btn"
                 onClick={() => this.deleteItem()}
               >
                 Delete item
diff --git a/src/examples/slickgrid/example30.tsx b/src/examples/slickgrid/example30.tsx
index 879947d3..d2fb1a51 100644
--- a/src/examples/slickgrid/example30.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example31.tsx b/src/examples/slickgrid/example31.tsx
index 10169893..22686c81 100644
--- a/src/examples/slickgrid/example31.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example32.tsx b/src/examples/slickgrid/example32.tsx
index 27caed63..332dcd10 100644
--- a/src/examples/slickgrid/example32.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example33.tsx b/src/examples/slickgrid/example33.tsx
index e70260f1..f88cee7a 100644
--- a/src/examples/slickgrid/example33.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example34.tsx b/src/examples/slickgrid/example34.tsx
index be0db34a..5a10cadb 100644
--- a/src/examples/slickgrid/example34.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example4.tsx b/src/examples/slickgrid/example4.tsx
index b0cee1c2..06af024c 100644
--- a/src/examples/slickgrid/example4.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example5.tsx b/src/examples/slickgrid/example5.tsx
index 93812f82..9493a6b4 100644
--- a/src/examples/slickgrid/example5.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example6.tsx b/src/examples/slickgrid/example6.tsx
index 70d84bd0..5eea611e 100644
--- a/src/examples/slickgrid/example6.tsx
+++ b/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>
diff --git a/src/examples/slickgrid/example7.tsx b/src/examples/slickgrid/example7.tsx
index fd6e8095..20538143 100644
--- a/src/examples/slickgrid/example7.tsx
+++ b/src/examples/slickgrid/example7.tsx
@@ -223,7 +223,7 @@ export default class Example7 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/example7.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example7.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>
diff --git a/src/examples/slickgrid/example8.tsx b/src/examples/slickgrid/example8.tsx
index 7130123e..34af0b9d 100644
--- a/src/examples/slickgrid/example8.tsx
+++ b/src/examples/slickgrid/example8.tsx
@@ -206,7 +206,7 @@ class Example8 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/example8.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example8.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>
diff --git a/src/examples/slickgrid/example9.tsx b/src/examples/slickgrid/example9.tsx
index 3cc26351..95fc8b80 100644
--- a/src/examples/slickgrid/example9.tsx
+++ b/src/examples/slickgrid/example9.tsx
@@ -283,7 +283,7 @@ class Example9 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/example9.ts">
+              href="https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/example9.tsx">
               <span className="fa fa-link"></span> code
             </a>
           </span>
diff --git a/src/slickgrid-react/components/slickgrid-react.tsx b/src/slickgrid-react/components/slickgrid-react.tsx
index bd9c00ec..cfd486f1 100644
--- a/src/slickgrid-react/components/slickgrid-react.tsx
+++ b/src/slickgrid-react/components/slickgrid-react.tsx
@@ -211,7 +211,6 @@ export class ReactSlickgridComponent extends React.Component<SlickgridReactProps
     return this.dataView?.getItems() || [];
   }
   set dataset(newDataset: any[]) {
-    console.log('setter dataset', newDataset)
     const prevDatasetLn = this._currentDatasetLength;
     const isDatasetEqual = dequal(newDataset, this.dataset || []);
     const isDeepCopyDataOnPageLoadEnabled = !!(this._gridOptions?.enableDeepCopyDatasetOnPageLoad);
@@ -220,7 +219,6 @@ export class ReactSlickgridComponent extends React.Component<SlickgridReactProps
     // when Tree Data is enabled and we don't yet have the hierarchical dataset filled, we can force a convert+sort of the array
     if (this.grid && this.gridOptions?.enableTreeData && Array.isArray(newDataset) && (newDataset.length > 0 || newDataset.length !== prevDatasetLn || !isDatasetEqual)) {
       this._isDatasetHierarchicalInitialized = false;
-      console.log('sorting tree data', newDataset);
       data = this.sortTreeDataset(newDataset, !isDatasetEqual); // if dataset changed, then force a refresh anyway
     }
 
@@ -688,7 +686,7 @@ export class ReactSlickgridComponent extends React.Component<SlickgridReactProps
     }
 
     if (this.props.dataset !== prevProps.dataset) {
-      this.dataset = this.props.dataset = prevProps.dataset;
+      this.dataset = this.props.dataset || prevProps.dataset;
     }
 
     if (this.props.datasetHierarchical && this.props.datasetHierarchical !== prevProps.datasetHierarchical) {
@@ -1459,7 +1457,6 @@ export class ReactSlickgridComponent extends React.Component<SlickgridReactProps
       if (this._gridOptions?.treeDataOptions?.initialSort) {
         // else we need to first convert the flat dataset to a hierarchical dataset and then sort
         sortedDatasetResult = this.treeDataService.convertFlatParentChildToTreeDatasetAndSort(flatDatasetInput, this._columnDefinitions, this._gridOptions);
-        console.log('flatDatasetInput', flatDatasetInput, this._gridOptions, sortedDatasetResult)
         this.sharedService.hierarchicalDataset = sortedDatasetResult.hierarchical;
         flatDatasetOutput = sortedDatasetResult.flat;
       } else {