Need Column Width as % (percentage) . Currently limited to pixel

[arsyed04]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

Column width can be defined in pixels, but not %age

Expected behavior Allow possibility to define column width in terms of %age. Could be any of the following:

1. Add another input param [ColumnWidthPercent]="50" translating to 50%
2. Change datatype of ColumnWidth to string

Reproduction of the problem N/A

What is the motivation / use case for changing the behavior? We want to develop some views where we want to control column width by percentage. Flex mode is good, but we want finer control over %age of column width.

Please tell us about your environment: Generic, applies to all

• Table version: 0.8.x Latest

• Angular version: 2.0.x 4.4.4

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5] all

[lipes]

any solution?

[xavierbrt]

An other solution is to use [columnMode]="flex" and define a flexGrow (a grow factor relative to other columns) for each column.

See an example here : https://github.com/swimlane/ngx-datatable/blob/master/demo/columns/column-flex.component.ts

[Jeswin01]

Still flexGrow does n't make the page responsive when its size reduces.

[ermarkar]

There are so many bugs with ngx-datatable. Its better to create own table component.

[PLopezD]

This table has so many features that would take weeks of development to re-create. GLHF making your own table.

[ermarkar]

This table has so many features that would take weeks of development to re-create. GLHF making your own table.

yeah too much time to create the same component. Is there any way to show some of row groupings in expanded form? Actually the table data can be added dynamically, which make ngx-datatable to refresh and because of that it renders the table again and collapse all the expanded groupings.?

thanks :)

[branko-boston]

My workaround (hack) for this was to change the utils/math.ts:forceFillColumnWidths() function. It now resizes the columns proportionally to what the original size was for each column:

@@ -116,12 +116,17 @@ export function forceFillColumnWidths(
   do {
     additionWidthPerColumn = remainingWidth / columnsToResize.length;
     exceedsWindow = contentWidth >= expectedWidth;
+    const totalWidth = columnsToResize.reduce((total, col) => total + col.width, 0);
 
     for (const column of columnsToResize) {
       if (exceedsWindow && allowBleed) {
         column.width = column.$$oldWidth || column.width || defaultColWidth;
       } else {
-        const newSize = (column.width || defaultColWidth) + additionWidthPerColumn;
+        // const newSize = (column.width || defaultColWidth) + additionWidthPerColumn;
+        // Distribute the remaining width proportionally to each column based on its initial width
+        const oldSize = column.width || defaultColWidth;
+        const additionalWidthForCol = Math.ceil(oldSize / totalWidth * remainingWidth);
+        const newSize = oldSize + additionalWidthForCol;
 
         if (column.minWidth && newSize < column.minWidth) {
           column.width = column.minWidth;

So now, for example if you have four columns and you specify their width properties as '50', '20', '20', '10', those effectively become percentages instead of static pixel widths.

Anyway, that's an option if you feel like branching the repository.

[christhomas]

Does the developer of this component realise that responsive design has been a thing for more than ten years now? And we are having to use pixels to specify widths? Wtf...

[GermanAviles]

this is was my solution, I hope work for you:

https://stackoverflow.com/questions/48228412/ngx-datatable-set-column-width-dynamically/68487602#68487602

[mrmijus]

An other solution is to use [columnMode]="flex" and define a flexGrow (a grow factor relative to other columns) for each column.

See an example here : https://github.com/swimlane/ngx-datatable/blob/master/demo/columns/column-flex.component.ts

Link not working :)

[srudin]

This table has so many features that would take weeks of development to re-create. GLHF making your own table.

Yes but this table has so many bugs it also takes weeks to fix...

[ek1mb4]

@ermarkar @christhomas The issue is not building your own table. Who thinks that can do better just fork this project and start contributing or make your own spin-off. When you release it then you will see what it takes to manage open source projects when you not getting paid to do so. This is what I do when I want something new. I download the project, change things, compile the library and add it to my project.