APEX

Hello, I have a classic report that has column groupings above the column headers. I wish to freeze both the column headers and the column groupings, so this means it would freeze two lines of headers.

I am using the JS below to freeze the headers:

var vRegion$ = $(this.triggeringElement);
vRegion$.setTableHeadersAsFixed();
vRegion$.find('.js-stickyTableHeader').stickyWidget();

I am using the JS below to create the column groupings above the column headers:

    apex.jQuery(this.triggeringElement).find('thead').prepend(`
      <tr id="tab-group-heading"> +
        <th class="t-Report-colHead" align="center" colspan="1"></th> +
        <th class="t-Report-colHead" align="center" colspan="4">Drug Description</th> +
        <th class="t-Report-colHead" align="center" colspan="10">NDC Status</th> +
      </tr>`
    );

The end result works well with both and looks like this:

However, when I scroll down, it looks like this:

Notice that only the column groupings are frozen. Is there a way to freeze both the column groupings and the column headers?

I am using Apex 22.2