Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

Custom [pageSizeOptions] in Angular Material table

I need to change the size of my Angular material table (number of rows) in a dynamic way.

So for example, if my code looks like this:

   <div>
      <p (click)="updateRows(1)">1</p>
      <p (click)="updateRows(2)">2</p>
      <p (click)="updateRows(3)">3</p>
   </div>
   <div>
       My table ... 
   </div>

I want that by click on 1 it will show only one row, by click on 2 - two, etc.

I was thinking to splice the dataSource array every time in updateRows() but I'm not sure it's the best option.

Is there a better way to do it, using [pageSizeOptions] / <mat-paginator> ?

The thing is that I don't want to show the pagination, nor the small drop down with the number of rows to show. I need to customize it like in the html above, and only by click the labels in top upper div to change the number of display rows in the table. Also, I don't want to use pagination, only to change the number of rows.

Thanks.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...