粘性列不起作用 - React Table答案

【问题标题】：Sticky column does not work - React Table粘性列不起作用 - React Table
【发布时间】：2020-12-27 00:21:15
【问题描述】：

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

我正在做的是columns

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

CSS

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

【问题讨论】：

标签： reactjs html-table sticky react-table react-table-v7

【解决方案1】：

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

codeSandBox：https://codesandbox.io/s/sweet-cori-gl81g?file=/src/App.js

【讨论】：

【解决方案2】：

你需要在你的 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)。当你向上滚动时，它会让你的粘性标题不会被你的粘性列隐藏。（如果你也使用粘性标题）。你可以试试，如果你发现了什么，告诉我。

【讨论】：