Data Grid

Il componente UDDataGrid è una versione avanzata della tabella, utile per visualizzare grandi quantità di dati. Supporta molte delle stesse funzionalità della tabella, ma offre anche filtri complessi, virtualizzazione delle righe, ordinamento su più colonne e altro ancora.

Data grid semplice

Le data grid caricano i propri dati tramite il gestore di eventi -LoadRows. Dovrà restituire una hashtable che contiene i dati delle righe e il numero totale di righe.

Le colonne sono definite utilizzando hashtable.

New-UDDataGrid -LoadRows {
    $Data = @(
        @{ Name = 'Adam'; Number = Get-Random}
        @{ Name = 'Tom'; Number = Get-Random}
        @{ Name = 'Sarah'; Number = Get-Random}
    )
    $Data | Out-UDDataGridData -Context $EventData -TotalRows $Rows.Length
} -Columns @(
    New-UDDataGridColumn -Field name
    New-UDDataGridColumn -Field number
) -AutoHeight $true

Colonne

Le colonne sono personalizzabili tramite New-UDDataGridColumn. Maggiori informazioni su questo cmdlet sono disponibili qui.

Rendering di colonne personalizzate

È possibile eseguire il rendering di componenti personalizzati nelle colonne specificando render all'interno della hashtable della colonna. Può accedere ai dati della riga corrente utilizzando la variabile $EventData o $Row

In questo esempio, il numero è mostrato nella colonna del nome con un componente New-UDTypography.

New-UDDataGrid -LoadRows {  
    $Rows = 1..100 | % {
        @{ Name = 'Adam'; Number = Get-Random}
    }
    $Rows| Out-UDDataGridData -Context $EventData -TotalRows $Rows.Length
} -Columns @(
    New-UDDataGridColumn -Field name -Render {
         New-UDTypography $EventData.number 
    }
    New-UDDataGridColumn -Field number
) -AutoHeight $true

Colonne a larghezza flessibile

La fluidità o la reattività delle colonne può essere ottenuta impostando la proprietà flex di una colonna.

La proprietà flex accetta un valore compreso tra 0 e ∞. Funziona dividendo lo spazio rimanente nella griglia tra tutte le colonne flex in proporzione al loro valore flex.

Ad esempio, si consideri una griglia con una larghezza totale di 500px che ha tre colonne: la prima con width: 200; la seconda con flex: 1; e la terza con flex: 0.5. La prima colonna sarà larga 200px, lasciando 300px rimanenti. La colonna con flex: 1 è il doppio della dimensione di flex: 0.5, il che significa che le dimensioni finali saranno: 200px, 200px, 100px.

Per impostare una larghezza minima e massima per una colonna flex, imposti le proprietà minWidth e maxWidth sulla colonna.

New-UDDataGrid -LoadRows {  
    $Rows = 1..100 | % {
        @{ Name = 'Adam'; Number = "This column is a very long string. This column is a very long string. This column is a very long string. This column is a very long string. This column is a very long string. This column is a very long string."}
    }        
    $Rows| Out-UDDataGridData -Context $EventData -TotalRows $Rows.Length
} -Columns @(
    New-UDDataGridColumn -Field name -Render {
         New-UDTypography $EventData.number 
    }
    New-UDDataGridColumn -Field number -Flex 1.0
) -AutoHeight $true

Ridimensionamento automatico delle colonne

Se desidera che la data grid dimensioni automaticamente le larghezze delle colonne, può utilizzare il parametro -AutoSizeColumns di New-UDDataGrid. La data grid valuterà la dimensione dei dati e determinerà la dimensione migliore per le colonne dopo il caricamento dei dati. Ciò può causare una riorganizzazione dell'interfaccia utente dopo il caricamento dei dati.

