How do I change column headings after the grid has been displayed?

Question

I'm using the ag-grid-react component, and I'd like to be able to change the column headings in my grid in response to events within my React component. I can see that the column API has a getDisplayNameForColumn() function, but I can't find an equivalent setting function to allow me to change the column heading.

I store the grid column definitions array in my React component's state, and I thought that simply by updating the definitions array in the state that the component would automatically be refreshed by the React framework, and that my new column headings would be displayed; however, this doesn't happen and the original headings remain in place.

Is it possible to change column headings after the grid has been initialized and displayed? I've copied the code for my React component below.

import React, { Component } from 'react'
import { Page, Header, Title, Button, Content } from '@cdkglobal/react-jqm'
import StatusBar from '@cdkglobal/react-jqm-statusbar'
import StandardColsList from './StandardColsList'
import { AgGridReact } from 'ag-grid-react'
import { APP_TITLE } from '../constants'
import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/theme-fresh.css';

export default class DatasetPage extends Component {
static propTypes = {
    onClickBack: React.PropTypes.func,
    onClickSave: React.PropTypes.func,
    dataset: React.PropTypes.array.isRequired,
    uploaditem: React.PropTypes.object.isRequired,
    stdcolumns: React.PropTypes.array
}

static defaultProps = {
    dataset: []
}

state = {
    gridApi: {},
    columnApi: {},
    columnDefs: [],
    displaystdcols: false,
    selectedcol: -1

}

componentDidMount() {
    if (this.props.onInit) {
        this.props.onInit()
    }

    this.setState({ columnDefs: this.buildColumns(this.props.dataset[0]) })

}

buildColumns(sampleRow) {
    // Build a columns definition array for the React data grid component
    let columns = []
    let colIndex = 0

    for (let column in sampleRow) {

        let columnDef = {
            colId: colIndex,
            field: column,
            headerName: column,
            minWidth: '80px',
            stdcolIndex: -1
        }

        colIndex++
        columns.push(columnDef)
    }

    return columns

}

onGridReady(params) {
    this.setState({ gridApi: params.api })
    this.setState({ columnApi: params.columnApi })
}

render() {

    const columnDefs = this.state.columnDefs
    const agDivStyle = {
        height: '500px'
    }

    const onCellClicked = (event) => {
        // Set the selected column index
        this.setState({ selectedcol: event.colDef.colId })

        // Display the standard columns popup
        this.setState({ displaystdcols: true })
    }

    const onSaveColMapping = (selectedStdCol) => {
        // Save the column mapping
        const columnApi = this.state.columnApi
        const column = columnApi.getColumn(this.state.selectedcol)

        if (selectedStdCol > -1) {

            // Update the column definition for the selected column
            let columnDefs = this.state.columnDefs
            columnDefs[this.state.selectedcol].stdcolIndex = selectedStdCol
            columnDefs[this.state.selectedcol].headerName = this.props.stdcolumns[selectedStdCol].description
            this.setState({ columnDefs: columnDefs })

            column.colDef.headerName = this.props.stdcolumns[selectedStdCol].description
            column.colDef.stdcolIndex = selectedStdCol
            console.log(column)
            console.log(columnApi.getDisplayNameForColumn(column))

            // Now refresh the grid
            // columnApi.setColumnState(columnDefs)
            this.state.gridApi.refreshView()

        }

        // Hide the standard columns popup
        this.setState({ displaystdcols: false })
    }

    const onClosePopup = () => {
        this.setState({ displaystdcols: false })
    }

    let stdcolspopup
    if (this.state.displaystdcols) {
        stdcolspopup = (
            <StandardColsList standardcols={this.props.stdcolumns} selectedcoldef={this.state.columnDefs[this.state.selectedcol]} onClickOK={onSaveColMapping} onClickCancel={onClosePopup} />
        )

    }


    return (
        <Page>
            <Header>
                <Button icon="carat-l" corners shadow pos="left" alt={false} onClick={this.props.onClickBack}>Back</Button>
                <Title>{APP_TITLE}</Title>
                <Button primary corners shadow pos="right" icon="plus" alt={false} onClick={this.props.onClickSave}>Save</Button>
                <StatusBar name={this.props.uploaditem.uploadfile} />
            </Header>

            <Content className="has-status-bar">
                <div className="ag-fresh" style={agDivStyle}>
                    <AgGridReact

                        // listen for events with React callbacks
                        // onRowSelected={this.onRowSelected.bind(this)}
                        onCellClicked={onCellClicked}
                        onGridReady={this.onGridReady.bind(this)}

                        // binding to properties within React State or Props
                        // showToolPanel={this.state.showToolPanel}
                        // quickFilterText={this.state.quickFilterText}
                        // icons={this.state.icons}

                        // column definitions and row data are immutable, the grid
                        // will update when these lists change
                        columnDefs={columnDefs}
                        rowData={this.props.dataset}

                        // or provide props the old way with no binding
                        enableColResize="true"
                        rowSelection="multiple"
                        suppressRowClickSelection="true"
                        enableSorting="true"
                        enableFilter="false"
                        rowHeight="22"
                        />

                    {stdcolspopup}
                </div>

            </Content>
        </Page>
    )

}

}

Answer 1

Beside simple header column we have header of Grouped Columns:

        {
            headerName: "Loss Code for - " + that.lcProdDate.toLocaleDateString().split("T")[0],
            children: childrenColumns,
            groupId: 'loss-code-date'
        },

    updateColumnHeader() {
        const lossCodeGroup = this.gridColumnApi.getColumnGroup('loss-code-date');
        lossCodeGroup?.['originalColumnGroup']?.['colGroupDef']?.['headerName'] = "Loss Code for - " + this.lcProdDate.toLocaleDateString().split("T")[0];
        this.gridApi.refreshHeader();
    }

Answer 2

Not react specific, but this is how you would do it with plain old JavaScript:

var makeCol = gridOptions.columnApi.getColumn("make")
makeCol.colDef.headerName="New Header Name";
gridOptions.api.refreshHeader();

This could obviously be wrapped up in a function to be called when you want the header to update