REACT / AG-GRID: Dynamically setting columnDefs after retrieving data

Question

Within the componentDidMount() function, I'm using AXIOS to retrieve data and once received, I'm trying to change the column Header Names of my AG-GRID after retrieving data, but the Header Names are unaffected.

Please see line this.gridOptions.api.setColumnDefs(columnDefs) in the following code.

var columnDefs = [
    { headerName: "column0", field: "column0", width: 300 },
    { headerName: "column1", field: "column1", width: 100 },
    { headerName: "column2", field: "column2", width: 100 },
    { headerName: "column3", field: "column3", width: 100 },
    { headerName: "column4", field: "column4", width: 100 },
    { headerName: "column5", field: "column5", width: 100 },
];

var PARMS = '';

class Home extends React.Component {
    state = {
        columnDefs: columnDefs,
        header: {},
        isLoading: false,
        error: null
    }

    componentDidMount() {
        this.setState({ isLoading: true });

        axios.get(API + PARMS)
            .then(fubar => {
                const rowData = fubar.data.results;
                this.setState({ rowData });
                const headerRow = fubar.data.header;
                columnDefs[0].headerName = headerRow.column0;
                columnDefs[1].headerName = headerRow.column1;
                columnDefs[2].headerName = headerRow.column2;
                columnDefs[3].headerName = headerRow.column3;
                columnDefs[4].headerName = headerRow.column4;
                columnDefs[5].headerName = headerRow.column5;

                this.gridOptions.api.setColumnDefs(columnDefs);
            })
            .catch(error => this.setState({
                error,
                isLoading: false
            }));
    }

The RENDER() is:

render() {
    const { isLoading, rowData, columnDefs } = this.state;

    return (
        <div className="ag-theme-balham" style={{ height: '525px', width: '920px' }} >
            <h2>{heading}</h2>

            <AgGridReact
                columnDefs={columnDefs}
                rowData={rowData}>
            </AgGridReact>
        </div>

    );
}

I think what the code above is doing (or trying to do):

• Column definitions are defined
• Grid is rendered from Column definitions
• Data is sourced
• Column definitions redefined
• Grid is (or should) rerender

But it isn't happening. In my perfect world, I'd instead like to:

• Retrieve Data
• Define the columns
• Render the Grid

But I'm told "it doesn't work that way".

Answer 1

My solution is two define to Arrays with one set up as a STATE object and the other as a stand alone variable. When the data is refreshed, the stand alone variable is update, and is then used to replace the STATE object.

Is there a better way?

var columnDefsNew = [
    { headerName: "", field: "column0", width: 300, },
    { headerName: "", field: "column1", width: 100 },
    { headerName: "", field: "column2", width: 100 },
    { headerName: "", field: "column3", width: 100 },
    { headerName: "", field: "column4", width: 100 },
    { headerName: "", field: "column5", width: 100, }];

class Home extends Component {
    constructor(props) {
        super(props);

        this.state = {
            columnDefs: [
                { headerName: "", field: "column0", width: 300 },
                { headerName: "", field: "column1", width: 100 },
                { headerName: "", field: "column2", width: 100 },
                { headerName: "", field: "column3", width: 100 },
                { headerName: "", field: "column4", width: 100 },
                { headerName: "", field: "column5", width: 100 }],
            rowData: null,
            isLoading: false,
            error: null
        };
    }

    componentDidMount() {
        this.setState({ isLoading: true });

        axios.get(API + PARMS)
            .then(fubar => {
                const headerRow = fubar.data.header;
                const rowData = fubar.data.results;

                this.setState({ rowData });

                columnDefsNew[0].headerName = headerRow.column0;
                columnDefsNew[1].headerName = headerRow.column1;
                columnDefsNew[2].headerName = headerRow.column2;
                columnDefsNew[3].headerName = headerRow.column3;
                columnDefsNew[4].headerName = headerRow.column4;
                columnDefsNew[5].headerName = headerRow.column5;

                this.setState({ columnDefs: columnDefsNew });
            })
            .catch(error => this.setState({
                error,
                isLoading: false
            }));
    }

    render() {
        const { isLoading, rowData, columnDefs } = this.state;

        return (
            <div className="ag-theme-balham" style={{ height: '525px', width: '900px' }} >
                <h2>{heading}</h2>

                <AgGridReact
                    columnDefs={columnDefs}
                    rowData={rowData}>
                </AgGridReact>
            </div>

        );
    }
}

export default Home;

Answer 2

We can able to set dynamic column after retrieve api data by using below function

Here I have used getColumnDefs() and setColumnDefs() from gridApi

const dynamicallyConfigureColumnsFromObject = (anObject, ticketGridRef) => {
        const colDefs = ticketGridRef.current.api.getColumnDefs()
        const keys = Object.keys(anObject)
        keys.forEach(key => {
            if (colDefs.some(l => l.field === key) === false) {
                colDefs.push({ field: key, filter: 'agTextColumnFilter', headerName: key})
            }
        })
        ticketGridRef.current.api.setColumnDefs(colDefs)
    }