Tabelle

Tabellen zeigen Datensätze an. Sie können vollständig angepasst werden.

Tabellen stellen Informationen so dar, dass sie leicht zu überblicken sind, sodass Benutzer nach Mustern und Erkenntnissen suchen können. Sie können in primäre Inhalte wie Karten eingebettet werden.

Einfache Tabelle

Ein einfaches Beispiel ohne Extras. Die Tabellenspalten werden aus den Daten definiert.

$TableData = @(
    @{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
)

New-UDTable -Data $TableData

Tabelle mit benutzerdefinierten Spalten

Definieren Sie benutzerdefinierte Spalten für Ihre Tabelle.

$TableData = @(
    @{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
) 

$Columns = @(
    New-UDTableColumn -Property Dessert -Title "A Dessert"
    New-UDTableColumn -Property Calories -Title Calories 
    New-UDTableColumn -Property Fat -Title Fat 
    New-UDTableColumn -Property Carbs -Title Carbs 
    New-UDTableColumn -Property Protein -Title Protein 
)

New-UDTable -Id 'customColumnsTable' -Data $TableData -Columns $Columns

Tabelle mit benutzerdefiniertem Spalten-Rendering

Definieren Sie das Spalten-Rendering. Sortierung und Export funktionieren für die Tabelle weiterhin.

$TableData = @(
    @{Dessert = 'Frozen yoghurt'; Calories = 1; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Gingerbread'; Calories = 200; Fat = 6.0; Carbs = 24; Protein = 4.0}
) 

$Columns = @(
    New-UDTableColumn -Property Dessert -Title Dessert -Render { 
        New-UDButton -Id "btn$($EventData.Dessert)" -Text "Click for Dessert!" -OnClick { Show-UDToast -Message $EventData.Dessert } 
    }
    New-UDTableColumn -Property Calories -Title Calories 
    New-UDTableColumn -Property Fat -Title Fat 
    New-UDTableColumn -Property Carbs -Title Carbs 
    New-UDTableColumn -Property Protein -Title Protein 
)

New-UDTable -Data $TableData -Columns $Columns -Sort -Export

Tabellenspaltenbreite

Die Spaltenbreite kann mit dem Parameter -Width definiert werden. Sie können auch entscheiden, Spalten abzuschneiden, die über diese Breite hinausgehen.

$TableData = @(
    @{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
) 

$Columns = @(
    New-UDTableColumn -Property Dessert -Title Dessert -Render { 
        New-UDButton -Id "btn$($EventData.Dessert)" -Text "Click for Dessert!" -OnClick { Show-UDToast -Message $EventData.Dessert } 
    }
    New-UDTableColumn -Property Calories -Title Calories -Width 5 -Truncate
    New-UDTableColumn -Property Fat -Title Fat 
    New-UDTableColumn -Property Carbs -Title Carbs 
    New-UDTableColumn -Property Protein -Title Protein 
)

New-UDTable -Data $TableData -Columns $Columns -Sort

Filter

Sie können benutzerdefinierte Filter pro Spalte konfigurieren. Die Tabelle unterstützt die Filter text, select, fuzzy , slider, range, date , number und autocomplete.

$TableData = @(
    @{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
) 

$Columns = @(
    New-UDTableColumn -Property Dessert -Title "A Dessert" -Filter -FilterType AutoComplete
    New-UDTableColumn -Property Calories -Title Calories -Filter -FilterType Range
    New-UDTableColumn -Property Fat -Title Fat -Filter -FilterType Range
    New-UDTableColumn -Property Carbs -Title Carbs -Filter -FilterType Range
    New-UDTableColumn -Property Protein -Title Protein -Filter -FilterType Range
)

New-UDTable -Id 'customColumnsTable' -Data $TableData -Columns $Columns -ShowFilter

Statische Optionen für Select-Filter

Bei serverseitiger Verarbeitung zeigen die verfügbaren Filter möglicherweise nicht die vollständige Auswahl an Optionen an, da das Select-Dropdown nur Zugriff auf die aktuelle Ergebnisseite hat. Um dies zu vermeiden, können Sie den Parameter -Options von New-UDTableColumn verwenden.

New-UDTableColumn -Property Dessert -Title 'Dessert' -Filter -FilterType 'Select' -Options @('Frozen yoghurt', 'Eclair', 'Cupcake')

Suche

Um die Suche zu aktivieren, verwenden Sie den Parameter -ShowSearch von New-UDTable.

$TableData = @(
    @{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
)

New-UDTable -Data $TableData -ShowSearch

Wenn Sie benutzerdefinierte Spalten verwenden, müssen Sie den Parameter -IncludeInSearch zu den Spalten hinzufügen, die Sie in die Suche einbeziehen möchten.

$TableData = @(
    @{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
) 

$Columns = @(
    New-UDTableColumn -Property Dessert -Title "A Dessert" -IncludeInSearch
    New-UDTableColumn -Property Calories -Title Calories 
    New-UDTableColumn -Property Fat -Title Fat 
    New-UDTableColumn -Property Carbs -Title Carbs 
    New-UDTableColumn -Property Protein -Title Protein 
)

New-UDTable -Id 'customColumnsTable' -Data $TableData -Columns $Columns -ShowSearch

Tabelle mit serverseitiger Verarbeitung

Verarbeiten Sie Daten auf dem Server, damit Sie Paging, Filterung, Sortierung und Suche in Systemen wie SQL durchführen können. Um eine serverseitige Tabelle zu implementieren, verwenden Sie den Parameter -LoadData. Dieser Parameter akzeptiert einen ScriptBlock. Die Variable $EventData enthält Informationen über den Zustand der Tabelle. Sie können Cmdlets verwenden, um die Daten auf Basis dieser Informationen zu verarbeiten.

$EventData-Struktur

Das $EventData-Objekt enthält die folgenden Eigenschaften.

Eigenschaftsname	Typ	Beschreibung
Filter	Hashtable[] @{ id = 'fieldName' value = 'filterValue' }	Eine Liste von Filterwerten. Jede Hashtable hat eine Eigenschaft Id und eine Eigenschaft Value.
OrderBy	Hashtable @{ field = "fieldName" }	Eigenschaftsname, nach dem sortiert werden soll.
OrderDirection	string	asc oder desc, abhängig von der Sortierreihenfolge.
Page	int	Die aktuelle Seite (beginnend bei 0).
PageSize	int	Die ausgewählte Seitengröße.
Properties	string[]	Ein Array der in der Tabelle angezeigten Eigenschaften.
Search	string	Eine vom Benutzer angegebene Suchzeichenfolge.
TotalCount	int	Die Gesamtanzahl der Datensätze vor Filterung oder Paging.

Beispiel

$Columns = @(
    New-UDTableColumn -Property Name -Title "Name" -ShowFilter
    New-UDTableColumn -Property Value -Title "Value" -ShowFilter
)

$TableData = 1..1000 | ForEach-Object {
  [PSCustomObject]@{
      Name = "Record-$_"
      Value = $_ 
  }
}

New-UDTable -Columns $Columns -LoadData {
    foreach($Filter in $EventData.Filters)
    {
        $TableData = $TableData | Where-Object -Property $Filter.Id -Match -Value $Filter.Value
    }
    
    if ($EventData.Search)
    {
        $TableData = $TableData | Where-Object { $_.Name -match $EventData.Search -or $_.Value -match $EventData.Search }
    }

    $TotalCount = $TableData.Count 

    if (-not [string]::IsNullOrEmpty($EventData.OrderBy.Field))
    {
        $Descending = $EventData.OrderDirection -ne 'asc'
        $TableData = $TableData | Sort-Object -Property ($EventData.orderBy.Field) -Descending:$Descending
    }
    
    $TableData = $TableData | Select-Object -First $EventData.PageSize -Skip ($EventData.Page * $EventData.PageSize)

    $TableData | Out-UDTableData -Page $EventData.Page -TotalCount $TotalCount -Properties $EventData.Properties 
} -ShowFilter -ShowSort -ShowPagination

Angezeigte Daten abrufen

Möglicherweise möchten Sie dem Benutzer erlauben, Aktionen auf den aktuell angezeigten Datensatz anzuwenden. Verwenden Sie dazu Get-UDElement im Eingabeobjekt, aus dem Sie die Daten abrufen möchten, und rufen Sie die Tabelle anhand der Id ab. Sobald Sie das Element haben, können Sie die Eigenschaft Data des Elements verwenden, um ein Array der aktuell angezeigten Zeilen zu erhalten.

$Columns = @(
    New-UDTableColumn -Property Name -Title "Name" -ShowFilter
    New-UDTableColumn -Property Value -Title "Value" -ShowFilter
)

$TableData = 1..1000 | ForEach-Object {
  @{
      Name = "Record-$_"
      Value = $_ 
  }
}

New-UDButton -Text 'Get Filtered Data' -OnClick {
    $Element = Get-UDElement -Id 'filteredTable'
    Show-UDModal -Content {
        New-UDElement -Tag 'pre' -Content {
           $Element | ConvertTo-Json
        }
    }
}

New-UDTable -Id 'filteredTable' -Columns $Columns -LoadData {
    foreach($Filter in $EventData.Filters)
    {
        $TableData = $TableData | Where-Object -Property $Filter.Id -Match -Value $Filter.Value
    }

    $TotalCount = $TableData.Count 

    if (-not [string]::IsNullOrEmpty($EventData.OrderBy))
    {
        $Descending = $EventData.OrderDirection -ne 'asc'
        $TableData = $TableData | Sort-Object -Property $EventData.orderBy -Descending:$Descending
    }
    
    $TableData = $TableData | Select-Object -First $EventData.PageSize -Skip ($EventData.Page * $EventData.PageSize)

    $TableData | Out-UDTableData -Page $EventData.Page -TotalCount $TotalCount -Properties $EventData.Properties 
} -ShowFilter -ShowSort -ShowPagination

Paging

Standardmäßig ist Paging deaktiviert und Tabellen wachsen entsprechend der Anzahl der Datenzeilen, die Sie bereitstellen. Sie können Paging mit dem Cmdlet -ShowPagination (Alias -Paging) aktivieren. Die Seitengröße können Sie mit dem Cmdlet -PageSize konfigurieren.

$TableData = @(
    @{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
) 

New-UDTable -Data $TableData -Paging -PageSize 2

Seitengröße "Alle" deaktivieren

Standardmäßig bietet die Seitengrößenauswahl eine Option zum Anzeigen aller Zeilen. Wenn Sie verhindern möchten, dass Benutzer dies tun, verwenden Sie das Cmdlet -DisablePageSizeAll.

Position der Seitennavigation

Sie können die Position des Seitennavigations-Steuerelements mit dem Parameter -PaginationLocation ändern. Er akzeptiert top, bottom und both.

Position der Seitennavigation

Seitengrößen

Die Seitengröße ist standardmäßig auf 5 festgelegt. Benutzer können die Anzahl der Zeilen pro Seite über das Dropdown "Zeilen pro Seite" anpassen. Sie können die Standard-Seitengröße mit dem Parameter -PageSize anpassen. Um die im Dropdown "Zeilen pro Seite" verfügbaren Werte anzupassen, können Sie ein Array von Ganzzahlen an den Parameter -PageSizeOptions übergeben.

$TableData = @(
    @{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
) 

New-UDTable -Data $TableData -Paging -PageSize 2 -PageSizeOptions @(2, 4, 6)

Sortierung

Um die Sortierung für eine Tabelle zu aktivieren, verwenden Sie den Parameter -ShowSort. Wenn Sie die Sortierung aktivieren, können Sie auf die Tabellenkopfzeilen klicken, um die Tabelle durch Klicken auf die Kopfzeilen zu sortieren. Standardmäßig ist Mehrfachsortierung aktiviert. Halten Sie für die Mehrfachsortierung die Umschalttaste und klicken Sie auf eine Spaltenkopfzeile.

$TableData = @(
    @{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
) 

New-UDTable -Data $TableData -ShowSort

Sie können mit New-UDTableColumn und dem Parameter -ShowSort steuern, welche Spalten sortiert werden können.

    @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
) 

$Columns = @(
    New-UDTableColumn -Property Dessert -Title "A Dessert" -ShowSort
    New-UDTableColumn -Property Calories -Title Calories 
    New-UDTableColumn -Property Fat -Title Fat 
    New-UDTableColumn -Property Carbs -Title Carbs -ShowSort
    New-UDTableColumn -Property Protein -Title Protein -ShowSort
)

New-UDTable -Id 'customColumnsTable' -Data $TableData -Columns $Columns

Entfernen der Sortierung deaktivieren

Standardmäßig hat die Sortierung einer Tabelle 3 Zustände: unsortiert, aufsteigend und absteigend. Wenn Sie den unsortierten Zustand deaktivieren möchten, verwenden Sie den Parameter -DisableSortRemove von New-UDTable.

$TableData = @(
    @{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
) 

New-UDTable -Data $TableData -ShowSort -DisableSortRemove

Auswahl

Statische Tabellendaten

Tabellen unterstützen die Auswahl von Zeilen. Sie können einen Event-Handler für den Parameter OnRowSelected erstellen, um zu erfahren, wann eine neue Zeile ausgewählt oder abgewählt wird, oder Sie können Get-UDElement verwenden, um den aktuellen Satz ausgewählter Zeilen abzurufen.

Das folgende Beispiel erstellt eine Tabelle mit aktivierter Zeilenauswahl. Ein Toast wird angezeigt, wenn auf die Zeile oder auf die Schaltfläche GET Rows geklickt wird.

$TableData = try { get-service -ea Stop | select Name,@{n = "Status";e={ $_.Status.ToString()}},@{n = "StartupType";e={ $_.StartupType.ToString()}},@{n = "StartType";e={ $_.StartType.ToString()}} } catch {}
$Columns = @(
    New-UDTableColumn -Property Name -Title "Service Name" -ShowSort -IncludeInExport -IncludeInSearch -ShowFilter -FilterType text
    New-UDTableColumn -Property Status -Title Status -ShowSort -DefaultSortColumn -IncludeInExport -IncludeInSearch -ShowFilter -FilterType select 
    New-UDTableColumn -Property StartupType -Title StartupType -IncludeInExport -ShowFilter -FilterType select
    New-UDTableColumn -Property StartType -Title StartType -IncludeInExport -ShowFilter -FilterType select 
)
New-UDTable -Id 'service_table' -Data $TableData -Columns $Columns -Title 'Services' -ShowSearch -ShowPagination -ShowSelection -Dense -OnRowSelection {
    $Item = $EventData
    Show-UDToast -Message "$($Item | out-string)"
}
New-UDButton -Text "GET Rows" -OnClick {
    $value = Get-UDElement -Id "service_table"
    Show-UDToast -Message "$( $value.selectedRows | Out-String )"
}

Zeilenauswahl

Die Variable $EventData für das Event -OnRowSelected enthält alle Spalten als Eigenschaften sowie eine Eigenschaft "selected", die angibt, ob die Zeile ausgewählt oder abgewählt wurde.

Zum Beispiel würden die Daten der Dienste-Tabelle so aussehen.

@{
   Id = 0
   Name = 'AESMService',
   Status = 'Running'
   StartupType = 'AutomaticDelayedStart'
   StartType = 'Automation'
   selected = $true
}

Dynamische (serverseitige) Tabellen

Wenn Sie Auswahl und -LoadData verwenden, enthält -OnRowSelected $EventData die IDs der Zeilen und nicht die gesamten Zeilendaten. Es wird weiterhin angegeben, ob die Zeile ausgewählt oder abgewählt wurde.

Aufklappbare Zeilen

Sie können zusätzliche Informationen in der Tabelle einbinden, indem Sie den Parameter -OnRowExpand von New-UDTable verwenden. Er akzeptiert einen ScriptBlock, mit dem Sie zusätzliche Komponenten zurückgeben können.

New-UDTable -Data (Get-Service) -OnRowExpand {
    New-UDAlert -Text $EventData.DisplayName
} -Columns @(
    New-UDTableColumn -Title 'Name' -Property 'Name'
    New-UDTableColumn -Title 'Status' -Property 'Status'
)

Exportieren

Tabellen unterstützen das Exportieren der Daten innerhalb der Tabelle. Sie können als CSV, XLSX, JSON oder PDF exportieren. Sie können definieren, welche Spalten in einen Export einbezogen werden, und wählen, ob nur die aktuelle Seite oder alle Daten der Tabelle exportiert werden.

$TableData = try { get-service -ea Stop | select Name,@{n = "Status";e={ $_.Status.ToString()}},@{n = "StartupType";e={ $_.StartupType.ToString()}},@{n = "StartType";e={ $_.StartType.ToString()}} } catch {}
$Columns = @(
    New-UDTableColumn -Property Name -Title "Service Name" -IncludeInExport
    New-UDTableColumn -Property Status -Title Status 
    New-UDTableColumn -Property StartupType
    New-UDTableColumn -Property StartType -IncludeInExport
)
New-UDTable -Id 'service_table' -Data $TableData -Columns $Columns -Title 'Services' -ShowSearch -ShowPagination -Dense -Export

Ausgeblendete Spalten

Ausgeblendete Spalten ermöglichen es Ihnen, Daten einzubinden, die nicht in der Tabelle angezeigt werden, aber in den exportierten Daten enthalten sind.

Das Folgende blendet die Spalte StartType für den Benutzer aus, bezieht sie aber in den Export ein.

$TableData = try { get-service -ea Stop | select Name,@{n = "Status";e={ $_.Status.ToString()}},@{n = "StartupType";e={ $_.StartupType.ToString()}},@{n = "StartType";e={ $_.StartType.ToString()}} } catch {}
$Columns = @(
    New-UDTableColumn -Property Name -Title "Service Name" -IncludeInExport
    New-UDTableColumn -Property Status -Title Status 
    New-UDTableColumn -Property StartupType
    New-UDTableColumn -Property StartType -IncludeInExport -Hidden
)
New-UDTable -Id 'service_table' -Data $TableData -Columns $Columns -Title 'Services' -ShowSearch -ShowPagination -Dense -Export

Serverseitiger Export

Sie können die Exportfunktionalität mit einem PowerShell-Skriptblock steuern. Dies ist nützlich beim Exportieren aus serverseitigen Quellen wie SQL Server-Tabellen.

In diesem Beispiel habe ich eine SQL-Tabelle, die Podcasts enthält. Beim Exportieren erhalten Sie Informationen über den aktuellen Zustand der Tabelle, damit Sie anpassen können, welche Daten exportiert werden.

$Columns = @(
    New-UDTableColumn -Property Name -Title "Name" -ShowFilter -IncludeInExport
    New-UDTableColumn -Property Value -Title "Value" -ShowFilter -IncludeInExport
)

$TableData = 1..1000 | ForEach-Object {
  [PSCustomObject]@{
      Name = "Record-$_"
      Value = $_ 
  }
}

New-UDTable -Columns $Columns -LoadData {
    foreach($Filter in $EventData.Filters)
    {
        $TableData = $TableData | Where-Object -Property $Filter.Id -Match -Value $Filter.Value
    }

    $TotalCount = $TableData.Count 

    if (-not [string]::IsNullOrEmpty($EventData.OrderBy.Field))
    {
        $Descending = $EventData.OrderDirection -ne 'asc'
        $TableData = $TableData | Sort-Object -Property ($EventData.orderBy.Field) -Descending:$Descending
    }
    
    $TableData = $TableData | Select-Object -First $EventData.PageSize -Skip ($EventData.Page * $EventData.PageSize)

    $TableData | Out-UDTableData -Page $EventData.Page -TotalCount $TotalCount -Properties $EventData.Properties 
} -ShowFilter -ShowSort -ShowPagination  -Export -OnExport {
   $Query = $Body | ConvertFrom-Json

        <# Query will contain
            filters: []
            orderBy: undefined
            orderDirection: ""
            page: 0
            pageSize: 5
            properties: (5) ["dessert", "calories", "fat", "carbs", "protein"]
            search: ""
            totalCount: 0
            allRows: true
        #>

    $TableData | ConvertTo-Json
}

Exportoptionen anpassen

Sie können mit dem Cmdlet -ExportOption entscheiden, welche Exportoptionen Ihren Benutzern angeboten werden. Das folgende Beispiel würde nur die CSV-Exportoption anzeigen.

$TableData = try { get-service -ea Stop | select Name,@{n = "Status";e={ $_.Status.ToString()}},@{n = "StartupType";e={ $_.StartupType.ToString()}},@{n = "StartType";e={ $_.StartType.ToString()}} } catch {}
$Columns = @(
    New-UDTableColumn -Property Name -Title "Service Name" -IncludeInExport
    New-UDTableColumn -Property Status -Title Status 
    New-UDTableColumn -Property StartupType
    New-UDTableColumn -Property StartType -IncludeInExport
)
New-UDTable -Id 'service_table' -Data $TableData -Columns $Columns -Title 'Services' -ShowSearch -ShowPagination -Dense -Export -ExportOption "csv"

Bezeichnungen anpassen

Sie können den Parameter -TextOption zusammen mit dem Cmdlet New-UDTableTextOption verwenden, um Textfelder innerhalb der Tabelle festzulegen.

$TableData = @(
    @{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
    @{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
) 

$Option = New-UDTableTextOption -Search "Search all these records"

New-UDTable -Data $TableData -TextOption $Option -ShowSearch

Aktualisieren mit einer Schaltfläche

Data-Parameter

Sie können eine Tabelle extern aktualisieren, indem Sie die Tabelle in einen dynamischen Bereich einfügen und Sync-UDElement verwenden.

Dieses Beispiel erstellt eine Schaltfläche zum Aktualisieren der Tabelle.

New-UDDynamic -Id 'table' -Content {
    $TableData = @(
        @{ Random = Get-Random }
        @{ Random = Get-Random }
        @{ Random = Get-Random }
        @{ Random = Get-Random }
        @{ Random = Get-Random }
    )
    
    # Store in the page so we can get the current ID. 
    # Using the same ID fails to update when the dynamic reloads.
    $Page:Table = New-UDTable -Data $TableData -Paging -ShowSelection
    $Page:Table
} 

New-UDButton -Text 'Refresh Table' -OnClick {
    Sync-UDElement -Id 'table'
}

New-UDButton -Text 'Get Data' -OnClick {
    Show-UDToast (Get-UDElement -Id $Page:Table.Id | ConvertTo-Json)
}

LoadData-Parameter

Wenn Sie den Parameter -LoadData verwenden, können Sie die Tabelle direkt synchronisieren. Dies hat den Vorteil, dass der Tabellenzustand, wie Seite und Filterung, nach der Aktualisierung beibehalten wird.

New-UDButton -Text 'Table1' -OnClick { Sync-UDElement -Id 'Table1' }

$Columns = @(
    New-UDTableColumn -Property Name -Title "Name" -ShowFilter -Render { $EventData.Name }
    New-UDTableColumn -Property Value -Title "Value" -ShowFilter
)

New-UDTable -Columns $Columns -LoadData {
    $TableData = 1..1000 | ForEach-Object {
        @{
            Name = "Record-$_"
            Value = $_ 
        }
    }
    
    foreach($Filter in $EventData.Filters)
    {
        $TableData = $TableData | Where-Object -Property $Filter.Id -Match -Value $Filter.Value
    }

    $TotalCount = $TableData.Count 

    if (-not [string]::IsNullOrEmpty($EventData.OrderBy))
    {
        $Descending = $EventData.OrderDirection -ne 'asc'
        $TableData = $TableData | Sort-Object -Property $EventData.orderBy -Descending:$Descending
    }
    
    $TableData = $TableData | Select-Object -First $EventData.PageSize -Skip ($EventData.Page * $EventData.PageSize)

    $TableData | Out-UDTableData -Page $EventData.Page -TotalCount $TotalCount -Properties $EventData.Properties 
} -ShowFilter -ShowSort -ShowPagination  -Id 'Table1'

Aktualisierungsschaltfläche anzeigen

Sie können den Parameter -ShowRefresh verwenden, um eine Aktualisierungsschaltfläche für serverseitige Tabellen bereitzustellen.

$Columns = @(
    New-UDTableColumn -Property Dessert -Title "A Dessert"
    New-UDTableColumn -Property Calories -Title Calories 
    New-UDTableColumn -Property Fat -Title Fat 
    New-UDTableColumn -Property Carbs -Title Carbs 
    New-UDTableColumn -Property Protein -Title Protein 
)

New-UDTable -ShowRefresh -Columns $Columns -LoadData {
    $Query = $Body | ConvertFrom-Json

    <# Query will contain
        filters: []
        orderBy: undefined
        orderDirection: ""
        page: 0
        pageSize: 5
        properties: (5) ["dessert", "calories", "fat", "carbs", "protein"]
        search: ""
        totalCount: 0
    #>

    @(
        @{Dessert = 'Frozen yoghurt'; Calories = (Get-Random); Fat = 6.0; Carbs = 24; Protein = 4.0}
        @{Dessert = 'Ice cream sandwich'; Calories = (Get-Random); Fat = 6.0; Carbs = 24; Protein = 4.0}
        @{Dessert = 'Eclair'; Calories = (Get-Random); Fat = 6.0; Carbs = 24; Protein = 4.0}
        @{Dessert = 'Cupcake'; Calories = (Get-Random); Fat = 6.0; Carbs = 24; Protein = 4.0}
        @{Dessert = 'Gingerbread'; Calories = (Get-Random); Fat = 6.0; Carbs = 24; Protein = 4.0}
    ) | Out-UDTableData -Page 0 -TotalCount 5 -Properties $Query.Properties 
}

Abwechselnde Zeilenfarben

Sie können ein Theme verwenden, um eine Tabelle mit abwechselnden Zeilenfarben zu erstellen.

$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 {
$TableData = 1..10 | % { [PSCustomObject]@{ Item = $_}}
  New-UDTable -ShowPagination -PageSize 10 -PageSizeOptions @(10, 10) -DisablePageSizeAll -Columns @(
        New-UDTableColumn -Property 'Item' -Title 'Item' -Width 180 -Truncate
    ) -Data $TableData -Dense -ShowSearch
} -Theme $Theme

Benutzerdefinierte Zeilenstile

Benutzerdefinierter Zeilenstil für Tabellen

Verwenden Sie den Parameter -OnRowStyle, um die Zeilen basierend auf dem Zeileninhalt zu stylen. Geben Sie eine Hashtable mit CSS-Stilen für die Zeile zurück.

$Data = @(
     @{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 1; Protein = 4.0 }
     @{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 150.0; Carbs = 34; Protein = 4.0 }
     @{Dessert = 'Eclair'; Calories = 159; Fat = 100.0; Carbs = 73; Protein = 4.0 }
     @{Dessert = 'Cupcake'; Calories = 159; Fat = 30.0; Carbs = 25; Protein = 4.0 }
     @{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 99; Protein = 4.0 }
 )
 $Columns = @(
     New-UDTableColumn -Property Dessert -Title "Dessert" 
     New-UDTableColumn -Property Calories -Title "Calories" 
     New-UDTableColumn -Property Fat -Title "Fat" 
     New-UDTableColumn -Property Carbs -Title "Carbs"  -DefaultSortColumn
     New-UDTableColumn -Property Protein -Title "Protein" 
 )
 New-UDTable -Data $Data -Id 'table14' -Columns $Columns -OnRowStyle {
     if ($EventData.Fat -lt 10) { $Color = 'green' }
     elseif ($EventData.Fat -ge 10 -and $EventData.Fat -lt 50) { $Color = 'Yellow' }
     else { $Color = 'Red' }
     @{ backgroundColor = $Color }    
 }

API

• New-UDTable
• New-UDTableColumn
• Out-UDTableColumn
• New-UDTableTextOption

Siehe auch

• Devolutions Academy – Adding data tables
• Devolutions Academy – Server side data tables