@ea-controls/mat-table-extensions 19.0.2 → 19.0.3
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 +36 -133
- 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 +20 -39
- 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 -12
- 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
package/angular.json
DELETED
@@ -1,137 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
3
|
-
"version": 1,
|
4
|
-
"newProjectRoot": "projects",
|
5
|
-
"projects": {
|
6
|
-
"mat-table-extensions": {
|
7
|
-
"projectType": "library",
|
8
|
-
"root": "projects/mat-table-extensions",
|
9
|
-
"sourceRoot": "projects/mat-table-extensions/src",
|
10
|
-
"prefix": "lib",
|
11
|
-
"architect": {
|
12
|
-
"build": {
|
13
|
-
"builder": "@angular-devkit/build-angular:ng-packagr",
|
14
|
-
"options": {
|
15
|
-
"project": "projects/mat-table-extensions/ng-package.json"
|
16
|
-
},
|
17
|
-
"configurations": {
|
18
|
-
"production": {
|
19
|
-
"tsConfig": "projects/mat-table-extensions/tsconfig.lib.prod.json"
|
20
|
-
},
|
21
|
-
"development": {
|
22
|
-
"tsConfig": "projects/mat-table-extensions/tsconfig.lib.json"
|
23
|
-
}
|
24
|
-
},
|
25
|
-
"defaultConfiguration": "production"
|
26
|
-
},
|
27
|
-
"test": {
|
28
|
-
"builder": "@angular-devkit/build-angular:karma",
|
29
|
-
"options": {
|
30
|
-
"tsConfig": "projects/mat-table-extensions/tsconfig.spec.json",
|
31
|
-
"polyfills": [
|
32
|
-
"zone.js",
|
33
|
-
"zone.js/testing"
|
34
|
-
]
|
35
|
-
}
|
36
|
-
}
|
37
|
-
}
|
38
|
-
},
|
39
|
-
"mat-table-extensions-examples": {
|
40
|
-
"projectType": "application",
|
41
|
-
"schematics": {
|
42
|
-
"@schematics/angular:component": {
|
43
|
-
"style": "scss"
|
44
|
-
}
|
45
|
-
},
|
46
|
-
"root": "projects/mat-table-extensions-examples",
|
47
|
-
"sourceRoot": "projects/mat-table-extensions-examples/src",
|
48
|
-
"prefix": "app",
|
49
|
-
"architect": {
|
50
|
-
"build": {
|
51
|
-
"builder": "@angular-devkit/build-angular:application",
|
52
|
-
"options": {
|
53
|
-
"outputPath": "dist/mat-table-extensions-examples",
|
54
|
-
"index": "projects/mat-table-extensions-examples/src/index.html",
|
55
|
-
"browser": "projects/mat-table-extensions-examples/src/main.ts",
|
56
|
-
"polyfills": [
|
57
|
-
"zone.js"
|
58
|
-
],
|
59
|
-
"tsConfig": "projects/mat-table-extensions-examples/tsconfig.app.json",
|
60
|
-
"inlineStyleLanguage": "scss",
|
61
|
-
"assets": [
|
62
|
-
{
|
63
|
-
"glob": "**/*",
|
64
|
-
"input": "projects/mat-table-extensions-examples/public"
|
65
|
-
}
|
66
|
-
],
|
67
|
-
"styles": [
|
68
|
-
"@angular/material/prebuilt-themes/azure-blue.css",
|
69
|
-
"projects/mat-table-extensions-examples/src/styles.scss"
|
70
|
-
],
|
71
|
-
"scripts": []
|
72
|
-
},
|
73
|
-
"configurations": {
|
74
|
-
"production": {
|
75
|
-
"budgets": [
|
76
|
-
{
|
77
|
-
"type": "initial",
|
78
|
-
"maximumWarning": "500kB",
|
79
|
-
"maximumError": "1MB"
|
80
|
-
},
|
81
|
-
{
|
82
|
-
"type": "anyComponentStyle",
|
83
|
-
"maximumWarning": "4kB",
|
84
|
-
"maximumError": "8kB"
|
85
|
-
}
|
86
|
-
],
|
87
|
-
"outputHashing": "all"
|
88
|
-
},
|
89
|
-
"development": {
|
90
|
-
"optimization": false,
|
91
|
-
"extractLicenses": false,
|
92
|
-
"sourceMap": true
|
93
|
-
}
|
94
|
-
},
|
95
|
-
"defaultConfiguration": "production"
|
96
|
-
},
|
97
|
-
"serve": {
|
98
|
-
"builder": "@angular-devkit/build-angular:dev-server",
|
99
|
-
"configurations": {
|
100
|
-
"production": {
|
101
|
-
"buildTarget": "mat-table-extensions-examples:build:production"
|
102
|
-
},
|
103
|
-
"development": {
|
104
|
-
"buildTarget": "mat-table-extensions-examples:build:development"
|
105
|
-
}
|
106
|
-
},
|
107
|
-
"defaultConfiguration": "development"
|
108
|
-
},
|
109
|
-
"extract-i18n": {
|
110
|
-
"builder": "@angular-devkit/build-angular:extract-i18n"
|
111
|
-
},
|
112
|
-
"test": {
|
113
|
-
"builder": "@angular-devkit/build-angular:karma",
|
114
|
-
"options": {
|
115
|
-
"polyfills": [
|
116
|
-
"zone.js",
|
117
|
-
"zone.js/testing"
|
118
|
-
],
|
119
|
-
"tsConfig": "projects/mat-table-extensions-examples/tsconfig.spec.json",
|
120
|
-
"inlineStyleLanguage": "scss",
|
121
|
-
"assets": [
|
122
|
-
{
|
123
|
-
"glob": "**/*",
|
124
|
-
"input": "projects/mat-table-extensions-examples/public"
|
125
|
-
}
|
126
|
-
],
|
127
|
-
"styles": [
|
128
|
-
"@angular/material/prebuilt-themes/azure-blue.css",
|
129
|
-
"projects/mat-table-extensions-examples/src/styles.scss"
|
130
|
-
],
|
131
|
-
"scripts": []
|
132
|
-
}
|
133
|
-
}
|
134
|
-
}
|
135
|
-
}
|
136
|
-
}
|
137
|
-
}
|
@@ -1,63 +0,0 @@
|
|
1
|
-
# MatTableExtensions
|
2
|
-
|
3
|
-
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.0.
|
4
|
-
|
5
|
-
## Code scaffolding
|
6
|
-
|
7
|
-
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
8
|
-
|
9
|
-
```bash
|
10
|
-
ng generate component component-name
|
11
|
-
```
|
12
|
-
|
13
|
-
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
14
|
-
|
15
|
-
```bash
|
16
|
-
ng generate --help
|
17
|
-
```
|
18
|
-
|
19
|
-
## Building
|
20
|
-
|
21
|
-
To build the library, run:
|
22
|
-
|
23
|
-
```bash
|
24
|
-
ng build mat-table-extensions
|
25
|
-
```
|
26
|
-
|
27
|
-
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
28
|
-
|
29
|
-
### Publishing the Library
|
30
|
-
|
31
|
-
Once the project is built, you can publish your library by following these steps:
|
32
|
-
|
33
|
-
1. Navigate to the `dist` directory:
|
34
|
-
```bash
|
35
|
-
cd dist/mat-table-extensions
|
36
|
-
```
|
37
|
-
|
38
|
-
2. Run the `npm publish` command to publish your library to the npm registry:
|
39
|
-
```bash
|
40
|
-
npm publish
|
41
|
-
```
|
42
|
-
|
43
|
-
## Running unit tests
|
44
|
-
|
45
|
-
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
46
|
-
|
47
|
-
```bash
|
48
|
-
ng test
|
49
|
-
```
|
50
|
-
|
51
|
-
## Running end-to-end tests
|
52
|
-
|
53
|
-
For end-to-end (e2e) testing, run:
|
54
|
-
|
55
|
-
```bash
|
56
|
-
ng e2e
|
57
|
-
```
|
58
|
-
|
59
|
-
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
60
|
-
|
61
|
-
## Additional Resources
|
62
|
-
|
63
|
-
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
@@ -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
|
-
}
|