> 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/it/app/components/data-display/table.md).
# Tabella
Le tabelle visualizzano insiemi di dati. Possono essere completamente personalizzate.
Le tabelle mostrano le informazioni in un modo facile da consultare, così che gli utenti possano cercare schemi e informazioni utili. Possono essere incorporate nel contenuto principale, come le schede.
## Tabella semplice
Un esempio semplice e senza fronzoli. Le colonne della tabella sono definite in base ai dati.
```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
```
## Tabella con colonne personalizzate
Definisca colonne personalizzate per la sua tabella.
```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
```
## Tabella con rendering personalizzato delle colonne
Definisca il rendering delle colonne. L'ordinamento e l'esportazione continuano a funzionare per la tabella.
```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
```
## Larghezza delle colonne della tabella
La larghezza delle colonne può essere definita usando il parametro `-Width`. Può anche decidere di troncare le colonne che superano tale larghezza.
```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
```
## Filtri
Può configurare filtri personalizzati per ogni colonna. La tabella supporta i filtri `text`, `select`, `fuzzy` , `slider`, `range`, `date` , `number` e `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
```
### Opzioni statiche per i filtri di selezione
Quando si utilizza l'elaborazione lato server, i filtri disponibili potrebbero non mostrare l'intera gamma di opzioni, poiché il menu a discesa di selezione ha accesso solo alla pagina corrente dei risultati. Per evitarlo, può usare il parametro `-Options` su `New-UDTableColumn`.
```powershell
New-UDTableColumn -Property Dessert -Title 'Dessert' -Filter -FilterType 'Select' -Options @('Frozen yoghurt', 'Eclair', 'Cupcake')
```
## Cerca
Per abilitare la ricerca, usi il parametro `-ShowSearch` su `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
```
Quando utilizza colonne personalizzate, dovrà aggiungere il parametro `-IncludeInSearch` alle colonne che desidera includere nella ricerca.
```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
```
## Tabella con elaborazione lato server
Elabori i dati sul server in modo da poter eseguire paginazione, filtri, ordinamento e ricerca in sistemi come SQL. Per implementare una tabella lato server, utilizzerà il parametro `-LoadData`. Questo parametro accetta uno `ScriptBlock`. La variabile `$EventData` include informazioni sullo stato della tabella. Può usare i cmdlet per elaborare i dati in base a queste informazioni.
### Struttura di $EventData
L'oggetto `$EventData` contiene le seguenti proprietà.
| Nome della proprietà | Tipo | Descrizione |
| -------------------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| Filters |
Hashtable\[]
@{ id = 'fieldName'
value = 'filterValue' }
| Un elenco di valori di filtro. Ogni hashtable ha una proprietà `Id` e una proprietà `Value`. |
| OrderBy |
Hashtable
@{ field = "fieldName" }
| Nome della proprietà in base a cui ordinare. |
| OrderDirection | string | `asc` o `desc` a seconda dell'ordinamento. |
| Page | int | La pagina corrente (a partire da 0). |
| PageSize | int | La dimensione di pagina selezionata. |
| Properties | string\[] | Un array di proprietà mostrate nella tabella. |
| Search | string | Una stringa di ricerca fornita dall'utente. |
| TotalCount | int | Il numero totale di record prima del filtraggio o della paginazione. |
### Esempio
```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
```
### Recupero dei dati visualizzati
Potrebbe voler consentire all'utente di agire sull'insieme corrente di dati visualizzati. Per farlo, usi `Get-UDElement` nell'oggetto di input da cui desidera recuperare i dati e ottenga la tabella tramite Id. Una volta ottenuto l'elemento, può usare la proprietà `Data` dell'elemento per ottenere un array delle righe attualmente visualizzate.
```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
```
## Paginazione
Per impostazione predefinita, la paginazione è disabilitata e le tabelle si espandono in base al numero di righe di dati fornite. Può abilitare la paginazione usando il cmdlet `-ShowPagination` (alias `-Paging`). Può configurare la dimensione della pagina usando il 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
```
### Disabilitare la dimensione di pagina Tutte
Per impostazione predefinita, il selettore della dimensione di pagina offre un'opzione per mostrare tutte le righe. Se desidera impedire agli utenti di farlo, usi il cmdlet `-DisablePageSizeAll`.
### Posizione della paginazione
Può modificare la posizione del controllo di paginazione usando il parametro `-PaginationLocation`. Accetta top, bottom e both.
### Dimensioni di pagina
La dimensione di pagina è impostata su 5 per impostazione predefinita. Gli utenti possono modificare il numero di righe per pagina usando il menu a discesa Righe per pagina. Può modificare la dimensione di pagina predefinita usando il parametro `-PageSize`. Per modificare i valori disponibili nel menu a discesa Righe per pagina, può passare un array di numeri interi al parametro `-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)
```
## Ordinamento
Per abilitare l'ordinamento di una tabella, usi il parametro `-ShowSort`. Quando abilita l'ordinamento, potrà ordinare la tabella facendo clic sulle intestazioni. Per impostazione predefinita, l'ordinamento multiplo è abilitato. Per l'ordinamento multiplo, tenga premuto shift e faccia clic sull'intestazione di una colonna.
```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
```
Può controllare quali colonne possono essere ordinate usando `New-UDTableColumn` e il parametro `-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
```
### Disabilitare la rimozione dell'ordinamento
Per impostazione predefinita, l'ordinamento di una tabella ha 3 stati. Non ordinato, crescente e decrescente. Se desidera disabilitare lo stato non ordinato, usi il parametro `-DisableSortRemove` di `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
```
## Selezione
### Dati statici della tabella
Le tabelle supportano la selezione delle righe. Può creare un gestore di eventi per il parametro `OnRowSelected` per ricevere una notifica quando una nuova riga viene selezionata o deselezionata, oppure può usare `Get-UDElement` per recuperare l'insieme corrente di righe selezionate.
L'esempio seguente crea una tabella con la selezione delle righe abilitata. Viene mostrato un toast quando si fa clic sulla riga o quando si fa clic sul pulsante 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 variabile `$EventData` per l'evento `-OnRowSelected` includerà tutte le colonne come proprietà e una proprietà selected che indica se la riga è stata selezionata o deselezionata.
Ad esempio, i dati della tabella dei servizi avrebbero questo aspetto.
```powershell
@{
Id = 0
Name = 'AESMService',
Status = 'Running'
StartupType = 'AutomaticDelayedStart'
StartType = 'Automation'
selected = $true
}
```
### Tabelle dinamiche (lato server)
Quando si utilizzano la selezione e `-LoadData`, `-OnRowSelected $EventData` conterrà gli ID delle righe e non i dati completi della riga. Indicherà comunque se la riga è stata selezionata o deselezionata.
## Righe comprimibili
Può includere informazioni aggiuntive nella tabella usando il parametro `-OnRowExpand` di `New-UDTable`. Accetta uno ScriptBlock che può usare per restituire componenti aggiuntivi.
```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'
)
```
## Esportazione
Le tabelle supportano l'esportazione dei dati in esse contenuti. Può esportare in CSV, XLSX, JSON o PDF. Può definire quali colonne includere in un'esportazione e scegliere di esportare solo la pagina corrente o tutti i dati della tabella.
```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
```
### Colonne nascoste
Le colonne nascoste le consentono di includere dati che non vengono visualizzati nella tabella ma che sono inclusi nei dati esportati.
L'esempio seguente nasconde all'utente la colonna StartType ma la include nell'esportazione.
```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
```
## Esportazione lato server
Può controllare la funzionalità di esportazione con uno script block di PowerShell. Questo è utile quando si esporta da origini lato server come le tabelle di SQL Server.
In questo esempio, ho una tabella SQL che contiene podcast. Durante l'esportazione, riceverà informazioni sullo stato corrente della tabella per poter personalizzare i dati esportati.
```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
}
```
## Personalizzazione delle opzioni di esportazione
Può decidere quali opzioni di esportazione presentare ai suoi utenti usando il cmdlet `-ExportOption`. L'esempio seguente mostrerebbe solo l'opzione di esportazione 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"
```
## Personalizzazione delle etichette
Può usare il parametro `-TextOption` insieme al cmdlet `New-UDTableTextOption` per impostare i campi di testo all'interno della tabella.
```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
```
## Aggiornare con un pulsante
### Parametro Data
Può aggiornare una tabella dall'esterno inserendola all'interno di una regione dinamica e usando `Sync-UDElement`.
Questo esempio crea un pulsante per aggiornare la tabella.
```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)
}
```
### Parametro LoadData
Se utilizza il parametro `-LoadData`, può sincronizzare direttamente la tabella. Questo ha il vantaggio di mantenere lo stato della tabella, come la pagina e i filtri, dopo l'aggiornamento.
```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'
```
## Mostrare il pulsante di aggiornamento
Può usare il parametro `-ShowRefresh` per fornire un pulsante di aggiornamento per le tabelle lato server.
```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
}
```
## Colori di riga alternati
Può usare un tema per creare una tabella con colori di riga alternati.
```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
```
## Stili di riga personalizzati
Stile di riga personalizzato della tabella
Usi il parametro `-OnRowStyle` per applicare uno stile alle righe in base al loro contenuto. Restituisca una hashtable con gli stili CSS per la riga.
```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/it/comandi-powershell/new-udtable.md)
* [New-UDTableColumn](/powershell-universal/it/comandi-powershell/new-udtablecolumn.md)
* [Out-UDTableColumn](/powershell-universal/it/comandi-powershell/out-udtabledata.md)
* [New-UDTableTextOption](/powershell-universal/it/comandi-powershell/new-udtabletextoption.md)
#### Vedere anche
* [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/it/app/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.