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

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;
}