Skip to content
This repository was archived by the owner on Jun 1, 2025. It is now read-only.

Commit d0df6d4

Browse files
ghiscodingghiscoding
authored
Merge pull request #1517 from ghiscoding/feat/row-span
feat: add `rowspan` implementation
2 parents f9f9287 + d583887 commit d0df6d4

15 files changed

+2313
-274
lines changed

‎package.json

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,13 @@
5353
},
5454
"dependencies": {
5555
"@ngx-translate/core": "^15.0.0",
56-
"@slickgrid-universal/common": "~5.11.0",
57-
"@slickgrid-universal/custom-footer-component": "~5.11.0",
58-
"@slickgrid-universal/empty-warning-component": "~5.11.0",
59-
"@slickgrid-universal/event-pub-sub": "~5.10.2",
60-
"@slickgrid-universal/pagination-component": "~5.11.0",
61-
"@slickgrid-universal/row-detail-view-plugin": "~5.11.0",
62-
"@slickgrid-universal/rxjs-observable": "~5.11.0",
56+
"@slickgrid-universal/common": "~5.12.0",
57+
"@slickgrid-universal/custom-footer-component": "~5.12.0",
58+
"@slickgrid-universal/empty-warning-component": "~5.12.0",
59+
"@slickgrid-universal/event-pub-sub": "~5.12.0",
60+
"@slickgrid-universal/pagination-component": "~5.12.0",
61+
"@slickgrid-universal/row-detail-view-plugin": "~5.12.0",
62+
"@slickgrid-universal/rxjs-observable": "~5.12.0",
6363
"dequal": "^2.0.3",
6464
"rxjs": "^7.8.1"
6565
},
@@ -91,13 +91,13 @@
9191
"@ng-select/ng-select": "^13.9.1",
9292
"@ngx-translate/http-loader": "^8.0.0",
9393
"@popperjs/core": "^2.11.8",
94-
"@release-it/conventional-changelog": "^9.0.4",
95-
"@slickgrid-universal/composite-editor-component": "~5.11.0",
96-
"@slickgrid-universal/custom-tooltip-plugin": "~5.11.0",
97-
"@slickgrid-universal/excel-export": "~5.11.0",
98-
"@slickgrid-universal/graphql": "~5.11.0",
99-
"@slickgrid-universal/odata": "~5.11.0",
100-
"@slickgrid-universal/text-export": "~5.11.0",
94+
"@release-it/conventional-changelog": "^10.0.0",
95+
"@slickgrid-universal/composite-editor-component": "~5.12.0",
96+
"@slickgrid-universal/custom-tooltip-plugin": "~5.12.0",
97+
"@slickgrid-universal/excel-export": "~5.12.0",
98+
"@slickgrid-universal/graphql": "~5.12.0",
99+
"@slickgrid-universal/odata": "~5.12.0",
100+
"@slickgrid-universal/text-export": "~5.12.0",
101101
"@types/fnando__sparkline": "^0.3.7",
102102
"@types/jest": "^29.5.14",
103103
"@types/node": "^22.10.7",
@@ -106,7 +106,7 @@
106106
"bootstrap": "^5.3.3",
107107
"copyfiles": "^2.4.1",
108108
"custom-event-polyfill": "^1.0.7",
109-
"cypress": "^13.17.0",
109+
"cypress": "^14.0.0",
110110
"cypress-real-events": "^1.13.0",
111111
"dompurify": "^3.2.3",
112112
"eslint": "^9.18.0",
@@ -119,7 +119,7 @@
119119
"ngx-bootstrap": "^18.1.3",
120120
"npm-run-all2": "^7.0.2",
121121
"prettier": "^3.4.2",
122-
"release-it": "^17.11.0",
122+
"release-it": "^18.1.1",
123123
"rimraf": "^5.0.10",
124124
"rxjs": "^7.8.1",
125125
"sass": "^1.83.4",

‎src/app/app-routing.module.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@ import { GridTradingComponent } from './examples/grid-trading.component';
4040
import { GridTreeDataHierarchicalComponent } from './examples/grid-tree-data-hierarchical.component';
4141
import { GridTreeDataParentChildComponent } from './examples/grid-tree-data-parent-child.component';
4242
import { Grid18Component } from './examples/grid18.component';
43+
import { Grid43Component } from './examples/grid43.component';
44+
import { Grid44Component } from './examples/grid44.component';
4345
import { SwtCommonGridTestComponent } from './examples/swt-common-grid-test.component';
4446

