Datatable header width is not calculated

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

[tinyweasel]

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