Demos Back to Demos

Global Average Absolute Sea Level Change (1880 - 2014)

12 of 25

Climate change is serious business, so we created this demo to raise awareness. It features conditional formatting & sorting.

Result HTML CSS JS
Edit Download

Result

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i|Rubik:300,400,400i,700" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <script src="https://cdn.zinggrid.com/canary/zinggrid-canary.min.js" defer></script>
  </head>
  <body>
    <zing-grid
      layout="row"
      layout-controls="disabled"
      sort
      pager
      page-size-options="25,50,100,200">
      <zg-data data='[  
				   {  
				      "CSIROAdjustedSeaLevel":0.0,
				      "LowerErrorBound":-0.952755905,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":0.952755905,
				      "Year":"1880"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":0.220472441,
				      "LowerErrorBound":-0.732283464,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.173228345,
				      "Year":"1881"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":-0.440944881,
				      "LowerErrorBound":-1.346456692,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":0.464566929,
				      "Year":"1882"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":-0.232283464,
				      "LowerErrorBound":-1.129921259,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":0.66535433,
				      "Year":"1883"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":0.590551181,
				      "LowerErrorBound":-0.283464567,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.464566928,
				      "Year":"1884"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":0.531496062,
				      "LowerErrorBound":-0.330708661,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.393700786,
				      "Year":"1885"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":0.437007874,
				      "LowerErrorBound":-0.381889763,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.255905511,
				      "Year":"1886"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":0.216535433,
				      "LowerErrorBound":-0.602362204,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.03543307,
				      "Year":"1887"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":0.299212598,
				      "LowerErrorBound":-0.519685039,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.118110235,
				      "Year":"1888"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":0.362204724,
				      "LowerErrorBound":-0.456692913,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.181102361,
				      "Year":"1889"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":0.440944881,
				      "LowerErrorBound":-0.374015748,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.255905511,
				      "Year":"1890"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":0.374015748,
				      "LowerErrorBound":-0.440944881,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.188976377,
				      "Year":"1891"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":0.499999999,
				      "LowerErrorBound":-0.31496063,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.314960629,
				      "Year":"1892"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":0.685039369,
				      "LowerErrorBound":-0.114173228,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.484251967,
				      "Year":"1893"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":0.303149606,
				      "LowerErrorBound":-0.547244094,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.153543306,
				      "Year":"1894"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":0.767716535,
				      "LowerErrorBound":-0.082677165,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.618110235,
				      "Year":"1895"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":0.468503937,
				      "LowerErrorBound":-0.366141732,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.303149605,
				      "Year":"1896"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":0.673228346,
				      "LowerErrorBound":-0.145669291,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.492125983,
				      "Year":"1897"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.043307086,
				      "LowerErrorBound":0.267716535,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.818897636,
				      "Year":"1898"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.338582676,
				      "LowerErrorBound":0.574803149,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.102362203,
				      "Year":"1899"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.125984251,
				      "LowerErrorBound":0.405511811,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.846456691,
				      "Year":"1900"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.110236219,
				      "LowerErrorBound":0.417322834,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.803149604,
				      "Year":"1901"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.291338581,
				      "LowerErrorBound":0.61023622,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.972440943,
				      "Year":"1902"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.606299211,
				      "LowerErrorBound":0.937007873,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.275590549,
				      "Year":"1903"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.2007874,
				      "LowerErrorBound":0.53543307,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.86614173,
				      "Year":"1904"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":0.984251968,
				      "LowerErrorBound":0.377952756,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.590551179,
				      "Year":"1905"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.251968503,
				      "LowerErrorBound":0.673228346,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.83070866,
				      "Year":"1906"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.196850392,
				      "LowerErrorBound":0.61023622,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.783464565,
				      "Year":"1907"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.098425196,
				      "LowerErrorBound":0.527559055,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.669291337,
				      "Year":"1908"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.27559055,
				      "LowerErrorBound":0.700787401,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.850393699,
				      "Year":"1909"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.271653542,
				      "LowerErrorBound":0.696850393,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":1.846456691,
				      "Year":"1910"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.598425195,
				      "LowerErrorBound":1.039370078,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.157480313,
				      "Year":"1911"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.476377951,
				      "LowerErrorBound":0.917322834,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.035433069,
				      "Year":"1912"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.547244093,
				      "LowerErrorBound":0.992125983,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.102362203,
				      "Year":"1913"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.795275589,
				      "LowerErrorBound":1.251968503,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.338582675,
				      "Year":"1914"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":2.10629921,
				      "LowerErrorBound":1.57086614,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.641732281,
				      "Year":"1915"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":2.031496061,
				      "LowerErrorBound":1.519685038,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.543307084,
				      "Year":"1916"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.854330707,
				      "LowerErrorBound":1.350393699,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.358267714,
				      "Year":"1917"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.791338581,
				      "LowerErrorBound":1.291338581,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.29133858,
				      "Year":"1918"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.854330707,
				      "LowerErrorBound":1.354330707,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.354330706,
				      "Year":"1919"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.905511809,
				      "LowerErrorBound":1.393700786,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.417322832,
				      "Year":"1920"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.988188974,
				      "LowerErrorBound":1.472440943,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.503937005,
				      "Year":"1921"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.952755904,
				      "LowerErrorBound":1.433070865,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.472440942,
				      "Year":"1922"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.999999998,
				      "LowerErrorBound":1.488188975,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.511811021,
				      "Year":"1923"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.712598423,
				      "LowerErrorBound":1.196850392,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.228346454,
				      "Year":"1924"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.791338581,
				      "LowerErrorBound":1.255905511,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.326771651,
				      "Year":"1925"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":2.047244092,
				      "LowerErrorBound":1.507874014,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.586614171,
				      "Year":"1926"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":2.003937006,
				      "LowerErrorBound":1.496062991,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.511811021,
				      "Year":"1927"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.850393699,
				      "LowerErrorBound":1.366141731,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.334645667,
				      "Year":"1928"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":1.905511809,
				      "LowerErrorBound":1.429133857,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.381889761,
				      "Year":"1929"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":2.062992124,
				      "LowerErrorBound":1.590551179,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.535433068,
				      "Year":"1930"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":2.047244092,
				      "LowerErrorBound":1.566929132,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.527559053,
				      "Year":"1931"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":2.271653541,
				      "LowerErrorBound":1.803149604,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.740157478,
				      "Year":"1932"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":2.440944879,
				      "LowerErrorBound":1.976377951,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.905511808,
				      "Year":"1933"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":2.228346454,
				      "LowerErrorBound":1.759842518,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.696850391,
				      "Year":"1934"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":2.448818895,
				      "LowerErrorBound":1.980314959,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.917322832,
				      "Year":"1935"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":2.295275588,
				      "LowerErrorBound":1.83070866,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.759842517,
				      "Year":"1936"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":2.519685037,
				      "LowerErrorBound":2.055118108,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":2.984251965,
				      "Year":"1937"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":2.622047241,
				      "LowerErrorBound":2.157480313,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":3.08661417,
				      "Year":"1938"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":2.826771651,
				      "LowerErrorBound":2.346456691,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":3.307086611,
				      "Year":"1939"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":2.618110234,
				      "LowerErrorBound":2.18110236,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":3.055118107,
				      "Year":"1940"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":3.098425194,
				      "LowerErrorBound":2.673228344,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":3.523622044,
				      "Year":"1941"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":3.098425194,
				      "LowerErrorBound":2.673228344,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":3.523622044,
				      "Year":"1942"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":3.098425194,
				      "LowerErrorBound":2.673228344,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":3.523622044,
				      "Year":"1943"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":2.84645669,
				      "LowerErrorBound":2.425196848,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":3.267716532,
				      "Year":"1944"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":2.95669291,
				      "LowerErrorBound":2.535433068,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":3.377952752,
				      "Year":"1945"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":3.251968501,
				      "LowerErrorBound":2.834645666,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":3.669291335,
				      "Year":"1946"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":3.374015745,
				      "LowerErrorBound":2.996062989,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":3.7519685,
				      "Year":"1947"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":3.562992122,
				      "LowerErrorBound":3.19685039,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":3.929133854,
				      "Year":"1948"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":3.51181102,
				      "LowerErrorBound":3.181102359,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":3.842519681,
				      "Year":"1949"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":3.598425193,
				      "LowerErrorBound":3.287401571,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":3.909448815,
				      "Year":"1950"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":3.972440941,
				      "LowerErrorBound":3.665354327,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.279527555,
				      "Year":"1951"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":3.870078736,
				      "LowerErrorBound":3.56692913,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.173228342,
				      "Year":"1952"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":4.043307082,
				      "LowerErrorBound":3.748031492,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.338582673,
				      "Year":"1953"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":3.929133854,
				      "LowerErrorBound":3.64173228,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.216535429,
				      "Year":"1954"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":3.964566925,
				      "LowerErrorBound":3.685039366,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.244094484,
				      "Year":"1955"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":3.763779524,
				      "LowerErrorBound":3.488188973,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.039370075,
				      "Year":"1956"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":4.291338578,
				      "LowerErrorBound":4.019685035,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.562992121,
				      "Year":"1957"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":4.346456688,
				      "LowerErrorBound":4.086614169,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.606299208,
				      "Year":"1958"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":4.358267712,
				      "LowerErrorBound":4.102362201,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.614173224,
				      "Year":"1959"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":4.503937003,
				      "LowerErrorBound":4.244094484,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.763779523,
				      "Year":"1960"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":4.748031491,
				      "LowerErrorBound":4.488188972,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":5.007874011,
				      "Year":"1961"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":4.543307082,
				      "LowerErrorBound":4.283464563,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.803149601,
				      "Year":"1962"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":4.480314956,
				      "LowerErrorBound":4.220472437,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.740157475,
				      "Year":"1963"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":4.169291334,
				      "LowerErrorBound":3.905511807,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.433070862,
				      "Year":"1964"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":4.610236216,
				      "LowerErrorBound":4.346456688,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.874015743,
				      "Year":"1965"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":4.397637791,
				      "LowerErrorBound":4.137795271,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.65748031,
				      "Year":"1966"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":4.452755901,
				      "LowerErrorBound":4.196850389,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.708661413,
				      "Year":"1967"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":4.484251964,
				      "LowerErrorBound":4.220472437,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.748031491,
				      "Year":"1968"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":4.751968499,
				      "LowerErrorBound":4.476377948,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":5.02755905,
				      "Year":"1969"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":4.67716535,
				      "LowerErrorBound":4.401574799,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":4.9527559,
				      "Year":"1970"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":4.881889759,
				      "LowerErrorBound":4.610236216,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":5.153543302,
				      "Year":"1971"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":5.240157475,
				      "LowerErrorBound":4.968503932,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":5.511811018,
				      "Year":"1972"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":5.003937003,
				      "LowerErrorBound":4.736220468,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":5.271653538,
				      "Year":"1973"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":5.472440939,
				      "LowerErrorBound":5.204724404,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":5.740157474,
				      "Year":"1974"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":5.409448813,
				      "LowerErrorBound":5.145669286,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":5.673228341,
				      "Year":"1975"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":5.370078735,
				      "LowerErrorBound":5.1023622,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":5.63779527,
				      "Year":"1976"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":5.303149601,
				      "LowerErrorBound":5.043307081,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":5.56299212,
				      "Year":"1977"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":5.555118105,
				      "LowerErrorBound":5.291338577,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":5.818897632,
				      "Year":"1978"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":5.362204719,
				      "LowerErrorBound":5.098425192,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":5.625984246,
				      "Year":"1979"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":5.598425191,
				      "LowerErrorBound":5.34251968,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":5.854330703,
				      "Year":"1980"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":6.086614167,
				      "LowerErrorBound":5.830708655,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":6.342519679,
				      "Year":"1981"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":5.858267711,
				      "LowerErrorBound":5.610236215,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":6.106299206,
				      "Year":"1982"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":6.188976372,
				      "LowerErrorBound":5.93307086,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":6.444881883,
				      "Year":"1983"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":6.153543301,
				      "LowerErrorBound":5.905511805,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":6.401574797,
				      "Year":"1984"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":5.74803149,
				      "LowerErrorBound":5.499999994,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":5.996062986,
				      "Year":"1985"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":5.771653537,
				      "LowerErrorBound":5.523622042,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":6.019685033,
				      "Year":"1986"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":5.795275585,
				      "LowerErrorBound":5.551181097,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":6.039370073,
				      "Year":"1987"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":5.980314955,
				      "LowerErrorBound":5.732283459,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":6.22834645,
				      "Year":"1988"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":6.157480309,
				      "LowerErrorBound":5.905511805,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":6.409448812,
				      "Year":"1989"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":6.232283458,
				      "LowerErrorBound":5.972440939,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":6.492125978,
				      "Year":"1990"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":6.334645663,
				      "LowerErrorBound":6.074803143,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":6.594488182,
				      "Year":"1991"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":6.35826771,
				      "LowerErrorBound":6.094488183,
				      "NOAAAdjustedSeaLevel": "null",
				      "UpperErrorBound":6.622047237,
				      "Year":"1992"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":6.291338576,
				      "LowerErrorBound":6.027559049,
				      "NOAAAdjustedSeaLevel":6.297493046,
				      "UpperErrorBound":6.555118104,
				      "Year":"1993"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":6.499999993,
				      "LowerErrorBound":6.236220466,
				      "NOAAAdjustedSeaLevel":6.310933553,
				      "UpperErrorBound":6.763779521,
				      "Year":"1994"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":6.618110229,
				      "LowerErrorBound":6.354330702,
				      "NOAAAdjustedSeaLevel":6.452568661,
				      "UpperErrorBound":6.881889757,
				      "Year":"1995"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":6.787401568,
				      "LowerErrorBound":6.523622041,
				      "NOAAAdjustedSeaLevel":6.62763131,
				      "UpperErrorBound":7.051181095,
				      "Year":"1996"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":7.066929127,
				      "LowerErrorBound":6.803149599,
				      "NOAAAdjustedSeaLevel":6.733920367,
				      "UpperErrorBound":7.330708654,
				      "Year":"1997"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":6.665354324,
				      "LowerErrorBound":6.393700781,
				      "NOAAAdjustedSeaLevel":6.865806069,
				      "UpperErrorBound":6.937007867,
				      "Year":"1998"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":7.011811016,
				      "LowerErrorBound":6.736220466,
				      "NOAAAdjustedSeaLevel":6.848689771,
				      "UpperErrorBound":7.287401567,
				      "Year":"1999"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":7.062992119,
				      "LowerErrorBound":6.791338576,
				      "NOAAAdjustedSeaLevel":6.920582014,
				      "UpperErrorBound":7.334645662,
				      "Year":"2000"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":7.287401567,
				      "LowerErrorBound":7.019685032,
				      "NOAAAdjustedSeaLevel":7.087460011,
				      "UpperErrorBound":7.555118103,
				      "Year":"2001"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":7.381889756,
				      "LowerErrorBound":7.110236213,
				      "NOAAAdjustedSeaLevel":7.319697525,
				      "UpperErrorBound":7.653543299,
				      "Year":"2002"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":7.759842512,
				      "LowerErrorBound":7.484251961,
				      "NOAAAdjustedSeaLevel":7.488352718,
				      "UpperErrorBound":8.035433063,
				      "Year":"2003"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":7.740157472,
				      "LowerErrorBound":7.464566922,
				      "NOAAAdjustedSeaLevel":7.507932839,
				      "UpperErrorBound":8.015748023,
				      "Year":"2004"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":7.74409448,
				      "LowerErrorBound":7.472440937,
				      "NOAAAdjustedSeaLevel":7.644563144,
				      "UpperErrorBound":8.015748023,
				      "Year":"2005"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":7.917322827,
				      "LowerErrorBound":7.645669284,
				      "NOAAAdjustedSeaLevel":7.697420009,
				      "UpperErrorBound":8.18897637,
				      "Year":"2006"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":7.996062984,
				      "LowerErrorBound":7.712598417,
				      "NOAAAdjustedSeaLevel":7.70214715,
				      "UpperErrorBound":8.279527551,
				      "Year":"2007"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":8.350393692,
				      "LowerErrorBound":8.078740149,
				      "NOAAAdjustedSeaLevel":7.90736541,
				      "UpperErrorBound":8.622047235,
				      "Year":"2008"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":8.586614164,
				      "LowerErrorBound":8.311023614,
				      "NOAAAdjustedSeaLevel":8.04635409,
				      "UpperErrorBound":8.862204715,
				      "Year":"2009"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":8.901574794,
				      "LowerErrorBound":8.618110227,
				      "NOAAAdjustedSeaLevel":8.122972567,
				      "UpperErrorBound":9.185039361,
				      "Year":"2010"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":8.96456692,
				      "LowerErrorBound":8.661417314,
				      "NOAAAdjustedSeaLevel":8.053065004,
				      "UpperErrorBound":9.267716526,
				      "Year":"2011"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":9.326771644,
				      "LowerErrorBound":8.992125975,
				      "NOAAAdjustedSeaLevel":8.457057629,
				      "UpperErrorBound":9.661417313,
				      "Year":"2012"
				   },
				   {  
				      "CSIROAdjustedSeaLevel":8.980314951,
				      "LowerErrorBound":8.622047235,
				      "NOAAAdjustedSeaLevel":8.546648227,
				      "UpperErrorBound":9.338582668,
				      "Year":"2013"
				   },
				   {  
				      "CSIROAdjustedSeaLevel": "null",
				      "LowerErrorBound": "null",
				      "NOAAAdjustedSeaLevel":8.663700393,
				      "UpperErrorBound": "null",
				      "Year":"2014"
				   }
				]'></zg-data>
      <zg-caption>
        <h1>Global Average Absolute Sea Level Change (1880 - 2014)</h1>
        <p><em>From the US Environmental Protection Agency using data from CSIRO, 2015; NOAA, 2015.</em>
          <br>
          <a href="https://datahub.io/core/sea-level-rise" target="_blank">View Source <i class="far fa-arrow-alt-circle-right"></i></a></p>
      </zg-caption>
      <zg-colgroup>
        <zg-column index="Year" header="Year">
          <strong>[[index.Year]]</strong>
        </zg-column>
        <zg-column index="CSIROAdjustedSeaLevel" renderer="renderNull" header="CSIRO Adjusted Sea Level">
        </zg-column>
        <zg-column index="LowerErrorBound" renderer="renderNull" header="Lower Error Bound"></zg-column>
        <zg-column index="NOAAAdjustedSeaLevel" renderer="renderNull" header="NOAA Adjusted Sea Level"></zg-column>
        <zg-column index="UpperErrorBound" renderer="renderNull" header="Upper Error Bound"></zg-column>
      </zg-colgroup>
    </zing-grid>
  </body>
