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

feat: add rowspan implementation #1517

Merged
ghiscoding merged 1 commit into from
Jan 21, 2025
Merged

feat: add rowspan implementation #1517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
4 changes: 4 additions & 0 deletions src/app/app-routing.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 },
Expand Down
10 changes: 9 additions & 1 deletion src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 4 additions & 0 deletions src/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -145,6 +147,8 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
GridTreeDataParentChildComponent,
GridTreeDataHierarchicalComponent,
Grid18Component,
Grid43Component,
Grid44Component,
RowDetailPreloadComponent,
RowDetailViewComponent,
SwtCommonGridTestComponent,
Expand Down
10 changes: 7 additions & 3 deletions src/app/examples/grid-colspan.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
},
Expand Down Expand Up @@ -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: {
Expand Down
88 changes: 88 additions & 0 deletions src/app/examples/grid43.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
30 changes: 30 additions & 0 deletions src/app/examples/grid43.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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; */
}
}
Loading
Loading