@ea-controls/mat-table-extensions 0.0.0 → 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/fesm2022/ea-controls-mat-table-extensions.mjs +146 -0
- package/fesm2022/ea-controls-mat-table-extensions.mjs.map +1 -0
- package/index.d.ts +5 -0
- package/lib/cell.d.ts +18 -0
- package/{projects/mat-table-extensions/src/lib/index.ts → lib/index.d.ts} +3 -3
- package/lib/module.d.ts +9 -0
- package/lib/row.d.ts +16 -0
- package/package.json +30 -35
- package/public-api.d.ts +1 -0
- package/.editorconfig +0 -17
- package/.vscode/extensions.json +0 -4
- package/.vscode/launch.json +0 -20
- package/.vscode/tasks.json +0 -42
- package/angular.json +0 -137
- package/projects/mat-table-extensions/README.md +0 -63
- package/projects/mat-table-extensions/ng-package.json +0 -7
- package/projects/mat-table-extensions/package.json +0 -24
- package/projects/mat-table-extensions/src/lib/cell.ts +0 -58
- package/projects/mat-table-extensions/src/lib/module.ts +0 -21
- package/projects/mat-table-extensions/src/lib/row.ts +0 -38
- package/projects/mat-table-extensions/src/public-api.ts +0 -6
- package/projects/mat-table-extensions/tsconfig.lib.json +0 -15
- package/projects/mat-table-extensions/tsconfig.lib.prod.json +0 -11
- package/projects/mat-table-extensions/tsconfig.spec.json +0 -15
- package/projects/mat-table-extensions-examples/public/favicon.ico +0 -0
- package/projects/mat-table-extensions-examples/src/app/app.component.html +0 -6
- package/projects/mat-table-extensions-examples/src/app/app.component.scss +0 -29
- package/projects/mat-table-extensions-examples/src/app/app.component.spec.ts +0 -29
- package/projects/mat-table-extensions-examples/src/app/app.component.ts +0 -14
- package/projects/mat-table-extensions-examples/src/app/app.config.ts +0 -9
- package/projects/mat-table-extensions-examples/src/app/app.routes.ts +0 -9
- package/projects/mat-table-extensions-examples/src/app/basic/basic.component.html +0 -66
- package/projects/mat-table-extensions-examples/src/app/basic/basic.component.scss +0 -0
- package/projects/mat-table-extensions-examples/src/app/basic/basic.component.spec.ts +0 -23
- package/projects/mat-table-extensions-examples/src/app/basic/basic.component.ts +0 -33
- package/projects/mat-table-extensions-examples/src/app/sticky/sticky.component.html +0 -83
- package/projects/mat-table-extensions-examples/src/app/sticky/sticky.component.scss +0 -0
- package/projects/mat-table-extensions-examples/src/app/sticky/sticky.component.spec.ts +0 -23
- package/projects/mat-table-extensions-examples/src/app/sticky/sticky.component.ts +0 -57
- package/projects/mat-table-extensions-examples/src/index.html +0 -15
- package/projects/mat-table-extensions-examples/src/main.ts +0 -6
- package/projects/mat-table-extensions-examples/src/styles.scss +0 -4
- package/projects/mat-table-extensions-examples/tsconfig.app.json +0 -15
- package/projects/mat-table-extensions-examples/tsconfig.spec.json +0 -15
- package/tsconfig.json +0 -35
@@ -1,58 +0,0 @@
|
|
1
|
-
import { Directive, inject, input, effect } from "@angular/core";
|
2
|
-
import { MatHeaderCellDef, MatTable, MatColumnDef, MatFooterCellDef } from "@angular/material/table";
|
3
|
-
|
4
|
-
@Directive({
|
5
|
-
selector: '[matExtraHeaderCellDef]',
|
6
|
-
providers: [{ provide: MatHeaderCellDef, useExisting: MatExtraHeaderCellDefDirective }]
|
7
|
-
})
|
8
|
-
export class MatExtraHeaderCellDefDirective extends MatHeaderCellDef {
|
9
|
-
|
10
|
-
private _table = inject(MatTable);
|
11
|
-
private _column = inject(MatColumnDef);
|
12
|
-
public _prefix = input('', { alias: 'matExtraHeaderCellDef' })
|
13
|
-
|
14
|
-
constructor() {
|
15
|
-
super();
|
16
|
-
|
17
|
-
let column = new MatColumnDef();
|
18
|
-
|
19
|
-
effect(() => {
|
20
|
-
if (this._table) {
|
21
|
-
column.name = `h_${this._column.name}_${this._prefix()}`;
|
22
|
-
column.sticky = this._column.sticky;
|
23
|
-
column.stickyEnd = this._column.stickyEnd;
|
24
|
-
column.cssClassFriendlyName = this._column.cssClassFriendlyName;
|
25
|
-
column.headerCell = this;
|
26
|
-
this._table.addColumnDef(column);
|
27
|
-
}
|
28
|
-
});
|
29
|
-
}
|
30
|
-
}
|
31
|
-
|
32
|
-
@Directive({
|
33
|
-
selector: '[matExtraFooterCellDef]',
|
34
|
-
providers: [{ provide: MatFooterCellDef, useExisting: MatExtraFooterCellDefDirective }]
|
35
|
-
})
|
36
|
-
export class MatExtraFooterCellDefDirective extends MatFooterCellDef {
|
37
|
-
|
38
|
-
private _table = inject(MatTable);
|
39
|
-
private _column = inject(MatColumnDef);
|
40
|
-
public _prefix = input('', { alias: 'matExtraFooterCellDef' })
|
41
|
-
|
42
|
-
constructor() {
|
43
|
-
super();
|
44
|
-
|
45
|
-
let column = new MatColumnDef();
|
46
|
-
|
47
|
-
effect(() => {
|
48
|
-
if (this._table) {
|
49
|
-
column.name = `f_${this._column.name}_${this._prefix()}`;
|
50
|
-
column.sticky = this._column.sticky;
|
51
|
-
column.stickyEnd = this._column.stickyEnd;
|
52
|
-
column.cssClassFriendlyName = this._column.cssClassFriendlyName;
|
53
|
-
column.footerCell = this;
|
54
|
-
this._table.addColumnDef(column);
|
55
|
-
}
|
56
|
-
});
|
57
|
-
}
|
58
|
-
}
|
@@ -1,21 +0,0 @@
|
|
1
|
-
import { NgModule } from "@angular/core";
|
2
|
-
import { MatExtraFooterCellDefDirective, MatExtraFooterRowDefDirective, MatExtraHeaderCellDefDirective, MatExtraHeaderRowDefDirective } from ".";
|
3
|
-
import { MatTableModule } from "@angular/material/table";
|
4
|
-
|
5
|
-
@NgModule({
|
6
|
-
imports: [
|
7
|
-
MatExtraHeaderCellDefDirective,
|
8
|
-
MatExtraFooterCellDefDirective,
|
9
|
-
MatExtraHeaderRowDefDirective,
|
10
|
-
MatExtraFooterRowDefDirective,
|
11
|
-
MatTableModule
|
12
|
-
],
|
13
|
-
exports: [
|
14
|
-
MatExtraHeaderCellDefDirective,
|
15
|
-
MatExtraFooterCellDefDirective,
|
16
|
-
MatExtraHeaderRowDefDirective,
|
17
|
-
MatExtraFooterRowDefDirective,
|
18
|
-
MatTableModule
|
19
|
-
],
|
20
|
-
})
|
21
|
-
export class MatExtraTableModule { }
|
@@ -1,38 +0,0 @@
|
|
1
|
-
import { CdkHeaderRowDef, CdkFooterRowDef } from "@angular/cdk/table";
|
2
|
-
import { Directive, booleanAttribute, input, effect } from "@angular/core";
|
3
|
-
|
4
|
-
@Directive({
|
5
|
-
selector: '[matExtraHeaderRowDef]',
|
6
|
-
providers: [{ provide: CdkHeaderRowDef, useExisting: MatExtraHeaderRowDefDirective }],
|
7
|
-
inputs: [
|
8
|
-
{ name: 'columns', alias: 'matExtraHeaderRowDef' },
|
9
|
-
{ name: 'sticky', alias: 'matExtraHeaderRowDefSticky', transform: booleanAttribute },
|
10
|
-
],
|
11
|
-
})
|
12
|
-
export class MatExtraHeaderRowDefDirective extends CdkHeaderRowDef {
|
13
|
-
|
14
|
-
public _prefix = input.required({ alias: 'matExtraHeaderRowDefName' })
|
15
|
-
|
16
|
-
constructor() {
|
17
|
-
super();
|
18
|
-
effect(() => this.columns = [...this.columns].map(c => `h_${c}_${this._prefix()}`));
|
19
|
-
}
|
20
|
-
}
|
21
|
-
|
22
|
-
@Directive({
|
23
|
-
selector: '[matExtraFooterRowDef]',
|
24
|
-
providers: [{ provide: CdkFooterRowDef, useExisting: MatExtraFooterRowDefDirective }],
|
25
|
-
inputs: [
|
26
|
-
{ name: 'columns', alias: 'matExtraFooterRowDef' },
|
27
|
-
{ name: 'sticky', alias: 'matExtraFooterRowDefSticky', transform: booleanAttribute },
|
28
|
-
],
|
29
|
-
})
|
30
|
-
export class MatExtraFooterRowDefDirective extends CdkFooterRowDef {
|
31
|
-
|
32
|
-
public _prefix = input.required({ alias: 'matExtraFooterRowDefName' })
|
33
|
-
|
34
|
-
constructor() {
|
35
|
-
super();
|
36
|
-
effect(() => this.columns = [...this.columns].map(c => `f_${c}_${this._prefix()}`));
|
37
|
-
}
|
38
|
-
}
|
@@ -1,15 +0,0 @@
|
|
1
|
-
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
2
|
-
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
3
|
-
{
|
4
|
-
"extends": "../../tsconfig.json",
|
5
|
-
"compilerOptions": {
|
6
|
-
"outDir": "../../out-tsc/lib",
|
7
|
-
"declaration": true,
|
8
|
-
"declarationMap": true,
|
9
|
-
"inlineSources": true,
|
10
|
-
"types": []
|
11
|
-
},
|
12
|
-
"exclude": [
|
13
|
-
"**/*.spec.ts"
|
14
|
-
]
|
15
|
-
}
|
@@ -1,11 +0,0 @@
|
|
1
|
-
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
2
|
-
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
3
|
-
{
|
4
|
-
"extends": "./tsconfig.lib.json",
|
5
|
-
"compilerOptions": {
|
6
|
-
"declarationMap": false
|
7
|
-
},
|
8
|
-
"angularCompilerOptions": {
|
9
|
-
"compilationMode": "partial"
|
10
|
-
}
|
11
|
-
}
|
@@ -1,15 +0,0 @@
|
|
1
|
-
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
2
|
-
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
3
|
-
{
|
4
|
-
"extends": "../../tsconfig.json",
|
5
|
-
"compilerOptions": {
|
6
|
-
"outDir": "../../out-tsc/spec",
|
7
|
-
"types": [
|
8
|
-
"jasmine"
|
9
|
-
]
|
10
|
-
},
|
11
|
-
"include": [
|
12
|
-
"**/*.spec.ts",
|
13
|
-
"**/*.d.ts"
|
14
|
-
]
|
15
|
-
}
|
Binary file
|
@@ -1,29 +0,0 @@
|
|
1
|
-
/* Navbar container */
|
2
|
-
.navbar {
|
3
|
-
overflow: hidden;
|
4
|
-
background-color: #333;
|
5
|
-
font-family: Arial, Helvetica, sans-serif;
|
6
|
-
margin-bottom: 1rem;
|
7
|
-
}
|
8
|
-
|
9
|
-
/* Navbar links */
|
10
|
-
.navbar a {
|
11
|
-
float: left;
|
12
|
-
display: block;
|
13
|
-
color: #f2f2f2;
|
14
|
-
text-align: center;
|
15
|
-
padding: 14px 16px;
|
16
|
-
text-decoration: none;
|
17
|
-
}
|
18
|
-
|
19
|
-
/* Change color on hover */
|
20
|
-
.navbar a:hover {
|
21
|
-
background-color: #ddd;
|
22
|
-
color: black;
|
23
|
-
}
|
24
|
-
|
25
|
-
/* Active/current link */
|
26
|
-
.navbar a.active {
|
27
|
-
background-color: #4CAF50;
|
28
|
-
color: white;
|
29
|
-
}
|
@@ -1,29 +0,0 @@
|
|
1
|
-
import { TestBed } from '@angular/core/testing';
|
2
|
-
import { AppComponent } from './app.component';
|
3
|
-
|
4
|
-
describe('AppComponent', () => {
|
5
|
-
beforeEach(async () => {
|
6
|
-
await TestBed.configureTestingModule({
|
7
|
-
imports: [AppComponent],
|
8
|
-
}).compileComponents();
|
9
|
-
});
|
10
|
-
|
11
|
-
it('should create the app', () => {
|
12
|
-
const fixture = TestBed.createComponent(AppComponent);
|
13
|
-
const app = fixture.componentInstance;
|
14
|
-
expect(app).toBeTruthy();
|
15
|
-
});
|
16
|
-
|
17
|
-
it(`should have the 'mat-table-extensions-examples' title`, () => {
|
18
|
-
const fixture = TestBed.createComponent(AppComponent);
|
19
|
-
const app = fixture.componentInstance;
|
20
|
-
expect(app.title).toEqual('mat-table-extensions-examples');
|
21
|
-
});
|
22
|
-
|
23
|
-
it('should render title', () => {
|
24
|
-
const fixture = TestBed.createComponent(AppComponent);
|
25
|
-
fixture.detectChanges();
|
26
|
-
const compiled = fixture.nativeElement as HTMLElement;
|
27
|
-
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, mat-table-extensions-examples');
|
28
|
-
});
|
29
|
-
});
|
@@ -1,14 +0,0 @@
|
|
1
|
-
import { Component } from '@angular/core';
|
2
|
-
import { RouterModule } from '@angular/router';
|
3
|
-
|
4
|
-
@Component({
|
5
|
-
selector: 'app-root',
|
6
|
-
imports: [
|
7
|
-
RouterModule
|
8
|
-
],
|
9
|
-
templateUrl: './app.component.html',
|
10
|
-
styleUrl: './app.component.scss'
|
11
|
-
})
|
12
|
-
export class AppComponent {
|
13
|
-
|
14
|
-
}
|
@@ -1,9 +0,0 @@
|
|
1
|
-
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
|
2
|
-
import { provideRouter } from '@angular/router';
|
3
|
-
|
4
|
-
import { routes } from './app.routes';
|
5
|
-
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
6
|
-
|
7
|
-
export const appConfig: ApplicationConfig = {
|
8
|
-
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimationsAsync()]
|
9
|
-
};
|
@@ -1,9 +0,0 @@
|
|
1
|
-
import { Routes } from '@angular/router';
|
2
|
-
import { BasicComponent } from './basic/basic.component';
|
3
|
-
import { StickyComponent } from './sticky/sticky.component';
|
4
|
-
|
5
|
-
export const routes: Routes = [
|
6
|
-
{ path: '', redirectTo: 'basic', pathMatch: 'full' },
|
7
|
-
{ path: 'basic', component: BasicComponent },
|
8
|
-
{ path: 'sticky', component: StickyComponent },
|
9
|
-
];
|
@@ -1,66 +0,0 @@
|
|
1
|
-
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
|
2
|
-
|
3
|
-
<!-- POSITION -->
|
4
|
-
<ng-container matColumnDef="position">
|
5
|
-
<th mat-header-cell *matHeaderCellDef> 1. from html </th>
|
6
|
-
<th mat-header-cell *matExtraHeaderCellDef="'filter'">
|
7
|
-
<input type="text">
|
8
|
-
</th>
|
9
|
-
|
10
|
-
<td mat-cell *matCellDef="let data"> xxxxxxxxxx from html </td>
|
11
|
-
|
12
|
-
<td mat-footer-cell *matFooterCellDef> f1 </td>
|
13
|
-
<td mat-footer-cell *matExtraFooterCellDef="'filter'" [attr.colspan]="2">f2</td>
|
14
|
-
</ng-container>
|
15
|
-
|
16
|
-
<!-- NAME -->
|
17
|
-
<ng-container matColumnDef="name">
|
18
|
-
<th mat-header-cell *matHeaderCellDef> Name </th>
|
19
|
-
<th mat-header-cell *matExtraHeaderCellDef="'filter'">
|
20
|
-
<input type="text">
|
21
|
-
</th>
|
22
|
-
|
23
|
-
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
|
24
|
-
|
25
|
-
<td mat-footer-cell *matFooterCellDef> f1 </td>
|
26
|
-
<td mat-footer-cell *matExtraFooterCellDef="'filter'" [attr.colspan]="4">f2</td>
|
27
|
-
</ng-container>
|
28
|
-
|
29
|
-
<!-- WEIGHT -->
|
30
|
-
<ng-container matColumnDef="weight">
|
31
|
-
<th mat-header-cell *matHeaderCellDef> Weight </th>
|
32
|
-
<th mat-header-cell *matExtraHeaderCellDef="'filter'">
|
33
|
-
<input type="text">
|
34
|
-
</th>
|
35
|
-
|
36
|
-
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
|
37
|
-
|
38
|
-
<td mat-footer-cell *matFooterCellDef> f1 </td>
|
39
|
-
</ng-container>
|
40
|
-
|
41
|
-
<!-- SYMBOL -->
|
42
|
-
<ng-container matColumnDef="symbol">
|
43
|
-
<th mat-header-cell *matHeaderCellDef> Symbol </th>
|
44
|
-
<th mat-header-cell *matExtraHeaderCellDef="'filter'">
|
45
|
-
<input type="text">
|
46
|
-
</th>
|
47
|
-
|
48
|
-
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
|
49
|
-
|
50
|
-
<td mat-footer-cell *matFooterCellDef> f1 </td>
|
51
|
-
</ng-container>
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
<!-- HEADERS -->
|
56
|
-
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
57
|
-
<tr mat-header-row *matExtraHeaderRowDef="displayedColumns; name: 'filter'"></tr>
|
58
|
-
|
59
|
-
<!-- CELLS -->
|
60
|
-
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
61
|
-
|
62
|
-
<!-- FOOTER -->
|
63
|
-
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
|
64
|
-
<tr mat-footer-row *matExtraFooterRowDef="['position', 'name']; name: 'filter'"></tr>
|
65
|
-
|
66
|
-
</table>
|
File without changes
|
@@ -1,23 +0,0 @@
|
|
1
|
-
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
2
|
-
|
3
|
-
import { BasicComponent } from './basic.component';
|
4
|
-
|
5
|
-
describe('BasicComponent', () => {
|
6
|
-
let component: BasicComponent;
|
7
|
-
let fixture: ComponentFixture<BasicComponent>;
|
8
|
-
|
9
|
-
beforeEach(async () => {
|
10
|
-
await TestBed.configureTestingModule({
|
11
|
-
imports: [BasicComponent]
|
12
|
-
})
|
13
|
-
.compileComponents();
|
14
|
-
|
15
|
-
fixture = TestBed.createComponent(BasicComponent);
|
16
|
-
component = fixture.componentInstance;
|
17
|
-
fixture.detectChanges();
|
18
|
-
});
|
19
|
-
|
20
|
-
it('should create', () => {
|
21
|
-
expect(component).toBeTruthy();
|
22
|
-
});
|
23
|
-
});
|
@@ -1,33 +0,0 @@
|
|
1
|
-
import { Component } from '@angular/core';
|
2
|
-
import { MatExtraTableModule } from '@ea-controls/mat-table-extensions';
|
3
|
-
|
4
|
-
export interface PeriodicElement {
|
5
|
-
name: string;
|
6
|
-
position: number;
|
7
|
-
weight: number;
|
8
|
-
symbol: string;
|
9
|
-
}
|
10
|
-
|
11
|
-
const ELEMENT_DATA: PeriodicElement[] = [
|
12
|
-
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
|
13
|
-
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
|
14
|
-
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
|
15
|
-
{ position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
|
16
|
-
{ position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
|
17
|
-
{ position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
|
18
|
-
{ position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
|
19
|
-
{ position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
|
20
|
-
{ position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
|
21
|
-
{ position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
|
22
|
-
];
|
23
|
-
|
24
|
-
@Component({
|
25
|
-
selector: 'app-basic',
|
26
|
-
imports: [MatExtraTableModule],
|
27
|
-
templateUrl: './basic.component.html',
|
28
|
-
styleUrl: './basic.component.scss'
|
29
|
-
})
|
30
|
-
export class BasicComponent {
|
31
|
-
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
|
32
|
-
dataSource = ELEMENT_DATA;
|
33
|
-
}
|
@@ -1,83 +0,0 @@
|
|
1
|
-
<div>
|
2
|
-
<button mat-raised-button (click)="tables.push(tables.length)">Add table</button>
|
3
|
-
<button mat-raised-button (click)="tables.pop()">Remove table</button>
|
4
|
-
</div>
|
5
|
-
|
6
|
-
<div>
|
7
|
-
Sticky Headers:
|
8
|
-
<mat-button-toggle-group multiple [value]="['header-1']" #stickyHeaders="matButtonToggleGroup"
|
9
|
-
class="example-sticky-toggle-group">
|
10
|
-
<mat-button-toggle value="header-1"> Row 1 </mat-button-toggle>
|
11
|
-
<mat-button-toggle value="header-2"> Row 2 </mat-button-toggle>
|
12
|
-
</mat-button-toggle-group>
|
13
|
-
</div>
|
14
|
-
|
15
|
-
<div>
|
16
|
-
Sticky Footers:
|
17
|
-
<mat-button-toggle-group multiple [value]="['footer-1']" #stickyFooters="matButtonToggleGroup"
|
18
|
-
class="example-sticky-toggle-group">
|
19
|
-
<mat-button-toggle value="footer-1"> Row 1 </mat-button-toggle>
|
20
|
-
<mat-button-toggle value="footer-2"> Row 2 </mat-button-toggle>
|
21
|
-
</mat-button-toggle-group>
|
22
|
-
</div>
|
23
|
-
|
24
|
-
<div>
|
25
|
-
Sticky Columns:
|
26
|
-
<mat-button-toggle-group multiple [value]="['position', 'symbol']" #stickyColumns="matButtonToggleGroup"
|
27
|
-
class="example-sticky-toggle-group">
|
28
|
-
<mat-button-toggle value="position"> Position </mat-button-toggle>
|
29
|
-
<mat-button-toggle value="name"> Name </mat-button-toggle>
|
30
|
-
<mat-button-toggle value="weight"> Weight </mat-button-toggle>
|
31
|
-
<mat-button-toggle value="symbol"> Symbol </mat-button-toggle>
|
32
|
-
</mat-button-toggle-group>
|
33
|
-
</div>
|
34
|
-
|
35
|
-
<section class="example-container mat-elevation-z8" tabindex="0">
|
36
|
-
@for (table of tables; track table) {
|
37
|
-
<mat-table [dataSource]="dataSource">
|
38
|
-
<ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
|
39
|
-
<th mat-header-cell *matHeaderCellDef> Position </th>
|
40
|
-
<th mat-header-cell *matExtraHeaderCellDef="'filter'"> <input type="text"> </th>
|
41
|
-
<td mat-footer-cell mat-cell *matCellDef="let element"> {{element.position}} </td>
|
42
|
-
<td mat-footer-cell *matFooterCellDef> Position Footer </td>
|
43
|
-
</ng-container>
|
44
|
-
|
45
|
-
<ng-container matColumnDef="name" [sticky]="isSticky(stickyColumns, 'name')">
|
46
|
-
<th mat-header-cell *matHeaderCellDef> Name </th>
|
47
|
-
<th mat-header-cell *matExtraHeaderCellDef="'filter'"> <input type="text"> </th>
|
48
|
-
<td mat-footer-cell mat-cell *matCellDef="let element"> {{element.name}} </td>
|
49
|
-
<td mat-footer-cell *matFooterCellDef> Name Footer </td>
|
50
|
-
</ng-container>
|
51
|
-
|
52
|
-
<ng-container matColumnDef="weight" [stickyEnd]="isSticky(stickyColumns, 'weight')">
|
53
|
-
<th mat-header-cell *matHeaderCellDef> Weight </th>
|
54
|
-
<th mat-header-cell *matExtraHeaderCellDef="'filter'"> <input type="text"> </th>
|
55
|
-
<td mat-footer-cell mat-cell *matCellDef="let element"> {{element.weight}} </td>
|
56
|
-
<td mat-footer-cell *matFooterCellDef> Weight Footer </td>
|
57
|
-
</ng-container>
|
58
|
-
|
59
|
-
<ng-container matColumnDef="symbol" [stickyEnd]="isSticky(stickyColumns, 'symbol')">
|
60
|
-
<th mat-header-cell *matHeaderCellDef> Symbol </th>
|
61
|
-
<th mat-header-cell *matExtraHeaderCellDef="'filter'"> <input type="text"> </th>
|
62
|
-
<td mat-footer-cell mat-cell *matCellDef="let element"> {{element.symbol}} </td>
|
63
|
-
<td mat-footer-cell *matFooterCellDef> Symbol Footer </td>
|
64
|
-
</ng-container>
|
65
|
-
|
66
|
-
<ng-container matColumnDef="filler">
|
67
|
-
<th mat-header-cell *matHeaderCellDef> Filler header cell </th>
|
68
|
-
<th mat-header-cell *matExtraHeaderCellDef="'filter'"> <input type="text"> </th>
|
69
|
-
<td mat-footer-cell mat-cell *matCellDef="let element"> Filler data cell </td>
|
70
|
-
<td mat-footer-cell *matFooterCellDef> Filler footer cell </td>
|
71
|
-
</ng-container>
|
72
|
-
|
73
|
-
<tr mat-header-row *matExtraHeaderRowDef="displayedColumns; sticky: true; name: 'filter'"></tr>
|
74
|
-
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-1')"></tr>
|
75
|
-
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-2')"></tr>
|
76
|
-
|
77
|
-
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
78
|
-
|
79
|
-
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></tr>
|
80
|
-
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></tr>
|
81
|
-
</mat-table>
|
82
|
-
}
|
83
|
-
</section>
|
File without changes
|
@@ -1,23 +0,0 @@
|
|
1
|
-
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
2
|
-
|
3
|
-
import { StickyComponent } from './sticky.component';
|
4
|
-
|
5
|
-
describe('StickyComponent', () => {
|
6
|
-
let component: StickyComponent;
|
7
|
-
let fixture: ComponentFixture<StickyComponent>;
|
8
|
-
|
9
|
-
beforeEach(async () => {
|
10
|
-
await TestBed.configureTestingModule({
|
11
|
-
imports: [StickyComponent]
|
12
|
-
})
|
13
|
-
.compileComponents();
|
14
|
-
|
15
|
-
fixture = TestBed.createComponent(StickyComponent);
|
16
|
-
component = fixture.componentInstance;
|
17
|
-
fixture.detectChanges();
|
18
|
-
});
|
19
|
-
|
20
|
-
it('should create', () => {
|
21
|
-
expect(component).toBeTruthy();
|
22
|
-
});
|
23
|
-
});
|
@@ -1,57 +0,0 @@
|
|
1
|
-
import { Component } from '@angular/core';
|
2
|
-
import { MatButtonModule } from '@angular/material/button';
|
3
|
-
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
4
|
-
import { MatExtraTableModule } from '@ea-controls/mat-table-extensions';
|
5
|
-
import { MatButtonToggleGroup } from '@angular/material/button-toggle';
|
6
|
-
|
7
|
-
export interface PeriodicElement {
|
8
|
-
name: string;
|
9
|
-
position: number;
|
10
|
-
weight: number;
|
11
|
-
symbol: string;
|
12
|
-
}
|
13
|
-
|
14
|
-
const ELEMENT_DATA: PeriodicElement[] = [
|
15
|
-
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
|
16
|
-
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
|
17
|
-
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
|
18
|
-
{ position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
|
19
|
-
{ position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
|
20
|
-
{ position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
|
21
|
-
{ position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
|
22
|
-
{ position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
|
23
|
-
{ position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
|
24
|
-
{ position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
|
25
|
-
];
|
26
|
-
|
27
|
-
|
28
|
-
@Component({
|
29
|
-
selector: 'app-sticky',
|
30
|
-
imports: [MatExtraTableModule, MatButtonModule, MatButtonToggleModule],
|
31
|
-
templateUrl: './sticky.component.html',
|
32
|
-
styleUrl: './sticky.component.scss'
|
33
|
-
})
|
34
|
-
export class StickyComponent {
|
35
|
-
|
36
|
-
displayedColumns: string[] = [];
|
37
|
-
dataSource = ELEMENT_DATA;
|
38
|
-
|
39
|
-
tables = [0];
|
40
|
-
|
41
|
-
constructor() {
|
42
|
-
this.displayedColumns.length = 24;
|
43
|
-
this.displayedColumns.fill('filler');
|
44
|
-
|
45
|
-
// The first two columns should be position and name; the last two columns: weight, symbol
|
46
|
-
this.displayedColumns[0] = 'position';
|
47
|
-
this.displayedColumns[1] = 'name';
|
48
|
-
this.displayedColumns[22] = 'weight';
|
49
|
-
this.displayedColumns[23] = 'symbol';
|
50
|
-
}
|
51
|
-
|
52
|
-
/** Whether the button toggle group contains the id as an active value. */
|
53
|
-
isSticky(buttonToggleGroup: MatButtonToggleGroup, id: string) {
|
54
|
-
return (buttonToggleGroup.value || []).indexOf(id) !== -1;
|
55
|
-
}
|
56
|
-
|
57
|
-
}
|
@@ -1,15 +0,0 @@
|
|
1
|
-
<!doctype html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="utf-8">
|
5
|
-
<title>MatTableExtensionsExamples</title>
|
6
|
-
<base href="/">
|
7
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
8
|
-
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
9
|
-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
10
|
-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
11
|
-
</head>
|
12
|
-
<body>
|
13
|
-
<app-root></app-root>
|
14
|
-
</body>
|
15
|
-
</html>
|
@@ -1,15 +0,0 @@
|
|
1
|
-
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
2
|
-
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
3
|
-
{
|
4
|
-
"extends": "../../tsconfig.json",
|
5
|
-
"compilerOptions": {
|
6
|
-
"outDir": "../../out-tsc/app",
|
7
|
-
"types": []
|
8
|
-
},
|
9
|
-
"files": [
|
10
|
-
"src/main.ts"
|
11
|
-
],
|
12
|
-
"include": [
|
13
|
-
"src/**/*.d.ts"
|
14
|
-
]
|
15
|
-
}
|
@@ -1,15 +0,0 @@
|
|
1
|
-
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
2
|
-
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
3
|
-
{
|
4
|
-
"extends": "../../tsconfig.json",
|
5
|
-
"compilerOptions": {
|
6
|
-
"outDir": "../../out-tsc/spec",
|
7
|
-
"types": [
|
8
|
-
"jasmine"
|
9
|
-
]
|
10
|
-
},
|
11
|
-
"include": [
|
12
|
-
"src/**/*.spec.ts",
|
13
|
-
"src/**/*.d.ts"
|
14
|
-
]
|
15
|
-
}
|