ag-grid text selection and copy is not working for master-detail-custom-detail

Question

ag-grid custom detail Example

In this example I need to copy "My Custom Detail" or whatever text or content there is based on mouse selection and "ctrl+c".

Now this content is not selectable. Is there a config to add to make it selectable and able to copy that?

Answer 1

In custom component in parent div add this class and add below css, then copy will work.

.custom-detail-component {
   user-select: text; /* Allow text selection */
   pointer-events: auto; /* Allow pointer events */
}

For EG: change this to

<h1 style="padding: 20px;">My Custom Detail</h1>

this

<h1 style="padding: 20px;" class="custom-detail-component">My Custom Detail</h1>

Then you will be able to select text and ctrl+c will copy the selection