How to split angular material table columns in to multiple pages (pagination)

Question

I have a material table with dynamic number of columns.

Lets assume there are 20 columns of data to be displayed.

For each page, it should display 5 columns. When user click on the pagination, it should display the other columns.

How to achieve this with Angular material table and pagination ?

Mainly pagination is used to show next set of rows, why do you wanna show next set of columns in pagination ? — Piyush Jain
It would be easier to give you advice if you prepared a stackblitz example. But the short version - this can't be done with the mat-paginator as it bind to the DataSource and cares about rows and not columns.But it should be fairly easy to handle on your own. Just have a collection of allColumns and add two buttons that will change the contents of the displayedColumns for your table. You can style it similarly to the mat-paginator as well. — TotallyNewb

Eliseo Eliseo · Accepted Answer · 2020-06-15T10:22:10

A paginator itself give you an index from 0 to number of pages. The only thing you need is change the displayColumns taking account this index.

If you has, e.g. a paginator like

<mat-paginator #paginator [length]="7" hidePageSize="true" 
           (page)="changeDisplayColumns($event)"
           [pageSize]="2">
</mat-paginator>

and a variable with all the columns

displayedColumnsAll: string[] = ['position', 'name', 'weight', 
                                 'symbol',"another","another2","another3"];

See that in [length]of paginator you put the quantity of columns (in the e.g."7")

You can do

  changeDisplayColumns(page:PageEvent)
  {
    this.displayedColumns=this.displayedColumnsAll.slice(
          page.pageIndex*page.pageSize,
          page.pageIndex*page.pageSize+page.pageSize)
  }

See a fool stackblitz

NOTE: At first you need give value to displayedColums with index=0, see the

displayedColumns=this.displayedColumnsAll.slice(0,2)

in the stackblitz

How to split angular material table columns in to multiple pages (pagination)

2 Answers