Angular Material Table分散标题添加了粘性标题功能 [英] Angular Material Table spitted headers add the sticky header functions

问题描述

我有一个随地吐出的表头角材料表，我正在寻找添加粘性表头的帮助.

我尝试使用sticky:true，但是由于某种原因，它不适用于我的第一列(因为我正在隐藏该列.)以及第一行.它显示第二行.

下面是我的桌子

当我使用下拉菜单时，只有这些标题比其他标题具有粘性.

下面是我的闪电战.

https://stackblitz.com/edit/angular-bklajw-5foa62

解决方案

要使顶部标头具有粘性，请在其中添加粘性标签.它还将解决第一列粘性问题.

 < tr mat-h​​eader-row* matHeaderRowDef =" [['header-row-first-group'，'header-row-sec-group'，'header-row-third-group'，'header-row-thth-group'，'header-row-fifth-group']; sticky:true></tr> 

演示

I am having the spitted header angular material table and I was looking for help to add the sticky header.

I have tried to using sticky: true but somehow it is not working for my first column (as I am hiding the column.) And for the first rows. It is showing the second row.

Below is my table

When I go with the dropdown only these headers get sticky behavior than others.

Below is my stackblitz.

https://stackblitz.com/edit/angular-bklajw-5foa62

解决方案

To make the top header sticky add sticky tag in that as well. It will also fixed first column sticky issue.

 <tr mat-header-row
     *matHeaderRowDef="['header-row-first-group','header-row-sec-group','header-row-third-group','header-row-forth-group','header-row-fifth-group'];sticky:true">
</tr>

Demo

这篇关于Angular Material Table分散标题添加了粘性标题功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！