-
-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add
rowspan implementation (#1307)
- Loading branch information
1 parent
e3f4892
commit 9be6b78
Showing
15 changed files
with
1,927 additions
and
140 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| <h2> | ||
| Example 43: colspan/rowspan - Employees Timesheets | ||
| <span class="float-end"> | ||
| <a | ||
| style="font-size: 18px" | ||
| target="_blank" | ||
| href="https://github.com/ghiscoding/aurelia-slickgrid/blob/master/packages/demo/src/examples/slickgrid/example43.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.trigger="toggleSubTitle()" | ||
| > | ||
| <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span> | ||
| </button> | ||
| </h2> | ||
|
|
||
| <div class="subtitle" hidden.bind="!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.trigger="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.trigger="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.trigger="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.trigger="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.trigger="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> | ||
|
|
||
| <aurelia-slickgrid | ||
| grid-id="grid43" | ||
| column-definitions.bind="columnDefinitions" | ||
| grid-options.bind="gridOptions" | ||
| dataset.bind="dataset" | ||
| instances.bind="aureliaGrid"> | ||
| </aurelia-slickgrid> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; */ | ||
| } | ||
| } |
Oops, something went wrong.