New-UDDataGrid -LoadRows {  
    $Rows = 1..100 | % {
        @{ Name = 'Adam'; Number = "This column is a very long string. This column is a very long string. This column is a very long string. This column is a very long string. This column is a very long string. This column is a very long string."}
    }        
    $Rows| Out-UDDataGridData -Context $EventData -TotalRows $Rows.Length
} -Columns @(
    New-UDDataGridColumn -Field name -Render {
         New-UDTypography $EventData.number 
    }
    New-UDDataGridColumn -Field number
) -AutoHeight $true -AutoSizeColumns

LoadRows

Il parametro -LoadRows viene utilizzato per restituire i dati per la data grid. Lo stato della tabella verrà fornito al gestore di eventi come $EventData. Troverà le seguenti proprietà all'interno dell'oggetto $EventData.

Proprietà	Descrizione	Tipo
Filter	Un oggetto filtro che può utilizzare per costruire filtri sui suoi dati.	Hashtable
Page	La pagina corrente. Inizia da 0.	Integer
PageSize	Il numero di record in una pagina.	Integer
Sort	Le opzioni di ordinamento per la tabella	Hashtable

Paginazione

Per implementare la paginazione, può accedere alle proprietà page e pageSize della variabile $EventData. Se utilizza un'origine dati remota, sarà opportuno implementare una logica di paginazione personalizzata. Di seguito è riportato un esempio di utilizzo delle proprietà di paginazione per scorrere le righe localmente. A seconda della sua origine dati (ad es. SQL), potrebbe scorrere i dati in modo diverso.

New-UDDataGrid -LoadRows {  
    $Rows = 1..100 | % {
        @{ Name = 'Adam'; Number = Get-Random}
    } 
    
    $Rows = $Rows | Select-Object -First $EventData.pageSize -Skip ($EventData.Page * $EventData.PageSize)
    
    $Rows| Out-UDDataGridData -Context $EventData -TotalRows $Rows.Length
} -Columns @(
    New-UDDataGridColumn -Field name
    New-UDDataGridColumn -Field number
) -AutoHeight $true -Pagination

Out-UDDataGridData implementa automaticamente la paginazione e non è necessario fare quanto sopra se ha tutti i suoi dati in memoria. Quanto sopra è utilizzato solo a scopo dimostrativo.

Filtraggio

La data grid supporta il filtraggio dei dati in base a ciascuna colonna. È possibile definire più filtri per consentire all'utente di restringere il set di dati visualizzato. Per impostazione predefinita, il cmdlet Out-UDDataGridData implementa il filtraggio per i dati locali. Quando si utilizza un'origine dati remota, come SQL, si consiglia di implementare un filtraggio personalizzato per migliorare l'esperienza utente e le prestazioni.

Struttura dati del filtro

L'oggetto filtro è incluso in $EventData per il gestore di eventi -LoadRows quando è definito un filtro. L'oggetto ha la struttura seguente.

@{
    items = @(
        @{ 
            field = "Name"
            operator = "contains"
            value = "test"
        }
    )
    logicOperator = "and"
    quickFilterValues = @("test")
    quickFilterLogicOperator = "and"
}

Items

La proprietà items contiene una raccolta di campi, operatori e valori. Può utilizzarli per filtrare i suoi dati.

Proprietà	Descrizione	Tipo
Field	Il nome del campo da filtrare	String
Operator	Il tipo di operatore da utilizzare durante il filtraggio dei dati.	String
Value	Il valore utilizzato per filtrare	Object

LogicOperator

Il campo dell'operatore logico viene utilizzato per specificare il collegamento tra i filtri. Può essere and o or.

QuickFilterValues

Contiene una raccolta di valori di filtro rapido che può scegliere come applicare ai suoi dati.

QuickFilterLogicOperator

Contiene l'operatore logico per i valori di filtro rapido specificati dall'utente. Può essere and o or.

Filtro personalizzato

Il cmdlet Out-UDDataGridData fornisce un'implementazione del filtraggio per dati statici. Se utilizza questo cmdlet, non è necessario implementare manualmente il filtraggio. Se dispone di un'origine dati remota, sarà opportuno fornire un'implementazione personalizzata per il filtraggio. Di seguito è riportato un esempio di utilizzo della struttura del filtro in $EventData per eliminare righe in base ai filtri forniti dall'utente.

