• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
    9.  
    10.   <style>
    11.     body {
    12.       background: #e6e6e6;
    13.     }
    14.  
    15.     zing-grid {
    16.       max-width: 1600px;
    17.       margin: 0 auto;
    18.     }
    19.  
    20.     zg-row:not([layout="card"]),
    21.     zg-cell:not([layout="card"]) {
    22.       height: 85px;
    23.     }
    24.  
    25.     zing-grid[loading] {
    26.       height: 369px;
    27.     }
    28.   </style>
    29. </head>
    30.  
    31. <body>
    32.   <zing-grid icon-set="fontawesome">
    33.     <zg-colgroup>
    34.       <zg-column index="employeeId" header="ID" type="number"></zg-column>
    35.       <zg-column index="firstName,lastName" header="Employee Name" type="custom">
    36.         <template>
    37.           [[index.lastName]], [[index.firstName]]
    38.         </template>
    39.       </zg-column>
    40.       <zg-column index="photo" header="Photo" type="image" height="200" width="100"></zg-column>
    41.       <zg-column index="citizen" header="US Citizen" type="boolean"></zg-column>
    42.       <zg-column index="website" header="Website" type="url"></zg-column>
    43.       <zg-column index="salary" type="currency"></zg-column>
    44.     </zg-colgroup>
    45.     <zg-data data='
    46.                        [{
    47.                          "favorite": false,
    48.                       	 "icon" : "removerecord",
    49.                          "firstName" : "Donald",
    50.                          "lastName" : "Trump",
    51.                          "photo" : "https://www.gannett-cdn.com/presto/2018/09/10/USAT/4dd56cad-0911-47a5-a165-b332220ea2d4-AFP_AFP_18Y8EY.JPG?width=534&height=401&fit=bounds&auto=webp",
    52.                          "phone" : "2125551212",
    53.                          "email" : "potus@whitehouse.gov",
    54.                          "password" : "Bigly",
    55.                          "website" : "https://www.whitehouse.gov",
    56.                          "citizen" : true,
    57. 												 "salary" : 1000000,
    58.                          "employeeId" : 3
    59.                         },
    60.                       {
    61.                          "favorite": false,
    62.                       	 "icon" : "fa-grin-squint",
    63.                          "firstName" : "Daffy",
    64.                          "lastName" : "Duck",
    65.                          "photo" : "https://wallpapercave.com/wp/MQ8HdVt.jpg?width=534&height=401&fit=bounds&auto=webp",
    66.                          "phone" : "4875552678",
    67.                          "email" : "daffy.duck@looneytunes.com",
    68.                          "password" : "Daffy!",
    69.                          "website" : "https://en.wikipedia.org/wiki/Looney_Tunes",
    70.                          "citizen" : true,
    71. 												 "salary" : 6000000,
    72.                          "employeeId" : 2
    73.                         },
    74.                       {
    75.                          "favorite": false,
    76.                       	 "icon" : "fa-grin-hearts",
    77.                          "firstName" : "Donald",
    78.                          "lastName" : "Duck",
    79.                          "photo" : "https://lumiere-a.akamaihd.net/v1/images/open-uri20150422-20810-hhbgq0_d55a9899.jpeg?width=534&height=401&fit=bounds&auto=webp",
    80.                          "phone" : "4985551937",
    81.                          "email" : "donald.duck@disney.com",
    82.                          "password" : "Bigly",
    83.                          "website" : "https://www.disney.com/",
    84.                          "citizen" : true,
    85. 												 "salary" : 5000000,
    86.                          "employeeId" : 1
    87.                         }
    88.                       ]'></zg-data>
    89.   </zing-grid>
    90.   <script>
    91.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    92.   </script>
    93. </body>
    94.  
    95. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
    9.  
    10. </head>
    11.  
    12. <body>
    13.   <zing-grid icon-set="fontawesome">
    14.     <zg-colgroup>
    15.       <zg-column index="employeeId" header="ID" type="number"></zg-column>
    16.       <zg-column index="firstName,lastName" header="Employee Name" type="custom">
    17.         <template>
    18.           [[index.lastName]], [[index.firstName]]
    19.         </template>
    20.       </zg-column>
    21.       <zg-column index="photo" header="Photo" type="image" height="200" width="100"></zg-column>
    22.       <zg-column index="citizen" header="US Citizen" type="boolean"></zg-column>
    23.       <zg-column index="website" header="Website" type="url"></zg-column>
    24.       <zg-column index="salary" type="currency"></zg-column>
    25.     </zg-colgroup>
    26.     <zg-data data='
    27.                        [{
    28.                          "favorite": false,
    29.                       	 "icon" : "removerecord",
    30.                          "firstName" : "Donald",
    31.                          "lastName" : "Trump",
    32.                          "photo" : "https://www.gannett-cdn.com/presto/2018/09/10/USAT/4dd56cad-0911-47a5-a165-b332220ea2d4-AFP_AFP_18Y8EY.JPG?width=534&height=401&fit=bounds&auto=webp",
    33.                          "phone" : "2125551212",
    34.                          "email" : "potus@whitehouse.gov",
    35.                          "password" : "Bigly",
    36.                          "website" : "https://www.whitehouse.gov",
    37.                          "citizen" : true,
    38. 												 "salary" : 1000000,
    39.                          "employeeId" : 3
    40.                         },
    41.                       {
    42.                          "favorite": false,
    43.                       	 "icon" : "fa-grin-squint",
    44.                          "firstName" : "Daffy",
    45.                          "lastName" : "Duck",
    46.                          "photo" : "https://wallpapercave.com/wp/MQ8HdVt.jpg?width=534&height=401&fit=bounds&auto=webp",
    47.                          "phone" : "4875552678",
    48.                          "email" : "daffy.duck@looneytunes.com",
    49.                          "password" : "Daffy!",
    50.                          "website" : "https://en.wikipedia.org/wiki/Looney_Tunes",
    51.                          "citizen" : true,
    52. 												 "salary" : 6000000,
    53.                          "employeeId" : 2
    54.                         },
    55.                       {
    56.                          "favorite": false,
    57.                       	 "icon" : "fa-grin-hearts",
    58.                          "firstName" : "Donald",
    59.                          "lastName" : "Duck",
    60.                          "photo" : "https://lumiere-a.akamaihd.net/v1/images/open-uri20150422-20810-hhbgq0_d55a9899.jpeg?width=534&height=401&fit=bounds&auto=webp",
    61.                          "phone" : "4985551937",
    62.                          "email" : "donald.duck@disney.com",
    63.                          "password" : "Bigly",
    64.                          "website" : "https://www.disney.com/",
    65.                          "citizen" : true,
    66. 												 "salary" : 5000000,
    67.                          "employeeId" : 1
    68.                         }
    69.                       ]'></zg-data>
    70.   </zing-grid>
    71. </body>
    72.  
    73. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5. zing-grid {
    6.   max-width: 1600px;
    7.   margin: 0 auto;
    8. }
    9.  
    10. zg-row:not([layout="card"]),
    11. zg-cell:not([layout="card"]) {
    12.   height: 85px;
    13. }
    1.