Ag-grid: styling the pagination component

[deepakjan]

Hi is there any option for including the custom pagination look and feel for the ag-grid such as

Please let me know thanks?

[ceolter]

no - but we plan to rework the pagination panel later this year, which will also mean customisable templates for it.

[lycuid]

I think you can style it your self, for instance, the one I use is looks something like this:

CSS:

.ag-header-row {
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
.ag-header-cell-resize {
  width: 1px;
  height: 70%;
  background-color: #ccc;
}

.ag-paging-panel {
  float: right;
}

.ag-paging-button {
  border: none;
  background: #fff;
}

.ag-paging-row-summary-panel {
  text-align: right;
}

.ag-cell-label-container,
.ag-header-cell-label {
  height: 100%;
}

JS:(font-awesome)

$("button[ref=btPrevious]").html('<i class="fa fa-step-backward" />');
$("button[ref=btFirst]").html('<i class="fa fa-fast-backward" />');
$("button[ref=btNext]").html('<i class="fa fa-step-forward" />');
$("button[ref=btLast]").html('<i class="fa fa-fast-forward" />');

[stherrienaspnet]

How can I change the height properly of the pagination panel?
Using this css rule work until user go in browser fullscreen (F11) wich produce a new scrollbar
.ag-theme-material .ag-paging-panel{
height: 32px;
}