Merge pull request #1517 from ghiscoding/feat/row-span

feat: add `rowspan` implementation

Author: ghiscoding

package.json

@@ -53,13 +53,13 @@
   },
   "dependencies": {
     "@ngx-translate/core": "^15.0.0",
-    "@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/rxjs-observable": "~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",
+    "@slickgrid-universal/rxjs-observable": "~5.12.0",
     "dequal": "^2.0.3",
     "rxjs": "^7.8.1"
   },
@@ -91,13 +91,13 @@
     "@ng-select/ng-select": "^13.9.1",
     "@ngx-translate/http-loader": "^8.0.0",
     "@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/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/text-export": "~5.12.0",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.7",
@@ -106,7 +106,7 @@
     "bootstrap": "^5.3.3",
     "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",
@@ -119,7 +119,7 @@
     "ngx-bootstrap": "^18.1.3",
     "npm-run-all2": "^7.0.2",
     "prettier": "^3.4.2",
-    "release-it": "^17.11.0",
+    "release-it": "^18.1.1",
     "rimraf": "^5.0.10",
     "rxjs": "^7.8.1",
     "sass": "^1.83.4",

src/app/app-routing.module.ts

@@ -40,6 +40,8 @@ import { GridTradingComponent } from './examples/grid-trading.component';
 import { GridTreeDataHierarchicalComponent } from './examples/grid-tree-data-hierarchical.component';
 import { GridTreeDataParentChildComponent } from './examples/grid-tree-data-parent-child.component';
 import { Grid18Component } from './examples/grid18.component';
+import { Grid43Component } from './examples/grid43.component';
+import { Grid44Component } from './examples/grid44.component';
 import { SwtCommonGridTestComponent } from './examples/swt-common-grid-test.component';
 
 import { NgModule } from '@angular/core';
@@ -85,6 +87,8 @@ const routes: Routes = [
   { path: 'resize-by-content', component: GridResizeByContentComponent },
   { path: 'rowdetail', component: GridRowDetailComponent },
   { path: 'rowmove', component: GridRowMoveComponent },
+  { path: 'rowspan-timesheets', component: Grid43Component },
+  { path: 'rowspan-large', component: Grid44Component },
   { path: 'selection', component: GridRowSelectionComponent },
   { path: 'trading', component: GridTradingComponent },
   { path: 'tree-data-parent-child', component: GridTreeDataParentChildComponent },

src/app/app.component.html

@@ -172,7 +172,15 @@
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/drag-recycle']"> 41- Drag & Drop </a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/custom-pagination']"> 42- Custom Pagination </a>
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/custom-pagination']">42- Custom Pagination </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/rowspan-timesheets']"
+            >43- Colspan/Rowspan (timesheets)</a
+          >
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/rowspan-large']">44- Colspan/Rowspan (large data)</a>
         </li>
       </ul>
     </section>

src/app/app.module.ts

@@ -56,6 +56,8 @@ import { GridTradingComponent } from './examples/grid-trading.component';
 import { GridTreeDataHierarchicalComponent } from './examples/grid-tree-data-hierarchical.component';
 import { GridTreeDataParentChildComponent } from './examples/grid-tree-data-parent-child.component';
 import { Grid18Component } from './examples/grid18.component';
+import { Grid43Component } from './examples/grid43.component';
+import { Grid44Component } from './examples/grid44.component';
 import { HomeComponent } from './examples/home.component';
 import { CustomPagerComponent } from './examples/grid-custom-pager.component';
 import { RowDetailPreloadComponent } from './examples/rowdetail-preload.component';
@@ -145,6 +147,8 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
     GridTreeDataParentChildComponent,
     GridTreeDataHierarchicalComponent,
     Grid18Component,
+    Grid43Component,
+    Grid44Component,
     RowDetailPreloadComponent,
     RowDetailViewComponent,
     SwtCommonGridTestComponent,

src/app/examples/grid-colspan.component.ts

