How to change the width of box in react-google-charts table? - charts

Question

Now, I have created table using - https://react-google-charts.com/table-chart#simple-example.
But I am unable to change the width of box using react.
I have found the documentation of Bar-format using JavaScript - https://developers.google.com/chart/interactive/docs/reference#barformat
Could anyone please help me to solve this ?
export default class App4 extends React.Component {
render() {
return (
<div className={"todo-item2"}>
<Chart
width={'500px'}
height={'300px'}
chartType="Table"
loader={<div>Loading Chart</div>}
data={[
[
{ type: 'string', label: 'DATE' },
{ type: 'string', label: 'GAME - 1' },
{ type: 'string', label: 'GAME - 2' },
{ type: 'string', label: 'GAME - 3' },
],
['2020-04-01', 'Team A (Home) vs Team B (Visitor)', 'Team C (Home) vs Team D (Visitor)', 'Team E (Home) vs Team F (Visitor)'],
['2020-04-02', 'Team F (Home) vs Team A (Visitor)', 'Team D (Home) vs Team C (Visitor)', 'Team F (Home) vs Team B (Visitor)'],
['2020-04-03', 'Team B (Home) vs Team A (Visitor)', 'Team C (Home) vs Team D (Visitor)', 'Team F (Home) vs Team E (Visitor)'],
]}
options={{
showRowNumber: false,
width: '10000px',
//height: '500px',
}}
rootProps={{ 'data-testid': '1' }}
/>
</div>
);
}
}
ReactDOM.render(<App4 />, document.getElementById("root"));
Please see the image

Answer 1

use the following config options to change the width,
or any other style of the table cells.
first, we must include...
allowHtml: true
next, we assign a css class name to the table cells...
cssClassNames: {
tableCell: 'game-cell'
}
e.g.
options={{
allowHtml: true,
cssClassNames: {
tableCell: 'game-cell'
},
showRowNumber: false,
}}
then we add the css class to the page somewhere,
either in a <style> tag, or in a separate css file using the <link> tag
.game-cell {
width: 400px;
}
if you want to assign a specific width to the cells, use the above css.
if you want to prevent wrapping to two lines, use the following...
.game-cell {
white-space: nowrap;
}