New-UDDataGrid -LoadRows {  
    $Rows = 1..100 | % {
        @{ Name = 'Adam'; Number = Get-Random}
    }

    foreach($filter in $eventData.Filter.items)
    {
        if ($filter.operator -eq 'equals')
        {
            $Rows = $Rows | Where-Object $filter.field -eq $filter.value
        }
        elseif ($filter.operator -eq 'contains')
        {
            $Rows = $Rows | Where-Object $filter.field -match $filter.value
        }
    }

    $Rows| Out-UDDataGridData -Context $EventData -TotalRows $Rows.Length
} -Columns @(
    New-UDDataGridColumn -Field name
    New-UDDataGridColumn -Field number
) -AutoHeight $true

Filtro rapido personalizzato

Il filtro rapido è simile a una semplice casella di ricerca. Può abilitare il filtraggio rapido con il parametro -ShowQuickFilter su New-UDDataGrid. Una casella di ricerca apparirà in alto a destra nella data grid. Quando l'utente inserisce un valore nella data grid, verranno fornite le informazioni sul filtro rapido.

Di seguito è riportato un esempio di come utilizzare i filtri rapidi. Out-UDDataGridData implementa il filtraggio rapido e non è richiesto quando si utilizzano dati locali. Quanto segue è a solo scopo dimostrativo.

New-UDDataGrid -LoadRows {  
    $Rows = 1..100 | % {
        @{ Name = 'Adam'; Number = Get-Random}
    }

    foreach($filter in $eventData.QuickFilterValues)
    {
        $Rows = $Rows | Where-Object $filter.field -match $filter
    }

    $Rows| Out-UDDataGridData -Context $EventData -TotalRows $Rows.Length
} -Columns @(
    New-UDDataGridColumn -Field name
    New-UDDataGridColumn -Field number
) -AutoHeight $true

Ordinamento

L'oggetto $EventData conterrà una proprietà Sort quando l'utente ordina la data grid. Contiene proprietà per ogni colonna ordinata. Le proprietà inizieranno da 0 e aumenteranno man mano che vengono ordinate più colonne.

Ad esempio, può accedere alla prima colonna ordinata come segue.

$EventData.Sort.'0'.field

Riceverà anche la direzione di ordinamento per ciascuna colonna.

Proprietà	Descrizione	Tipo
Field	Il campo da ordinare.	String
Sort	La direzione in cui ordinare il campo.	asc, desc

Contenuto dettagliato

Può utilizzare il gestore di eventi -LoadDetailContent per visualizzare informazioni aggiuntive sulla riga che sta espandendo. Le informazioni sulla riga corrente sono disponibili in $EventData.row.

New-UDDataGrid -LoadRows {
    $Data = @(
        @{ Name = 'Adam'; Number = Get-Random }
        @{ Name = 'Tom'; Number = Get-Random }
        @{ Name = 'Sarah'; Number = Get-Random }
    )
    $Data| Out-UDDataGridData -Context $EventData -TotalRows $Data.Length
} -Columns @(
    New-UDDataGridColumn -Field name
    New-UDDataGridColumn -Field number
) -AutoHeight $true -LoadDetailContent {
    Show-UDToast $Body
    New-UDAlert -Text $EventData.row.Name
}

Esempio: data grid annidate

Può utilizzare il parametro -LoadDetailContent per cercare dati annidati su un oggetto. In questo esempio, carichiamo una data grid di macchine virtuali e visualizziamo il nome, il sistema operativo, la memoria e i core della CPU. L'espansione del contenuto di dettaglio fornisce una data grid delle schede di rete disponibili sulla macchina virtuale. In questo esempio utilizziamo dati fittizi, ma potrebbe utilizzare qualsiasi cmdlet disponibile in PowerShell Universal.

