> 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/apps/components/data-display/table.md). # Tableau Les tableaux affichent des ensembles de données. Ils sont entièrement personnalisables. Les tableaux présentent l'information d'une manière facile à parcourir, permettant aux utilisateurs de repérer des tendances et des observations. Ils peuvent être intégrés dans du contenu principal, tel que des cartes. ## Tableau simple ![](/files/4qC0XFqEeammCIzO8HV9) 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 ![](/files/MUgr4Fw18RF8XEgZIuXK) 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é ![](/files/mUrIaiG8n8mvGlaaB2AN) Définissez le rendu des colonnes. Le tri et l'exportation continuent de fonctionner 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 également 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 de type `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 ``` ![](/files/Zwlc6fOxUrxqFtTF1Xg1) ### Options statiques pour les filtres de type sélection Lors de l'utilisation du traitement côté serveur, les filtres disponibles peuvent ne pas afficher la gamme complète d'options, car la liste déroulante de sélection n'a accès qu'à la page courante de résultats. Pour éviter cela, vous pouvez utiliser le paramètre `-Options` sur `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` sur `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 côté serveur afin d'effectuer la pagination, le filtrage, le tri et la recherche dans des systèmes tels que 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 des informations sur l'état du tableau. Vous pouvez utiliser des cmdlets pour traiter les données en fonction de ces informations. ### 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 table de hachage possède 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 courante (à partir de 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 filtrage ou 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ération des données affichées Vous pouvez souhaiter permettre à l'utilisateur d'agir sur l'ensemble actuel de données affichées. Pour ce faire, utilisez `Get-UDElement` dans l'objet d'entrée à partir duquel vous souhaitez récupérer les données et obtenez le tableau par son identifiant. Une fois que vous avez l'élément, 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 en fonction du nombre de lignes de données fournies. Vous pouvez activer la pagination en utilisant le cmdlet `-ShowPagination` (alias `-Paging`). Vous pouvez configurer la taille de page à l'aide du cmdlet `-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 l'option « Afficher tout » pour la taille de page Par défaut, le sélecteur de taille de page propose une option permettant d'afficher toutes les lignes. Si vous souhaitez empêcher les utilisateurs de faire cela, utilisez le cmdlet `-DisablePageSizeAll`. ### Emplacement de la pagination Vous pouvez modifier l'emplacement du contrôle de pagination en utilisant le paramètre `-PaginationLocation`. Il accepte les valeurs top, bottom et both. ![Pagination Location](/files/lmz3bg0PXUXoykg06GVB) ### Tailles de page La taille de page est, par défaut, définie à 5. 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 utiliser un tableau d'entiers transmis 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 pouvez cliquer sur les en-têtes du tableau pour trier le tableau. Par défaut, le tri multiple est activé. Pour effectuer 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 @{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 la suppression 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énements pour le paramètre `OnRowSelected` afin de recevoir une notification lorsqu'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 message toast s'affiche lors d'un clic 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 )" } ``` ![Row selection](/files/8n3i7mKDckRy5aQJR0YE) La variable `$EventData` pour l'événement `-OnRowSelected` inclura toutes les colonnes en tant que propriétés, ainsi qu'une propriété selected indiquant si la ligne a été sélectionnée ou désélectionnée. Par exemple, les données du tableau de services ressembleraient à ceci. ```powershell @{ Id = 0 Name = 'AESMService', Status = 'Running' StartupType = 'AutomaticDelayedStart' StartType = 'Automation' selected = $true } ``` ### Tableaux dynamiques (côté serveur) Lors de l'utilisation de la sélection avec `-LoadData`, le paramètre `-OnRowSelected $EventData` contiendra les identifiants des lignes et non l'ensemble des données de la ligne. Il indiquera tout de même si la ligne a été sélectionnée ou désélectionnée. ## Lignes réductibles Vous pouvez inclure des informations supplémentaires 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' ) ``` ![](/files/b6qfuQE9AKB8J7Q6lG0f) ## Exportation Les tableaux prennent en charge l'exportation des données. 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 courante 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 ``` ![](/files/rdzfX9z6RwhiyxpBuPN3) ### 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. L'exemple suivant masque la colonne StartType pour 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 à l'aide d'un bloc de script PowerShell. Cela est utile lors de l'exportation depuis des sources côté serveur telles que des tables SQL Server. Dans cet exemple, j'ai une table SQL qui contient des podcasts. Lors de l'exportation, vous recevrez des informations sur l'état actuel du tableau afin 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 } ``` ## Personnalisation des options d'exportation Vous pouvez décider quelles options d'exportation présenter à vos utilisateurs en utilisant le cmdlet `-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" ``` ## Personnalisation des étiquettes Vous pouvez utiliser le paramètre `-TextOption` ainsi que le cmdlet `New-UDTableTextOption` pour définir les champs de texte du 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 ``` ## Actualisation avec un bouton ### Paramètre Data Vous pouvez actualiser un tableau de manière externe en plaçant le tableau 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 maintenir l'état du tableau, tel que 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 pour les 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 en fonction de leur contenu. Retournez une table de hachage 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](https://github.com/Devolutions/doc-gitbook/blob/master/translations/fr/powershell-universal/cmdlets/New-UDTable.txt) * [New-UDTableColumn](https://github.com/Devolutions/doc-gitbook/blob/master/translations/fr/powershell-universal/cmdlets/New-UDTableColumn.txt) * [Out-UDTableColumn](https://github.com/Devolutions/doc-gitbook/blob/master/translations/fr/powershell-universal/cmdlets/Out-UDTableData.txt) * [New-UDTableTextOption](https://github.com/Devolutions/doc-gitbook/blob/master/translations/fr/powershell-universal/cmdlets/New-UDTableTextOption.txt) --- # 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: ``` GET https://docs.devolutions.net/powershell-universal/fr/apps/components/data-display/table.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.