修复了prime react数据表中没有jquery的列

Question

我正试图修复数据表中的一列。我从不同的来源重新研究，并找到了jquery的解决方案。然而，我想在没有jquery解决方案的情况下完成它。如果我能用html、css或js来做，你能给我一些提示吗。

这是我的表的css：

#invoiceTable {

margin-top: 1.2rem;
margin: 5px;
.p-datatable-wrapper {
overflow: auto;
height: auto;
border-bottom: 1px solid #e9ecef;
.p-datatable-thead {
tr {
th:nth-child(27) {
display: flex;
flex-direction: row;
position: fixed;
}

}
}
}
.p-paginator {
padding: 0;
display: flex;
justify-content: start;
.p-paginator-left-content {
display: inline-flex;
align-items: center;
justify-content: center;
}
}
}

第n个子项(27(是我要修复的列，它是最后一列。

如果你能帮助我，我将不胜感激。

Answer 1

对于prime react数据表，您需要将数据表设置为scrollable，将列设置为frozen，如下所示：

<DataTable value={products} responsiveLayout="scroll" scrollable>
... Other columns
<Column
field="category"
header="Category frozen"
frozen
alignFrozen="right"
></Column>
</DataTable>

这是一个带有冻结柱的沙箱https://codesandbox.io/s/charming-sun-6lnd1w

编辑：我更新了沙箱，使其具有autoLayout而没有responsiveLayout，并且它仍然可以正常工作https://codesandbox.io/s/damp-voice-38mjwu