function Get-VirtualMachine {
    1..10 | ForEach-Object {
        [PSCustomObject]@{
            Name = "VM-$_"
            OperatingSystem = @("Windows Server 2019", "Windows Server 2022", "Ubuntu 20.02") | Get-Random
            Memory = @(64, 128, 512, 1024) | Get-Random
            Cores = @(8, 16, 32) | Get-Random
        }
    }
}

function Get-NetworkCard {
    param($VirtualMachine)

    1..4 | ForEach-Object {
        [PSCustomObject]@{
            Name = "NIC-$_"
            Speed = @(64, 128, 512, 1024) | Get-Random
        }
    }
}

New-UDApp -Content { 
    New-UDDataGrid -LoadRows {
        $VMs = Get-VirtualMachine
        $VMs| Out-UDDataGridData -Context $EventData -TotalRows $VMs.Length
    } -Columns @(
        New-UDDataGridColumn -Field Name
        New-UDDataGridColumn -Field OperatingSystem
        New-UDDataGridColumn -Field Memory -Render {
            New-UDTypography -Text "$($EventData.Memory) GB\s"
        }
        New-UDDataGridColumn -Field Cores
    ) -AutoHeight $true -LoadDetailContent {
        $VirutalMachine = $EventData.row
        New-UDDataGrid -LoadRows {
            $NICs = Get-NetworkCard -VirtualMachine $VirutalMachine
            $NICs | Out-UDDataGridData -Context $EventData -TotalRows $NICs.Length
        } -Columns @(
            New-UDDataGridColumn -Field Name
            New-UDDataGridColumn -Field Speed -Render {
                New-UDTypography -Text "$($EventData.Speed) GB\s"
            }
        ) -AutoHeight $true
    }
}

Modifica

Le tabelle forniscono il supporto per l'editor specificando il gestore di eventi -OnEdit. I nuovi dati della riga verranno forniti come $EventData. Può scegliere di restituire informazioni aggiornate sulla riga (ad esempio, modificando qualcosa che l'utente ha inserito) e restituirle dal gestore di eventi. Se non restituisce nulla, la riga rifletterà quanto inserito dall'utente.

$EventData ha il formato seguente.

@{
    newRow = @{}
    oldRow = @{}
}

Si assicuri di fornire la proprietà editable a ogni colonna che desidera far modificare all'utente.

$Cache:Data = @(
    @{ Name = 'Adam'; number = Get-Random }
    @{ Name = 'Tom'; number = Get-Random }
    @{ Name = 'Sarah'; number = Get-Random }
)

New-UDDataGrid -LoadRows {
    $Cache:Data| Out-UDDataGridData -Context $EventData -TotalRows $Cache:Data.Length
} -Columns @(
    New-UDDataGridColumn -Field name -Render {
        New-UDButton -Text $EventData.number
    }
    New-UDDataGridColumn -Field number -Editable
) -AutoHeight $true -OnEdit {
    $Cache:Data | Where-Object { $_.Name -eq $EventData.NewRow.Name } | ForEach-Object {
        $_.Number = $EventData.NewRow.Number
    }
}

Selezione

Può abilitare la selezione delle righe utilizzando il parametro -CheckboxSelection per visualizzare le caselle di controllo per le righe da selezionare. La selezione delle righe richiede un ID deterministico per le righe di dati fornite. Nell'esempio seguente, vedrà che ogni riga ha un ID specifico.

