Trying to add Fixed Columns to a React Table. Using React-Table and React-Table-Hoc-Fixed-Columns, to make the Left & Right-most columns fixed.

I've added it according to the CodeSandBox demo example linked to the GitHub Repo.

It looks straight forward, but something is off. None of the columns are fixed. The top 2 rows slide left to right, and the remaining rows below that are fixed/stationary.

I'm using the same versions as in the example: React, React Table, React-Table-Hoc-Fixed-Columns "react": "^17.0.2", "react-dom": "^17.0.2", "react-table": "^6.11.5", "react-table-hoc-fixed-columns": "^2.3.4"

import React, { Component } from 'react';
import { YesNoIndicator } from '../YesNoIndicator/YesNoIndicator';
import { MatrixModal } from '../MatrixModal/MatrixModal';
import { ModalTemplate } from '../ModalTemplate/ModalTemplate';
import ReactTable from 'react-table'
import "react-table/react-table.css";
import './ClusterTable.css';
import withFixedColumns from "react-table-hoc-fixed-columns";
import "react-table-hoc-fixed-columns/lib/styles.css";

const ReactTableFixedColumns = withFixedColumns(ReactTable);

export class ClusterTable extends Component {
    render() {
        const columns = [
            {
                Header: "Program 1",
                fixed: "left",
                columns: [
                    {
                        Header: "Sub 1",
                        accessor: "sub1",
                        width: 200,
                    },
                    {
                        Header: "Sub 2",
                        accessor: "sub2",
                        width: 200,
                    },
                ],
            },
            {
                Header: "Program 2",
                columns: [
                    {
                        Header: "Sub 3",
                        accessor: "sub3",
                        width: 200,
                    },
                    {
                        Header: "Sub 4",
                        accessor: "sub4",
                        width: 200,
                    },
                    {
                        Header: 'Sub 5',
                        accessor: "sub5",
                        width: 200,
                    },
                    {
                        Header: "Sub 6",
                        accessor: "sub6",
                        width: 200,
                    },
                    {
                        Header: "Sub 7",
                        accessor: "sub7",
                        width: 200,
                    },
                    {
                        Header: "Sub 8",
                        accessor: "sub8",
                        width: 200,
                    },
                    {
                        Header: "Sub 9",
                        accessor: "sub9",
                        width: 200,
                    },
                ],
            },
            {
                Header: "Program 3",
                fixed: "right",
                columns: [
                    {
                        Header: "Sub 10",
                        accessor: "sub10",
                        Cell: props => <YesNoIndicator enabled={props.value} />
                    },
                    {
                        Header: "More Detail",
                        id: d => d.id,
                        accessor: d => d,
                        Cell: props => <MatrixModal modalTitle={props.value.last_name   ' - '   props.value.id}
                                                    modalId={props.value.id}
                                                    modalTemplate={ <ModalTemplate data={props.value} /> } />
                    }
                ]
            },
        ];

        return (
            <div>
                <ReactTableFixedColumns
                    data={this.props.filteredRecords}
                    columns={columns}
                    defaultPageSize={10}
                    style={{
                        height: '80vh',
                    }}
                    className="-striped -highlight"
                />
            </div>
        );
    }
}

I've commented out my code and used the example itself for the column setup with the same effect. Is something missing in the example? The demo seems to work well.

CodePudding user response：

if the browser doesn't support position: sticky, there is a fallback with transform: translate3d() on each scroll event. The animation is not always smooth, it depend on your browser, OS, and scroll trigger (mouse wheel or scroll bar), but it works. You can force to use only legacy browsers version:

import { withFixedColumnsScrollEvent } from 'react-table-hoc-fixed-columns'
import ReactTable from 'react-table';

const Table = withFixedColumnsScrollEvent(ReactTable);

or also force only sticky position version:

import { withFixedColumnsStickyPosition } from 'react-table-hoc-fixed-columns'