Google Apps Script: TableChart - How to use cssClassNames

Question

I'm trying to modify the format of the Table Chart that I've added to a Google Slide.

I've found that the setOption would be the function to use to achieve this but I haven't been able to validate if the following attributes can be modified:

• Header color
• Text Alignment
• Text Wrapping: Wrap

This reference indicates that we have the following configuration options here.

In there cssClassNames gets mentioned as

An object in which each property name describes a table element, and the property value is a string

I've tried to apply that to my code:

function TablesConstructor(){
  //slide_obj is an object that contains all the information needed.
  //Let's open the file
  var slide_file = SlidesApp.openById("your_slide_id");
  
  //Get the Slides
  var slides = slide_file.getSlides();
  var slide_elements = slides[0].getPageElements();
         
  //Create Data Table chart
  var table_data = Charts.newDataTable()
  .addColumn(Charts.ColumnType.NUMBER, "Col1")
  .addColumn(Charts.ColumnType.NUMBER, "Col2")
  .addColumn(Charts.ColumnType.NUMBER, "Col3")
  .addColumn(Charts.ColumnType.NUMBER, "Col4")
  
  //Populate data table chart with the 2D array inside my object   
  for(var i = 0; i < 4; i++){
    table_data.addRow([(i + 1),
    (i + 2), 
    (i + 3), 
    (i + 4), 
    );
  }
  
  var cssClassNames = {
    headerRow: 'italic-darkblue-font large-font bold-font'
  };
  
  //Build the table
  var table_chart = Charts.newTableChart()
  .setOption('cssClassNames', cssClassNames)
  .useAlternatingRowStyle(false)
  .setDataTable(table_data)
  .setDimensions(720, 480).build();

  slide_elements[0].asShape().replaceWithImage(table_chart.getAs('image/jpeg'));
 
  slide_file.saveAndClose();  
}

How should the cssClassNames parameter be used to change its text color, background color? It looks a little different than the regular CSS I know. Or is there another method to modify the table format?

Answer 1

the method for setting cssClassNames appears to be correct,
and works fine in a typical html example, as follows...

just make sure your css is available somewhere on the page...

google.charts.load('current', {
  packages: ['table']
}).then(function () {
  var data = new google.visualization.arrayToDataTable([
    ['Category', 'value'],
    ['a', 2924],
    ['b', 2075],
    ['c', 2516],
    ['d', 2153],
    ['e', 2348],
    ['f', 1925]
  ]);
  var container = document.getElementById('chart');
  var chart = new google.visualization.Table(container);
  chart.draw(data, {
    cssClassNames: {
      headerRow: 'italic-darkblue-font large-font bold-font'
    }
  });
});

.italic-darkblue-font {
  color: darkblue;
  font-style: italic;
}

.large-font {
  font-size: 24px;
}

.bold-font {
  font-weight: bold;
}

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