New-UDApp -Content { 
    $Rows = 1..100 | % {
        @{ Id = $_; Name = 'Adam'; Number = Get-Random}
    } 
    New-UDDataGrid -id DataGrid -LoadRows {  
    $Rows| Out-UDDataGridData -Context $EventData -TotalRows $Rows.Length
} -Columns @(
    New-UDDataGridColumn -Field name
    New-UDDataGridColumn -Field number
) -AutoHeight $true -Pagination -CheckboxSelection -CheckboxSelectionVisibleOnly -DisableRowSelectionOnClick

Può accedere ai dati selezionati con il gestore di eventi -OnSelectionChange o recuperando gli ID delle righe tramite Get-UDElement.

New-UDButton -Text 'Get Selected Rows' -OnClick {
   $Value = Get-UDElement -ID 'DataGrid'
   Show-UDToast $Value.selection
}

Esportazione personalizzata

Per sovrascrivere la funzionalità di esportazione predefinita, utilizzi il gestore di eventi -OnExport. $EventData sarà lo stesso oggetto di contesto utilizzato per -LoadRows. Dovrebbe utilizzare Out-UDDataGridExport per restituire i dati da -OnExport.

$Data = @(
    @{ name = 'Adam'; Number = Get-Random}
    @{ name = 'Tom'; Number = Get-Random}
    @{ name = 'Sarah'; Number = Get-Random}
)

New-UDDataGrid -LoadRows {
    @{
        rows = $Data 
        rowCount = $Data.Length
    }
} -Columns @(
    New-UDDataGridColumn -Field name
    New-UDDataGridColumn -Field number
) -OnExport {
    $ExportContent = $Data | ConvertTo-Csv -NoTypeInformation | Out-String
    Out-UDDataGridExport -Data $ExportContent -FileName 'export.csv' 
}

Tipi di esportazione multipli

Quando si utilizza un'esportazione personalizzata, può utilizzare il parametro -ExportOptionsper definire più tipi di esportazione. Quando l'utente seleziona il tipo di esportazione, può controllare la proprietà Type di $EventDataper determinare quale tipo di esportazione produrre.

$Data = @(
    @{ name = 'Adam'; Number = Get-Random}
    @{ name = 'Tom'; Number = Get-Random}
    @{ name = 'Sarah'; Number = Get-Random}
)

New-UDDataGrid -LoadRows {
    @{
        rows = $Data 
        rowCount = $Data.Length
    }
} -Columns @(
    New-UDDataGridColumn -Field name
    New-UDDataGridColumn -Field number
) -OnExport {
    if ($EventData.Type -eq 'CSV')
    {
        $ExportContent = $Data | ConvertTo-Csv -NoTypeInformation | Out-String
        Out-UDDataGridExport -Data $ExportContent -FileName 'export.csv' 
    }
} -ExportOptions @("CSV", "PDF")

Esempio: dati statici

In questo esempio, generiamo un array di 10.000 record. Creeremo una nuova funzione, Out-UDDataGridData, per gestire la paginazione, l'ordinamento e il filtraggio. Questa funzione è già inclusa nel modulo Universal.

New-UDApp -Title 'PowerShell Universal' -Content {
     $Data =  1..10000 | % {
        @{ Name = 'Adam'; Number = Get-Random }
    } 
    New-UDDataGrid -LoadRows {  
      $Data | Out-UDDataGridData -Context $EventData
    } -Columns @(
        New-UDDataGridColumn -Field name
        New-UDDataGridColumn -Field number -Render {
                    New-UDButton -Icon (New-UDIcon -Icon User) -OnClick { Show-UDToast $EventData.Name } 
        }
    ) -AutoHeight $true -Pagination -HeaderFilters
}     

Esempio: dati SQL

In questo esempio, interrogheremo il database di PowerShell Universal con dbatools.

function Out-UDSQLDataGrid {
    param(
        $Context,
        [Parameter(Mandatory)]
        [string]$Table,
        [Parameter(Mandatory)]
        [string]$SqlInstance,
        [Parameter(Mandatory)]
        [string]$Database,
        [Parameter(Mandatory)]
        [pscredential]$SqlCredential,
        [Int32]$RowsPerPage
    )

    End {
        $simpleFilter = @()

        if ($null -ne $Context.Filter.Items -and $Context.Filter.Items.Count -gt 0) {
            $logicOperator = $Context.Filter.logicOperator #The link operator is 'AND' or 'OR'. It will always be one or the other for all properties

            foreach ($item in $Context.Filter.Items) {         
                $simpleFilter += [PSCustomObject]@{
                    Property = $item.Field
                    Value    = $item.Value
                    Operator = $item.Operator
                }
            }
        }

        if ($null -ne $simpleFilter -and $simpleFilter.Count -gt 0) {
            $count = 1
            foreach ($filter in $simpleFilter) {
                if ($count -gt 1) {               
                    $SqlFilter += " $($logicOperator) "
                }
                else {
                    $SqlFilter += " WHERE "
                }

                switch ($filter.Operator) {
                    "contains" { $SqlFilter += " $($filter.Property) LIKE '%$($filter.Value)%' " }
                    "equals" { $SqlFilter += " $($filter.Property) = '$($filter.Value)' " }
                    "startsWith" { $SqlFilter += " $($filter.Property) LIKE '$($filter.Value)%' " }
                    "endsWith" { $SqlFilter += " $($filter.Property) LIKE '%$($filter.Value)' " }
                    "isAnyOf" {
                        $count = 1
                        foreach ($val in $filter.Value) {
                            if ($count -gt 1) {
                                $list += ", '$val'"
                            }
                            else {
                                $list += "'$val'"
                            }  
                            $count += 1
                        }
                        $SqlFilter += " $($filter.Property) IN ($($list)) "
                    }
                    "isempty" { $SqlFilter += " TRIM ($($filter.Property)) IS NULL " }
                    "isnotempty" { $SqlFilter += " TRIM ($($filter.Property)) IS NOT NULL " }
                    "notequals" { $SqlFilter += " $($filter.Property) != '$($filter.Value)' " }
                    "notcontains" { $SqlFilter += " $($filter.Property) NOT LIKE '%$($filter.Value)%' " }
                }
                $count += 1
            }
        }
        else {
            $SqlFilter = $null
        }

        if ($null -eq $SqlFilter) {
            $totalCount = (Invoke-DbaQuery -SqlInstance $SqlInstance -Database $Database -SqlCredential $SqlCredential -Query "SELECT COUNT(*) As Count FROM $Table").Count
        }
        else {
            $totalCount = (Invoke-DbaQuery -SqlInstance $SqlInstance -Database $Database -SqlCredential $SqlCredential -Query "SELECT COUNT(*) As Count FROM $Table $SqlFilter").Count
            $sort = $Context.Sort.'0'
        }

        if ($sort) {
            $sqlSort = "ORDER BY $($sort.field) $($sort.Sort) "
        }
        else {
            $sqlSort = "ORDER BY (SELECT NULL)"
        }

        if ($null -ne $SqlFilter) {
            $sqlPage = "OFFSET $($Context.Page * $Context.PageSize) ROWS FETCH NEXT $($Context.PageSize) ROWS ONLY;"
            $Query = "SELECT * FROM $Table $sqlFilter $sqlSort $sqlPage"
        }
        else {
            $sqlPage = "OFFSET $($RowsPerPage) ROWS FETCH NEXT $($RowsPerPage) ROWS ONLY;"
            $Query = "SELECT * FROM $Table $sqlSort $sqlPage"
        }

        $Rows = Invoke-DbaQuery -SqlInstance $SqlInstance -Database $Database -SqlCredential $SqlCredential -Query $Query -As PSObject

        @{
            rows     = [Array]$Rows
            rowCount = $TotalCount
        }
    }   
}

New-UDDashboard -Title 'PowerShell Universal' -Content {
    New-UDDataGrid -LoadRows {  
      Out-UDSqlDataGrid -Context $EventData -SqlInstance "(localdb)\MSSQLLocalDb" -Database "PSU" -Table "Job"
    } -Columns @(
        New-UDDataGridColumn -Field id
        New-UDDataGridColumn -Field startTime
        New-UDDataGridColumn -Field status -Render {
          if ($EventData.Status -eq 2) {
                New-UDAlert -Severity 'Success' -Text 'Success'
            }

            if ($EventData.Status -eq 3) {
                New-UDAlert -Severity 'Error' -Text 'Failed'
            }
        }
    ) -AutoHeight $true -Pagination
}

API

• New-UDDataGrid
• New-UDDataGridColumn
• Out-UDDataGridData
• Out-UDDataGridExport