How to measure cell size in react virtualized table

Question

I'm trying to do autosized cell in react-virtualized Table.

Here is the table:

<AutoSizer>
                {({ height, width }) => (
                    <Table
                        width={width}
                        height={height}
                        headerHeight={20}
                        rowHeight={30}
                        deferredMeasurementCache={cache.current}
                        rowCount={usersData.length}
                        rowGetter={({ index }) => usersData[index]}
                        cellRenderer={cellRenderer}
                    >
                        <Column label="User Data" dataKey="userData" width={width / 2} />
                        <Column label="Activities" dataKey="userActivity" width={width / 2} />
                    </Table>
                )}
            </AutoSizer>

Here is cellRenderer:

function cellRenderer(props) {
    console.log(props);
    return (
        <CellMeasurer cache={cache} columnIndex={props.columnIndex} parent={props.parent} rowIndex={props.rowIndex}>
            <div>{props.cellData}</div>
        </CellMeasurer>
    );
}

And as I saw guide for List I thought cellRenderrer should be in Table component, but it does nothing.

If i put cellRenderrer in column component it doesn't have key and style props to work correctly.

What am I supposed to do?

Answer 1

I solved my problem from example: https://github.com/bvaughn/react-virtualized/blob/e360d958b99fa965fd3f1caed4506403ad652cd3/source/CellMeasurer/CellMeasurer.DynamicHeightTableColumn.example.js