How to add separate style to google.visualization.DataTable without changing its own styles

Question

As mentioned in the title my question is How to add separate style to google.visualization.DataTable without changing its own styles ?

I have added a separate css class to make table header sticky and add a background color for table headers. After I added css "cssClassNames" class, table's own styles have gone ex: default row background color and table row highlighting when mouse hover.

This is my code :

var data=new google.visualization.DataTable();

    data.addColumn('string','Name');
    data.addColumn('string','Type');
    data.addColumn('number','meter');
    data.addColumn('string','Event');
    data.addColumn('string','Status');

    data.addRows(Data.length);
    for(i=0;i<Data.length;i++){

        data.setCell(parseInt([i]),0,Data[i]['ID']);
        data.setCell(parseInt([i]),1,Data[i]['Name']);
        data.setCell(parseInt([i]),2,parseInt(Data[i]['Total']));
        data.setCell(parseInt([i]),3,'change');
        data.setCell(parseInt([i]),4,'OK');
        }

    var cssClassNames = {tableRow :"tableRowGoogle",headerCell :"headercellgoogle",rowNumberCell : "rowNumberCell",tableCell  : "rowcellgoogle"};   

    var options=null;
    if(data.getNumberOfRows()>7){
        options = {
                  width : '100%',
                  height:550,
            sort : 'enable',
            sortColumn : 1,
            sortAscending : false,
            scrollLeftStartPosition : 50,
            showRowNumber : true,
            allowHtml :true,
            cssClassNames : cssClassNames   
        };
    }else{
        options = {
            width : '100%',
            sort : 'enable',
            sortColumn : 1,
            sortAscending : false,
            scrollLeftStartPosition : 50,
            showRowNumber : true,
            allowHtml :true,
            cssClassNames : cssClassNames   
        };
    }
    var table = new google.visualization.Table(document.getElementById('SummaryTable'));
    table.draw(data, options);

     google.visualization.events.addListener(table, 'select', function() {
            var row = table.getSelection()[0].row;
            popDevInfo(data.getValue(row, 0));
          });

How to add additional styles to the table without affecting it's default styles? Any suggestion would be appreciated.

Answer 1

don't supply cssClassNames in the options,
just add somewhere on the page

the Table chart produces normal html table elements,
so you can style them as any other html table

in this example, two tables are drawn.
using the following css, both charts will have a green border

table {
  border: 2px solid lime;
}

the following css will only affect the second chart -- chart_div_1

#chart_div_1 th {
  color: magenta;
  text-align: left;
}

#chart_div_1 tr {
  outline: thin solid cyan;
}

so it's just a matter of finding a selector to meet your needs...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      1170],
      ['2006',  660,       1120],
      ['2007',  1030,      540],
      ['2008',  660,       660],
      ['2009',  1030,      540]
    ]);

    var options = {
      allowHtml: true,
      showRowNumber: true,
      sortAscending: false,
      sortColumn: 0,
      width: '100%'
    };

    new google.visualization.Table(document.getElementById('chart_div_0')).draw(data, options);
    new google.visualization.Table(document.getElementById('chart_div_1')).draw(data, options);
  },
  packages:['table']
});

/* style all tables */
table {
  border: 2px solid lime;
}

/* style chart_div_1 only */
#chart_div_1 th {
  color: magenta;
  text-align: left;
}
#chart_div_1 tr {
  outline: thin solid cyan;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div_0"></div>
<br/>
<div id="chart_div_1"></div>