</html>

CSS

body {
  padding-top: 50px;
  font-family: 'Rubik', sans-serif;
  /*background: #00212d;*/
  background: url('https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/water-levels%2Fweather-cooler.png?alt=media&token=5e6df3b4-1089-47c5-9fea-f191206bbc73');
}

zing-grid {
  max-width: 750px; 
  margin: 0 auto;
  font-family: 'Rubik', sans-serif;
  border: 0px solid #03375e;
  background: #004a6b;
  color: #03375e;
  --theme-color-primary: #ffffff;
    border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  --zg-cell-background_sorted: #e3e6e8;
  --zg-head-cell-background_sorted: #045282;
  --zg-head-cell-color_sorted: #ffffff;
  box-shadow: 0 20px 50px rgba(36, 107, 138, 0.7);
  -webkit-box-shadow: 0 20px 50px rgba(36, 107, 138, 0.7);
  -moz-box-shadow: 0 20px 50px rgba(36, 107, 138	, 0.7);
}

zg-icon {
  max-width: 15px;
}

zg-caption {
  background: #004a6b;
  border-bottom: 1px solid #004a6b;
  padding: 30px 20px;
  border-radius: 6px 6px 0 0;
  -webkit-border-radius: 6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0;
  text-align: center;
}

zg-caption h1 {
  color: #76d9f4;
  font-size: 25px;
  margin: 0;
  font-weight: 300;
}

