search

carbon-design-system / carbon-components-angular

An Angular implementation of the Carbon Design System for IBM.
https://angular.carbondesignsystem.com
Apache License 2.0
532 stars 307 forks source link

[Table] Header text on page-break not visible #2706

Open LouisRoth opened 1 year ago

LouisRoth commented 1 year ago

Detailed description

My application generates reports that are usually printed out. There are usually so many entries in the table that the table goes over several pages. I have noticed that with the setting [sortable]=true the text on the header is not visible after the page break (see screenshots). With the setting [sortable]=false the table behaves as expected, the text is displayed.

I am using following versions:

Steps to reproduce the issue

<div>
    <cds-table-container>

        <cds-table-header>
            <h4>Fenster</h4>
            <div cdsTableHeaderDescription style="display: flex; align-items: center; gap: 0.25rem;" >
                <img src="assets/icons/stable.svg" />In Ordnung
                <img src="assets/icons/issue.svg" style="margin-left: 0.25rem;" />Mangel
                <img src="assets/icons/undefined.svg" style="margin-left: 0.25rem;" />Nicht geprüft/erreichbar
                <img src="assets/icons/draft.svg" style="margin-left: 0.25rem;" />Nicht vorhanden

            </div>
        </cds-table-header>

        <cds-table [model]="tableModel" [showSelectionColumn]="false" [sortable]="true" size="md">

        </cds-table>

    </cds-table-container>
</div>

Additional information

With sortable equals true: image With sortable equals false: image

Akshat55 commented 9 months ago

I'm not 100% sure why this is happening... My assumption is that when converting the table to PDF, interactive elements are removed? When we set sortable to true. we wrap the headers in buttons e.g. <th><button>...</button></th> 🤔