Как исправить ширину столбца таблицы данных ngx с режимом столбца «force»

я использую таблицу данных ngx. в том, что у меня нет столбцов. по умолчанию он имеет значение по умолчанию и идет больше, чем сетка с полосой прокрутки. я пробовал с массивом столбцов с шириной.

  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' }];

и мой стол

   <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>

ширина не берется с указанной в массиве столбцов. я получаю сетку, как показано ниже

и ожидаемая сетка, как показано ниже ожидающая сетка

как показано, ожидается сетка с перетаскиваемым заголовком ... так что не могли бы вы сказать, как исправить ширину столбца в этом сценарии. Я пробовал много способов, не мог это исправить.