> For the complete documentation index, see [llms.txt](https://docs.devolutions.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devolutions.net/powershell-universal/de/apps/components/data-display/table.md).

# 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

![](/files/ieYaaSl71iDNdjB3twu9)

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

```powershell
$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

![](/files/iio4BBxoP5egOW4Tl77g)

Definieren Sie benutzerdefinierte Spalten für Ihre Tabelle.

```powershell
$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

![](/files/xWEH0WY9bn7W317k0iNb)

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

```powershell
$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.

```powershell
$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`.

```powershell
$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
```

![](/files/ytaknl9JVTLPLjUvaS6r)

### 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.

```powershell
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`.

```powershell
$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.

```powershell
$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           | <p>Hashtable\[]<br><br>@{<br>id = 'fieldName'</p><p>value = 'filterValue'<br>}</p> | Eine Liste von Filterwerten. Jede Hashtable hat eine Eigenschaft `Id` und eine Eigenschaft `Value`. |
| OrderBy          | <p>Hashtable<br><br>@{ field = "fieldName" }</p>                                   | 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

```powershell
$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.

```powershell
$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.

```powershell
$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](/files/i5a664HAMvpHB8K89zxs)

### 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.

```powershell
$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.

```powershell
$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.

```powershell
    @{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`.

```powershell
$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.

```powershell
$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](/files/koSRPY9ZbyMyNKQtVbj0)

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.

```powershell
@{
   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.

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

![](/files/hKgy1e1rhdnm9XJru1zF)

## 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.

```powershell
$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
```

![](/files/OSfIikhnomzcrQcD7b40)

### 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.

```powershell
$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.

```powershell
$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.

```powershell
$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.

```powershell
$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.

```powershell
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.

```powershell
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.

```powershell
$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.

<figure><img src="/files/LH7sCscVZkse7nmULJBH" alt=""><figcaption></figcaption></figure>

```powershell
$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

<figure><img src="/files/IH0nCeuifYZvj4RLepHa" alt=""><figcaption><p>Benutzerdefinierter Zeilenstil für Tabellen</p></figcaption></figure>

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.

```powershell
$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](/powershell-universal/de/powershell-befehle/new-udtable.md)
* [New-UDTableColumn](/powershell-universal/de/powershell-befehle/new-udtablecolumn.md)
* [Out-UDTableColumn](/powershell-universal/de/powershell-befehle/out-udtabledata.md)
* [New-UDTableTextOption](/powershell-universal/de/powershell-befehle/new-udtabletextoption.md)

#### Siehe auch

* [Devolutions Academy – Adding data tables](https://academy.devolutions.net/student/page/3466031-adding-data-tables?curriculum_activity_id=5612258\&path_id=3465905\&sid=1b852f65-706e-452f-a2b6-96b76149ddb2\&sid_i=0)
* [Devolutions Academy – Server side data tables](https://academy.devolutions.net/student/page/3466033-server-side-data-tables?curriculum_activity_id=5612259\&path_id=3465905\&sid=aa0a98ab-11ef-4ae6-83f0-e28f268d8343\&sid_i=0)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.devolutions.net/powershell-universal/de/apps/components/data-display/table.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.