zg-caption p {
  font-size: 11px;
  font-family: 'Roboto Mono', monospace;
  color: #F8FAFC;
  line-height: 1.9;
  margin-bottom: -5px;
}


zg-caption a {
  color: #028ecc;
  text-decoration: none;
  padding: 2px;
  font-size: 12px;
  margin-top: -15px;
}

zg-caption a:hover {
  color: #ffffff;
  text-decoration: underline;
}

zg-head-cell {
  font-size: 11px;
  background: #028ecc;
  color: #F8FAFC;
  margin-bottom: -2px;
}

zg-body {
  font-size: 12px;
  font-family: 'Roboto Mono', monospace;
	background: #F8FAFC;
  color: #04769e;
  border: 0px;
}

zg-row, zg-cell {
  padding: 0 15px; 
  height: 38px;
}

zg-row {
  border-bottom: 1px solid #dcdfe0;
}

.null {
  color: #a1b2b5;
  font-style: italic;
}

zg-footer {
  font-size: 12px;
  padding: 0 15px 0 15px;
  display: flex;
  justify-content: space-between; 
  color: #ffffff;
  background: #004a6b;
}

zg-pager {
  color: #ffffff;
}

zg-watermark {
  border-top: 1px solid #004a6b;
  background: #004a6b;
    border-radius: 0 0 6px 6px;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
}

JS

function renderNull(value) {
  if(value == "null") {
    return `  ${value}`;
  } else if(value == "0") {
    return `${value}`;
  } else if(value > "0") {
    return `${value}`;
  } else {
    return `${value}`;
  }
}

// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content
});

Interested in this demo? Modify it to your needs in the ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio