Howto Style Border Color for New-UDDataGrid?

Product: PowerShell Universal
Version: 3.3.5

Hi,

can anybody help with: how to style the border color for New-UDDataGrid?
I Like to change only the color for all borders.

If i apply a style like this:

                $DataGridStyle = '.MuiDataGrid-cell { border-color: #F17100;};.MuiDataGrid-root { border-color: #F17100;};.MuiDataGrid-columnHeaders { background-color: gray;}'
                New-UDStyle -Style $DataGridStyle -Content {
                    New-UDDataGrid -LoadRows {  
                        Out-UDSqlDataGrid -Context $EventData -SqlInstance "localhost" -Database "[PSU]" -Table $Tabelle
                    } -Columns $ColHashtable -AutoHeight -Pagination -RowsPerPageOptions 5,10,20,50,100,200,500 -CheckboxSelectionVisibleOnly -Density compact 
                }

i get:


the Datagrid is not filling the container.
if i change the width for the dynamic parrent like this:

the datagrid fill the container like no style was applied.

But i cant syte this container :frowning:

any help?

I’d recommend using a custom theme.

$Theme = @{
   overrides = @{
         MuiDataGrid = @{
             root = @{
                     'border-color' = '#F17100'
             }
             cell = @{ 
                     'border-color' = '#F17100'
            }
            columnHeaders = @{
                     'background-color' = 'gray'
            } 
         }
   }
}

New-UDDashboard -Theme $Theme -Content {
    New-UDDataGrid -LoadRows {  
          Out-UDSqlDataGrid -Context $EventData -SqlInstance "localhost" -Database "[PSU]" -Table $Tabelle
    } -Columns $ColHashtable -AutoHeight -Pagination -RowsPerPageOptions 5,10,20,50,100,200,500 -CheckboxSelectionVisibleOnly -Density compact 
} 

Thanks a lot :slight_smile:

at the end i have:

        overrides = @{
            MuiDataGrid = @{
                root          = @{
                    'border-color' = '#F17100'
                }
                cell          = @{ 
                    'border-color' = '#F17100'
                }
                columnHeaders = @{
                    'background-color' = 'gray'
                    'border-bottom'    = '1px solid #F17100'
                } 
                columnSeparator = @{
                    'color' = '#F17100'
                } 
                footerContainer = @{
                    'border-top'    = '1px solid #F17100'
                }
            }
        }