> 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/fr/applis/components/data-display/table.md).
# Tableau
Créez des tableaux de données dans les applis PowerShell Universal avec New-UDTable, en couvrant les colonnes personnalisées, le filtrage, le tri, la pagination, l'exportation et le chargement côté se
Les tableaux affichent des ensembles de données. Ils peuvent être entièrement personnalisés.
Les tableaux présentent l'information de façon facile à parcourir, afin que les utilisateurs puissent repérer des tendances et en tirer des constats. Ils peuvent être intégrés dans du contenu principal, comme des cartes.
## Tableau simple
.png?alt=media)
Un exemple simple, sans fioritures. Les colonnes du tableau sont définies à partir des données.
```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
```
## Tableau avec colonnes personnalisées
.png?alt=media)
Définissez des colonnes personnalisées pour votre tableau.
```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
```
## Tableau avec rendu de colonne personnalisé
.png?alt=media)
Définissez le rendu des colonnes. Le tri et l'exportation fonctionnent toujours pour le tableau.
```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
```
## Largeur des colonnes du tableau
La largeur des colonnes peut être définie à l'aide du paramètre `-Width`. Vous pouvez aussi choisir de tronquer les colonnes qui dépassent cette largeur.
```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
```
## Filtres
Vous pouvez configurer des filtres personnalisés par colonne. Le tableau prend en charge les filtres `text`, `select`, `fuzzy` , `slider`, `range`, `date` , `number` et `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
```
.png?alt=media)
### Options statiques pour les filtres de sélection
Lorsque le traitement côté serveur est utilisé, les filtres disponibles peuvent ne pas afficher l'éventail complet des options, puisque la liste déroulante de sélection n'a accès qu'à la page de résultats actuelle. Pour éviter cela, vous pouvez utiliser le paramètre `-Options` de `New-UDTableColumn`.
```powershell
New-UDTableColumn -Property Dessert -Title 'Dessert' -Filter -FilterType 'Select' -Options @('Frozen yoghurt', 'Eclair', 'Cupcake')
```
## Recherche
Pour activer la recherche, utilisez le paramètre `-ShowSearch` de `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
```
Lorsque vous utilisez des colonnes personnalisées, vous devrez ajouter le paramètre `-IncludeInSearch` aux colonnes que vous souhaitez inclure dans la recherche.
```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
```
## Tableau avec traitement côté serveur
Traitez les données sur le serveur afin de pouvoir effectuer la pagination, le filtrage, le tri et la recherche dans des systèmes comme SQL. Pour implémenter un tableau côté serveur, vous utiliserez le paramètre `-LoadData`. Ce paramètre accepte un `ScriptBlock`. La variable `$EventData` contient de l'information sur l'état du tableau. Vous pouvez utiliser des applets de commande pour traiter les données en fonction de cette information.
### Structure de $EventData
L'objet `$EventData` contient les propriétés suivantes.
| Nom de la propriété | Type | Description |
| ------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| Filters |
Hashtable\[]
@{ id = 'fieldName'
value = 'filterValue' }
| Une liste de valeurs de filtre. Chaque hashtable comporte une propriété `Id` et une propriété `Value`. |
| OrderBy |
Hashtable
@{ field = "fieldName" }
| Nom de la propriété selon laquelle trier. |
| OrderDirection | string | `asc` ou `desc` selon l'ordre de tri. |
| Page | int | La page actuelle (commençant à 0). |
| PageSize | int | La taille de page sélectionnée. |
| Properties | string\[] | Un tableau des propriétés affichées dans le tableau. |
| Search | string | Une chaîne de recherche fournie par l'utilisateur. |
| TotalCount | int | Le nombre total d'enregistrements avant le filtrage ou la pagination. |
### Exemple
```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
```
### Récupérer les données affichées
Vous pourriez vouloir permettre à l'utilisateur d'agir sur l'ensemble de données actuellement affiché. Pour ce faire, utilisez `Get-UDElement` dans l'objet d'entrée dont vous voulez récupérer les données et obtenez le tableau par Id. Une fois l'élément obtenu, vous pouvez utiliser la propriété `Data` de l'élément pour obtenir un tableau des lignes actuellement affichées.
```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
```
## Pagination
Par défaut, la pagination est désactivée et les tableaux s'agrandissent selon le nombre de lignes de données que vous fournissez. Vous pouvez activer la pagination en utilisant l'applet de commande `-ShowPagination` (alias `-Paging`). Vous pouvez configurer la taille de page à l'aide de l'applet de commande `-PageSize`.
```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
```
### Désactiver la taille de page « Tout »
Par défaut, le sélecteur de taille de page offre une option pour afficher toutes les lignes. Si vous voulez empêcher les utilisateurs de le faire, utilisez l'applet de commande `-DisablePageSizeAll`.
### Emplacement de la pagination
Vous pouvez modifier l'emplacement du contrôle de pagination en utilisant le paramètre `-PaginationLocation`. Il accepte top, bottom et both.
.png?alt=media)
### Tailles de page
La taille de page est définie à 5 par défaut. Les utilisateurs peuvent ajuster le nombre de lignes par page à l'aide de la liste déroulante Lignes par page. Vous pouvez ajuster la taille de page par défaut en utilisant le paramètre `-PageSize`. Pour ajuster les valeurs disponibles dans la liste déroulante Lignes par page, vous pouvez passer un tableau d'entiers au paramètre `-PageSizeOptions`.
```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)
```
## Tri
Pour activer le tri d'un tableau, utilisez le paramètre `-ShowSort`. Lorsque vous activez le tri, vous pourrez cliquer sur les en-têtes du tableau pour trier celui-ci en cliquant sur les en-têtes. Par défaut, le tri multiple est activé. Pour un tri multiple, maintenez la touche Maj enfoncée et cliquez sur un en-tête de colonne.
```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
```
Vous pouvez contrôler quelles colonnes peuvent être triées en utilisant `New-UDTableColumn` et le paramètre `-ShowSort`.
```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" -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
```
### Désactiver le retrait du tri
Par défaut, le tri d'un tableau comporte 3 états. Non trié, croissant et décroissant. Si vous souhaitez désactiver l'état non trié, utilisez le paramètre `-DisableSortRemove` de `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
```
## Sélection
### Données de tableau statiques
Les tableaux prennent en charge la sélection de lignes. Vous pouvez créer un gestionnaire d'événement pour le paramètre `OnRowSelection` afin de recevoir le moment où une nouvelle ligne est sélectionnée ou désélectionnée, ou vous pouvez utiliser `Get-UDElement` pour récupérer l'ensemble actuel de lignes sélectionnées.
L'exemple suivant crée un tableau avec la sélection de lignes activée. Un toast s'affiche lorsqu'on clique sur la ligne ou sur le bouton GET Rows.
```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 )"
}
```
La variable `$EventData` pour l'événement `-OnRowSelection` inclura toutes les colonnes en tant que propriétés ainsi qu'une propriété indiquant si la ligne a été sélectionnée ou désélectionnée.
Par exemple, les données du tableau des services ressembleraient à ceci.
```powershell
@{
Id = 0
Name = 'AESMService'
Status = 'Running'
StartupType = 'AutomaticDelayedStart'
StartType = 'Automation'
selected = $true
}
```
### Tableaux dynamiques (côté serveur)
Lorsque vous utilisez la sélection et `-LoadData`, les données d'événement de `-OnRowSelection` seront les ID des lignes et non les données complètes de la ligne. Elles indiqueront toujours si la ligne a été sélectionnée ou désélectionnée.
## Lignes repliables
Vous pouvez inclure de l'information supplémentaire dans le tableau en utilisant le paramètre `-OnRowExpand` de `New-UDTable`. Il accepte un ScriptBlock que vous pouvez utiliser pour retourner des composants supplémentaires.
```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'
)
```
.png?alt=media)
## Exportation
Les tableaux prennent en charge l'exportation des données qu'ils contiennent. Vous pouvez exporter en CSV, XLSX, JSON ou PDF. Vous pouvez définir quelles colonnes inclure dans une exportation et choisir d'exporter uniquement la page actuelle ou toutes les données du tableau.
```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
```
.png?alt=media)
### Colonnes masquées
Les colonnes masquées vous permettent d'inclure des données qui ne sont pas affichées dans le tableau, mais qui sont incluses dans les données exportées.
Ce qui suit masque la colonne StartType à l'utilisateur, mais l'inclut dans l'exportation.
```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
```
## Exportation côté serveur
Vous pouvez contrôler la fonctionnalité d'exportation avec un bloc de script PowerShell. C'est utile lors de l'exportation à partir de sources côté serveur comme des tables de serveur SQL.
Dans cet exemple, j'ai une table SQL qui contient des balados. Lors de l'exportation, vous recevrez de l'information sur l'état actuel du tableau afin de vous permettre de personnaliser les données exportées.
```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
}
```
## Personnaliser les options d'exportation
Vous pouvez décider quelles options d'exportation présenter à vos utilisateurs à l'aide de l'applet de commande `-ExportOption`. L'exemple suivant n'afficherait que l'option d'exportation CSV.
```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"
```
## Personnaliser les étiquettes
Vous pouvez utiliser le paramètre `-TextOption` avec l'applet de commande `New-UDTableTextOption` pour définir les champs de texte dans le tableau.
```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
```
## Actualiser avec un bouton
### Paramètre Data
Vous pouvez actualiser un tableau de l'extérieur en le plaçant dans une région dynamique et en utilisant `Sync-UDElement`.
Cet exemple crée un bouton pour actualiser le tableau.
```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)
}
```
### Paramètre LoadData
Si vous utilisez le paramètre `-LoadData`, vous pouvez synchroniser le tableau directement. Cela présente l'avantage de conserver l'état du tableau, comme la page et le filtrage, après l'actualisation.
```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'
```
## Afficher le bouton d'actualisation
Vous pouvez utiliser le paramètre `-ShowRefresh` pour fournir un bouton d'actualisation aux tableaux côté serveur.
```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
}
```
## Couleurs de lignes alternées
Vous pouvez utiliser un thème pour créer un tableau avec des couleurs de lignes alternées.
```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
```
## Styles de lignes personnalisés
Style de ligne personnalisé du tableau
Utilisez le paramètre `-OnRowStyle` pour styliser les lignes selon leur contenu. Retournez un hashtable avec des styles CSS pour la ligne.
```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/fr/commandes-powershell/new-udtable.md)
* [New-UDTableColumn](/powershell-universal/fr/commandes-powershell/new-udtablecolumn.md)
* [Out-UDTableColumn](/powershell-universal/fr/commandes-powershell/out-udtabledata.md)
* [New-UDTableTextOption](/powershell-universal/fr/commandes-powershell/new-udtabletextoption.md)
#### Voir aussi
* [Devolutions Academy – Ajouter des tableaux de données](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 – Tableaux de données côté serveur](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/fr/applis/components/data-display/table.md?ask=&goal=
```
`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.
.png?alt=media)
.png?alt=media)