reactjs - 粘性列不起作用 - React Table

Question

我正在尝试使我的 React Table 中的第一列具有粘性，但是我无法让它正常工作。当我水平滚动时，第一列可能仍会消失。

我正在做的是columns

{
                Header: "First Name",
                accessor: "firstName",
                headerClassname: 'sticky_col'
}

CSS

.sticky_col {
    position: -webkit-sticky;
    position: sticky;
    left:0;
    background-color: white;
}

Answer 1

您需要在 CSS 中使用 zIndex

.sticky_col {
    position: -webkit-sticky;
    position: sticky;
    z-index: 9999,
    left:0;
    background-color: white;
}

我更喜欢用这个

.sticky_col_head {
        position: -webkit-sticky;
        position: sticky;
        z-index: 9999,
        left:0;
        background-color: white;
    }

.sticky_col_body {
        position: -webkit-sticky;
        position: sticky;
        z-index: 9998,
        left:0;
        background-color: white;
    }

我将使用 head 作为表头中的单元格（Sticky Header）和 body 作为表体中的单元格（Sticky Column）。当你向上滚动时，它会让你的粘性标题不会被你的粘性列隐藏。（如果你也使用粘性标题）。你可以试试，如果你发现了什么，告诉我。

Answer 2

您可以使用这个库react-table-sticky来定义 react-table v7 的粘性列

代码沙盒： https ://codesandbox.io/s/sweet-cori-gl81g ?file=/src/App.js