Column width sizes in New-UDTableColumn

PowerShell Universal
1

I know there was an issue with the -width parameter that was dealt with in this latest release. I tried it out on one of my smaller tables, and it seemed to work okay. I have another table, however, with a great many more columns, where it does not seem to work. Regardless of the width parameter I set, the columns are all bunched up (see below). So I am curious, is there a max width to the entire table that my column widths need to fit into? For example, if I set one to 100, do I need to pare down others to allow it to fit?

image
image288×586 4.56 KB

Product: PowerShell Universal
Version: 1.5.11
2

I am also struggling with this issue. No matter what I set it has made no difference. I am not even sure what the numbering is based on.

Product: PowerShell Universal
Version: 1.5.12

I have defined.

$Columns = @(
New-UDTableColumn -Property 'BackupFileName' -Title 'File Name' -Width 5 -Render {
	New-UDLink -Text $EventData.BackupFileName -OnClick {
		Show-BackupFileVMs -BackupFileName $EventData.BackupFileName
	}
}
New-UDTableColumn -Property 'FileSize' -Title 'Size/GB' -Width 2
New-UDTableColumn -Property 'FileDate' - -Title 'Date' -Width 2
New-UDTableColumn -Property 'RetentionYears' -Title 'Retention Years' -Width 2
)

New-UDTable -Title "Pending Deletion" -Columns $Columns -Data $Data -Dense

No matter what I change they all just end up doing what they want.

image
image1444×192 9 KB

3

Strange. It looks like I have an issue where if I set the width but don’t set truncate, it overflows the cell.

$Data = @(
    @{Dessert = 'dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
) 

$Columns = @(
    New-UDTableColumn -Property Dessert -Title "A Dessert" -Width 25 
    New-UDTableColumn -Property Calories -Title Calories 
    New-UDTableColumn -Property Fat -Title Fat 
    New-UDTableColumn -Property Carbs -Title Carbs 
    New-UDTableColumn -Property Protein -Title Protein 
)

New-UDTable -Id 'customColumnsTable' -Data $Data -Columns $Columns

image
image841×161 2.08 KB

When I include truncate, it seems to work correctly.

image

And you can see what we are doing is setting the column width and max-width to the number of pixels you specify. For example, I set 25, so it’s 25 pixels.

image
image1419×287 34.1 KB

I would be curious to see what your HTML\CSS looks like that is generated. You can right click on the table cell and press inspect element.

4

I also tried with links.

$Data = @(
    @{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
) 

$Columns = @(
    New-UDTableColumn -Property 'Dessert' -Title 'File Name' -Width 5 -Render {
        New-UDLink -Text "This is a really long link" 
    }
    New-UDTableColumn -Property Calories -Title Calories 
    New-UDTableColumn -Property Fat -Title Fat 
    New-UDTableColumn -Property Carbs -Title Carbs 
    New-UDTableColumn -Property Protein -Title Protein 
)

New-UDTable -Id 'customColumnsTable' -Data $Data -Columns $Columns

image

$Data = @(
    @{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
) 

$Columns = @(
    New-UDTableColumn -Property 'Dessert' -Title 'File Name' -Width 5 -Render {
        New-UDLink -Text "This is a really long link" 
    } -Truncate
    New-UDTableColumn -Property Calories -Title Calories 
    New-UDTableColumn -Property Fat -Title Fat 
    New-UDTableColumn -Property Carbs -Title Carbs 
    New-UDTableColumn -Property Protein -Title Protein 
)

New-UDTable -Id 'customColumnsTable' -Data $Data -Columns $Columns

image

5

I was able to confirm that setting the -Truncate parameter seems to work. Width set to 400 but no truncate:

image

vs with the truncate:

image

Here is a screenshot of what I see in Chrome

image
image1043×176 18.9 KB

6

After some more testing it seems in Chrome it is not following the width. In Firefox it works like I would expect. I am also seeing the overflow issue in Firefox but not Chrome.

Here is Firefox:

image
image1503×170 9.76 KB

Here is Chrome:

image
image1417×333 11.8 KB

These are both the same code base of:

$bckColumns = @(
	New-UDTableColumn -Property 'BackupFileName' -Title 'File Name' -Width 300 -Render {
		New-UDLink -Text $EventData.BackupFileName -OnClick {
			Show-BackupFileVMs -BackupFileName $EventData.BackupFileName
		}
	}
	New-UDTableColumn -Property 'FileSize' -Title 'Size/GB'
	New-UDTableColumn -Property 'FileDate' - -Title 'Date'
	New-UDTableColumn -Property 'RetentionYears' -Title 'Retention Years'
	New-UDTableColumn -Property 'EncryptStatus' -Title 'Encrypted'
	New-UDTableColumn -Property 'PendingDeletion' -Title 'Pending Deletion'
)

Here is the HTML/CSS for the first row:

<tr class="MuiTableRow-root" role="row"></tr>
    <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall" role="cell"
        style="max-width: 300px; width: 300px;"><a
            class="MuiTypography-root MuiLink-root MuiLink-underlineNone ud-mu-link MuiTypography-colorPrimary"
            id="1f33b999-db5c-49e6-aa43-2d5bb7d7ffd0" href=":" rel="noopener" target="_self">Azure Copy - Co-Lo
            Production Web ServersD2021-01-03T000000_785F_M.vbk</a></td>
    <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeSmall" role="cell"
        style="max-width: 0px; width: 0px;">97.94</td>
    <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall" role="cell"
        style="max-width: 0px; width: 0px;">01-03-2021</td>
    <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall" role="cell"
        style="max-width: 0px; width: 0px;">5</td>
    <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall" role="cell"
        style="max-width: 0px; width: 0px;">True</td>
    <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall" role="cell"
        style="max-width: 0px; width: 0px;">False</td>
</tr>

Thanks,
Jeremy

7

I’m also seeing trouble on an existing table that is not using -width or -truncate. The columns seem to wind up with random widths. If I remove the “max-width: 0px” My table returns to its prior glory. Was the ‘Max-Width’ style introduced in 1.5.11?

I’m running 1.5.12

8

I bet that’s the problem. I bet if you don’t set the width it’s setting it to 0. I’ll get it fixed.

2 Likes
9

You can probably work around this now by updating the PSM1:

In UniversalDashboard.MaterialUI.psm1, search for: New-UDTableColumn

Change:

  if ($Width -ge 0)

To

  if ($Width -gt 0)
10

Just curious about this, so don’t hesitate to shut me down if I sound crazy :slight_smile: Would it be possible to configure an auto-size for columns, so that it takes the length of the string populating it and sets the width? Not even sure if there is a good correlation between string length and pixels.

11

This fixed the random width issue for me.

Thanks!

12

The browser is attempting to organize stuff based on the string length but when it overflows the width it starts to break up the strings into new lines. With strings that dont have spaces, it won’t automatically break those up and that causes those columns to push out the width of their columns.

There are a couple things we can do. I think the easiest would be to make width accept a percentage rather than pixel because as you mention, it’s hard to associate a pixel amount to a string length.

The other thing we could do is adjust the line\word break options to prevent strings from breaking on spaces or enable breaking long strings on any character.

I’ll futz around with it to see if I can find some sane defaults that work a bit better while providing either some options or examples on how to exercise some control. It may come down to examples using UDStyle to achieve the best result for all possible cases.

2 Likes