• Edit
  • Download
  • <!DOCTYPE html>
    <html dir="rtl">
    
    <head>
        <meta charset="utf-8">
        <title>ZingGrid: Blank Grid</title>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
        <style>
            body {
                background: #e6e6e6;
            }
    
            zing-grid[loading] {
                height: 1335px;
            }
        </style>
    </head>
    
    <body>
    
        <zing-grid height="300px" selector loading-text="ZingGrid is Loading" filter adraggable search layout-controls static-menu columns-control acaption="Editor" aselector sort editor page-size=10 pager src="https://jsdocs-9d00d.firebaseio.com/addressBook">
            <zg-caption align="center">Dir?</zg-caption>
            <zg-colgroup>
                <zg-column type="selector"></zg-column>
                <zg-column type="row-number"></zg-column>
                <zg-column index="name" width="200" head-cell="hello" foot-cell="goodbye"></zg-column>
                <zg-column width="200" index="street"></zg-column>
                <zg-column width="200" index="city"></zg-column>
                <zg-column width="200" index="state"></zg-column>
                <zg-column index="postal" type="text" sorter="number"></zg-column>
                <zg-column type="editor"></zg-column>
                <zg-column type="remover"></zg-column>
            </zg-colgroup>
        </zing-grid>
    
        <zing-grid dir="ltr" height="300px" selector loading-text="ZingGrid is Loading" filter adraggable search layout-controls static-menu columns-control acaption="Editor" aselector sort editor page-size=10 pager src="https://jsdocs-9d00d.firebaseio.com/addressBook">
            <zg-caption align="center">Dir?</zg-caption>
            <zg-colgroup>
                <zg-column type="selector"></zg-column>
                <zg-column type="row-number"></zg-column>
                <zg-column index="name" width="200" head-cell="hello" foot-cell="goodbye"></zg-column>
                <zg-column width="200" index="street"></zg-column>
                <zg-column width="200" index="city"></zg-column>
                <zg-column width="200" index="state"></zg-column>
                <zg-column index="postal" type="text" sorter="number"></zg-column>
                <zg-column type="editor"></zg-column>
                <zg-column type="remover"></zg-column>
            </zg-colgroup>
        </zing-grid>
    
        <script></script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html dir="rtl">
      <head>
        <meta charset="utf-8">
        <title>ZingGrid: Blank Grid</title>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
      </head>
      <body>
        
        <zing-grid height="300px" selector loading-text="ZingGrid is Loading" filter adraggable search layout-controls static-menu columns-control acaption="Editor" aselector sort editor page-size=10 pager src="https://jsdocs-9d00d.firebaseio.com/addressBook">
            <zg-caption align="center">Dir?</zg-caption>
            <zg-colgroup>
                    <zg-column  type="selector"></zg-column>
                <zg-column  type="row-number"></zg-column>
                <zg-column index="name" width="200" head-cell="hello" foot-cell="goodbye"></zg-column>
                <zg-column width="200" index="street"></zg-column>
                <zg-column width="200" index="city"></zg-column>
                <zg-column width="200" index="state"></zg-column>
                <zg-column index="postal" type="text" sorter="number"></zg-column>
                <zg-column  type="editor"></zg-column>
                <zg-column type="remover"></zg-column>
            </zg-colgroup>
        </zing-grid>
    
        <zing-grid dir="ltr" height="300px" selector loading-text="ZingGrid is Loading" filter adraggable search layout-controls static-menu columns-control acaption="Editor" aselector sort editor page-size=10 pager src="https://jsdocs-9d00d.firebaseio.com/addressBook">
          <zg-caption align="center">Dir?</zg-caption>
          <zg-colgroup>
                  <zg-column type="selector"></zg-column>
              <zg-column  type="row-number"></zg-column>
              <zg-column index="name" width="200" head-cell="hello" foot-cell="goodbye"></zg-column>
              <zg-column width="200" index="street"></zg-column>
              <zg-column width="200" index="city"></zg-column>
              <zg-column width="200" index="state"></zg-column>
              <zg-column index="postal" type="text" sorter="number"></zg-column>
              <zg-column  type="editor"></zg-column>
              <zg-column type="remover"></zg-column>
          </zg-colgroup>
      </zing-grid>
        
      </body>
    </html>
    body{background:#e6e6e6;}