I have a sample table that I want to use as a demo table so I created a static angular table with 5 rows. I want to added pagination at the bottom of the table but am having trouble getting it to display.
On the html page I have
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {
[x: string]: any;
title = 'my-angular-table-pp';
}<style>
.mat-table {
display: block;
font-family: Tahoma, Verdana;
}
.mat-row,
.mat-header-row {
display: flex;
border-bottom-width: 1px;
border-bottom-style: solid;
align-items: center;
min-height: 48px;
padding: 0 24px;
}
.mat-cell,
.mat-header-cell {
flex: 1;
overflow: hidden;
word-wrap: break-word;
}
.mat-paginator{
display: flex;
}
</style>
<div class="mat-table">
<div class="mat-header-row">
<div class="mat-header-cell">League</div>
<div class="mat-header-cell">Name</div>
<div class="mat-header-cell">Date</div>
<div class="mat-header-cell">Paid</div>
<div class="mat-header-cell">Comp.</div>
</div>
<div class="mat-row">
<div class="mat-cell">Test League</div>
<div class="mat-cell">John Smith</div>
<div class="mat-cell">01/02/2024</div>
<div class="mat-cell">1.00</div>
<div class="mat-cell">0.20</div>
</div>
<div class="mat-row">
<div class="mat-cell">Test League</div>
<div class="mat-cell">John Smith</div>
<div class="mat-cell">01/02/2024</div>
<div class="mat-cell">1.00</div>
<div class="mat-cell">0.20</div>
</div>
<div class="mat-row">
<div class="mat-cell">Test League</div>
<div class="mat-cell">John Smith</div>
<div class="mat-cell">01/02/2024</div>
<div class="mat-cell">1.00</div>
<div class="mat-cell">0.20</div>
</div>
<div class="mat-row">
<div class="mat-cell">Test League</div>
<div class="mat-cell">John Smith</div>
<div class="mat-cell">03/26/2024</div>
<div class="mat-cell">0.50</div>
<div class="mat-cell">0.10</div>
</div>
</div>
<div class="mat-paginator"
length="100"
pageSize="50"
pageSizeOptions="[5, 10, 25, 100]"
aria-label="Select page">
</div>TS
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {
[x: string]: any;
title = 'my-angular-table-pp';
myDataArray: any;
}
I added pagination at the bottom of the code outside of the mat-table but nothing show for pagination when I run the code. How do I get pagination to show at the bottom right of the table.