Data Grid

Die Komponente UDDataGrid ist eine erweiterte Version der Tabelle, die zum Anzeigen großer Datenmengen nützlich ist. Sie unterstützt viele der gleichen Funktionen wie die Tabelle, bietet aber zusätzlich komplexe Filterung, Zeilenvirtualisierung, mehrspaltige Sortierung und mehr.

Einfaches Data Grid

Data Grids laden ihre Daten über den Event-Handler -LoadRows. Sie müssen eine Hashtable zurückgeben, die die Zeilendaten und die Gesamtanzahl der Zeilen enthält.

Spalten werden mithilfe von Hashtables definiert.

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

Spalten

Spalten können mit New-UDDataGridColumn angepasst werden. Weitere Informationen zu diesem Cmdlet finden Sie hier.

Benutzerdefinierte Spalten rendern

Sie können benutzerdefinierte Komponenten in Spalten rendern, indem Sie render innerhalb der Spalten-Hashtable angeben. Auf die Daten der aktuellen Zeile können Sie über die Variable $EventData oder $Row zugreifen

In diesem Beispiel wird die Zahl in der Namensspalte mit einer New-UDTypography-Komponente angezeigt.

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

Spalten mit flexibler Breite

Spaltenfluidität oder Responsivität kann erreicht werden, indem die Eigenschaft flex einer Spalte gesetzt wird.

Die Eigenschaft flex akzeptiert einen Wert zwischen 0 und ∞. Sie funktioniert, indem der verbleibende Platz im Raster proportional zu ihrem flex-Wert auf alle Flex-Spalten verteilt wird.

Betrachten Sie zum Beispiel ein Raster mit einer Gesamtbreite von 500px, das drei Spalten hat: die erste mit width: 200, die zweite mit flex: 1 und die dritte mit flex: 0.5. Die erste Spalte wird 200px breit sein, wodurch 300px übrig bleiben. Die Spalte mit flex: 1 ist doppelt so groß wie flex: 0.5, was bedeutet, dass die endgültigen Größen folgende sind: 200px, 200px, 100px.

Um eine minimale und maximale Breite für eine flex-Spalte festzulegen, setzen Sie die Eigenschaften minWidth und maxWidth an der Spalte.

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

Spalten automatisch dimensionieren

Wenn Sie möchten, dass das Data Grid die Spaltenbreiten automatisch dimensioniert, können Sie den Parameter -AutoSizeColumns von New-UDDataGrid verwenden. Das Data Grid wertet die Größe der Daten aus und ermittelt nach dem Laden der Daten die beste Größe für die Spalten. Dies kann nach dem Laden der Daten zu einer gewissen Neuanordnung der Benutzeroberfläche führen.

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

Der Parameter -LoadRows wird verwendet, um Daten für das Data Grid zurückzugeben. Der Tabellenstatus wird dem Event-Handler als $EventData bereitgestellt. Sie finden die folgenden Eigenschaften innerhalb des $EventData-Objekts.

Eigenschaft	Beschreibung	Typ
Filter	Ein Filterobjekt, mit dem Sie Filter für Ihre Daten erstellen können.	Hashtable
Page	Die aktuelle Seite. Beginnt bei 0.	Integer
PageSize	Die Anzahl der Datensätze auf einer Seite.	Integer
Sort	Die Sortieroptionen für die Tabelle	Hashtable

Paging

Um Paging zu implementieren, können Sie auf die Eigenschaften page und pageSize der Variable $EventData zugreifen. Wenn Sie eine remote Datenquelle verwenden, sollten Sie eine benutzerdefinierte Paging-Logik implementieren. Unten finden Sie ein Beispiel für die Verwendung der Paging-Eigenschaften, um lokal durch die Zeilen zu blättern. Abhängig von Ihrer Datenquelle (z. B. SQL) können Sie Daten anders durchblättern.

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 implementiert Paging automatisch, und Sie müssen das oben Genannte nicht tun, wenn sich alle Ihre Daten im Speicher befinden. Das oben Genannte dient nur zu Demonstrationszwecken.

Filterung

Das Data Grid unterstützt das Filtern von Daten anhand jeder Spalte. Es können mehrere Filter definiert werden, damit der Benutzer den angezeigten Datensatz eingrenzen kann. Standardmäßig implementiert das Cmdlet Out-UDDataGridData die Filterung für lokale Daten. Bei Verwendung einer remote Datenquelle wie SQL wird empfohlen, eine benutzerdefinierte Filterung zu implementieren, um die Benutzererfahrung und Leistung zu verbessern.

Datenstruktur des Filters

Das Filterobjekt ist in $EventData für den Event-Handler -LoadRows enthalten, wenn ein Filter definiert ist. Das Objekt hat die folgende Struktur.

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

Items

Die Eigenschaft items enthält eine Sammlung von Feldern, Operatoren und Werten. Sie können diese verwenden, um Ihre Daten zu filtern.

Eigenschaft	Beschreibung	Typ
Field	Der Name des zu filternden Feldes	String
Operator	Der Operatortyp, der beim Filtern der Daten verwendet werden soll.	String
Value	Der Wert, der zum Filtern verwendet wird	Object

LogicOperator

Das Feld für den Logikoperator wird verwendet, um die Verknüpfung zwischen den Filtern anzugeben. Dies kann and oder or sein.

QuickFilterValues

Enthält eine Sammlung von Schnellfilterwerten, bei denen Sie wählen können, wie Sie sie auf Ihre Daten anwenden.

