React-bootstrap-table2: Features

[ashwaths0793]

Hi @AllenFang ,

Hope you are doing well.

I've been doing a lot of research on various react-table libraries and wanted to provide a bit of feedback/questions. First, I think you have done a great job of React-Bootstrap-Table2, I've used it heavily in my project.

I was curious though, if React-Bootstrap-Table2 allows you (the developer) to add a button within each row (i.e. An edit button). I have a table and the I'd like to select a row and open a new webpage to edit the data of that row.

Is there the ability to create tables within a table (i.e. sub-components show in React-Table)?

Is there anyway to have a fixed header with a vertical scroll?

[krupatel]

+1 for a fixed header with a vertical scroll. That would be really useful. By the way, @ashwaths0793 were you able to solve this by any means ?

[AllenFang]

Hey guys, sorry for lately reply,

if React-Bootstrap-Table2 allows you (the developer) to add a button within each row (i.e. An edit button)

sure, same as legacy react-bootstrap-table, we still have dataFormat in react-bootstrap-table2

Is there the ability to create tables within a table (i.e. sub-components show in React-Table)?

We dont have this feature but we have expandrow in legacy react-bootstrap-table, and most of people will put a sub table in expanding row. We will implement expand row ASAP, but if anyone have a good suggestion for sub table, it's very welcome :)

Is there anyway to have a fixed header with a vertical scroll?
In legacy react-bootstrap-table we have, but in react-bootstrap-table2, I can't promise this due to there're too many unalign issues if people enable the vertical scroll bar. However, I will still working on this issue

Please let me know if you have any questions, thanks :)

[ashwaths0793]

Hey Allen,

No worries. You are the man. I'm just getting started learning React and your input/advice has been incredible.

Thanks for everything.

[AllenFang]

Expandable row support on [email protected] and [email protected].

https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-row-expand.html

[harmeet27]

Hi @AllenFang is there any way to fix the header of the table while scrolling ? i am using react-bootstrap-table-next.

[BlaineBradbury]

@harmeet27 see fixed header option using pure css @ https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/409

[dilushi]

Hi @AllenFang , is there any update on fixed header feature in react-bootstrap-table2 ?
Or any workaround that we can try?
Thank you.

[akash-more]

I have achieved this using CSS here's my code:
My Bootstrap table id is "mapping_table". You may need to change the width that is mentioned as 98.7% as per your table to get your headers aligned properly.

mapping_table tbody {

display:block;
height:200px;
overflow-y:scroll;
}

mapping_table thead{

display:table;
width:98.7%;
table-layout:fixed;
}

mapping_table tbody tr {

display:table;
width:100%;
table-layout:fixed;
}

[fulin426]

@ashwaths0793 I tried this CSS options and it works great for fixed column widths scrolling vertically. I wanted to create a way where I can scroll horizontally as well. Is that possible?

Also it seems that I need table-layout: fixed in order for this work. I'm in a situation where I have 15-20 columns and I want to be able to auto-resize the columns based.

[fulin426]

https://stackoverflow.com/questions/56040119/table-with-horizontal-and-vertical-scroll-with-fixed-header

It looks like using a sticky header to fix the header to the top worked for me.

th {
position: sticky:
top: 0;
}

Then add overflow to the parent div.

[anurag060]

@AllenFang is the sticky header available in react-bootstrap-table-next ?

[phitranpt]

@AllenFang is there any update on the fixed header in react-bootstrap-table-next? Thanks.

[riteshbisht-noon]

Any updates on fixed header in react-bootstrap-table-next? Thanks