如何更改 react-google-charts table 中框的宽度？

Question

现在，我使用 https://react-google-charts.com/table-chart#simple-example 创建了 table。但我无法使用反应更改框的宽度。我使用 JavaScript - https://developers.google.com/chart/interactive/docs/reference#barformat

找到了 Bar-format 的文档

谁能帮我解决这个问题？

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

使用以下配置选项更改宽度，
或 table 单元格的任何其他样式。

首先，我们必须包括...

allowHtml: true

接下来，我们为 table 个单元格分配一个 css class 名称...

cssClassNames: {
  tableCell: 'game-cell'
}

例如

options={{
  allowHtml: true,
  cssClassNames: {
    tableCell: 'game-cell'
  },
  showRowNumber: false,
}}

然后我们将 css class 添加到页面某处，
在 <style> 标签中，或在单独的 css 文件中使用 <link> 标签

.game-cell {
  width: 400px;
}

如果要为单元格分配特定宽度，请使用上面的 css。

如果您想防止换行成两行，请使用以下...

.game-cell {
  white-space: nowrap;
}

如何更改 react-google-charts table 中框的宽度？

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

charts

google-visualization

react-google-charts