修复了 primeng DataTable 中的 header

Question

我正在使用 PrimeNG 4.1.0-rc.2。

我要创建的是固定 header 的数据table。 Header 应该始终可见，即使我将 table 滚动到底部（就像 Whosebug 顶部的固定菜单）。

我尝试了 p-dataTable 的 scrollable 和 scrollHeight 属性，但在 table 一侧有一个卷轴。我不需要它，因为我已经为整个页面准备了一个。我也尝试用 position: fixed 修复它，但是 table headers 和 table 内容有不同的大小。

如有任何帮助，我们将不胜感激。

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

Answer 1

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

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

编辑：最后还有另一种解决方案。在组件中：

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; 
}

Answer 2

您也可以将下面的代码放入您的@Component

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css'],
  styles: [`
  :host ::ng-deep .ui-table .stk {
      position: -webkit-sticky;
      position: sticky;
      top: 0px;
      z-index: 9999;
  }
  :host ::ng-deep .margTop {
    position: -webkit-sticky;
    position: sticky;
    top: 52px;
    z-index: 9999;
  }

`],

我的HTMLheader是这样的：

<tr>
                <th class="stk" rowspan="2" style="width:60px;">Field.</th>
                <th class="stk" rowspan="2" style="width:200px;">Field</th>
                <th class="stk" rowspan="2" style="width:135px;">Field</th>
                <th class="stk" rowspan="2" style="width:105px;">Field</th>
                <th class="stk" rowspan="2">Field</th>
                <th class="stk" rowspan="2" style="width:105px;">Field</th>
                <th class="stk" colspan="2"><p class="text-center">Field</p></th>
                <th class="stk" colspan="2"><p class="text-center">Field</p></th>
                <th class="stk" rowspan="2">Field</th>
                <th class="stk" rowspan="2">Field</th>
                <th class="stk" rowspan="2" style="width:60px;">Field</th>
            </tr>
            <tr>
                <th class="margTop">Field</th>
                <th class="margTop">Field</th>
                <th class="margTop">Field</th>
                <th class="margTop">Field</th>
            </tr>

修复了 primeng DataTable 中的 header

Fixed header in primeng DataTable

primeng

angular