@ea-controls/mat-table-extensions 19.0.3 → 19.0.4

package/README.md

@@ -1,63 +1,162 @@
 # MatTableExtensions
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.0.
+Angular directives that allows to extend Angular [mat-table](https://material.angular.io/components/table/overview) features
 
-## Code scaffolding
+## Multiple Headers/Footer
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+Usually mat-table only allows one header and footer inside [matColumnDef] directive
 
-```bash
-ng generate component component-name
+```html
+<table mat-table>
+    <ng-container matColumnDef="position">
+        <th mat-header-cell *matHeaderCellDef> No. </th> <!-- Only one header -->
+        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+</table>
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+With current library, now you can add more of them
+
+```html
+<table mat-table>
+    <ng-container matColumnDef="position">
+        <th mat-header-cell *matHeaderCellDef> No. </th>
+        <th mat-header-cell *matExtraHeaderCellDef="'extra-header-name'"> Extra Header </th> <!-- Extra header cell-->
+        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+    </ng-container>
 
-```bash
-ng generate --help
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-header-row *matExtraHeaderRowDef="displayedColumns; name: 'extra-header-name'"></tr> <!-- Extra header row -->
+</table>
 ```
 
-## Building
+### Steps
+
+1. Import `MatExtraTableModule`
+1. Add new `*matExtraHeaderCellDef` instead `*matHeaderCellDef` for extra headers
+    1. You have to send any string value as cell identifier
+        > Replace `extra-header-name` with your custom name
+    1. Notice you can use `*matHeaderRowDef` normally, new directive is only used when you need extra header cell
+1. Add new `*matExtraHeaderRowDef` instead `*matHeaderRowDef` for extra rows using extra header cells
+    1. `name` is required to find extra header, it have to be the same use in `matExtraHeaderCellDef` attribute
+        > *matExtraHeaderRowDef="displayedColumns; `name`: 'extra-header-name'>"
+    1. Notice you can use `*matHeaderRowDef` normally, new directive is only used when you need extra header row
+1. Similar tags you can use when extra footer is required
+
+```html
+<td mat-footer-cell *matExtraFooterCellDef="'extra-footer-name'">Footer</th> <!-- Extra footer cell -->
+```
 
-To build the library, run:
+```html
+<tr mat-header-row *matExtraFooterRowDef="displayedColumns; name: 'extra-footer-name'"></tr> <!-- Extra footer row -->
+```
+    
+
+### Full example
+
+```ts
+
+import { MatExtraTableModule } from '@ea-controls/mat-table-extensions';
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
+  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
+  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
+  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
+  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
+  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
+  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
+  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
+  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
+  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
+];
+
+@Component({
+  selector: 'app-basic',
+  imports: [MatExtraTableModule],
+  templateUrl: './basic.component.html'
+})
+export class BasicComponent {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = ELEMENT_DATA;
+}
 
-```bash
-ng build mat-table-extensions
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+```html
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 
-### Publishing the Library
+    <!-- POSITION -->
+    <ng-container matColumnDef="position">
+        <th mat-header-cell *matHeaderCellDef> 1. from html </th>
+        <th mat-header-cell *matExtraHeaderCellDef="'filter'">
+            <input type="text">
+        </th>
 
-Once the project is built, you can publish your library by following these steps:
+        <td mat-cell *matCellDef="let data"> xxxxxxxxxx from html </td>
 
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/mat-table-extensions
-   ```
+        <td mat-footer-cell *matFooterCellDef> f1 </td>
+        <th mat-footer-cell *matExtraFooterCellDef="'filter'" [attr.colspan]="2">f2</th>
+    </ng-container>
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+    <!-- NAME -->
+    <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <th mat-header-cell *matExtraHeaderCellDef="'filter'">
+            <input type="text">
+        </th>
 
-## Running unit tests
+        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+        <td mat-footer-cell *matFooterCellDef> f1 </td>
+        <th mat-footer-cell *matExtraFooterCellDef="'filter'" [attr.colspan]="4">f2</th>
+    </ng-container>
 
-```bash
-ng test
-```
+    <!-- WEIGHT -->
+    <ng-container matColumnDef="weight">
+        <th mat-header-cell *matHeaderCellDef> Weight </th>
+        <th mat-header-cell *matExtraHeaderCellDef="'filter'">
+            <input type="text">
+        </th>
 
-## Running end-to-end tests
+        <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
 
-For end-to-end (e2e) testing, run:
+        <td mat-footer-cell *matFooterCellDef> f1 </td>
+    </ng-container>
 
-```bash
-ng e2e
-```
+    <!-- SYMBOL -->
+    <ng-container matColumnDef="symbol">
+        <th mat-header-cell *matHeaderCellDef> Symbol </th>
+        <th mat-header-cell *matExtraHeaderCellDef="'filter'">
+            <input type="text">
+        </th>
+
+        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+
+        <td mat-footer-cell *matFooterCellDef> f1 </td>
+    </ng-container>
+
+
+
+    <!-- HEADERS -->
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-header-row *matExtraHeaderRowDef="displayedColumns; name: 'filter'"></tr>
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+    <!-- CELLS -->
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 
-## Additional Resources
+    <!-- FOOTER -->
+    <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
+    <tr mat-footer-row *matExtraFooterRowDef="['position', 'name']; name: 'filter'"></tr>
 
-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.
+</table>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ea-controls/mat-table-extensions",
-  "version": "19.0.3",
+  "version": "19.0.4",
   "peerDependencies": {
     "@angular/common": "^19.1.0",
     "@angular/core": "^19.1.0"