Multiple sticky/fixed columns always visible

[plakak]

Description

Ability to have more than one sticky/fixed column visible.

Why Buefy need this feature

We usually use Ant Design Vue in our projects but this time we went to try something new and gave Buefy a chance. So far so good with one caveat - we need tables that have first two columns always visible and horizontal scroll for next columns. It's straightforward using Ant and there seems to be no way to recreate similar behavior in Buefy. Only one sticky column seems to be visible, they don't stack.

[jtommy]

Yes at the moment isn't available, I might try to take a look

[dmcbrn]

Hi, any status update on this feature request?

Update:

I've did a bit of research. The solution to stacking of sticky columns is to set left: previousStickyColumnsWidth + 'px' style on each sticky column header th and colum td.

i.e. if there are three columns, first is wide 100px, second 200px, third 400px, then the second column's th and td should have left: 200px and left: 300px, respectively.

One can get the widths of columns by nesting the content of column in <div ref="columnone">...</div>, <div ref="columntwo">...</div>, and <div ref="columnthree">...</div>. Then you fetch them in the scripts block by this.$refs.columnone.clientWidth ,....

However I'm having issues passing these down to the th and td elements as I don't know how to select these elements. Setting ref="columnoneheader" and then trying to add styles with :style="{ left: columntwowidth + 'px'"} is not working as there's no style prop on the column.

I'll try to find a workaround and log here if/when I succeed.

@jtommy Is there a chance to get row-style and header-style properties on column element? Same as there is for row-class and header-class?

[dmcbrn]

I have checked the code. I could add another parameter left to TableColumn component which would be analogous to width and it should update the th the same way the width parameter does.

The only difference would be that it would be applied to the tr > td as well and not just to the table header th. I need to check in more details how to do this first.

Can someone of the admins let me know would something like this be acceptable and if so I can submit a PR? Also I would reuse the toCssWidth() function which then might be renamed in the future to toCssSpatialDimension() or something similar.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[nprdservice3]

Hi @jtommy, any update on this feature request?

[coderabsolute]

Just wondering if is there any update on this request or any possible workarounds available?