@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.
Files changed (46) hide show
  1. package/README.md +2 -0
  2. package/fesm2022/ea-controls-mat-table-extensions.mjs +146 -0
  3. package/fesm2022/ea-controls-mat-table-extensions.mjs.map +1 -0
  4. package/index.d.ts +5 -0
  5. package/lib/cell.d.ts +18 -0
  6. package/{projects/mat-table-extensions/src/lib/index.ts → lib/index.d.ts} +3 -3
  7. package/lib/module.d.ts +9 -0
  8. package/lib/row.d.ts +16 -0
  9. package/package.json +30 -35
  10. package/public-api.d.ts +1 -0
  11. package/.editorconfig +0 -17
  12. package/.vscode/extensions.json +0 -4
  13. package/.vscode/launch.json +0 -20
  14. package/.vscode/tasks.json +0 -42
  15. package/angular.json +0 -137
  16. package/projects/mat-table-extensions/README.md +0 -63
  17. package/projects/mat-table-extensions/ng-package.json +0 -7
  18. package/projects/mat-table-extensions/package.json +0 -24
  19. package/projects/mat-table-extensions/src/lib/cell.ts +0 -58
  20. package/projects/mat-table-extensions/src/lib/module.ts +0 -21
  21. package/projects/mat-table-extensions/src/lib/row.ts +0 -38
  22. package/projects/mat-table-extensions/src/public-api.ts +0 -6
  23. package/projects/mat-table-extensions/tsconfig.lib.json +0 -15
  24. package/projects/mat-table-extensions/tsconfig.lib.prod.json +0 -11
  25. package/projects/mat-table-extensions/tsconfig.spec.json +0 -15
  26. package/projects/mat-table-extensions-examples/public/favicon.ico +0 -0
  27. package/projects/mat-table-extensions-examples/src/app/app.component.html +0 -6
  28. package/projects/mat-table-extensions-examples/src/app/app.component.scss +0 -29
  29. package/projects/mat-table-extensions-examples/src/app/app.component.spec.ts +0 -29
  30. package/projects/mat-table-extensions-examples/src/app/app.component.ts +0 -14
  31. package/projects/mat-table-extensions-examples/src/app/app.config.ts +0 -9
  32. package/projects/mat-table-extensions-examples/src/app/app.routes.ts +0 -9
  33. package/projects/mat-table-extensions-examples/src/app/basic/basic.component.html +0 -66
  34. package/projects/mat-table-extensions-examples/src/app/basic/basic.component.scss +0 -0
  35. package/projects/mat-table-extensions-examples/src/app/basic/basic.component.spec.ts +0 -23
  36. package/projects/mat-table-extensions-examples/src/app/basic/basic.component.ts +0 -33
  37. package/projects/mat-table-extensions-examples/src/app/sticky/sticky.component.html +0 -83
  38. package/projects/mat-table-extensions-examples/src/app/sticky/sticky.component.scss +0 -0
  39. package/projects/mat-table-extensions-examples/src/app/sticky/sticky.component.spec.ts +0 -23
  40. package/projects/mat-table-extensions-examples/src/app/sticky/sticky.component.ts +0 -57
  41. package/projects/mat-table-extensions-examples/src/index.html +0 -15
  42. package/projects/mat-table-extensions-examples/src/main.ts +0 -6
  43. package/projects/mat-table-extensions-examples/src/styles.scss +0 -4
  44. package/projects/mat-table-extensions-examples/tsconfig.app.json +0 -15
  45. package/projects/mat-table-extensions-examples/tsconfig.spec.json +0 -15
  46. 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,6 +0,0 @@
1
- /*
2
- * Public API Surface of mat-table-extensions
3
- */
4
-
5
-
6
- export * from './lib';
@@ -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
- }
@@ -1,6 +0,0 @@
1
- <div class="navbar">
2
- <a [routerLink]="'/basic'" routerLinkActive="active">Basic</a>
3
- <a [routerLink]="'/sticky'" routerLinkActive="active">Sticky</a>
4
- </div>
5
-
6
- <router-outlet />
@@ -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>
@@ -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>
@@ -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,6 +0,0 @@
1
- import { bootstrapApplication } from '@angular/platform-browser';
2
- import { appConfig } from './app/app.config';
3
- import { AppComponent } from './app/app.component';
4
-
5
- bootstrapApplication(AppComponent, appConfig)
6
- .catch((err) => console.error(err));
@@ -1,4 +0,0 @@
1
- /* You can add global styles to this file, and also import other style files */
2
-
3
- html, body { height: 100%; }
4
- body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
@@ -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
- }