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:

1 Like
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