feat: add rowspan implementation (#454)

Author: ghiscoding

package.json

@@ -83,12 +83,12 @@
     "/src/slickgrid-react"
   ],
   "dependencies": {
-    "@slickgrid-universal/common": "~5.11.0",
-    "@slickgrid-universal/custom-footer-component": "~5.11.0",
-    "@slickgrid-universal/empty-warning-component": "~5.11.0",
-    "@slickgrid-universal/event-pub-sub": "~5.10.2",
-    "@slickgrid-universal/pagination-component": "~5.11.0",
-    "@slickgrid-universal/row-detail-view-plugin": "~5.11.0",
+    "@slickgrid-universal/common": "~5.12.0",
+    "@slickgrid-universal/custom-footer-component": "~5.12.0",
+    "@slickgrid-universal/empty-warning-component": "~5.12.0",
+    "@slickgrid-universal/event-pub-sub": "~5.12.0",
+    "@slickgrid-universal/pagination-component": "~5.12.0",
+    "@slickgrid-universal/row-detail-view-plugin": "~5.12.0",
     "dequal": "^2.0.3",
     "i18next": "^23.16.8",
     "sortablejs": "^1.15.6"
@@ -102,14 +102,14 @@
     "@fnando/sparkline": "^0.3.10",
     "@formkit/tempo": "^0.1.2",
     "@popperjs/core": "^2.11.8",
-    "@release-it/conventional-changelog": "^9.0.4",
-    "@slickgrid-universal/composite-editor-component": "~5.11.0",
-    "@slickgrid-universal/custom-tooltip-plugin": "~5.11.0",
-    "@slickgrid-universal/excel-export": "~5.11.0",
-    "@slickgrid-universal/graphql": "~5.11.0",
-    "@slickgrid-universal/odata": "~5.11.0",
-    "@slickgrid-universal/rxjs-observable": "~5.11.0",
-    "@slickgrid-universal/text-export": "~5.11.0",
+    "@release-it/conventional-changelog": "^10.0.0",
+    "@slickgrid-universal/composite-editor-component": "~5.12.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "~5.12.0",
+    "@slickgrid-universal/excel-export": "~5.12.0",
+    "@slickgrid-universal/graphql": "~5.12.0",
+    "@slickgrid-universal/odata": "~5.12.0",
+    "@slickgrid-universal/rxjs-observable": "~5.12.0",
+    "@slickgrid-universal/text-export": "~5.12.0",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/i18next-xhr-backend": "^1.4.2",
     "@types/node": "^22.10.7",
@@ -122,7 +122,7 @@
     "concurrently": "^9.1.2",
     "copyfiles": "^2.4.1",
     "custom-event-polyfill": "^1.0.7",
-    "cypress": "^13.17.0",
+    "cypress": "^14.0.0",
     "cypress-real-events": "^1.13.0",
     "dompurify": "^3.2.3",
     "eslint": "^9.18.0",
@@ -141,7 +141,7 @@
     "react-i18next": "^15.4.0",
     "react-router-dom": "^7.1.3",
     "regenerator-runtime": "^0.14.1",
-    "release-it": "^17.11.0",
+    "release-it": "^18.1.1",
     "rimraf": "^5.0.10",
     "rxjs": "^7.8.1",
     "sass": "^1.83.4",

src/examples/slickgrid/App.tsx

@@ -43,6 +43,8 @@ import Example39 from './Example39';
 import Example40 from './Example40';
 import Example41 from './Example41';
 import Example42 from './Example42';
+import Example43 from './Example43';
+import Example44 from './Example44';
 
 const routes: Array<{ path: string; route: string; component: any; title: string; }> = [
   { path: 'example1', route: '/example1', component: <Example1 />, title: '1- Basic Grid / 2 Grids' },
@@ -86,6 +88,8 @@ const routes: Array<{ path: string; route: string; component: any; title: string
   { path: 'example40', route: '/example40', component: <Example40 />, title: '40- Infinite Scroll from JSON data' },
   { path: 'example41', route: '/example41', component: <Example41 />, title: '41- Drag & Drop' },
   { path: 'example42', route: '/example42', component: <Example42 />, title: '42- Custom Pagination' },
+  { path: 'example43', route: '/example43', component: <Example43 />, title: '43- Colspan/Rowspan (timesheets)' },
+  { path: 'example44', route: '/example44', component: <Example44 />, title: '44- Colspan/Rowspan (large data)' },
 ];
 
 export default function Routes() {

src/examples/slickgrid/Example14.tsx

@@ -76,7 +76,11 @@ export default class Example14 extends React.Component {
       },
       externalResources: [new ExcelExportService()],
       explicitInitialization: true,
-      colspanCallback: this.renderDifferentColspan,
+      dataView: {
+        globalItemMetadataProvider: {
+          getRowMetadata: (item: any, row: number) => this.renderDifferentColspan(item, row),
+        },
+      },
       gridMenu: {
         iconButtonContainer: 'preheader' // we can display the grid menu icon in either the preheader or in the column header (default)
       },
@@ -142,8 +146,8 @@ export default class Example14 extends React.Component {
    * Your callback will always have the "item" argument which you can use to decide on the colspan
    * Your return must always be in the form of:: return { columns: {}}
    */
-  renderDifferentColspan(item: any): ItemMetadata {
-    if (item.id % 2 === 1) {
+  renderDifferentColspan(item: any, row: number): ItemMetadata {
+    if (item.id % 2 === 1 || row % 2 === 1) {
       return {
         columns: {
           duration: {

src/examples/slickgrid/Example4.tsx

@@ -31,9 +31,7 @@ export default function Example4() {
   const [dataset] = useState(getData(NB_ITEMS));
 
   useEffect(() => {
-    return () => {
-      saveCurrentGridState();
-    }
+    saveCurrentGridState();
   }, []);
 
   const columnDefinitions: Column[] = [