固定头数据表中的头 [英] Fixed header in primeng DataTable

问题描述

我使用的是 PrimeNG 4.1.0-rc.2.

I'm using PrimeNG 4.1.0-rc.2.

我要创建的是带有固定标题的数据表.即使我将表格滚动到底部(例如 stackoverflow 顶部的固定菜单)，标题也应该始终可见.

What I'm trying to create is datatable with fixed header. Header should be always visible even if I scroll my table to the bottom (like fixed menu on the top of stackoverflow).

我尝试了 p-dataTable 的 scrollable 和 scrollHeight 属性，但是在表格一侧有一个滚动条.我不需要它，因为我已经有一整页的了.我也尝试用 position: fixed 修复它，但表格标题和表格内容的大小不同.

I tried scrollable and scrollHeight properties of p-dataTable but there is a scroll on the table side. I don't need it because I already have one for entire page. Also I tried to fix it with position: fixed but then table headers and table contents have a different size.

任何帮助将不胜感激.

现在我有这样的东西:http://embed.plnkr.co/bnB2ZDvDPZos3JLMmVFe/scrollable 选项打开，position: fixed 被注释掉.

Now I have something like this: http://embed.plnkr.co/bnB2ZDvDPZos3JLMmVFe/ There is scrollable option turned on and position: fixed is commented out.

推荐答案

我找到了解决方案，我应该使用 position:sticky 和 scrollable.这是一个例子:http://embed.plnkr.co/jZJ3it0ARLLYSe0zI6DL/

I found solution, I should use position: sticky with scrollable. Here is an example: http://embed.plnkr.co/jZJ3it0ARLLYSe0zI6DL/

也许这对任何人都有帮助.

Maybe this will help anyone.

最后还有另一个解决方案.在组件中:

Finally there is another solution. In the component:

private isScrolled: boolean = false;
constructor(private renderer: Renderer) {
    window.onscroll = () => {
        this.zone.run(() => {
             var header = document.getElementsByClassName('ui-datatable-scrollable-header')[0];
             this.isScrolled = window.pageYOffset > 35; // there is another sticky on the top in my app
             this.renderer.setElementClass(header, 'header_scrolled', this.isScrolled);
        });
    }
}

和 CSS:

.header_scrolled {
    position: fixed !important;
    top: 60px; 
}

这篇关于固定头数据表中的头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！