Fixed column in ReactTable component
Solution 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.
Solution 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.
Solution 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
Solution 4
Try below things, it might help:
In React, CSS part in component itself:
fix: {
position: 'sticky',
right: 0,
padding: '11px 16px',
boxShadow: '0px 4px 4px 0px #999',
},
fixColumn: {
position: 'sticky',
right: 0,
},
In my case of - Material-UI DataTable
<MuiTable component="table" {...getProps()}>
<TableHead>
{headerGroups.map(prop => (
<TableRow {...prop.getAllHeaderProps()}>
{prop.headers.map((column, index) => {
const fixColIndex = column.id === 'column_id_need_to_fix' ? index : '';);
const fixHeaderProps = column.getHeaderProps({
className: clsx({ [classes.fixColumn]: fixColIndex }, column.className),
});return (
<TableCell {...fixHeaderProps}></TableCell>
);
})}
</TableRow>
))}
</TableHead>
Under TableBody
const Props = props.getProps({
className: clsx(
{
[classes.fix]: props.column.id === fixColumnId,
},
),
});
return (
<TableCell {...Props}>
{prop.render('Cell')}
</TableCell>
);
bhb
Updated on July 12, 2022Comments
-
bhb almost 2 years
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!!
-
priyanshu sinha about 4 yearsThe above library isn't working with react-window into the picture. Here's the issue. Can anyone help?
-
Hardik Modha about 4 years@priyanshusinha Have you tried github.com/tannerlinsley/react-virtual? It's from the author of react-table itself and very easy to setup. Here is an example: github.com/tannerlinsley/react-virtual#sample