CODEWITHSUNDEEP
angularangular-materialangular-material-table
Nibras
Nibras

Reputation: 369

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

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 ?

Upvotes: 1

Views: 2273

Answers (2)

Eliseo
Eliseo

Reputation: 57939

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

Upvotes: 2

Dang Nguyen
Dang Nguyen

Reputation: 1209

I think the demo from angular material demo here will be fit your requirement.

It not call pagination but let call it dynamically column.

You can implement a button name next column page and do the action by adding some and removing some columns when clicked.

Upvotes: 0

Related Questions