Datatable header width is not calculated

[lvidal1]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior Datatable header container's width is not calculated but header columns are.

Expected behavior Datatable header container's width should be calculated on render.

Reproduction of the problem When I load a module which has a datatable-component, the header container, which has a class .datatable-row-center into datatable-header tag, always get a width:0. However, datatable-header-cell tags into the container have their widths calculated.

Only when I resize manually the window, datatable runs recalculation an the header container gets a proper width.

I tried this solution and others in this thread, but it seems recalculation runs but header container's width remains with 0.

Snapshot from datatable code rendered

Snapshot from datatable view

Ngx-datatable template

<ngx-datatable ngx-resize-watcher
      class="material minimal"
      [columnMode]="'force'"
      [rows]="rows"
      [columns]="columns"
      [messages]="messages"
      [rowHeight]="40"
      [headerHeight]="38"
      [footerHeight]="0"
      [scrollbarV]="false"
      >
</ngx-datatable>

Ngx-datatable columns

const columns = [
            { prop: 'nro', name: 'Nro.' , width: 50, headerClass: 'text-center border', cellClass: 'text-center border'},
            { prop: 'condicion' , name: 'Condicion',  width: 150, headerClass: 'text-center border', cellClass: 'text-center border capitalize'},
            { prop: 'dni' , name: 'DNI', width: 150, headerClass: 'text-center border', cellClass: 'text-center border'},
            { prop: 'apaterno' , name: 'Apellido Paterno', width: 150, headerClass: 'text-center border', cellClass: 'text-center border'},
            { prop: 'amaterno' , name: 'Apellido Materno', width: 150, headerClass: 'text-center border', cellClass: 'text-center border'},
            { prop: 'nombres' , name: 'Nombres',  width: 150, headerClass: 'text-center border', cellClass: 'text-center border'},
            { prop: 'acciones', name: 'Acciones', width: 150,  headerClass: 'text-center border',
              cellClass: 'text-center border', cellTemplate: this.actionsTable}
      ]

What is the motivation / use case for changing the behavior? I want to use datatable on a component into a lazy module

Please tell us about your environment:

• Table version: 11.1.5

• Angular version: 5.0.3

• Browser: Chrome

• Language: TypeScript 2.6.1

[zagros]

Getting this exact issue - any proper solution?

Here's my fix for it for now (building on the example provided above by @lvidal1 as well as this doc here link http://swimlane.github.io/ngx-datatable/#hidden)

Basically first I wrap the entire datatable in another DOM element, with an *ngIf="isDataLoaded" on that element. I set that this.isDataLoaded = true inside the promise i'm subscribing where I load the data so that datatable attempts to load ONLY after data is available (i.e datatable is added to DOM only after data is available)

it looks like if the datatable is loaded first and is bound to blank rows and columns arrays, and then those rows/column array variables are populated later on inside a promise (like inside a subscribed method of an httpclient) then this issue happens -- issue being as said above by @lvidal1 where the header calculation is messed up but if you resize the window slightly headers move to the right place

[ashishpok]

I am running into this as well - in my case, I am pushing new columns after initialization. To get around the issue, I created an API to get "potential" columns dynamically based on view to be displayed and used "hide/show" to show columns once data is available. @zagros your way might make it easier actually.

Either way still wondering if there is a better solution :)

[gpickney]

I'm having an issue similar to this one. In my case, the header not taking up the whole data table area. Interestingly enough, the footer goes all the way across the div, but the header and body do not. Unless I use a button to change a boolean for ngIf after the page loads, it does not fix itself. Even if I change the ngIf's boolean after assigning the incoming data to the table the header and body do not take up the whole div.

[gpickney]

Was just looking at the demos and it appears the Hidden On Load example may be demonstrating this bug right now.

[tinyweasel]

Before the data loads the column won't load the min widths, and the header is getting cut off. Any solutions?

[jackiewang5566]

Having the same issue when upgrading to 13.1.0, case header width automatically set to 0 when there is a service call after rendering the datatable on screen, any workaround for this scenario instead of setting flag on promise return?

[enkodellc]

My solution was similar to @zagros but the ngIf did not work for me, I needed to use [hidden]

Wrap the entire datatable in another DOM element, with an [Hidden]="!isDataLoaded" on that element. I set that this.isDataLoaded = true inside the promise i'm subscribing where I load the data so that datatable attempts to load ONLY after data is available (i.e datatable is added to DOM only after data is available).

This worked for me.

<div [hidden]="!isDataLoaded">

.....

[jothipandiyanjp]

I am also facing same issue (Header and body width resetting to zero.)

Any workaround to solve this issue..

[dm-bishnoi]

I fix this issue using [columnMode]="3"

[AliZain036]

We cannot assign numbers to columnMode. How did that work for you?

[muhammadabdullah084]

Before the data loads the column won't load the min widths, and the header is getting cut off. Any solutions?

Did you find any solution for that?

[dennis-f]

I thinkt this might be caused by missing change detection cycles. What you can do is the following:

• push data into array until all data that should be displayed is available
• then trigger automatic changeDetection using this.data = [...this.data]
• in case this did not do the trick, you can additionally import in constructor: private cd: ChangeDetectorRef and then after spreading the data to itself, call this.cd.detectChanges()
• there is also a function in the table component that can be called to recalculate columnWidths called: recalculate(). You can add a reference using ViewChild to your table and then, somewhat after AfterViewInit you can call this.table.recalculate()