How to fix ngx data table column width with column mode is 'force'

Question

im using ngx data table. in that im having no of columns. by default its took defult with and it goes more than grid with scroll bar. i tried with columns array with width.

  displayColumns = [
    { name: 'S.No', value: 'SNo', width: '10' }, { name: 'Item', value: 'ProductName' , width: '10'  },
    { name: 'HSN Code', value: 'HCNCode', width: '10'  }, { name: 'GST%', value: 'GSTRate', width: '100'  },
    { name: 'Touch', value: 'PTouch', width: '10'  },
    { name: 'Qty', value: 'Quantity', width: '10'  }, { name: 'MCP Rate', value: 'MCPRate', width: '10'  }, 
    { name: 'MCP Amt', value: 'MCPAmount', width: '10'  },
    { name: 'Weight', value: 'Weight', width: '10'  }, { name: 'MCG Rate', value: 'MCGRate', width: '10'  },
     { name: 'MCG Amt', value: 'MCGAmount', width: '10'  },
    { name: 'Wastage', value: 'STouch', width: '10'  }, { name: 'Purity', value: 'Purity', width: '10'  }, { name: 'Total MC', value: 'TotalMC', width: '10'  },
    { name: 'Gram Rate', value: 'Rate', width: '10'  }, { name: 'Total Amt', value: 'TotalAmount' , width: '10' },
    { name: 'Actions', value: 'Actions' }];

and my table is

   <ngx-datatable class="bootstrap" [rows]="roleList" [headerHeight]="80"
                                        [footerHeight]="50" [rowHeight]="'45'" [scrollbarH]="true"
                                        [columnMode]="'force'" [limit]="limit" [loadingIndicator]="loadingIndicator"
                                        [columns]="displayColumns" [reorderable]="reorderable">
                                        <ngx-datatable-column *ngFor="let column of displayColumns"
                                            [name]="column.name">
                                            <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex"
                                                let-value="value" let-row="row">
                                                <span class="badge fw-default"
                                                    [ngClass]="{'badge-success': row[column.value] === 'Yes', 'badge-danger': row[column.value] === 'No' }"
                                                    *ngIf="column.name !== 'Actions'">{{row[column.value]}}</span>
                                                <span *ngIf="column.name === 'Actions'">
                                                    <button class="btn btn-primary mr-1 btn-fab" placement="top"
                                                        ngbTooltip="Edit" [disabled]=financedisabled
                                                        (click)="edit(row)">
                                                        <i class="ft-edit"></i>
                                                    </button>
                                                    <button class="btn btn-warning mr-1 btn-fab" placement="top"
                                                        ngbTooltip="Delete" [disabled]=financedisabled
                                                        (click)="deleteRow(row)">
                                                        <i class="ft-trash-2"></i>
                                                    </button>
                                                    <button class="btn btn-success mr-1 btn-fab" placement="top"
                                                        ngbTooltip="Permission" [disabled]=financedisabled
                                                        (click)="routeToRolePermission(row)">
                                                        <i class="ft-edit"></i>
                                                    </button>
                                                </span>
                                            </ng-template>
                                        </ngx-datatable-column>
                                    </ngx-datatable>

width no taking with specified in columns array. im getting grid like bellow actually grid having like this

and expecting grid like bellow expecting grid

as shown expecting grid having with drag-gable header .. so could u please say how to fix column width in this scenario. i tried many ways could no fix it .

Answer 1

If I understand your question correctly, you want to set a fixed width for your columns. I would do it like this:

<ngx-datatable-column *ngFor="let column of displayColumns" [name]="column.name" [width]="100">
<!-- the rest of your code -->
</ngx-datatable-column>