QuickFilterLogicOperator

Enthält den Logikoperator für die vom Benutzer angegebenen Schnellfilterwerte. Dies kann and oder or sein.

Benutzerdefinierter Filter

Das Cmdlet Out-UDDataGridData bietet eine Implementierung der Filterung für statische Daten. Wenn Sie dieses Cmdlet verwenden, müssen Sie die Filterung nicht manuell implementieren. Wenn Sie eine remote Datenquelle haben, sollten Sie eine benutzerdefinierte Implementierung für die Filterung bereitstellen. Unten finden Sie ein Beispiel für die Verwendung der Filterstruktur in $EventData, um Zeilen anhand der vom Benutzer bereitgestellten Filter zu eliminieren.

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

Benutzerdefinierter Schnellfilter

Der Schnellfilter ähnelt einem einfachen Suchfeld. Sie können die Schnellfilterung mit dem Parameter -ShowQuickFilter an New-UDDataGrid aktivieren. Oben rechts im Data Grid wird ein Suchfeld angezeigt. Wenn der Benutzer einen Wert in das Data Grid eingibt, werden die Schnellfilterinformationen bereitgestellt.

Unten finden Sie ein Beispiel für die Verwendung von Schnellfiltern. Out-UDDataGridData implementiert die Schnellfilterung und ist bei Verwendung lokaler Daten nicht erforderlich. Das Folgende dient nur zur Demonstration.

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

Sortierung

Das $EventData-Objekt enthält eine Eigenschaft Sort, wenn der Benutzer das Data Grid sortiert. Sie enthält Eigenschaften für jede sortierte Spalte. Die Eigenschaften beginnen bei 0 und werden erhöht, wenn weitere Spalten sortiert werden.

Zum Beispiel können Sie auf die erste sortierte Spalte wie folgt zugreifen.

$EventData.Sort.'0'.field

Sie erhalten außerdem die Sortierrichtung für jede Spalte.

Eigenschaft	Beschreibung	Typ
Field	Das zu sortierende Feld.	String
Sort	Die Richtung, in die das Feld sortiert wird.	asc, desc

Detaillierter Inhalt

Sie können den Event-Handler -LoadDetailContent verwenden, um zusätzliche Informationen über die Zeile anzuzeigen, die Sie erweitern. Informationen zur aktuellen Zeile sind in $EventData.row verfügbar.

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
}

Beispiel: Verschachtelte Data Grids

Sie können den Parameter -LoadDetailContent verwenden, um verschachtelte Daten zu einem Objekt abzurufen. In diesem Beispiel laden wir ein Data Grid mit virtuellen Maschinen und zeigen den Namen, das Betriebssystem, den Speicher und die CPU-Kerne an. Das Erweitern des Detailinhalts liefert ein Data Grid der auf der virtuellen Maschine verfügbaren Netzwerkkarten. Wir verwenden in diesem Beispiel Dummy-Daten, Sie könnten jedoch jedes für PowerShell Universal verfügbare Cmdlet verwenden.

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

Bearbeitung

Tabellen bieten Editor-Unterstützung, indem der Event-Handler -OnEdit angegeben wird. Die neuen Zeilendaten werden als $EventData bereitgestellt. Sie können wählen, aktualisierte Zeileninformationen zurückzugeben (zum Beispiel, um etwas anzupassen, das der Benutzer eingegeben hat) und diese aus dem Event-Handler zurückzugeben. Wenn Sie nichts zurückgeben, spiegelt die Zeile wider, was der Benutzer eingegeben hat.

Die $EventData hat das folgende Format.

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

Stellen Sie sicher, dass Sie die Eigenschaft editable für jede Spalte angeben, die der Benutzer bearbeiten soll.

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

Auswahl

Sie können die Zeilenauswahl mit dem Parameter -CheckboxSelection aktivieren, um Kontrollkästchen für die auszuwählenden Zeilen anzuzeigen. Die Zeilenauswahl erfordert eine deterministische ID für die bereitgestellten Datenzeilen. Im folgenden Beispiel sehen Sie, dass für jede Zeile eine spezifische ID angegeben ist.

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

Sie können auf ausgewählte Daten mit dem Event-Handler -OnSelectionChange oder durch Abrufen der Zeilen-IDs über Get-UDElement zugreifen.

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

Benutzerdefinierter Export

Um die Standard-Exportfunktionalität zu überschreiben, verwenden Sie den Event-Handler -OnExport. $EventData ist dasselbe Kontextobjekt, das für -LoadRows verwendet wird. Sie sollten Out-UDDataGridExport verwenden, um die Daten aus -OnExport zurückzugeben.

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

Mehrere Exporttypen

Bei Verwendung eines benutzerdefinierten Exports können Sie den Parameter -ExportOptions verwenden, um mehrere Exporttypen zu definieren. Wenn der Benutzer den Exporttyp auswählt, können Sie die Eigenschaft Type von $EventData prüfen, um zu bestimmen, welche Art von Export erzeugt werden soll.

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

Beispiel: Statische Daten

In diesem Beispiel generieren wir ein Array mit 10.000 Datensätzen. Wir erstellen eine neue Funktion, Out-UDDataGridData, um das Paging, die Sortierung und die Filterung zu verwalten. Diese Funktion ist bereits im Universal-Modul enthalten.

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
}     

Beispiel: SQL-Daten

In diesem Beispiel fragen wir die PowerShell Universal-Datenbank mit dbatools ab.

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