Tableau

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

Un exemple simple, sans fioritures. Les colonnes du tableau sont définies à partir des données.

$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

Définissez des colonnes personnalisées pour votre tableau.

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

Définissez le rendu des colonnes. Le tri et l'exportation fonctionnent toujours pour le tableau.

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

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

$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

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.

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.

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

$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

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

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

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

Emplacement de la pagination

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.

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

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

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

$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 OnRowSelected afin d'être avisé 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 toast s'affiche lorsqu'on clique sur la ligne ou sur le bouton GET Rows.

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

Sélection de lignes

La variable $EventData de l'événement -OnRowSelected inclura toutes les colonnes comme 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.

@{
   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, le -OnRowSelected $EventData contiendra les ID des lignes et non les données complètes des lignes. Il indiquera tout de même 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.

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

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.

$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

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.

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

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

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

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

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.

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.

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

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

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

API

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

Voir aussi

• Devolutions Academy – Ajouter des tableaux de données
• Devolutions Academy – Tableaux de données côté serveur