-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(cdk/table): add optional footer to cdk-text-column/mat-text-column
Added two new inputs to CdkTextColumn: `footerText` (string) and `footerTextTransform` (function), automatically inherited by MatTextColumn. If the table does not define a footer, the column footer will be ignored. Additionally, TextColumnOptions includes a new default function called `defaultFooterTextTransform`, used when neither `footerTextTransform` nor `footerText` are provided. Fixes #24532
- Loading branch information
Showing
11 changed files
with
298 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
...es/material/table/table-text-column-with-footer/table-text-column-with-footer-example.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
table { | ||
width: 100%; | ||
} |
10 changes: 10 additions & 0 deletions
10
...s/material/table/table-text-column-with-footer/table-text-column-with-footer-example.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> | ||
<mat-text-column name="name" [footerText]="nameFooterText"></mat-text-column> | ||
<mat-text-column name="price" [footerTextTransform]="getTotal" justify="end"></mat-text-column> | ||
<mat-text-column name="insurance" [footerTextTransform]="getTotal" justify="end"></mat-text-column> | ||
<mat-text-column name="category"></mat-text-column> | ||
|
||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> | ||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> | ||
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr> | ||
</table> |
47 changes: 47 additions & 0 deletions
47
...les/material/table/table-text-column-with-footer/table-text-column-with-footer-example.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import {Component} from '@angular/core'; | ||
import {MatTableDataSource, MatTableModule} from '@angular/material/table'; | ||
import {DecimalPipe} from '@angular/common'; | ||
|
||
export interface Product { | ||
name: string; | ||
price: number; | ||
insurance: number; | ||
category: string; | ||
} | ||
|
||
const PRODUCT_DATA: Product[] = [ | ||
{name: 'Laptop', price: 999.99, insurance: 100.5, category: 'Electronics'}, | ||
{name: 'Phone', price: 699.99, insurance: 50.5, category: 'Electronics'}, | ||
{name: 'Tablet', price: 399.99, insurance: 25.5, category: 'Electronics'}, | ||
{name: 'Headphones', price: 199.99, insurance: 15, category: 'Accessories'}, | ||
{name: 'Charger', price: 49.99, insurance: 0, category: 'Accessories'}, | ||
]; | ||
|
||
/** | ||
* @title Demonstrates the use of `mat-text-column` with footer cells. This example includes a fixed | ||
* footer text for the 'name' column. The 'price' and 'insurance' columns use a text transformation | ||
* function to determine their footer text. The 'category' column has a default empty footer text. | ||
*/ | ||
@Component({ | ||
selector: 'table-text-column-with-footer-example', | ||
styleUrl: 'table-text-column-with-footer-example.css', | ||
templateUrl: 'table-text-column-with-footer-example.html', | ||
standalone: true, | ||
imports: [MatTableModule], | ||
}) | ||
export class TableTextColumnWithFooterExample { | ||
nameFooterText = 'Total'; | ||
displayedColumns: string[] = ['name', 'price', 'insurance', 'category']; | ||
dataSource = new MatTableDataSource(PRODUCT_DATA); | ||
|
||
decimalPipe = new DecimalPipe('en-US'); | ||
|
||
/** Function to sum the values of a given column. */ | ||
getTotal = (column: string): string => { | ||
const total = PRODUCT_DATA.map(t => t[column as keyof Product] as number).reduce( | ||
(acc, value) => acc + value, | ||
0, | ||
); | ||
return this.decimalPipe.transform(total, '1.2-2') || ''; | ||
}; | ||
} |
Oops, something went wrong.