Primeng: DataTable - No headers in nested grid

[pserafin]

Continuing my adventure with primeng I came across another issue.
Using expand im putting another dataTable (some row details for master); setting all headers properties, but on output those headers aren hidden
Code:

<p-dataTable [value]="listData" [totalRecords]="length" [rows]="10" [paginator]="true" [responsive]="true" [pageLinks]="6" sortField="DateTo" [sortOrder]="1"
             [rowsPerPageOptions]="[5,10,20]" expandableRows="true" (onRowExpand)="loadlazy($event)">
    <p-column expander="false" styleClass="col-icon" field="HasAnnexes"></p-column>
    <template let-annex>
        <p-dataTable [value]="annex.LazyAnnex" [responsive]="true" sortField="DateTo" [sortOrder]="1">
            <p-column field="TypeName" header="{{'AGREEMENT_TYPE' | translate}}"></p-column>
            <p-column field="IsActual" header="{{'IS_ACTUAL' | translate}}" styleClass="colLX-icon">
                <template let-row="rowData" >
                    <input type="checkbox" checked="checked" disabled *ngIf="row.IsActual"/>
                    <input type="checkbox" disabled *ngIf="!row.IsActual"/>
                </template>
            </p-column>
        </p-dataTable>
    </template>
    <p-column field="SalesOrgName" header="{{'ORG_UNIT' | translate}}" [sortable]="true" [filter]="false" styleClass="col-salesOrg"></p-column>
    <p-column field="Name" header="{{'AGREEMENT_NO' | translate}}" [sortable]="true" [filter]="false"></p-column>
    <p-column field="TypeName" header="{{'AGREEMENT_TYPE' | translate}}" [sortable]="true" [filter]="false"></p-column>
    <p-column field="IsActual" header="{{'IS_ACTUAL' | translate}}" [sortable]="true" [filter]="false" styleClass="colLX-icon">
        <template let-row="rowData">
            <input type="checkbox" checked="checked" disabled *ngIf="row.IsActual"/>
            <input type="checkbox" disabled *ngIf="!row.IsActual"/>
        </template>
    </p-column>
</p-dataTable>

But when manually removing class "ui-column-title" from generated table

Agreement type



header is drawn correclty

Screen:

https://plus.google.com/u/0/photos/photo/106282424696778258801/6317897092335717042?icm=false&authkey=CJG3sYyTu86SigE

[Kaffiend]

I have the same issue, any update on this?

[mikeon]

Also have this problem, I cannot see datatable headers.

[pserafin]

As I said you can use my workaround
1.) In view bind on RowExpand event

<p-dataTable [value]="contracts" [totalRecords]="length" [responsive]="true" sortField="ContractId" [sortOrder]="1" class="orln-cntr-tbl" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[5,10,20]" expandableRows="true" [lazy]="true" (onLazyLoad)="loadLazy($event)" (onRowExpand)="fixDataTable($event)">

2.) And in component use good old jquery

private fixDataTable() { var veryUglyWay = setTimeout(() => { if ($('p-dataTable.orln-annex-tbl span.ui-cell-data').length > 0) { // FIX: https://github.com/primefaces/primeng/issues/731 $('p-dataTable.orln-annex-tbl').find('th span.ui-column-title').each(function (i, v) { $(v).show(); }); clearTimeout(veryUglyWay); } }, 20); }

cheers

[natepaxton]

This can be overcome by wrapping the nested dataTable in a div with a unique id and adding this to your css:

#grid .ui-datatable-reflow .ui-datatable-data td .ui-column-title {
  display: block;
}

[srbhk]

If sorting is enabled, use inline-block:

grid .ui-datatable-reflow .ui-datatable-data td .ui-column-title {

display: inline-block;
}

Or else, the sort icons will show up below the header text.

[sivanandanr]

I tried using #grid .ui-datatable-reflow .ui-datatable-data td .ui-column-title {
display: block;
} but the header is repeating in each row column cell.

[sivanandanr]

Its simple fix with style

table thead tr th span.ui-column-title {
display: block !important;
}
This will applicable only in thead. becuase span.ui-column-title is used under tbody tr td also.
As per primeng span.ui-column-title has display:none. To override the class I have added my own style

[cagataycivici]

Not able to replicate, please create a plunkr and we'll reopen if necessary.

<p-dataTable [value]="cars" expandableRows="true">
        <p-column expander="true" styleClass="col-icon"></p-column>
        <p-column field="vin" header="Vin"></p-column>
        <p-column field="year" header="Year"></p-column>
        <p-column field="brand" header="Brand"></p-column>
        <p-column field="color" header="Color"></p-column>
        <ng-template let-car pTemplate="rowexpansion">
            <p-dataTable [value]="cars">
                <p-column field="vin" header="Vin"></p-column>
                <p-column field="year" header="Year"></p-column>
                <p-column field="brand" header="Brand"></p-column>
            </p-dataTable>
        </ng-template>
    </p-dataTable>

[Mysame]

I can confirm this issue still exists today, but it only triggers if the tables have [responsive]="true".

The following style corrects this behavior:

th .ui-column-title {
    display: inline !important;
} 

[fgaonet]

I am using version 4.2.0-rc.1. I've tried all above suggestions, but still no luck!

The datatable nested in rowexpansion displayed without column header.

If I add [responsive]="true" and reduce the browsers width, the header characters show on the left side as normal.

If I set [responsive]="false" and reduce the browser width, the header does not show, but the data rows change the layout.

Any idea?

[fgaonet]

Also, the parent datatable has no p-header. However, when I expand the row, it shows an empty p-header with half height. Weird, isn't it?

[fgaonet]

I found more features not working.

Scroll bars don't show, no matter how to set "scrollable", "scrollHeight", and "scrollWidth".

"Column Resize" behaves weird. It keeps the table with 100% width, and just shows a few columns, no matter how to set "resizableColumns". I tried a table with 10 columns. It shows 3 columns initially, although the data in these columns are very short. When I reduce one column's width, another column is added after it.

Any idea to workaround?

[deveshsinghal22]

This issues shouldn't be close as I am still facing the same issue.
Headers are not visible with 'responsive' : true.
should we wait for next release?

[ihabZhaika]

If the parent table has [responsive]="true", the inner table headers would not appear,
so remove the [responsive] attribute and it would work

[ayush987goyal]

I am still facing the issue with version 4.2.2 and removing the [responsive] attribute solve the problem.
But removing the [responsive] attribute is a workaround and not a solution. The issue should not be closed and needs to be addressed properly.

[mthor]

I just added the below as Mysame suggested

th .ui-column-title {
display: inline !important;
}

to the styles.scss and it fixed issue.