Establecer ancho de columna para google.visualization.DataTable

Quiero cambiar el ancho de las columnas en google.visualization.DataTable pero no estoy seguro de cómo hacerlo.

Fiddler: https://jsfiddle.net/dgbh6sL0/1/

HTML

 

JS

 google.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); } 

Expectativa

  • El ancho de la columna ‘Nombre’ debe ser 300px;
  • El ancho de la columna ‘Empleado a tiempo completo’ debe ser 100px;

Cualquier sugerencia / ayuda es apreciada.

EDITAR

Según la sugerencia, aquí está la solución aplicada: https://jsfiddle.net/dgbh6sL0/2/

Puedes hacer esto como:

 data.setProperty(0, 0, 'style', 'width:300px'); 

Además, necesitas “allowHTML” en “draw” como:

 table.draw(data, {showRowNumber: true, width: '100%', height: '100%',allowHtml: true}); 

En una nota relacionada, también puede anular el encabezado loco de una línea que termina extremadamente largo al reemplazar el white-space css para las celdas del encabezado:

 table.draw(data, {showRowNumber: true, width: '100%', height: '100%', allowHtml: true, cssClassNames: {headerCell: 'normal-whitespace'}}); 

Luego en su CSS agregue:

 .normal-whitespace { white-space: normal; } 

Por ejemplo, https://jsfiddle.net/3j10g8n9/