ngx-datatables disable column resizing

Question

I am currently using ngx-datatable (with [columnMode]="'force'") I want to prevent users from resizing the column size. is it possible? my current code looks like this :

<ngx-datatable *ngIf="viewType==='client-stats'"
             class='bootstrap fixed-header clients-infos'
             [rows]='rows'
             [columnMode]="'force'"
             [headerHeight]="34"
             [footerHeight]="60"
             [rowHeight]="60"
             [selectionType]="'multiClick'"
             [selected]="selectedRows"
             (select)='onSelect($event)'
             [limit]="10"
             >
  <ngx-datatable-column name="lastname">
     <ng-template let-value="value" ngx-datatable-cell-template>
       {{value |titlecase}}
     </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="Firstname">
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{value |titlecase}}
    </ng-template>
    </ngx-datatable-column>
    ...
</ngx-datatable>
</section>

Solution 1

Try this:

<ngx-datatable-column [resizeable]="false" name="lastname">

link to documentataion

Solution 2

create model: Ngx-datatable-resizer.ts

export class NgxDatatableResizer {

  name: string;
  grow: number;

  constructor(name: string, grow: number) {
    this.name = name;
    this.grow = grow;
  }
}

create helper funcion: table-resize2.ts

import {NgxDatatableResizer} from "../../../model/Ngx-datatable-resizer";

/**
 * @author: Mateusz Zastawny
 */

export class TableResize2 {

  private tableId: string;
  private columns: Array<NgxDatatableResizer>;
  private columnsMap = {};

  private sum: number = 0;

  constructor(tableId: string, columns: Array<NgxDatatableResizer>) {
    this.tableId = tableId;
    this.columns = columns;

    this.setMap();
  }

  private setMap(): void {
    this.columns.forEach(column => {
      this.columnsMap[column.name] = column.grow;
      this.sum = Math.round((this.sum += column.grow) * 100) / 100;
    });
  }

  public width(name: string): number {
    const maxWidth = Number(window.getComputedStyle(document.getElementById(this.tableId)).width.slice(0, -2));
    return (Math.round((((this.columnsMap[name] * 100) / this.sum) / 100) * 100) / 100) * maxWidth;
  }
}

use in .ts component:

//
public tableIdNameResizer: TableResize2 = new TableResize2('tableIdName',
    [
      new NgxDatatableResizer('name1', 0.3),
      new NgxDatatableResizer('name2', 0.4),
      new NgxDatatableResizer('name3', 0.87)
    ]);
//

use in .html component:

      <ngx-datatable
        id="tableIdName"
        [columnMode]="'force'"
        >
        <ngx-datatable-column [minWidth]="30" [width]="tableIdNameResizer.width('name1')" [canAutoResize]="true" name="NAME1" prop="name1">
          <!--..-->
        </ngx-datatable-column>
        <ngx-datatable-column [minWidth]="30" [width]="tableIdNameResizer.width('name2')" [canAutoResize]="true" name="NAME2" prop="name2">
          <!--..-->
        </ngx-datatable-column>
        <!--..-->
      </ngx-datatable>