Nested Table scrolling stops and returns "loading"

[PatrickOnGit]

Hello Przemysław

Thank you for this amazing module. I already have a thousand ideas where to use it ;-) But I'm a newbe in terms of using this module. When I write code I use a lot of pipelining. I'm not sure if this is ideal. Anyhow, I wrote the following short code to document firewall rules contained in multiple GPOs. I attached the resulting page. The problem is, some nested tables are longer than the automatically prepared space. When trying to scroll down, the view returns "loading" and nothing happens anymore. Reloading the page returns to a page without the option to collaps the rows.

Resulting page: FWRules.zip

New-HTML {
    $DNSRoot = Get-ADDomain | Select -ExpandProperty DNSRoot
    New-HTMLTable -DataTable $(
        # get all GPOs named Firewall
        Get-GPO  -All -PipelineVariable GPO | where displayname -match "Firewall" |
            ForEach-Object {
                # generate table content - Firewall rules for currenct GPO
                $session = Open-NetGPO -PolicyStore "$DNSRoot\$($_.DisplayName)"
                $FWRules = Get-NetFirewallRule -GPOSession $session -PolicyStore ActiveStore | Get-AXNetFirewallRule
                Save-NetGPO $session
                # Child table which will collaps in parent table
                [PSCustomObject] @{
                    GPODisplayName = $GPO.DisplayName
                    Table  = [string]$(
                        # Child table
                        New-HTMLTable -DataTable $FWRules -HideFooter {
                            New-TableRowGrouping -Name 'Direction' -Color BlackRose -BackgroundColor BattleshipGrey
                        }
                    )
                }
            }

    ) -InvokeHTMLTags -EnableScroller -HideButtons
} -ShowHTML -Online  

Initial load:

Expanded row

Page after scrolling

Page after reload

[PrzemyslawKlys]

Well, the missing button is a problem I fight over and over. The same thing happens for tabs, sections, and so on. To fix it every time a tab is switched I resize the table using findObjectsToRedraw. I believe the scrolling and other issues are related to this, and probably hardly supported by DataTables.

https://github.com/EvotecIT/PSWriteHTML/blob/1f94a4907ca02d2954bf8fd3d0250c5e97124a22/Resources/JS/redrawObjects.js#L6-L23

To get nested tabs to work the way you want you would need to refresh that particular table on button press - it won't be easy.

However, I've just added yesterday a WinBox functionality to the preview version. Right now it's not attached to anything, but the idea is - to make it possible to link it to events in the table (row press or something).

Right now this works as a separate "thing". The idea is to always hide it, and get it shown on press on Chart, press on row in a table, and so on. No dates for that as this was an experiment I tried out yesterday - but who knows - maybe you want to try and add linking it to events.

You would be better of with two tables that are linked to each other? Have you tried that?

You could try pushing this HTML of yours and showing it on codepen and then opening a ticket in DataTables forum seeing if they have idea on how to fix it. Maybe it wouldn't be that hard. Make sure to provide reproducible HTML code, small code at that.

[PrzemyslawKlys]

You can get ideas from GPOZaurr which in some reports have linked tables (especially the permission ones).

[PatrickOnGit]

Hello Przemysław

Thank you for your swift feedback. No I haven't tried yet. As mentioned I just started using PSWriteHTML. I'll check GPOZaurr and it's linked tables. Btw. It seems the HTML code contains a couple of
in wrong places which also prevents the grouping which I tried to include. Chrome's debugger is moaning about that.

Thank you for your support and I'll let you know next week.

Best regards Patrick

Sent from Nine

---

Von: Przemysław Kłys @.***> Gesendet: Samstag, 1. Mai 2021 19:20 An: EvotecIT/PSWriteHTML Cc: PatrickOnGit; Author Betreff: Re: [EvotecIT/PSWriteHTML] Nested Table scrolling stops and returns "loading" (#233)

You can get ideas from GPOZaurr which in some reports have linked tables (especially the permission ones). — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[PrzemyslawKlys]

Here's an easy example showing 3 tables linked to each other. But the idea is that first table holds only GPOS, and the 2nd one holds the rules (all the rules) with some columns having something to "combine" with.

$Processes = Get-Process | Select-Object -First 3 -Property Name, ProcessName, Id, FileVersion, WorkingSet

New-HTML -TitleText 'My Title' -Online -FilePath $PSScriptRoot\Example30-LinkedTableToTable02.html -ShowHTML {
    New-HTMLTableOption -DataStore Javascript
    New-HTMLSection -Invisible {
        New-HTMLPanel {
            New-HTMLTable -DataTable $Processes -DataTableID 'RandomID1' {
                New-TableEvent -ID 'RandomID2' -SourceColumnID 0 -TargetColumnId 0
                New-TableEvent -ID 'RandomID3' -SourceColumnID 0 -TargetColumnId 0
            }
        }
        New-HTMLPanel {
            New-HTMLTable -DataTable $Processes -DataTableID 'RandomID2'
        }
    }
    New-HTMLPanel {
        New-HTMLTable -DataTable $Processes -DataTableID 'RandomID3'
    }
}

[PrzemyslawKlys]

A couple of resources for nested tables that require investigation for proper nesting building:

• https://datatables.net/forums/discussion/56293/multi-nested-datatables
• https://datatables.net/forums/discussion/42045/nested-tables
• https://datatables.net/forums/discussion/51873/nested-datatables

This one shows how to go for nesting within objects (for example displaying nested 2 level deep property):

• https://datatables.net/examples/ajax/deep.html

This is totally unsupported, but maybe something to think for future.

Here's even a plugin that allows nested tables:

• https://andrejgajdos.github.io/nested-datatables/

Of course it would require working differently - probably creating a proper object and then allowing nesting

This one shows different approach: https://jsfiddle.net/headwinds/zz3cH/

[PatrickOnGit]

Thank you for your great and quick feedback. Though I found the solution to my problem. The problem were that I passed the object as is. After serializing it, the table worked as expected. The firewall rule objects are CIMInstances and seem to be be somewhat nested. Even simple convertion to JSON did not work. Converting it to CSV and back to PowerShell objects solved the issue. The table now works as expected and much quicker. Here the example code and the serialized JSON object as example.

FWRules.json.txt

$GPOFWRules = Get-Content C:\Temp\FWRules.json.txt | ConvertFrom-Json

New-HTML {
    New-HTMLSection -HeaderText 'GPO Firewall Rules' {
        # main table. Will contain subtables for each GPO
        New-HTMLTable -DataTable $(
            # get all GPOs named Firewall
              $GPOFWRules | Group-Object -Property GPOName |
                ForEach-Object {

                    # Child table which will collaps in parent table
                    [PSCustomObject] @{
                        GPODisplayName = $_.Name
                        Table  = [string]$(
                            # Child table
                            New-HTMLTable -DataTable $_.Group -HideFooter {
                                New-TableRowGrouping -Name 'Direction' -BackgroundColor MoonYellow
                            }
                        )
                    }
                }

        ) -InvokeHTMLTags -EnableScroller
    }
} -ShowHTML -Online -FilePath C:\Temp\FWRules.html

[PrzemyslawKlys]

You could also try using New-HTMLTableOption -DataStore JavaScript without conversion... it uses my own ConvertTo-jsonliteral which does depth 0 conversion - it's also much faster. Maybe it would work without going thru your own sanitization process.

[PrzemyslawKlys]

It's described in the features here: https://evotec.xyz/advanced-html-reporting-using-powershell/