Sticky checkbox on table - checkbox not sticky in header

[alfisdad]

Overview of the problem

Oruga version: 0.5.10
Vuejs version: 3.2.45

Description

When setting sticky-checkbox on a table the checkbox in the header is not sticky

Steps to reproduce
Declare an o-table element with the following props:
scrollable, sticky-header, sticky-checkbox, checkable, header-checkable

To reproduce the issue I cloned the theme-bulma project and amended Table.vue adding scrollable, sticky-header, sticky-checkbox and header-checkable to the definition in the first example:

    <o-table
        :data="isEmpty ? [] : dataTable"
        :bordered="isBordered"
        :striped="isStriped"
        :narrowed="isNarrowed"
        :hoverable="isHoverable"
        :loading="isLoading"
        :focusable="isFocusable"
        :mobile-cards="hasMobileCards"
        v-model:checked-rows="checkedRows"
        scrollable
        sticky-header
        sticky-checkbox
        header-checkable
        checkable
        detailed
    >

I've also added a number of dummy columns to ensure the table is wide enough to force horizontal scrolling e.g.

        <o-table-column field="id" label="Column A" v-slot="props">
            {{ props.row.id }}
        </o-table-column>

I've also amended bulma.ts to add tdStickyClass and stickyHeaderClass to the table classes:

    table: {
        override: true,
        rootClass: 'b-table',
        wrapperClass: 'table-wrapper',
        tableClass: 'table',
        borderedClass: 'is-bordered',
        stripedClass: 'is-striped',
        narrowedClass: 'is-narrow',
        hoverableClass: 'is-hoverable',
        emptyClass: 'is-empty',
        detailedClass: 'detail',
        footerClass: 'table-footer',
        paginationWrapperClass: 'level',
        scrollableClass: 'table-container',
        trSelectedClass: 'is-selected',
        thSortableClass: 'is-sortable',
        thCurrentSortClass: 'is-current-sort',
        thSortIconClass: 'th-wrap sort-icon',
        thUnselectableClass: 'is-unselectable',
        thStickyClass: 'is-sticky',
        thCheckboxClass: 'th-checkbox',
        thDetailedClass: 'th-chevron-cell',
        tdDetailedChevronClass: 'chevron-cell',
        tdStickyClass: 'is-sticky',
        thPositionClass: (position: string) => {
            if (position === 'centered') return 'is-centered'
            else if (position === 'right') return 'is-right'
            return
        },
        tdPositionClass: (position: string) => {
            if (position === 'centered') return 'has-text-centered'
            else if (position === 'right') return 'has-text-right'
            return
        },
        mobileClass: 'is-mobile',
        mobileSortClass: 'table-mobile-sort field',
        stickyHeaderClass: 'has-sticky-header'
    },

Expected behavior

When scrolling left, the checkbox in the header should remain visible above the checkboxes on the rows.

Actual behavior

As you can see in the recording below, the checkbox in the header moves off screen:

Comments
I'm a newbie to Vue and Oruga but, on looking at the Oruga source code, I did notice that in Table.vue the tdCheckboxClasses function includes this.thStickyClasses:

        tdCheckboxClasses() {
            return [
                ...this.tdBaseClasses,
                this.computedClass('tdCheckboxClass', 'o-table__td-checkbox'),
                ...this.thStickyClasses({ sticky: this.stickyCheckbox })
            ]
        },

whereas the thCheckboxClasses doesn't

        thCheckboxClasses() {
            return [
                ...this.thBaseClasses,
                this.computedClass('thCheckboxClass', 'o-table__th-checkbox')
            ]
        },

Wonder if this is where the problem lies?

[jtommy]

@alfisdad it's a bug, not it's no easy to fix as you described