Table Chart Example

An example of a Google Table Chart with height constraints.

by gdicerbo

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div style="height:500px;max-width:800px;overflow:auto">
         <div id="table_div" style="height:100%">
         
         </div>
       </div>

CSS

.cssHeaderRow {
                background-color: #8dc641;
                border: none !important;
            }
            .cssTableRow {
                background-color: #Ffffff;
                
                }
            .cssOddTableRow {
                background-color: #ffffff;
            }
            .cssSelectedTableRow {
                font-size: 20px;
                font-weight: bold;
            }
            .cssHoverTableRow {
                background: #ccc;
            }
            .cssHeaderCell {
                border: none !important;
                                background-color: #8dc641;
                                color: #ffffff;
            }
            .cssTableCell {

               font-size: 12px;
                               border: none !important;
                                text-align: center;

            }
            .cssRowNumberCell {
                text-align: center;
            }

JavaScript

google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);

      function drawTable() {
         var query = new google.visualization.Query(
  'https://docs.google.com/spreadsheets/d/1sVdC24p4B7jxx19lhP0B-k-LvRClBYs1ygIFF3qGd_I/gviz/tq?gid=2067204790');
  query.send(handleQueryResponse);
}


 function handleQueryResponse(response) {
var data = response.getDataTable();
        var table = new google.visualization.Table(document.getElementById('table_div'));
var cssClassNames = {
                    'headerRow': 'cssHeaderRow',
                    'tableRow': 'cssTableRow',
                    'oddTableRow': 'cssOddTableRow',
                    'selectedTableRow': 'cssSelectedTableRow',
                    'hoverTableRow': 'cssHoverTableRow',
                    'headerCell': 'cssHeaderCell',
                    'tableCell': 'cssTableCell',
                    'rowNumberCell': 'cssRowNumberCell'
                };
        table.draw(data, {
          allowHtml: true,
          height: '100%',
          width: '100%',
          showRowNumber: true,
          cssClassNames: cssClassNames,
        });
      }