1

I'm trying to add the column definition programmatically,on button click, instead of hardcoding it in my ReactJS page.

{
    headerName: "Product1",
    resizable: true,
    wrapText: true,
    cellStyle: {
        'white-space': 'normal'
    },
    autoHeight: true,
    hide: true,
    cellRendererFramework.MyCustomColumnRenderer
}

Not sure how to go about implementing this? Thanks for your help.

Ronak Shah
  • 377,200
  • 20
  • 156
  • 213
newbie2000
  • 73
  • 1
  • 5

2 Answers2

1

Use setColumnDefs(columnDefs)

    const columnDefs = getColumnDefs();
    columnDefs.forEach(function (colDef, index) {
      colDef.headerName = 'Abcd';
    });
    this.gridApi.setColumnDefs(columnDefs);

https://plnkr.co/edit/0ctig4P2yzPjhycB

Mahi
  • 3,748
  • 4
  • 35
  • 70
  • Thanks. How do I dynamically add the cell renderer using above approach?cellRendererFramework.MyCustomColumnRenderer – newbie2000 Sep 23 '21 at 14:11
  • colDef['cellRenderer'] = 'MyCustomColumnRenderer '; then register it in frameworkComponents. https://www.ag-grid.com/react-data-grid/component-cell-renderer/ – Mahi Sep 24 '21 at 05:46
0

You could define the columnDefs in the grid to use a state and then set the state dynamically.

import React from 'react';
import { render } from 'react-dom';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const App = () => {
  const rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
  ];

  // use the colDefs state to define the column definitions
  const [colDefs, setColDefs] = React.useState([{ field: 'make' }]);

  // when the button is pressed set the state to cause the grid to update
  const handleAddColumns = ()=> {
    const dynamicFields = [
      { field: 'make', header: 'Car Make' },
      { field: 'model', sortable: true },
      { field: 'price' },
    ];
    setColDefs(dynamicFields);
  }

  return (
    <div>
      <button onClick={handleAddColumns}>Add Column Defs</button>
      <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
        <AgGridReact 
            rowData={rowData}
            columnDefs={colDefs}>
        </AgGridReact>
      </div>
    </div>
  );
};

render(<App />, document.getElementById('root'));

Another approach is to use the Api's setColumnDef method:

import React from 'react';
import { render } from 'react-dom';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const App = () => {
  const rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
  ];

  // using state to define the columns initially
  const [colDefs, setColDefs] = React.useState([{ field: 'make' }]);
  // get a reference to the API when the onGridReady is fired
  // see the Grid definition in the JSX
  const [gridApi, setGridApi] = React.useState([]);

const handleAddColumns = ()=> {
    const dynamicFields = [
      { field: 'make', header: 'Car Make' },
      { field: 'model', sortable: true },
      { field: 'price' },
    ];
    // use the API to set the Column Defs
    gridApi.setColumnDefs(dynamicFields);
  }

  return (
    <div>
      <button onClick={handleAddColumns}>Add Column Defs</button>
      <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
        <AgGridReact 
            rowData={rowData}
            columnDefs={colDefs}
            onGridReady={ params => {setGridApi(params.api)} }
            ></AgGridReact>
      </div>
    </div>
  );
};

render(<App />, document.getElementById('root'));

The examples in the documentation should help:

There is also a blog post from AG Grid that covers dynamic column definitions:

Alan Richardson
  • 191
  • 5