UD-Table conversion from V2 to V3

PowerShell Universal
1

I am converting my dashboard from V2 to V3. Lots of places i use the technique shown here.

I can’t really find out how to achieve the same in V3. I get lots of space above my text and paging. Do i need to use another component for this? I just want a fixed size list showing information about a topic, just like the V2 sample.

2

Not yet. We are looking at implementing the dense table for v3. https://material-ui.com/components/tables/#dense-table

Here’s a work around function for now for building a table.

New-UDDashboard -Title "Server Monitor" -Content {
    function New-HtmlTable {
        param($Data, $Properties)

        # Create a MUI table but hide it so we load styles correctly
        New-UDElement -tag 'div' -Attributes @{ style = @{ display = 'none' } } -Content {
            New-UDTable -Data $Data
        }
        

        New-UDPaper -Content {
            New-UDElement -Tag 'table' -Attributes @{ className = "MuiTable-Root" } -Content {
                New-UDElement -Tag 'thead' -Attributes @{ className = "MuiTableHead-root" } -Content {
                    New-UDElement -Tag 'tr'  -Attributes @{ className = "MuiTableRow-root MuiTableRow-head" } -Content {
                        foreach($Header in $Properties)
                        {
                            New-UDElement -tag 'th' -Attributes @{ className = "MuiTableCell-root MuiTableCell-head MuiTableCell-sizeSmall" } -Content { $Header }
                        }
                    }
                }
                foreach($Item in $Data) 
                {
                    New-UDElement -Tag 'tbody' -Attributes @{ className = "MuiTableBody-root" } -Content {
                        New-UDElement -Tag 'tr' -Attributes @{ className = "MuiTableRow-root" } -Content {
                            foreach($Property in $Properties)
                            {
                                New-UDElement -Tag 'td' -Attributes @{ className = "MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall" }  -Content { $Item[$Property] }
                            }
                        }
                    }

                }
            }
        }
    }

    $Data = @(
        @{ Name = "Adam"; Title = "Programmer" }
        @{ Name = "Bill"; Title = "Human Resources" }
        @{ Name = "Ted"; Title = "CEO" }
        @{ Name = "Frank"; Title = "QA" }
    )

    New-HtmlTable -Data $Data -Properties @("Name", "Title")
}

Looks like this.

image

2 Likes
3

Thanks Adam

I have a couple of other questions for New-UDTable that I can’t find answers to:

  1. Is there some way to define column witdth? I have a table with long text message and single digit int next to each other. They are same width causing the text to wrap meanwhile i have plenty of space around my digit

  2. Is there anyway to remove the paging functions. I have a table that never goes past 20 rows where paging seems a little silly.

Regards
Claus