experiment_id: web-retrieval-v1
fixture_id: /demos/web-component-grid-pagination-custom-layout
mode: provenance
representation: html
origin_response_id: 5068ff32ad9a98d365eb68c068207c90
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.574Z
version_nonce: f3a7cbf1e5eb370ed067a5d5d21ebd58
generated_at_utc: 2026-10-25T01:40:39.083Z
response_nonce: 23adf41e2704e27f9ae3880721f0dbb6

Pagination - Custom Positioning

117 of 125
You can use our <zg-pager> web component to place the pager controls wherever you want inside the grid. This flexibility allows you to move and style the controls however you want.
Result Full HTML CSS JS
Edit Download
Showing - of rows
Showing items
Showing - of pages

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body zing-grid[loading] {
      height: 400px;
    }

    .zg-body zg-pager {
      font-size: var(--zg-pager-font-size, 1.25rem);
    }

    .zg-body zg-pager[position="top"] {
      border-bottom: 1px solid #c0c0c0;
    }

    .zg-body zg-pager[position="bottom"] {
      border-top: 1px solid #c0c0c0;
    }

    .zg-body zg-pager zg-icon {
      font-size: 1.25rem;
    }

    @media (max-width: 600px) {
      .zg-body zg-pager {
        font-size: 0.9rem;
      }
    }

    zing-grid[loading] {
      height: 322px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid page-size="3" page-size-card="2" src="https://zinggrid-examples.firebaseio.com/movies/" layout="row" layout-controls="disabled" viewport-stop>
    <zg-pager position="top">
      <div slot="left">
        <span>Showing</span>
        <zg-text value="startrow"></zg-text>
        <span>-</span>
        <zg-text value="endrow"></zg-text>
        <span>of</span>
        <zg-text value="rowcount"></zg-text>
        <span>rows</span>
      </div>
      <div slot="right">
        <span>Showing</span>
        <zg-select action="pagesize" options="3, 6, 9"></zg-select>
        <span>items</span>
      </div>
    </zg-pager>

    <zg-pager position="bottom">
      <div slot="left">
        <span>Showing</span>
        <zg-text value="currpage"></zg-text>
        <span>-</span>
        <zg-text value="pagecount"></zg-text>
        <span>of</span>
        <zg-text value="pagecount"></zg-text>
        <span>pages</span>
      </div>
      <div slot="right">
        <zg-button action="prevpage"></zg-button>
        <zg-text value="currpage"></zg-text>
        <zg-button action="nextpage"></zg-button>
      </div>
    </zg-pager>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
		<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
	</head>
	<body class="zg-body">
		<zing-grid
		  page-size="3"
    	page-size-card="2"
		  src="https://zinggrid-examples.firebaseio.com/movies/"
      layout="row"
      layout-controls="disabled"
      viewport-stop>
		  <zg-pager position="top">
        <div slot="left">
          <span>Showing</span>
          <zg-text value="startrow"></zg-text>
          <span>-</span>
          <zg-text value="endrow"></zg-text>
          <span>of</span>
          <zg-text value="rowcount"></zg-text>
          <span>rows</span>
        </div>
        <div slot="right">
          <span>Showing</span>
          <zg-select action="pagesize" options="3, 6, 9"></zg-select>
          <span>items</span>
        </div>
		  </zg-pager>

		  <zg-pager position="bottom">
		    <div slot="left">
 		      <span>Showing</span>
 		      <zg-text value="currpage"></zg-text>
 		      <span>-</span>
 		      <zg-text value="pagecount"></zg-text>
 		      <span>of</span>
 		      <zg-text value="pagecount"></zg-text>
 		      <span>pages</span>
		    </div>
        <div slot="right">
          <zg-button action="prevpage"></zg-button>
          <zg-text value="currpage"></zg-text>
          <zg-button action="nextpage"></zg-button>
        </div>
		  </zg-pager>
		</zing-grid>
	</body>
</html>
.zg-body zing-grid[loading] {
  height: 400px;
}

.zg-body zg-pager {
  font-size: var(--zg-pager-font-size,1.25rem);
}

.zg-body zg-pager[position="top"] {
  border-bottom: 1px solid #c0c0c0; 
}

.zg-body zg-pager[position="bottom"] {
  border-top: 1px solid #c0c0c0; 
}

.zg-body zg-pager zg-icon {
  font-size: 1.25rem;
}

@media (max-width: 600px) {
  .zg-body zg-pager {
    font-size: 0.9rem;
  }
}
// No JS code

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Demo Gallery