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 https://github.com/AllenFang/react-bootstrap-table/issues/723#issuecomment-814783985

`.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; } }`