Paging in Vue Grid component

16 Mar 20231 minute to read

Customizing the Grid pager root element

Using this CSS, you can customize the Grid pager root element.

.e-grid .e-gridpager {
    font-family: cursive;
    background-color: #deecf9;
}

Customizing the Grid pager container element

Use the below CSS to customize the Grid pager container element.

.e-grid .e-pagercontainer {
    background-color: #deecf9;
}

Customizing the Grid pager navigation elements

Customize the Grid pager navigation elements, using the below selector.

.e-grid .e-gridpager .e-prevpagedisabled,
.e-grid .e-gridpager .e-prevpage,
.e-grid .e-gridpager .e-nextpage,
.e-grid .e-gridpager .e-nextpagedisabled,
.e-grid .e-gridpager .e-lastpagedisabled,
.e-grid .e-gridpager .e-lastpage,
.e-grid .e-gridpager .e-firstpage,
.e-grid .e-gridpager .e-firstpagedisabled {
    background-color: #deecf9;
}

Customizing the Grid pager page numeric link elements

Use the below CSS to customize the Grid pager current page numeric link elements.

.e-grid .e-gridpager .e-numericitem {
    border-radius: initial;
}

Customizing the Grid pager current page numeric element

Using this CSS, you can customize the Grid pager current page numeric item.

.e-grid .e-gridpager .e-currentitem {
    background-color: #0078d7;
}