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

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

avatar
(anonymous user)

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 

Product: PowerShell Universal
Version: 3.7.5

All Comments (7)

avatar
Adam Driscoll 

$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

Adam Driscoll

PowerShell Expert and Software Architect at Devolutions

avatar
(anonymous user) 
'&:nth-of-type(odd)' = @{
                    backgroundColor = "rgba(0,0,0,0.04)"
                }

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

1
avatar
(anonymous user)

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