How to sync column widths in ag-Grid Master-Detail Nesting

I am working on an Angular18 application that uses ag-Grid with a master-detail nesting to display conversation details grid inside a message thread grid.

I want to achieve the following behaviour:

When I resize a column in the master grid, the corresponding column in the detail grid should also resize accordingly. Is there a built-in way to sync the column widths between the master and detail grids in ag-Grid? If not, what would be the best approach to implement this functionality?

I followed this docs https://www.ag-grid.com/angular-data-grid/master-detail-nesting/. But I couldn't find a way to adjust the width of inner table when I modify the outer one.

Here's the code sandbox link for the implementation which I have done https://codesandbox.io/p/sandbox/966ll3. When i resize the widths of A1-B1(parent level -Level1), the widths of the subsequent child levels are not changing.

Any suggestions or workarounds would be greatly appreciated!

There are no built-in functionalities available to auto sync the column widths between master and detail grids. Infact master and detail grids can have varying number of columns, so auto-syncing column widths is not implemented.

But you can achieve this for your purpose by providing the custom callback function for onColumnResized event and set the width of the master and detail grid columns.

Example code:

const columnResized = (params) => {

  // This is simple: I'm setting all the width options: width, minWidth and maxWidth. Otherwise flickers when resizing.
  // Also -30 and -60 is to consider the padding around detail grid
 
  let newDetails = {...detailCellRendererParams};
  newDetails.detailGridOptions.columnDefs[0].width = params.columns[0].actualWidth - 30;

  newDetails.detailGridOptions.columnDefs[0].minWidth = params.columns[0].actualWidth - 30;

  newDetails.detailGridOptions.columnDefs[0].maxWidth = params.columns[0].actualWidth - 30;

  newDetails.detailGridOptions.detailCellRendererParams.detailGridOptions.columnDefs[0].width = params.columns[0].actualWidth - 60;

  newDetails.detailGridOptions.detailCellRendererParams.detailGridOptions.columnDefs[0].minWidth = params.columns[0].actualWidth - 60;

  newDetails.detailGridOptions.detailCellRendererParams.detailGridOptions.columnDefs[0].maxWidth = params.columns[0].actualWidth - 60;

  setDetailCellRendererParams(newDetails);
}

Check this plunker demo. I've used React Ag Grid. But you can implement the same in the Angular version also.

Check this Gif demo: