When using ngx data tables, I encountered an issue with the column widths exceeding the grid width and requiring a scroll bar. I attempted to set the column widths using an array as follows:
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' }];
The table structure is defined below:
<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">
// Content for ngx datatable columns here
</ngx-datatable>
However, the column widths specified in the array are not taking effect, resulting in a misaligned grid like the image provided here.
The expected grid layout should resemble the one displayed here, featuring draggable headers.
Unfortunately, my attempts to fix the column widths have been unsuccessful. If you have any suggestions on how to address this issue, please let me know.