Hallo,
I am currently using a igx-paginator in my Grid.
The default paginator looks something like this:
So we have the items per page on the left side and the navigation on the right side.
For my Layout, I want to have the paginator looking like this:
As you can see, first of all: Both items per page and navigation elements are side by side on the right end of the paginator. Additionally, the page index is between them, instead beeing inside of the navigation.
Is there any way, i can access the template to rearrange these items? So far, i only found out that you can use „igx-page-size" and „igx-page-nav" inside the „igx-paginator-content" template, but it's not possible to access the elements inside.
Im currently using the Paginator like this:
<igx-paginator #paginator [hidden]="!showPaginator" [perPage]="10"> <igx-paginator-content class="paginator-content"> <igx-page-size class="paginator-page-size"></igx-page-size> <igx-page-nav class="paginator-page-nav"></igx-page-nav> </igx-paginator-content> </igx-paginator>
Hello Michael,
Please take your time in evaluating my suggestion and don’t hesitate to reach back if you need any further assistance.
Regards, Ivan Kitanov
Hello Ivan,
Unfortunately, I have not had the time to evaluate this yet. But for now, you can close this ticket. I will let you know if I have trouble with this solution, but it looks good for now!
Thank you!
Have you got the chance to try my suggestion?
Please let me know if you need any further assistance.
Hello Ivan!
Thank you very much for this detailed response. I will give this a shot as soon as possible!
Your desired layout could be achieved by templating the paginator and modifying some of its CSS classes. For the page size you would need to modify the ‘.igx-page-size’ class and simply set the justify-content property to right. To change the text of the label to 'Zeilen pro Seite' you would need to access the label of the igx-page-size component, which you can inspect in your browser and then change its innerHTML to 'Zeilen pro Seite'. It could be done with the following code:
let pageSizeLable: Element = document.getElementsByClassName( 'igx-page-size__label' )[0]; pageSizeLable.innerHTML = 'Zeilen pro Seite';
Regarding the page index and total pages, this could be achieved by placing a div between the igx-page-size component and igx-paginator component and use string interpolation to display both the start and end indexes as well as total records.
To remove the page index from the navigation button the following class should be used ‘.igx-page-nav__text’ and its display property should be set to none.
Then to place the navigation to the right you would need to modify the following class – ‘.igx-page-nav’ and set the text-align property to right and the flex property to none.
The CSS classes needed to achieve this layout are the following:
.rightAlign { text-align: right; display: inherit; margin-left: 10px; margin-right: 10px; } .igx-page-nav__text { display: none; } .igx-page-size { justify-content: right; } .igx-page-nav { text-align: right; flex: none; }
Additionally for displaying the start and end indexes you would need to handle the following events – pageChange and perPageChange. The first one is used when the user changes the page and the other is used when the page size has been changed.
Here you can find a small sample that demonstrate what I have explained above. Additionally, I am adding a gif that demonstrates the behavior of the paginator.
Please test the sample on your side and let me know if you need any further assistance.