How to id certain columns or header rows in Table API

[SJW]

I have a table which can have some really long headers and a dynamic number of columns.

I want to truncate these headers and move the column header into a title tag which shows on hover.

So, ideally, I would want to add a class to the dynamic header columns. Is this possible?  From what I have read in the documentation it appears to not be possible but as the documentation is pretty cumbersome I wouldn't surprised if there was an undocumented method somewhere?

Effectively

```

// Initialise DataTable()
var nonProdDollarsTable = new google.visualization.DataTable();

// Column Setup
nonProdDollarsTable.addColumn('string', 'No');
nonProdDollarsTable.addColumn('string', 'Name');
<?php if ($isGroup) : ?>
nonProdDollarsTable.addColumn('string', 'Location');
<?php endif; ?>
nonProdDollarsTable.addColumn('string', 'Classification');
nonProdDollarsTable.addColumn('number', 'Allocation');
<?= $nonProdDollarsColData; ?>
nonProdDollarsTable.addColumn('number', 'Total');

```

So, all columns in the `$nonProdDollarsColData` I want to add a css class or something that identifies them to jQuery so I can manipulate the data.

[Daniel LaLiberte]

The DataTable is transformed by the chart code into the elements of the visualization, typically SVG, but possibly HTML for a couple chart types (e.g. Table).  The DataTable API does have a generic property mechanism, so you can associate arbitrary property name-value pairs to columns, and these would be available when you handle events related to the chart, once it has been rendered.  But it is probably not a good idea to add css properties to the visualization elements.  Since your goal is to manipulate the data, then you can already do that via the event handlers built into charts.  Hope that helps.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/eb75cc2d-9e1d-4cd2-9354-b86fa09d0512n%40googlegroups.com.

--

• Daniel LaLiberte  • SWE  • Cambridge MA  • dlaliberte@Google.com

[SJW]

Doesn't really help. I can manipulate the data - that's not what I want help with. I want to try and insert a title attribute on the column header cell. 

There does not appear to be any event handlers that are built into the charts to achieve this - hence why I am looking to manipulate after the table is drawn - it's a workaround to cater for the chart APIs lack of flexibility in this regard.

I also want to insert additional attributes on the cells of specific columns to cater for XLS export using SheetsJS - https://docs.sheetjs.com/docs/api/utilities/html/#value-override

e.g I want to add the following to all currency columns:

data-z='"$"#,##0.00_);\\("$"#,##0.00\\)'

[Ray Thomas]

This may help you, you can manipulate the data to give any cell, row, or column you want a class using the Visualizations API using the setProperties methods on https://developers.google.com/chart/interactive/docs/reference#methods

I wrote about how I do this with an example at https://brisray.com/google-charts/tablepops.htm

The methods do not seeem to be able to support IDs but there should be no problem with classes which you can then use in your own code.