• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        zg-caption {
          background: inherit;
          border-bottom: 1px solid #c0c0c0;
        }
    
        .caption-pager--container,
        zg-footer {
          display: flex;
          justify-content: space-between;
        }
    
        zg-footer {
          border-top: 1px solid #c0c0c0;
          padding: 1rem;
          font-size: var(--zg-caption-font-size, 1.25rem);
        }
    
        zg-footer zg-icon {
          font-size: 1.25rem;
        }
    
        zg-text,
        span {
          color: black;
          zing-grid[loading] {
            height: 467px;
          }
      </style>
    </head>
    
    <body>
      <zing-grid page-size=5 page-size-options="2,5,20" page-size-card="2" src="https://zinggrid-examples.firebaseio.com/movies/" layout="row" layout-controls="disabled" viewport-stop>
        <zg-caption>
          <div class="caption-pager--container">
            <div>
              <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>items</span>
            </div>
            <div>
              <span>Showing</span>
              <zg-select action="pagesize" options="3, 6, 9"></zg-select>
              <span>items</span>
            </div>
          </div>
        </zg-caption>
    
        <zg-footer>
          <div>
            <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>rows</span>
          </div>
          <div>
            <zg-button action="prevpage"></zg-button>
            <zg-text value="currpage"></zg-text>
            <zg-button action="nextpage"></zg-button>
          </div>
        </zg-footer>
      </zing-grid>
      <script></script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingGrid Demo</title>
    		<script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    	</head>
    	<body>
    		<zing-grid
    		  page-size=5
        	page-size-options="2,5,20"
        	page-size-card="2"
    		  src="https://zinggrid-examples.firebaseio.com/movies/"
          layout="row"
          layout-controls="disabled"
          viewport-stop>
    		  <zg-caption>
    		    <div class="caption-pager--container">
    		      <div>
       		      <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>items</span>
    		      </div>
    		      <div>
    		        <span>Showing</span>
    		        <zg-select action="pagesize" options="3, 6, 9"></zg-select>
    		        <span>items</span>
    		      </div>
    		    </div>
    		  </zg-caption>
    
    		  <zg-footer>
    		    <div>
     		      <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>rows</span>
    		    </div>
            <div>
              <zg-button action="prevpage"></zg-button>
              <zg-text value="currpage"></zg-text>
              <zg-button action="nextpage"></zg-button>
            </div>
    		  </zg-footer>
    		</zing-grid>
    	</body>
    </html>
    html, body {
    	height:100%;
    	width:100%;
    	margin:0;
    	padding:0;
    }
    
    zg-caption {
      background: inherit;
      border-bottom: 1px solid #c0c0c0;
    }
    
    .caption-pager--container,
    zg-footer {
      display: flex;
      justify-content: space-between;
    }
    
    zg-footer {
      border-top: 1px solid #c0c0c0;
      padding: 1rem;
      font-size: var(--zg-caption-font-size,1.25rem);
    }
    
    zg-footer zg-icon {
      font-size: 1.25rem;
    }
    
    zg-text, span {
      color: black;