New-HTMLTable Issue with very long rows?

[SonamorN]

Hi,

I have a data table , which 2 of the 3 columns have strings that exceed the 200 chars. So my row (3 columns together) are at least 400 characters long, if not 600.

This causes the HTML Table to show only a single column (1st column) with a button on each row that when click will show the rest of the columns.

Is there an option in New-HTML Table to wrap the column data in specific columns?

If I increase the width of the browser window the rest of the columns appear.

Screenshots below.

The first screenshot is when the width of the browser window has increased to 2920px! The second is a normal 1920px window.

[SonamorN]

Using word-break: break-all on the td seems to be fixing it but I am not sure if it's possible to add this via a powershell command?

[PrzemyslawKlys]

Check #35 - its not implemented because It has some consequences and I would need to figure out best way to approach this.

[PrzemyslawKlys]

It should be possible, it surely is possible via powershell. I am just not sure what and how to approach it. I mean design wise. If you can propose design for the command I’m open for dicussion.

[PrzemyslawKlys]

You could consider using ScrollX

[SonamorN]

It should be possible, it surely is possible via powershell. I am just not sure what and how to approach it. I mean design wise. If you can propose design for the command I’m open for dicussion.

There could be a switch parameter for this specific edge case which adds word-break: break-word; on the td css section?

[PrzemyslawKlys]

Well Td is cell. So its possible to only apply that to particular cell/column. This would allow for greater control but at the same time require a bit more work.

[PrzemyslawKlys]

I was thinking about it and it can't be as simple as adding AutoWrap to CSS. This would change it for the whole HTML and so affect all tables in the document. It needs to be something more per table.

[SonamorN]

What if you add a powershell option on New-HTMLTable to specify a CSS ID for that table and use that to target the AutoWrap of CSS?

[PrzemyslawKlys]

I'll fix it. No worries. I'll try to sit down during the weekend and add it.

[PrzemyslawKlys]

Ok, I've fixed it. There are 2 ways to play with it.

Import-Module -Name "$PSScriptRoot\..\..\PSWriteHTML.psd1" -Force

New-HTML -TitleText "Example37 - Word Breaking" -FilePath "$PSScriptRoot\Example37.html" {
    New-HTMLSection -HeaderText "Word Break for whole table" -HeaderTextAlignment center -Content {
        New-HTMLTable -DataTable $(Get-Process | Select-Object -First 5) -WordBreak 'break-word'
    }
    New-HTMLSection -HeaderText "Word Break per column" -HeaderTextAlignment center -Content {
        New-HTMLTable -DataTable $(Get-Process | Select-Object -First 5) {
            New-TableContent -WordBreak break-all -ColumnName 'Path'
        }
    }
    New-HTMLSection -HeaderText "No word break" -HeaderTextAlignment center -Content {
        New-HTMLTable -DataTable $(Get-Process | Select-Object -First 5)
    }
} -UseCssLinks -UseJavaScriptLinks

1. The first one applies to whole table but it's a bit risky because it applies to every single column so results get funky.
2. This one applies to only single column and is recommended if you know which column is it
3. This one shows no wrapping.

There are 4 options available. Pick your option.

[PrzemyslawKlys]

You could probably even go as far as setting it per row if you need to.

[SonamorN]

Great Job! Thanks