Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Summary row scroll #1479

Open
wants to merge 17 commits into
base: master
Choose a base branch
from
Open

Summary row scroll #1479

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
3a65628
demo: summary row with scrollbar
SirWojtek Jul 1, 2018
1269f7d
extracted summary row from body
SirWojtek Jul 1, 2018
0edc520
bottom summary row
SirWojtek Jul 3, 2018
85a6536
fixed bottom row
SirWojtek Jul 3, 2018
b86b5d4
fixed themes
SirWojtek Jul 3, 2018
b898d03
included stylesheet
SirWojtek Jul 3, 2018
ee2c58d
removed obsolete tests
SirWojtek Jul 4, 2018
2f93e08
Merge remote-tracking branch 'parent/master' into summary-row-scroll
SirWojtek Aug 14, 2019
34ab71d
Merge branch 'master' into summary-row-scroll
SirWojtek Jan 17, 2020
9c1f3bd
conflict marks
SirWojtek Jan 17, 2020
f3fe7c7
prettier fixed
SirWojtek Jan 18, 2020
30a3154
template errors
SirWojtek Jan 18, 2020
3255bc3
removed unused import
SirWojtek Jan 18, 2020
b597333
build fixes
SirWojtek Jan 18, 2020
e575139
re-added demo with scrollbar
SirWojtek Jan 18, 2020
50ef21c
material theme
SirWojtek Jan 18, 2020
53706cd
summary row position fix
SirWojtek Jan 18, 2020
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
Prev Previous commit
Next Next commit
extracted summary row from body
  • Loading branch information
@SirWojtek
SirWojtek committed Jul 2, 2018
commit 1269f7db6bd011691c84fe78c0088a66f0e464d7
8 changes: 0 additions & 8 deletions src/components/body/body.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,6 @@ import { MouseEvent } from '../../events';
[scrollHeight]="scrollHeight"
[scrollWidth]="columnGroupWidths?.total"
(scroll)="onBodyScroll($event)">
<datatable-summary-row
*ngIf="summaryRow && summaryPosition === 'top'"
[rowHeight]="summaryHeight"
[offsetX]="offsetX"
[innerWidth]="innerWidth"
[rows]="rows"
[columns]="columns">
</datatable-summary-row>
<datatable-row-wrapper
[groupedRows]="groupedRows"
*ngFor="let group of temp; let i = index; trackBy: rowTrackingFn;"
Expand Down
24 changes: 13 additions & 11 deletions src/components/body/summary/summary-row.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, Input, OnChanges, PipeTransform, TemplateRef } from '@angular/core';
import { Component, Input, OnChanges, PipeTransform, TemplateRef, ElementRef } from '@angular/core';

export interface ISummaryColumn {
summaryFunc?: (cells: any[]) => any;
Expand Down Expand Up @@ -28,16 +28,18 @@ function noopSumFunc(cells: any[]): void {
@Component({
selector: 'datatable-summary-row',
template: `
<datatable-body-row
*ngIf="summaryRow && _internalColumns"
tabindex="-1"
[innerWidth]="innerWidth"
[offsetX]="offsetX"
[columns]="_internalColumns"
[rowHeight]="rowHeight"
[row]="summaryRow"
[rowIndex]="-1">
</datatable-body-row>
<div>
<datatable-body-row
*ngIf="summaryRow && _internalColumns"
tabindex="-1"
[innerWidth]="offsetWidth"
[offsetX]="offsetX"
[columns]="_internalColumns"
[rowHeight]="rowHeight"
[row]="summaryRow"
[rowIndex]="-1">
</datatable-body-row>
</div>
`,
host: {
class: 'datatable-summary-row'
Expand Down
14 changes: 11 additions & 3 deletions src/components/datatable.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,14 @@ import { BehaviorSubject, Subscription } from 'rxjs';
(select)="onHeaderSelect($event)"
(columnContextmenu)="onColumnContextmenu($event)">
</datatable-header>
<datatable-summary-row
*ngIf="summaryRow && summaryPosition === 'top'"
[rowHeight]="summaryHeight"
[offsetX]="offsetX"
[innerWidth]="_innerWidth"
[rows]="rows"
[columns]="_internalColumns">
</datatable-summary-row>
<datatable-body
[groupRowsBy]="groupRowsBy"
[groupedRows]="groupedRows"
Expand Down Expand Up @@ -736,7 +744,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
ngAfterContentInit() {
this.columnTemplates.changes.subscribe(v =>
this.translateColumns(v));

this.listenForColumnInputChanges();
}

Expand Down Expand Up @@ -1118,11 +1126,11 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
onBodySelect(event: any): void {
this.select.emit(event);
}

ngOnDestroy() {
this._subscriptions.forEach(subscription => subscription.unsubscribe());
}

/**
* listen for changes to input bindings of all DataTableColumnDirective and
* trigger the columnTemplates.changes observable to emit
Expand Down
31 changes: 21 additions & 10 deletions src/themes/material.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@

$cell-padding: .9rem 1.2rem;

.ngx-datatable.material {
background:#FFF;
box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
Expand Down Expand Up @@ -130,7 +133,7 @@

.datatable-header-cell {
text-align: left;
padding: .9rem 1.2rem;
padding: $cell-padding;
font-weight: 400;
color: rgba(0,0,0,.54);
vertical-align: bottom;
Expand Down Expand Up @@ -196,7 +199,7 @@
.datatable-body-row {
.datatable-body-cell {
text-align: left;
padding: .9rem 1.2rem;
padding: $cell-padding;
vertical-align: top;
border-top: 0;
color: rgba(0,0,0,.87);
Expand All @@ -211,7 +214,7 @@
}
.datatable-body-group-cell {
text-align: left;
padding: .9rem 1.2rem;
padding: $cell-padding;
vertical-align: top;
border-top: 0;
color: rgba(0,0,0,.87);
Expand Down Expand Up @@ -323,16 +326,24 @@
}

// Summary row styles

$summary-background-color: rgb(238, 238, 238);

.datatable-summary-row {
.datatable-body-row {
background-color: #ddd;
div {
background-color: $summary-background-color;

&:hover {
background-color: #ddd;
}
.datatable-body-row {
background-color: $summary-background-color;
&:hover {
background-color: $summary-background-color;
}

.datatable-body-cell {
font-weight: bold;
.datatable-body-cell {
background-color: $summary-background-color;
padding: $cell-padding;
font-weight: bold;
}
}
}
}
Expand Down