• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8.   <style>
    9.     body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     .yellow {
    14.       background: #fff59d;
    15.     }
    16.  
    17.     .red {
    18.       background: #ef9a9a;
    19.     }
    20.  
    21.     zing-grid[loading] {
    22.       height: 592px;
    23.     }
    24.   </style>
    25. </head>
    26.  
    27. <body>
    28.   <!-- Most features can be toggled on the toplevel zing-grid tag -->
    29.   <zing-grid caption="Head Class Function" head-class="highlightHeadCells" layout="row" layout-controls="disabled" viewport-stop>
    30.     <!-- dataset -->
    31.     <zg-data data='[
    32.       	{ "breed": "Cane Corso", "name": "Ziva", "points": 15},
    33.       	{ "breed": "Pug", "name": "Doug", "points": 3},
    34.       	{ "breed": "Corgi", "name": "Jenny", "points": 4},
    35.       	{ "breed": "Pomeranian", "name": "Koda", "points": 8},
    36.       	{ "breed": "Great Dane", "name": "Zeus", "points": 11},
    37.       	{ "breed": "Frenchie", "name": "Bruce", "points": 6},
    38.       	{ "breed": "Cane Corso", "name": "Sofia", "points": 2},
    39.       	{ "breed": "Pomeranian", "name": "Snowball", "points": 7}
    40.       ]'></zg-data>
    41.     <zg-colgroup>
    42.       <zg-column index="breed"></zg-column>
    43.       <zg-column index="name"></zg-column>
    44.       <zg-column index="points" foot-cell="avg" type="number"></zg-column>
    45.       <zg-column index="points" foot-cell="min" type="number"></zg-column>
    46.       <zg-column index="points" foot-cell="max" type="number"></zg-column>
    47.     </zg-colgroup>
    48.   </zing-grid>
    49.  
    50.   <script>
    51.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    52.  
    53.     function highlightHeadCells(columnIndex, cellDOMRef, columnRef) {
    54.       if (columnIndex === 'points') return 'yellow';
    55.     }
    56.   </script>
    57. </body>
    58.  
    59. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <!-- Most features can be toggled on the toplevel zing-grid tag -->
    12.   <zing-grid caption="Head Class Function" head-class="highlightHeadCells" layout="row" layout-controls="disabled" viewport-stop>
    13.     <!-- dataset -->
    14.     <zg-data data='[
    15.       	{ "breed": "Cane Corso", "name": "Ziva", "points": 15},
    16.       	{ "breed": "Pug", "name": "Doug", "points": 3},
    17.       	{ "breed": "Corgi", "name": "Jenny", "points": 4},
    18.       	{ "breed": "Pomeranian", "name": "Koda", "points": 8},
    19.       	{ "breed": "Great Dane", "name": "Zeus", "points": 11},
    20.       	{ "breed": "Frenchie", "name": "Bruce", "points": 6},
    21.       	{ "breed": "Cane Corso", "name": "Sofia", "points": 2},
    22.       	{ "breed": "Pomeranian", "name": "Snowball", "points": 7}
    23.       ]'></zg-data>
    24.     <zg-colgroup>
    25.       <zg-column index="breed"></zg-column>
    26.       <zg-column index="name"></zg-column>
    27.       <zg-column index="points" foot-cell="avg" type="number"></zg-column>
    28.       <zg-column index="points" foot-cell="min" type="number"></zg-column>
    29.       <zg-column index="points" foot-cell="max" type="number"></zg-column>
    30.     </zg-colgroup>
    31.   </zing-grid>
    32.  
    33. </body>
    34.  
    35. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5. .yellow {
    6.   background: #fff59d;
    7. }
    8.  
    9. .red {
    10.   background: #ef9a9a;
    11. }
    1. function highlightHeadCells(columnIndex, cellDOMRef, columnRef) {
    2.   if (columnIndex === 'points') return 'yellow';
    3. }