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

$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

'&: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

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

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




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

$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"
            }
        }

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

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

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 }
}

docs.powershelluniversal.com