Add a footer to the table in the example app

peopleware · Aug 27, 2024 · 75ebd7e · 75ebd7e
1 parent c7d19de
commit 75ebd7e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git a/src/app/filter-table/filter-table.component.html b/src/app/filter-table/filter-table.component.html
@@ -24,6 +24,7 @@
             <mat-card-content>
                 <ppw-table
                     [data]="players.entity.items"
+                    [footerData]="footerData"
                     [enableRowSelection]="true"
                     [enableRowDrag]="enableRowDrag"
                     [options]="tableOptions"

diff --git a/src/app/filter-table/filter-table.component.ts b/src/app/filter-table/filter-table.component.ts
@@ -150,6 +150,10 @@ export class FilterTableComponent
     public enableRowDrag = false
     public searchForm!: FormGroup
     public lastClickedRow?: Player
+    public footerData: Partial<Player> = {
+        firstName: 'Total:',
+        income: 168000
+    }
 
     public tableOptions: PpwTableOptions<Player> = {
         header: {
@@ -166,6 +170,14 @@ export class FilterTableComponent
                 }
             }
         },
+        footer: {
+            sticky: true,
+            styles: {
+                firstName: () => {
+                    return { 'text-align': 'right' }
+                }
+            }
+        },
         columns: {
             ignoreClick: ['active'],
             styles: {

diff --git a/src/styles.scss b/src/styles.scss
@@ -180,6 +180,16 @@ ppw-wireframe.flat {
     text-align: right;
 }
 
+table {
+    tfoot {
+        tr {
+            td {
+                font-weight: bold;
+            }
+        }
+    }
+}
+
 .clickable-list-item {
     transition: all 0.2s;
     cursor: pointer;