Fixed column for table

[vpgayakwad]

I have a scenario where first column of the table will be fixed and other columns are made horizontal scroll. Is there any way to do it with react-table?

I tried doing it with CSS. Functionally it works, but the alignment of the complete table collapses. Any ways.. ??

[AllenFang]

@vpgayakwad, sorry for lately reply. we dont support the frozen column and I dont know how do you implement, so I've no idea about this. maybe show me your code?

[vpgayakwad]

I managed to do it with Javascript and css. Yeah, it was bit tricky and work around in some cases. But I did anyway. It would be great if we have that feature within.

[Mari4ka89]

@vpgayakwad, could you please describe the way you managed to do it?

[vpgayakwad]

I could manage to do it by CSS and JS.

First I made the table's parent as scrollable by giving fixed width for table.

Then onScroll event I wrote a script which makes the first column as position:absolute. So then the first column becomes fixed in that position, but other part of the table scrolls as it is scrollable content with position:relative.

That was a workaround but yeah it did worked. A direct approach like options could have saved my time.

[hctslm]

Hi,

I too should have same feature in my application, could you help me by sending some sample code changes for this, where I need to change to get same functionality

Thanks in advance

[vpgayakwad]

Hello Allen,

You can play with position absolute and relative css to make it work. I did it that way. If you have any code for your scenario that can help me to give exact solution.

On 13-Jan-2017 5:51 PM, "hctslm" [email protected] wrote:

Hi,

I too should have same feature in my application, could you help me by sending some sample code changes for this, where I need to change to get same functionality

Thanks in advance

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/AllenFang/react-bootstrap-table/issues/723#issuecomment-272431133, or mute the thread https://github.com/notifications/unsubscribe-auth/AVVbrMUGTteTHzIJroSu4Il7VaZqrNoUks5rR2xZgaJpZM4KD4Pk .

[hctslm]

Hi

For row selection i have added a custom image, so I want to freeze the second column for that I have added tableHeaderClass = "genericTable" ,tableBodyClass = "genericTable" in my bootstrap table and in my css file .genericTable thead tr th:nth-child(2), .genericTable tbody tr td:nth-child(2){ position: absolute; } The common parent for these two tables I have added position:relative .react-bs-table { position: relative; } and for the remaining columns I have added position:relative as follows .genericTable thead tr th, .genericTable tbody tr td{ position: relative; } in my css file.

Freezing the coulmn is working but the freezed column (second column) is overlapping with next column How to avoid this

Thanks

[Abundnce10]

I, too, wish there was an easy way to fix the first column of a responsive table.

+1 for this feature in a future release!

[mikalai-sauchanka]

Ideally table should have a property, e.g. fixedColumns of type number, to specify a number of first n fixed columns

[tungurlakachakcak]

It is a needed feature. @AllenFang Is that issue already resolved? I`d like to work on it.

[AllenFang]

Sorry for I've too many issues need to fix, so PR is welcome :)

But actually, I've planed to create a new repo name as react-bootstrap-table2, which is focus on fix the unalign issues and related issues, so if you have work on it, please let me know, I'll hope this kind of issue can be supported on react-bootstrap-table2. BTW, why open another repo, because I thought there's will be a big change on DOM and table structure and must have some impact on functionality about width, scroll, style or classname.

Let me know if you have any questions, thanks

[tungurlakachakcak]

Okay, Ill think about how the change could be performed and let you know. If you still havent created the new repo I`ll create a PR to this one, and you could merge it there too. :)

[AllenFang]

@Vallerious thanks 👍

[w3force]

Do we have a working version of the fix column in the repo? I like to use this feature.

[AllenFang]

sorry, currently, I dont have too many time can focus on this repo, and I try fixed table on react-bootstrap-table but still got some unalign and scrollabe issue with bootstrap, so I fail on it. I think keep focus on solving the unalign is still first priority for me. sorry about that

[prajapati-parth]

@vpgayakwad How did you achieve sticky column? If you please share your code.

[Ex4l]

Hello @AllenFang any news about this fixed column prop ? I would need it for a project. I would be glad to help if i can.

[prajapati-parth]

@Ex4l As mentioned in the README file, all new features will be implemented in react-bootstrap-table2.

Here's an issue mentioning the same.

You can refer here if you need help to implement the feature.

Thanks.

[Ex4l]

Thanks.

[AllenFang]

we will try to implement this feature on react-bootstrap-table2, thanks

[therealchuckliu]

@prajapati-parth Thanks for the pull request, it works really great for single row headers. However, I have a specific case where in the middle of the table there is a title header over a collection of columns. That subheader freezes on top of the leftmost column as well for some reason, any ideas why that is?

[prajapati-parth]

@therealchuckliu Can you provide a minimal example explaining your scenario?

Thanks.

[therealchuckliu]

Thanks for the response @prajapati-parth, I've updated the example you made:

https://github.com/therealchuckliu/react-bootstrap-table/commit/d078ea8b0990817c89be91991552620983595594

[prajapati-parth]

I understand your concern @therealchuckliu, the actual use case for sticky column appeared in one of my projects that always needed the 1st column to be sticky and at the time when I added this feature in my fork of react-bootstrap-table, the original react-bootstrap-table did not have the feature of more than one row of header(as far as I know). So I did not consider this at that time.

The basic idea behind the code committed in my fork is that I duplicate just the 1st column of table and add position: absolute to the duplicated table, that brings it above the scrolling table.

This code is only useful to deal with 1st column sticky. Apologies. May be you can open an issue in react-bootstrap-table2 for your specific use case.

Thanks.

[therealchuckliu]

@prajapati-parth, actually the core issue was that if you have a table with a single column you can't make use of the rowSpan="2" to get double the row space (at least it didn't seem like it). I just put in dummy columns that I'll set visibility to hidden to create that space. Thanks again!

[BhavikModi]

@AllenFang need this feature. when you are going to release react-bootstrap-table2?

[AllenFang]

@BhavikModi first drop will on this month, but I can't implement all the functionality on react-bootstrap-table, But for this feature(fixed column), I think it's still far away

[BhavikModi]

Thanks @AllenFang :) One more thing on this, I want column level filter. is it also available in current react-bootstrap-table version? Or can you guide me on this both my issues? (fix column and column level filter)

[AllenFang]

@BhavikModi column level filter?? You means column filter ?

[snuffysasa]

@AllenFang

Hello, I am just wondering if you ever got around to implementing this feature and how do I use it?

thanks

@vpgayakwad HI, or if you can give more detailed explanation of how you managed to do this? or show some code?