How to extend the table pagination functionality

👨‍💻 Development Help
1

I am able to extend the pagination class and add my custom logic on how I want the pagination to work. I am taking the total number of pages/pagesize and then displaying the pages to the user so they can go to a specific page.

The problem comes when updating the the pagination state. in the pagination component it only lets you specify the next or last pages. To fix this tried to call


  public updatePagination(current: number): void {
        const pagination = {...this.internalState.pagination, current};
        this.updateState({...this.internalState, pagination});

        this.load(false)
            .pipe(
                take(1),
                tap(() => this.updatePaginationLocalStorage()),
            )
            .subscribe();
    }

but the internal state is not found because its a different instance of the service.

How can I either update the current state or pass the current instance of the record list store to the pagination component?

2

Solved this with using the state passed to the component.

3

Awesome! please provide the code snippets here, so it will help others in the future. How to do it?

4 
export class WetuPaginationComponent extends PaginationComponent implements OnInit {
    @Input() allowPagination = true;
    @Input() state: PaginationDataSource &
        Partial<{
            updatePagination(pageNumber: number): void;
            pagination$: Observable<Pagination>;
        }>;

Because of the TYPE decalration on the state I kept assuming what I needed was not passed through but it was so I just updated the type to include the function I needed so it wont break anything

1 Like