Help with UDDataGrid Component

Product: PowerShell Universal
Version: 1.4.6

Greetings!
We are trying to implement a UDDataGrid to read data from Azure Table Storage we need help with the following aspects:

  1. How to use the -LoadData parameter with UDDataGrid and how is it different form -LoadRows. The documentation does not provide an example for using the -LoadData parameter

  2. How can we customize the row color for each row in a data grid, we would like to color every alternate row to improve readability

  3. How to implement the search feature in a DataGrid

  4. The filter component on the top left is somewhat broken, as we are not able to select an attribute to filter

  5. Clicking on the sort arrow rapidly produces an error "Grid cannot index into a null array at line 116 "
    image

Looking forward to any help/guidance


New-UDPage -Url accessreviews-datagrid -Name 'accessreviews-datagrid' -Content {
    $Session:ID = ($ClaimsPrincipal.Claims | Where-Object { $_.Type -eq 'http://schemas.microsoft.com/identity/claims/objectidentifier' }).value
    
    $GacTestStorage = 'ConnectionString'
    New-UDDataGrid -LoadRows {
        $splat = @{
            TableName        = 'inactive'
            Filter           = "reviewerId eq '{0}'" -f $Session:ID
            Property         = @('inactivityDuration', 'LastSignIn', 'accountEnabled', 'userDisplayName', 'RowKey', 'Override', 'groupId', 'userDisplayName', 'appDisplayName', 'groupDisplayName', 'appId', 'userId')
            ConnectionString = $GacTestStorage
        }
        $Data = Get-AzDataTableEntity @splat
        $Data | Out-UDDataGridData -Context $EventData
    } -Columns @(
        @{
            field = "Override"; render = {
                $Row = $EventData

                New-UDSwitch -Color primary -Checked $EventData.Override -Size small -OnChange {
                    $RowKey = '{0}-{1}' -f $Row.appId, $Row.userId

                    # if ($EventData) {
                    #     Show-UDToast ('{0} will not be removed from {1}' -f $Row.userDisplayName, $Row.appDisplayName) -Duration 10000 -BackgroundColor "#658354" -MessageColor white
                    # }

                    # else {
                    #     Show-UDToast ('{0} has been marked for removal from {1}' -f $Row.userDisplayName, $Row.appDisplayName) -Duration 10000 -BackgroundColor "#ee6b6e" -MessageColor white
                    # }
                    $splat = @{
                        TableName        = 'inactive'
                        Filter           = "PartitionKey eq '{0}' and RowKey eq '{1}'" -f 'part1', $RowKey
                        ConnectionString = $GacTestStorage
                    }
                    $HashTable = Get-AzDataTableEntity @splat
                    $HashTable['Override'] = $EventData

                    $splat = @{
                        TableName              = 'inactive'
                        Entity                 = $HashTable
                        ConnectionString       = $GacTestStorage
                        Force                  = $true
                        CreateTableIfNotExists = $true
                        ErrorAction            = 'Stop'
                    }
                    Add-AzDataTableEntity @splat
                }
            }
        }

        @{ field = "userDisplayName"; MinWidth = 500; Sortable = $true; Filterable = $true }
        @{ field = "accountEnabled"; MinWidth = 150; Sortable = $true }
        @{ field = "LastSignIn"; MinWidth = 150; Sortable = $true }
        @{ field = "inactivityDuration"; MinWidth = 150 }
        @{ field = "groupDisplayName"; MinWidth = 300; Filterable = $true; Sortable = $true }
        @{ field = "appDisplayName"; MinWidth = 300; Filterable = $true; Sortable = $true }
    ) -AutoHeight -Pagination -PageSize 20 -Density standard -RowsPerPageOptions @(10, 25, 50, 100, 200, 500) -LoadDetailContent {

        $UserId = ($Body | ConvertFrom-Json).row.userId
        Show-UDModal -MaxWidth xl -Content {
            New-UDTabs -Tabs {
                New-UDTab -Text 'User' -Dynamic -Content {
                    Get-GacAFUserByID -User $UserId | ForEach-Object {
                        New-UDList -Content {
                            New-UDListItem -Label $PSItem.displayName -Icon (New-UDIcon -Icon User -Size 1x)
                            New-UDListItem -Label ('{0} {1} {2}' -f $PSItem.city, $PSItem.state, $PSItem.postalCode).trim() -Icon (New-UDIcon -Icon AddressBook -Size 1x)
                            New-UDListItem -Label $PSItem.mail -Icon (New-UDIcon -Icon envelope -Size 1x)
                            # New-UDListItem -Label $Manager.DisplayName -Icon (New-UDIcon -Icon briefcase -Size 1x)
                        }
                    }
                    # $Manager = Get-GacAFUserManagerByID -User $UserId

                }
                New-UDTab -Text 'Group Membership' -Dynamic -Content {
                    $Script:UserGroups = Get-GacAFUserMemberOf -User $UserId
                    foreach ($thisGroup in $Script:UserGroups) {
                        New-UDList -Content {
                            New-UDListItem -Label $thisGroup.group -Icon (New-UDIcon -Icon users -Size 1x)
                        }
                    }
                }
                New-UDTab -Text 'App Membership' -Dynamic -Content {
                    $AppList = Get-GacAFUserApp -User $UserId -GroupList $Script:UserGroups
                    foreach ($thisApp in $AppList) {
                        New-UDList -Content {
                            New-UDListItem -Label ('{0} ({1})' -f $thisApp.App, $thisApp.AppRole) -Icon (New-UDIcon -Icon microsoft -Size 1x)
                        }
                    }
                }
            } -RenderOnActive
        }
    }
}
1 Like
  1. UDTable has LoadData and UDDataGrid has LoadRows. They are effectively doing the same thing. Both make a callback to execute PowerShell script ansync to load the data and return it to the table.

  2. We don’t expose a great way to do this. You could achieve it with some CSS but it might be difficult to get right. I would suggest that we open a feature request to implement the functionality directly in the data grid. The component we are using supports it: Data Grid - Styling - MUI X

  3. Full table search isn’t currently implemented. It would be possible to have a UDTextbox outside the data grid to filter it. If you’d like an example of that or a if you’d like it directly integrated in the control, we can open an issue for it.

  4. This is a theme problem. I’ll have to take a look at your theme to see what’s wrong.

  5. This is a bug and I’ll open an issue for it.