粘性列不起作用-React Table

问题描述

我试图使React Table中的第一列保持粘性，但是我无法完全使它起作用。当我水平滚动时，第一列可能仍会消失。

我在做什么WEBSITE_CONTENTAZUREFILECONNECTIONSTRING

columns

CSS

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

解决方法

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

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

,

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