Freeze column functionality

[Botsy]

Hello @AllenFang,

We are currently using react-bootstrap-table in a project and everything is working perfectly but we really need the freeze column functionality and we're wondering if it is planned to be implemented in react-bootstrap-table2 ?

Thanks

[AllenFang]

@Botsy I will consider to implement it, not it's still not in my radar. Currently, I still work on recovering all the functionality from legacy react-bootstrap-table. so PR is welcome :)

[Anjlit]

Use the following CSS to Freeze the column

.react-bootstrap-table table > tbody > tr > td:nth-child(1), .react-bootstrap-table table > thead > tr:nth-child(1) > th:nth-child(1) { background-color: #ccc; position: sticky; position: -webkit-sticky; left:0; z-index:1; }

[akparaliev]

Use the following CSS to Freeze the column

.react-bootstrap-table table > tbody > tr > td:nth-child(1), .react-bootstrap-table table > thead > tr:nth-child(1) > th:nth-child(1) { background-color: #ccc; position: sticky; position: -webkit-sticky; left:0; z-index:1; }

does not work in IE, position: sticky is not available there

[itskrishnadev]

is this updated in react-bootstrap-table2 ???????

[sudhacholla123]

<TableHeaderColumn dataField='xyz' dataAlign="center" tdStyle={{ whiteSpace: 'normal', backgroundColor: '#ccc', position: 'sticky', left: 0, zIindex: 1 }} thStyle={{ whiteSpace: 'normal', backgroundColor: '#ccc', position: 'sticky', left: 0, zIindex: 1 }} >XYZ</TableHeaderColumn> This can be used to make the column fixed.

[haseeb-lab]

tdStyle={{ whiteSpace: 'normal', backgroundColor: '#ccc', position: 'sticky', left: 0, zIindex: 1 }} thStyle={{ whiteSpace: 'normal', backgroundColor: '#ccc', position: 'sticky', left: 0, zIindex: 1 }}

its working if only first column needs to be sticky