Search code examples
reactjsbootstrap-modalag-gridag-grid-react

Integrating react-bootstrap-modal with react-ag-grid

I have a component where i am trying to pop up modal component and show a ag-grid table inside it when a user performs certain action. I pass the column and row data as props to the modal component.I am trying to add an ag-grid table to the modal body. However, it does not show the table and does not show any error message as well. Am i doing something wrong?

<Modal.Body>
    <AgGridReact>
        columnDefs={columnDefs}
        rowData={rowData}
    </AgGridReact>
</Modal.Body>
Solution

  • Try wrapping the AgGrid element with a div element with height=100%

    <Modal.Body>
  <div style={{height: '100%'}}>
    <AgGridReact>
      columnDefs={columnDefs}
      rowData={rowData}
    </AgGridReact>
  </div>
</Modal.Body>