Display all properties as list on another object when clicking a table row

[Settleman]

Hi,

I can show only partial properties in a table but is there a way when you click a row of the table to update another component to show other things like the rest of the properties (or some other information) on another component like a panel or something like that?

For example, I have an array with properties about users but this array has 50 properties for each user. I want to show only display name and email address on the table and when I click the table row, I want to see the rest of the properties on a list format instead of table format.

Is this possible?

Thanks in advanced

[PrzemyslawKlys]

Isn't it already working like that with Responsive option? If you push all 50 properties it will show what fits the screen, and then you have to get missing properties by pressing the + button on the right? You can do some settings and display only columns you want, rest can be hidden.

[Settleman]

Thanks for your reply.

I have done all that but there's too many extra fields and there's too many users in the table and you can't have a good overview when the missing properties are not showing and you'll have to scroll down forever when they are even with only a few users showing which is why I was looking at an alternative way. I found the table event and made it work with the transpose but it's just a bit weird looking and I don't have that much control because I suspect it wasn't meant for this.

In short, I'm using this to get all details from our customers 365 tenancy and building reports on it. Some of the clients have hundreds of users and objects in general and on some tables, like the security overview, I need to show a considerable amount of columns being the last one a result overview where a compilation of recommendations show.

If there's no other way, I'll try and make the best with what I have now but it would be great if one day you have some time to create something like this :) To be fair, it's not the first time I needed this feature so I decided to ask :)

In any case, I'd like to take this chance to show my appreciation for the great work you've done with this module and others in your library and to say I admire your PS skills.

Cheers 👍

[Settleman]

Transpose won't show all the properties, only the filtered key value so I can't use it anyway

[PrzemyslawKlys]

$Test = Get-Process | Select-Object -First 2
$AllProperties = $Test | Get-Member -MemberType Properties | Where-Object {
     $_.Name -notin 'Name', 'Id'
} | Select-Object -ExpandProperty Name
# New-HTML option
New-HTML {
    New-HTMLTable -DataTable $Test {
        TableHeader -Names 'Name', 'ID' -Title 'Process Information' -BackGroundColor Green
        #TableHeader -Names 'PagedMemorySize', 'PrivateMemorySize', 'VirtualMemorySize' -Title 'Memory' -Color White -BackGroundColor Gainsboro

        New-HTMLTableHeader -Names 'ID', 'Name' -ResponsiveOperations all
        New-HTMLTableHeader -ResponsiveOperations none -Names $AllProperties
    } -ResponsivePriorityOrder 'Name', 'Id'
} -ShowHTML -Online -FilePath $PSScriptRoot\Example7_11-Responsive.html

Press a button

I am not sure if that's what you wanted but to me it sounds exactly that. You just need to push responsive properties to be always hidden and plus button always presents as sort of list.

[Settleman]

Thanks for that.

I managed to get it to a point where it's usable but want to leave you with a couple issues I found that seem to be bugs.

If I try to remove the search bar (DisableSearch) on the right table, the events stop working when I click on a row on the left table.
Also, if I enable the the alphabet search (AlphabetSearch) on the left table, it forces the right table to show it too, even if I force it off.

Not a bug but I couldn't find a way to remove the Prev/Next of the table from the available PagingStyle options.

Again, appreciate your help.

Cheers

C

$allProp = $allSecurityWarnings | Get-Member -MemberType NoteProperty | Where-Object { $_.Name -ne 'ID'} | Select-Object -ExpandProperty Name

New-HTML -TitleText $Title -Online -FilePath $PSScriptRoot\Example7_04.html {
    Add-CSS -Placement Header -Content "tr.child, tr.odd, tr.even { font-family: ""Lucida Console"", ""Courier New"", Courier !important; }" -SkipTags
    New-HTMLSection -HeaderText 'Security Warnings' -HeaderTextSize "14px" -HeaderBackGroundColor '#666666' -HeaderTextColor '#ffffff' -Margin "20px" -BackgroundColor WhiteSmoke {
        New-HTMLTable -DataTable $allSecurityWarnings -Title 'Security Warnings' -PagingLength 15 -Filtering -EnableColumnReorder -AlphabetSearch:$false -DataTableID "tblUsers" {
            New-TableEvent -TableID "tblUserDetails" -SourceColumnID 0 -TargetColumnID 0
            New-HTMLTableColumnOption -ColumnIndex 0 -Hidden $true
            New-HTMLTableColumnOption -ColumnIndex 1 -Width 300
            New-HTMLTableColumnOption -ColumnIndex (2..15) -Hidden $true
        }
        New-HTMLTable -DataTable $allSecurityWarnings -DataTableID "tblUserDetails" -HideShowButton -PagingLength 1 -HideFooter -DisableOrdering -DisableInfo -HideButtons -ImmediatelyShowHiddenDetails -PagingStyle simple -AlphabetSearch:$false -Style cell-border { #
            New-HTMLTableHeader -Names 'ID' -ResponsiveOperations all -Alignment left
            New-HTMLTableHeader -ResponsiveOperations none -Names $allProp
            New-HTMLTableColumnOption -ColumnIndex 0 -Hidden $true
        }
    }

} -ShowHTML

[PrzemyslawKlys]

Alphabet search is a known issue: #351 - it's not a problem of PSWriteHTML, but more on the plugin itself. If I will have enough time to waste to bump my head in JS wall for 24 hours I may fix it. Otherwise probably better to report the issue to DataTables vendor.

Events work by using "search" in a way where it's not visible. Removing search causes the functionality to break which is expected considering how it's implemented. Probably would to be verified if it can be hidden without disabling.

Don't remember from the top of my head. You could probably try PagingStyle, DisablePaging. If not this requires research, or maybe just hide it with CSS