Set fixed height for ngx-datatable in Angular 4

Question

I've set up a table using the swimlane/ngx-datatable in an angular 4 application. The table uses the property scrollbarV since it's necessary as a requisite. I want to do exactly as in the example provided by them and set a fixed height for the table with the scroll bar. In the appended source it wasn't clear (for me) how they set up the table height. So my question is, how exactly is the height of the whole table set/defined?

Source for the example:

import { Component } from '@angular/core';
import {MockServerResultsService} from "./mock-server-results-service";
import {PagedData} from "./model/paged-data";
import {CorporateEmployee} from "./model/corporate-employee";
import {Page} from "./model/page";

@Component({
  selector: 'virtual-paging-demo',
  providers: [
      MockServerResultsService
  ],
  template: `
<div>
  <h3>
    Virtual Server-side Paging
    <small>
      <a href="https://github.com/swimlane/ngx-datatable/blob/master/demo/paging/paging-virtual.component.ts" target="_blank">
        Source
      </a>
    </small>
  </h3>
  <ngx-datatable
    class="material"
    [rows]="rows"
    [columns]="[{name:'Name'},{name:'Gender'},{name:'Company'}]"
    [columnMode]="'force'"
    [headerHeight]="50"
    [scrollbarV]="true"
    [footerHeight]="50"
    [rowHeight]="50"
    [externalPaging]="true"
    [count]="page.totalElements"
    [offset]="page.pageNumber"
    (page)='setPage($event)'>
  </ngx-datatable>
</div>
  `
})
export class VirtualPagingComponent {

  page = new Page();
  rows = new Array<CorporateEmployee>();
  cache: any = {};

  constructor(private serverResultsService: MockServerResultsService) {
    this.page.pageNumber = 0;
  }

  /**
   * Populate the table with new data based on the page number
   * @param page The page to select
   */
  setPage(pageInfo) {
    this.page.pageNumber = pageInfo.offset;
    this.page.size = pageInfo.pageSize;

    // cache results
    // if(this.cache[this.page.pageNumber]) return;
    this.serverResultsService.getResults(this.page).subscribe(pagedData => {
      this.page = pagedData.page;

  // calc start
  const start = this.page.pageNumber * this.page.size;

  // copy rows
  const rows = [...this.rows];

  // insert rows into new position
  rows.splice(start, 0, ...pagedData.data);

  // set rows to our new rows
  this.rows = rows;

  // add flag for results
  this.cache[this.page.pageNumber] = true;
});
  }

}

Answer 1

The source associated with the example in your link (http://swimlane.github.io/ngx-datatable/#virtual-paging) is misleading.

There are a few things masking how the height is calculated in that example:

1. The style is actually being set in the CSS for the demo application.
2. The height in the demo application is using vh units, which are viewport-proportional. Vertically resizing the example window automatically causes a corresponding change to the height of the example.
3. There's no public method in the documentation for setting the height of the entire table, despite means of setting other parameters such as column widths and row heights.

The most common way of setting a fixed height is to just use a style attribute or a stylesheet rule. With a style attribute, you can add something like style="height: 300px;" to your ngx-datatable definition. Or, you can set a rule targeting .ngx-datatable or do something more refined such as adding an id attribute and targeting that instead, and then adding a style to set the height.

Here's what the style attribute might look like when applied to your snippet.

<ngx-datatable
    class="material"
    style="height: 300px;"
    [rows]="rows"
    [columns]="[{name:'Name'},{name:'Gender'},{name:'Company'}]"
    [columnMode]="'force'"
    [headerHeight]="50"
    [scrollbarV]="true"
    [footerHeight]="50"
    [rowHeight]="50"
    [externalPaging]="true"
    [count]="page.totalElements"
    [offset]="page.pageNumber"
    (page)='setPage($event)'>
</ngx-datatable>