@@ -59,7 +59,11 @@ export class GridColspanComponent implements OnInit {
       showPreHeaderPanel: true,
       preHeaderPanelHeight: 28,
       explicitInitialization: true,
-      colspanCallback: this.renderDifferentColspan,
+      dataView: {
+        globalItemMetadataProvider: {
+          getRowMetadata: (item: any, row: any) => 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 class GridColspanComponent implements OnInit {
    * 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/app/examples/grid43.component.html

@@ -0,0 +1,88 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    Example 43: colspan/rowspan - Employees Timesheets
+    <span class="float-end">
+      <a
+        style="font-size: 18px"
+        target="_blank"
+        href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid43.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+    <button
+      class="ms-1 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>
+  </h2>
+
+  <div class="subtitle" [hidden]="!showSubTitle">
+    <p class="italic example-details">
+      <b>NOTES</b>: <code>rowspan</code> is an opt-in feature, because of its small perf hit (it needs to loop through all row
+      metadatas to map all rowspan), and requires the <code>enableCellRowSpan</code> grid option to be enabled to work properly.
+      The <code>colspan</code>/<code>rowspan</code> are both using DataView item metadata and are both based on row indexes and
+      will <b>not</b> keep the row in sync with the data. It is really up to you the user to update the metadata logic of how and
+      where the cells should span when a side effect kicks in. (i.e: Filtering/Sorting/Paging/Column Reorder... will
+      <b>not</b> change/update the spanning in the grid by itself and that is why they these features are all disabled in this
+      example). Also, column/row freezing (pinning) are also not supported, or at least not recommended unless you know exactly
+      what you're doing (like in this demo here because we know our pinning doesn't intersect)! Any freezing column/row that could
+      intersect with a <code>colspan</code>/<code>rowspan</code> <b>will cause problems</b>.
+    </p>
+  </div>
+
+  <button
+    class="ms-1 btn btn-outline-secondary btn-sm btn-icon"
+    data-test="goto-up"
+    (click)="navigateUp()"
+    title="from an active cell, navigate to cell above"
+  >
+    <span class="mdi mdi-chevron-down mdi-rotate-180"></span>
+    Navigate Up Cell
+  </button>
+  <button
+    class="ms-1 btn btn-outline-secondary btn-sm btn-icon"
+    data-test="goto-down"
+    (click)="navigateDown()"
+    title="from an active cell, navigate to cell below"
+  >
+    <span class="mdi mdi-chevron-down"></span>
+    Navigate Down Cell
+  </button>
+  <button
+    class="ms-1 btn btn-outline-secondary btn-sm btn-icon"
+    data-test="goto-prev"
+    (click)="navigatePrev()"
+    title="from an active cell, navigate to previous left cell"
+  >
+    <span class="mdi mdi-chevron-down mdi-rotate-90"></span>
+    Navigate to Left Cell
+  </button>
+  <button
+    class="ms-1 btn btn-outline-secondary btn-sm btn-icon"
+    data-test="goto-next"
+    (click)="navigateNext()"
+    title="from an active cell, navigate to next right cell"
+  >
+    <span class="mdi mdi-chevron-down mdi-rotate-270"></span>
+    Navigate to Right Cell
+  </button>
+  <button class="ms-1 btn btn-outline-secondary btn-sm btn-icon mx-1" (click)="toggleEditing()" data-test="toggle-editing">
+    <span class="mdi mdi-pencil-outline"></span>
+    <span
+      >Toggle Editing: <span id="isEditable" class="text-italic">{{ isEditable }}</span></span
+    >
+  </button>
+
+  <angular-slickgrid
+    gridId="grid43"
+    [columnDefinitions]="columnDefinitions"
+    [gridOptions]="gridOptions"
+    [dataset]="dataset"
+    (onAngularGridCreated)="angularGridReady($event.detail)"
+  >
+  </angular-slickgrid>
+</div>

src/app/examples/grid43.component.scss

@@ -0,0 +1,30 @@
+#grid43 {
+  --slick-border-color: #d4d4d4;
+  // --slick-cell-border-left: 1px solid var(--slick-border-color);
+  --slick-header-menu-display: none;
+  --slick-header-column-height: 20px;
+  --slick-grid-border-color: #d4d4d4;
+  --slick-row-selected-color: #d4ebfd;
+  --slick-cell-active-box-shadow: inset 0 0 0 1px #3ca4ff;
+
+  --slick-row-mouse-hover-box-shadow: 0;
+  --slick-cell-odd-background-color: #fff;
+  --slick-cell-border-right: 1px solid var(--slick-border-color);
+  --slick-cell-border-bottom: 0;
+  --slick-cell-border-top: 1px solid var(--slick-border-color);
+  --slick-header-filter-row-border-bottom: 1px solid var(--slick-border-color);
+  --slick-cell-border-left: 0;
+  --slick-cell-box-shadow: none;
+  --slick-row-mouse-hover-color: #fff;
+  --slick-cell-display: flex;
+
+  .slick-cell.rowspan {
+    // background: white;
+    z-index: 9;
+  }
+  .slick-cell {
+    display: flex;
+    align-items: center;
+    /* justify-content: center; */
+  }
+}