如何根据内容长度正确使用Ce​​llMeasurer设置表列宽度？

Question

我试图在动态创建的列中使用CellMeasurer动态设置列宽。

// hoping that CellMeasurer is what I needed to adjust
// width of my table columns, but not working.
const cellRenderer = ({ columnIndex, key, parent, rowIndex, style }) => {
    const content = list[rowIndex][columnHeader[columnIndex].columnName];
    return (
      <CellMeasurer
        cache={cache}
        columnIndex={columnIndex}
        key={key}
        parent={parent}
        rowIndex={rowIndex}
      >
        <div
          style={{
            ...style,
            height: 35,
            whiteSpace: "nowrap"
          }}
        >
          {content}
        </div>
      </CellMeasurer>
    );
  };

  const cache = new CellMeasurerCache({
    defaultWidth: 100,
    minWidth: 75,
    fixedHeight: true
  });

return (
<AutoSizer>
  {({ height, width }) => (
    <div width={width}>
      <Table
        width={width}
        height={500} // why can't i use {height} here?
        headerHeight={40}
        rowHeight={30}
        rowCount={list.length}
        rowGetter={({ index }) => list[index]}
      >
        // Dynamically create Column
        {columnHeader.map((columnData, i) => (
          <Column
            width={800}
            onClick={this.onHeaderClick}
            label={columnData.displayName}
            dataKey={columnData.columnName}
            cellRenderer={cellRenderer}
            {...this.props}
            key={i}
          />
        ))}
      </Table>
    </div>
  )}
</AutoSizer>
);

下面是示例代码：https://codesandbox.io/s/mzj5y255kj

我想将“新闻”列的长度设置为文本中的长度。

结果将是无论内容长度是多少，该列都会增加。