Fixed column in ReactTable component

折月煮酒 提交于 2020-05-29 04:17:52

问题


Could we fix a column when we get a horizontal column with smaller pages?

For example could we fix the column firstName in this example.

Cheers!!


回答1:


react-table does not support fixed columns, issue is opened Sticky columns. But there is already implemented workaround, you can find sources github or npm package (link taken from thread Sticky columns). Online Demo. Thanks to GuillaumeJasmin.




回答2:


Since v7 of react-table was released recently and it's a complete rewrite, react-table-hoc-fixed-columns is not compatible with it. If you are using version <7 then see @Alex's answer above.

For react-table v7, you can use react-table-sticky by the same author.




回答3:


without using react-table or any npm dependencies fixed column can be achieved only via css tricks with in react app.

Find the full code Here

Step 1 : divide the dataset of fixed and scrollable columns

Step 2 : place two tables side by side in such a way that it looks as single table

Step 3 : Wrap both with a single div and use a fixed width, give fixed width or responsive width for second one and make overflow-x: scroll; so that it keeps scrolling horizontally,while first tables columns will not be scrollable



来源:https://stackoverflow.com/questions/48080117/fixed-column-in-reacttable-component

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!