experiment_id: web-retrieval-v1
fixture_id: /demos/web-component-grid-pagination-custom-layout
mode: provenance
representation: html
origin_response_id: 54577077ea33acfec25243a7b40da548
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.574Z
version_nonce: f3a7cbf1e5eb370ed067a5d5d21ebd58
generated_at_utc: 2026-11-15T01:35:01.567Z
response_nonce: 29975ad227a793adfae9f5401e9dcbda

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