How can I identify a column as the first visible in a group?

[tdsultratom]

I haven't implemented any pinning, but I have 2 headerGroups.

header.column.getIsFirstColumn() appears specifically for pinning, and out of the box only returns true for the very first column of the row.

If I pre-inject with some meta to check later, then that gets tricky to manager if any column ordering or hiding is implemented.

Is there a way to identify a column header as the first in it's group?

Example use-case adding a CSS class to the <th>:

{table.getHeaderGroups().map(headerGroup => (
    <tr key={headerGroup.id}>
        {headerGroup.headers.map((header, index) => {
            let classNames = [ 'text-nowrap' ];
            if( header.column.getCanSort() ){
                classNames.push( 'pointer' );
            }
            
            if( header.column.isFirstsVisibleColumnInGroup() ){
                classNames.push( 'has-border-left' );
            }

            return (
                <th 
                    key       = {header.id}
                    className = {classNames.join(' ')}
                    colSpan   = {header.colSpan}
                >
                    <span
                        {...(header.column.getCanSort()
                            ? { onClick: header.column.getToggleSortingHandler() }
                            : {})
                        }
                    >
                        {header.isPlaceholder
                            ? null
                            : flexRender(
                                header.column.columnDef.header,
                                header.getContext()
                            )
                        }
                        { header.column.getCanSort() && (
                            <SortCaret order={header.column.getIsSorted()}/>
                        )}
                    </span>
                </th>
            )
        })}
    </tr>
))}