如何在 Primeng 表中对列标题进行分组

时间:2021-02-04 16:01:04

标签: header primeng

我正在使用 PrimeNG 在我的 angular 应用程序中显示表格数据。有一种情况,我们必须将列分组在一个标题下,如下所示。有没有办法对列进行分组。 例如:

S.no 员工信息地址 名称 |名称 | DOB St. Num |圣地址 |城市 |邮编

1 个答案:

答案 0 :(得分:1)

有一种方法。

您必须使用 th 或 td 的 rowspan 和 colspan 属性。 RowSpan 是单元格将占据的行数。 Colspan 表示单元格将占据的列数。这是官方示例:

<p-table [value]="sales">
    <ng-template pTemplate="header">
        <tr>
            <th rowspan="3">Product</th>
            <th colspan="4">Sale Rate</th>
        </tr>
        <tr>
            <th colspan="2">Sales</th>
            <th colspan="2">Profits</th>
        </tr>
        <tr>
            <th>Last Year</th>
            <th>This Year</th>
            <th>Last Year</th>
            <th>This Year</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-sale>
        <tr>
            <td>{{sale.product}}</td>
            <td>{{sale.lastYearSale}}%</td>
            <td>{{sale.thisYearSale}}%</td>
            <td>{{sale.lastYearProfit | currency: 'USD'}}</td>
            <td>{{sale.thisYearProfit | currency: 'USD'}}</td>
        </tr>
    </ng-template>
</p-table>

我把 link 放在了解释的地方。

我不知道这是否是您要找的。

相关问题