expanfing-cell-height-ag-grid.jsx

import React, {Component} from "react";
import {AgGridReact} from "ag-grid-react";

var totalRow = {name: "Total", price1: 6000, price2: 139000};

function getRowHeight(params){
  // assuming 50// 15 characters per line, working how how many lines we need
        return 18 * (Math.floor(params.data.name.length / 15) + 1);
  //return 100;
}

export default class extends Component {
    constructor(props) {
        super(props);

        this.state = {
            columnDefs: this.createColumnDefs(),
            rowData: this.createRowData()
        }
    }

    onGridReady(params) {
        this.gridApi = params.api;
        this.columnApi = params.columnApi;

        this.gridApi.sizeColumnsToFit();
    }

    createColumnDefs() {
        return [
            {headerName: "Name", field: "name", cellStyle: {'white-space': 'normal'}},
    {headerName: "Price1", field: "price1"},
    {headerName: "Price2", field: "price2"}
        ];
    }

    createRowData() {
        return [
             {name: "sda ahsdghjagj hkdakus jidasd asdasdasd ajsdlkjlas asdasdadjlasd asdsad asdasd sda dads asd asd as dasdadsad . asdasdasd ", price1: 1000, price2: 35000},
    {name: "Ford", price1: 2000, price2: 32000},
    {name: "Porsche", price1: 3000, price2: 72000}
        ];
    }

    render() {
        let containerStyle = {
            
        };

        return (

            <div>
                <div style={containerStyle} className="ag-fresh">
                    <AgGridReact
                        // properties
                        columnDefs={this.state.columnDefs}
                        rowData={this.state.rowData}
floatingBottomRowData = {[totalRow]}
getRowHeight = {getRowHeight}
                        // events
                        onGridReady={this.onGridReady}>
                    </AgGridReact>
                </div>
            </div>
        )
    }
};