[Bug]: In a Table with FixedColumns and FixedHeader, Headers of FixedColumns are not fixed

[oaldrian]

Blazorise Version

2.0.3

What Blazorise provider are you running on?

Bootstrap4

Link to minimal reproduction or a simple code snippet

https://github.com/oaldrian/BlazoriseReproductions/tree/table-fixed-things

Steps to reproduce & bug description

• Load repro index
• scroll table down
• column header of fixed column scrolls away despite being fixed

What is expected?

column headers of fixed columns are not scrolled away

What is actually happening?

column headers of fixed columns are scrolled away despite the whole table being FixedHeader

What browsers do you see the problem on?

Chrome, Microsoft Edge

Any additional comments?

if there is a workaround, I would gladly use it until this gets included in a releas

[stsrki]

I believe we don't support both fixed columns and fixed headers at the same time. But I need to confirm.

[oaldrian]

in that case it would be a feature request ;-)

[stsrki]

At the moment, combining FixedColumns and FixedHeader is not officially supported, so this would indeed fall under a feature request rather than a bug.

Supporting both at the same time would require more complex handling in the table layout and scrolling behavior, so it’s something we would need to properly design and implement rather than treat as a quick fix.

For now, we’ll keep this issue open as a feature request and track interest.

If this functionality is important for your project and you need it sooner, you can also consider our custom development program, where we can prioritize such features: https://blazorise.com/custom-work

In the meantime, if you discover any workaround on your side, feel free to share it here; it could help others facing the same limitation.

Thanks again for reporting and for the detailed repro

[oaldrian]

Hi!

Quite an easy workaround (and presumably implementation as well?)

all the sticky etc is already set the right way for it to work, only thing is the fixed column has the same z index as the fixed header, and thus overlays it. FixedHEader and FixedColumn apply the same z-index

Workaround is to increase the z-index manually to 1 higher on the header cells that are in fixed columns. see below

added it to the repro as well

<Table Bordered FixedColumns FixedHeader FixedHeaderTableHeight="200px" FixedHeaderTableMaxHeight="200px">
    <TableHeader>
        <TableRow>
            <TableHeaderCell Width="Width.Px( 50 )" FixedPosition="TableColumnFixedPosition.Start" Style="z-index: 12;">#</TableHeaderCell>
            <TableHeaderCell Width="Width.Px( 150 )" FixedPosition="TableColumnFixedPosition.Start" Style="z-index: 12;">Fixed heading</TableHeaderCell>
            <TableHeaderCell>Column heading</TableHeaderCell>
            <TableHeaderCell>Column heading</TableHeaderCell>
            <TableHeaderCell>Column heading</TableHeaderCell>
            <TableHeaderCell>Column heading</TableHeaderCell>
        </TableRow>
    </TableHeader>
    <TableBody>
        @for ( int i = 1; i <= 20; ++i )
        {
            var index = i.ToString();

            <TableRow @key="@index">
                <TableRowHeader Width="Width.Px( 50 )" FixedPosition="TableColumnFixedPosition.Start">@index</TableRowHeader>
                <TableRowCell Width="Width.Px( 150 )" FixedPosition="TableColumnFixedPosition.Start">Fixed column</TableRowCell>
            <TableHeaderCell>Column heading</TableHeaderCell>
            <TableHeaderCell>Column heading</TableHeaderCell>
            <TableHeaderCell>Column heading</TableHeaderCell>
            <TableHeaderCell>Column heading</TableHeaderCell>
            </TableRow>
        }
    </TableBody>
</Table>