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>

Kai · Accepted Answer · 2018-07-09 10:06:07Z

8

Try this:

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

link to documentataion

edited Jul 9, 2018 at 10:06

answered Jul 9, 2018 at 9:58

Kai

3371 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

radtelbi Over a year ago

Thank you that works, I was looking in the wrong place in the documentation. I thought there was a global property that can be applied to the whole datatable (same as [reorderable]="false" ) to get the wanted behaviour.

flue89 · Accepted Answer · 2019-10-09 08:09:20Z

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>

Collectives™ on Stack Overflow

ngx-datatables disable column resizing

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related