4547
import { NgModule } from '@angular/core';
@@ -85,6 +87,8 @@ const routes: Routes = [
8587
{ path: 'resize-by-content', component: GridResizeByContentComponent },
8688
{ path: 'rowdetail', component: GridRowDetailComponent },
8789
{ path: 'rowmove', component: GridRowMoveComponent },
90+
{ path: 'rowspan-timesheets', component: Grid43Component },
91+
{ path: 'rowspan-large', component: Grid44Component },
8892
{ path: 'selection', component: GridRowSelectionComponent },
8993
{ path: 'trading', component: GridTradingComponent },
9094
{ path: 'tree-data-parent-child', component: GridTreeDataParentChildComponent },

‎src/app/app.component.html

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,15 @@
172172
<a class="nav-link" routerLinkActive="active" [routerLink]="['/drag-recycle']"> 41- Drag & Drop </a>
173173
</li>
174174
<li class="nav-item">
175-
<a class="nav-link" routerLinkActive="active" [routerLink]="['/custom-pagination']"> 42- Custom Pagination </a>
175+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/custom-pagination']">42- Custom Pagination </a>
176+
</li>
177+
<li class="nav-item">
178+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/rowspan-timesheets']"
179+
>43- Colspan/Rowspan (timesheets)</a
180+
>
181+
</li>
182+
<li class="nav-item">
183+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/rowspan-large']">44- Colspan/Rowspan (large data)</a>
176184
</li>
177185
</ul>
178186
</section>

‎src/app/app.module.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ import { GridTradingComponent } from './examples/grid-trading.component';
5656
import { GridTreeDataHierarchicalComponent } from './examples/grid-tree-data-hierarchical.component';
5757
import { GridTreeDataParentChildComponent } from './examples/grid-tree-data-parent-child.component';
5858
import { Grid18Component } from './examples/grid18.component';
59+
import { Grid43Component } from './examples/grid43.component';
60+
import { Grid44Component } from './examples/grid44.component';
5961
import { HomeComponent } from './examples/home.component';
6062
import { CustomPagerComponent } from './examples/grid-custom-pager.component';
6163
import { RowDetailPreloadComponent } from './examples/rowdetail-preload.component';
@@ -145,6 +147,8 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
145147
GridTreeDataParentChildComponent,
146148
GridTreeDataHierarchicalComponent,
147149
Grid18Component,
150+
Grid43Component,
151+
Grid44Component,
148152
RowDetailPreloadComponent,
149153
RowDetailViewComponent,
150154
SwtCommonGridTestComponent,

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,11 @@ export class GridColspanComponent implements OnInit {
5959
showPreHeaderPanel: true,
6060
preHeaderPanelHeight: 28,
6161
explicitInitialization: true,
62-
colspanCallback: this.renderDifferentColspan,
62+
dataView: {
63+
globalItemMetadataProvider: {
64+
getRowMetadata: (item: any, row: any) => this.renderDifferentColspan(item, row),
65+
},
66+
},
6367
gridMenu: {
6468
iconButtonContainer: 'preheader', // we can display the grid menu icon in either the preheader or in the column header (default)
6569
},
@@ -142,8 +146,8 @@ export class GridColspanComponent implements OnInit {
142146
* Your callback will always have the "item" argument which you can use to decide on the colspan
143147
* Your return must always be in the form of:: return { columns: {}}
144148
*/
145-
renderDifferentColspan(item: any): ItemMetadata {
146-
if (item.id % 2 === 1) {
149+
renderDifferentColspan(item: any, row: number): ItemMetadata {
150+
if (item.id % 2 === 1 || row % 2 === 1) {
147151
return {
148152
columns: {
149153
duration: {

‎src/app/examples/grid43.component.html

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<div id="demo-container" class="container-fluid">
2+
<h2>
3+
Example 43: colspan/rowspan - Employees Timesheets
4+
<span class="float-end">
5+
<a
6+
style="font-size: 18px"
7+
target="_blank"
8+
href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid43.component.ts"
9+
>
10+
<span class="mdi mdi-link-variant"></span> code
11+
</a>
12+
</span>
13+
<button
14+
class="ms-1 btn btn-outline-secondary btn-sm btn-icon"
15+
type="button"
16+
data-test="toggle-subtitle"
17+
(click)="toggleSubTitle()"
18+
>
19+
<span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
20+
</button>
21+
</h2>
22+
23+
<div class="subtitle" [hidden]="!showSubTitle">
24+
<p class="italic example-details">
25+
<b>NOTES</b>: <code>rowspan</code> is an opt-in feature, because of its small perf hit (it needs to loop through all row
26+
metadatas to map all rowspan), and requires the <code>enableCellRowSpan</code> grid option to be enabled to work properly.
27+
The <code>colspan</code>/<code>rowspan</code> are both using DataView item metadata and are both based on row indexes and
28+
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
29+
where the cells should span when a side effect kicks in. (i.e: Filtering/Sorting/Paging/Column Reorder... will
30+
<b>not</b> change/update the spanning in the grid by itself and that is why they these features are all disabled in this
31+
example). Also, column/row freezing (pinning) are also not supported, or at least not recommended unless you know exactly
32+
what you're doing (like in this demo here because we know our pinning doesn't intersect)! Any freezing column/row that could
33+
intersect with a <code>colspan</code>/<code>rowspan</code> <b>will cause problems</b>.
34+
</p>
35+
</div>
36+
37+
<button
38+
class="ms-1 btn btn-outline-secondary btn-sm btn-icon"
39+
data-test="goto-up"
40+
(click)="navigateUp()"
41+
title="from an active cell, navigate to cell above"
42+
>
43+
<span class="mdi mdi-chevron-down mdi-rotate-180"></span>
44+
Navigate Up Cell
45+
</button>
46+
<button
47+
class="ms-1 btn btn-outline-secondary btn-sm btn-icon"
48+
data-test="goto-down"
49+
(click)="navigateDown()"
50+
title="from an active cell, navigate to cell below"
51+
>
52+
<span class="mdi mdi-chevron-down"></span>
53+
Navigate Down Cell
54+
</button>
55+
<button
56+
class="ms-1 btn btn-outline-secondary btn-sm btn-icon"
57+
data-test="goto-prev"
58+
(click)="navigatePrev()"
59+
title="from an active cell, navigate to previous left cell"
60+
>
61+
<span class="mdi mdi-chevron-down mdi-rotate-90"></span>
62+
Navigate to Left Cell
63+
</button>
64+
<button
65+
class="ms-1 btn btn-outline-secondary btn-sm btn-icon"
66+
data-test="goto-next"
67+
(click)="navigateNext()"
68+
title="from an active cell, navigate to next right cell"
69+
>
70+
<span class="mdi mdi-chevron-down mdi-rotate-270"></span>
71+
Navigate to Right Cell
72+
</button>
73+
<button class="ms-1 btn btn-outline-secondary btn-sm btn-icon mx-1" (click)="toggleEditing()" data-test="toggle-editing">
74+
<span class="mdi mdi-pencil-outline"></span>
75+
<span
76+
>Toggle Editing: <span id="isEditable" class="text-italic">{{ isEditable }}</span></span
77+
>
78+
</button>
79+
80+
<angular-slickgrid
81+
gridId="grid43"
82+
[columnDefinitions]="columnDefinitions"
83+
[gridOptions]="gridOptions"
84+
[dataset]="dataset"
85+
(onAngularGridCreated)="angularGridReady($event.detail)"
86+
>
87+
</angular-slickgrid>
88+
</div>

‎src/app/examples/grid43.component.scss

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
#grid43 {
2+
--slick-border-color: #d4d4d4;
3+
// --slick-cell-border-left: 1px solid var(--slick-border-color);
4+
--slick-header-menu-display: none;
5+
--slick-header-column-height: 20px;
6+
--slick-grid-border-color: #d4d4d4;
7+
--slick-row-selected-color: #d4ebfd;
8+
--slick-cell-active-box-shadow: inset 0 0 0 1px #3ca4ff;
9+
10+
--slick-row-mouse-hover-box-shadow: 0;
11+
--slick-cell-odd-background-color: #fff;
12+
--slick-cell-border-right: 1px solid var(--slick-border-color);
13+
--slick-cell-border-bottom: 0;
14+
--slick-cell-border-top: 1px solid var(--slick-border-color);
15+
--slick-header-filter-row-border-bottom: 1px solid var(--slick-border-color);
16+
--slick-cell-border-left: 0;
17+
--slick-cell-box-shadow: none;
18+
--slick-row-mouse-hover-color: #fff;
19+
--slick-cell-display: flex;
20+
21+
.slick-cell.rowspan {
22+
// background: white;
23+
z-index: 9;
24+
}
25+
.slick-cell {
26+
display: flex;
27+
align-items: center;
28+
/* justify-content: center; */
29+
}
30+
}

0 commit comments

Comments
 (0)