• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid: Simple Grid</title>
    7. <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. <style>
    9. body {
    10. background: #e6e6e6;
    11. }
    12.  
    13. .red {
    14. background: #ef9a9a;
    15. }
    16.  
    17. .orange {
    18. background: #ffcc80;
    19. }
    20.  
    21. .yellow {
    22. background: #fff59d;
    23. }
    24.  
    25. zing-grid[loading] {
    26. height: 373px;
    27. }
    28. </style>
    29. </head>
    30.  
    31. <body>
    32. <zing-grid caption="EPL Top Scorers" zebra="red orange yellow">
    33. <zg-data data='[
    34. {
    35. "playerName": "Eden Hazard",
    36. "playerClub": "Chelsea",
    37. "goalsScored": 5
    38. },
    39. {
    40. "playerName": "Aleksandar Mitrovic",
    41. "playerClub": "Fulham",
    42. "goalsScored": 5
    43. },
    44. {
    45. "playerName": "Sergio Agüero",
    46. "playerClub": "Manchester City",
    47. "goalsScored": 4
    48. },
    49. {
    50. "playerName": "Romelu Lukaku",
    51. "playerClub": "Manchester United",
    52. "goalsScored": 4
    53. },
    54. {
    55. "playerName": "Sadio Mané",
    56. "playerClub": "Liverpool",
    57. "goalsScored": 4
    58. }
    59. ]'></zg-data>
    60. </zing-grid>
    61. <script>
    62. ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    63. </script>
    64. </body>
    65.  
    66. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid: Simple Grid</title>
    7. <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11. <zing-grid caption="EPL Top Scorers" zebra="red orange yellow">
    12. <zg-data data='[
    13. {
    14. "playerName": "Eden Hazard",
    15. "playerClub": "Chelsea",
    16. "goalsScored": 5
    17. },
    18. {
    19. "playerName": "Aleksandar Mitrovic",
    20. "playerClub": "Fulham",
    21. "goalsScored": 5
    22. },
    23. {
    24. "playerName": "Sergio Agüero",
    25. "playerClub": "Manchester City",
    26. "goalsScored": 4
    27. },
    28. {
    29. "playerName": "Romelu Lukaku",
    30. "playerClub": "Manchester United",
    31. "goalsScored": 4
    32. },
    33. {
    34. "playerName": "Sadio Mané",
    35. "playerClub": "Liverpool",
    36. "goalsScored": 4
    37. }
    38. ]'></zg-data>
    39. </zing-grid>
    40. </body>
    41.  
    42. </html>
    1. body {
    2. background: #e6e6e6;
    3. }
    4.  
    5. .red {
    6. background: #ef9a9a;
    7. }
    8.  
    9. .orange {
    10. background: #ffcc80;
    11. }
    12.  
    13. .yellow {
    14. background: #fff59d;
    15. }
    1.