Implement first column as sticky when table scrolls horizontally

[prajapati-parth]

Hi @AllenFang,
Making the first column sticky would really help when the table scrolls horizontally so that a reference to the rows can be seen while scrolling as the first column is generally used to hold the identifying element of a particular row data.

A similar example here

I've already implemented it in the fork of react-bootstrap-table. I think this would be a good feature for react-bootstrap-table2.

[AllenFang]

Hi @prajapati-parth thanks for this suggestion, it's really useful when we have large columns. I'll consider to implement it when we finish the basic component structure in react-bootstrap-table2

Thanks

[sgwcollins]

@AllenFang is this feature implemented
?

[dailymp]

I will be waiting for this!!!

[kaleem-elahi]

waiting for this feature..

[pratikw-iprogrammer]

this worked for me thanks to AllenFang/react-bootstrap-table#723 (comment)

`.stickyFirstColumn {
/* style for the stick, fixed column*/
.react-bootstrap-table > table > tbody > tr > td:nth-child(1),
.react-bootstrap-table > table > thead > tr:nth-child(1) > th:nth-child(1) {
position: sticky;
position: -webkit-sticky;
left: 0;
z-index: 2;
}

/*keeping proper row & td colors */
.react-bootstrap-table > table > tbody > tr{
background-color: #fff;
td {
background-color: #fff;
}
&:hover {
cursor: pointer;
background: #f6f9fc;
td {
background-color: #f6f9fc;
}
}
}

/keeping columns aligned during scrolling/
.react-bootstrap-table {
max-width: 100%;
overflow: overlay !important;
}
}`