Alternating table row colors with light/dark theme via MUI overrides?

PowerShell Universal Universal Dashboard
1

Hi folks,

Just trying to add some readability to larger tables via the colour theme, in adding alternating (striped) colours on odd table row numbers only.

I know this is achievable via CSS, using tr:nth-child(odd) but I’ve been trying to get it to work using the theme overrides in Mui without much success, since we’ve got light/dark mode enabled in the theme. Is it possible to do via PSU’s MUI theming implementation? I haven’t had much luck with poking at the MuiTable classes :grimacing:

Product: PowerShell Universal
Version: 3.7.5
2

:sunglasses:

image

$Theme = @{
    overrides = @{
        MuiTableRow = @{
            root = @{
                '&:nth-of-type(odd)' = @{
                    backgroundColor = "rgba(0,0,0,0.04)"
                }
            }
            head = @{
                backgroundColor = "rgb(255,255,255) !important"
            }
        }
    }
}

New-UDDashboard -Content {
$data = 1..10 | % { [PSCustomObject]@{ Item = $_}}
  New-UDTable -Id "LockedUsers" -ShowPagination -PageSize 10 -PageSizeOptions @(10, 10) -DisablePageSizeAll -Columns @(
        New-UDTableColumn -Property 'Item' -Title 'Item' -Width 180 -Truncate
    ) -Data $Data -Dense -ShowSearch
} -Theme $Theme
3

Yes! I got here as well since posting. I just need to account for expanding rows since they also apparently count as rows :joy:

4

Doesn’t seem to work anymore. No tables even gets displayed. Will this work for both theme too?

5

I just tried this on the latest version of v4 and it works for me.

image
image505×512 4.15 KB

If you want to do this with the AntDesign theme, you can do this.

$AntDesign = Get-UDTheme -Name 'AntDesign'
$AntDesign.light.overrides.MuiTableRow =  @{
            root = @{
                '&:nth-of-type(odd)' = @{
                    backgroundColor = "rgba(0,0,0,0.04)"
                }
            }
            head = @{
                backgroundColor = "rgb(255,255,255) !important"
            }
        }

New-UDApp -Content {
$data = 1..10 | % { [PSCustomObject]@{ Item = $_}}
  New-UDTable -Id "LockedUsers" -ShowPagination -PageSize 10 -PageSizeOptions @(10, 10) -DisablePageSizeAll -Columns @(
        New-UDTableColumn -Property 'Item' -Title 'Item' -Width 180 -Truncate
    ) -Data $Data -Dense -ShowSearch
} -Theme $AntDesign
6

Works good indeed. I must have done something wrong or in an odd state. Thanks for your help

7

what would be the best way to apply this style only to a specific table but not to all tables in general?

8

Hi, something like this works:

$tableData = @(
    @{ id = 1; DisplayName = "Value1"; Action = "1" }
    @{ id = 2; DisplayName = "Value2"; Action = "2" }
    @{ id = 3; DisplayName = "Value3"; Action = "3" }
    @{ id = 4; DisplayName = "Value4"; Action = "4" }
    @{ id = 5; DisplayName = "Value5"; Action = "5" }
    @{ id = 6; DisplayName = "Value6"; Action = "6" }
)

New-UDTable -Id "table_myTable2" -Data $tableData -ShowSelection -OnRowStyle {
    $rowStyle = $EventData.id % 2
    if($rowStyle -eq 0) {
        $Color = "grey"
    } else {
        $color = "lightgrey"
    }
    @{ backgroundColor = $Color }
}

image
image1076×402 7.2 KB