> 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/data-grid.md).
# Griglia dati
Il componente `UDDataGrid` è una versione avanzata della tabella, utile per visualizzare grandi quantità di dati. Supporta molte delle stesse funzionalità della tabella, ma offre anche filtri complessi, virtualizzazione delle righe, ordinamento su più colonne e altro ancora.
## Data grid semplice
Le data grid caricano i propri dati tramite il gestore di eventi `-LoadRows`. Dovrà restituire una hashtable che contiene i dati delle righe e il numero totale di righe.
Le colonne sono definite utilizzando hashtable.
```powershell
New-UDDataGrid -LoadRows {
$Data = @(
@{ Name = 'Adam'; Number = Get-Random}
@{ Name = 'Tom'; Number = Get-Random}
@{ Name = 'Sarah'; Number = Get-Random}
)
$Data | Out-UDDataGridData -Context $EventData -TotalRows $Rows.Length
} -Columns @(
New-UDDataGridColumn -Field name
New-UDDataGridColumn -Field number
) -AutoHeight $true
```
## Colonne
Le colonne sono personalizzabili tramite `New-UDDataGridColumn`. Maggiori informazioni su questo cmdlet sono disponibili [qui](/powershell-universal/it/comandi-powershell/new-uddatagridcolumn.md).
### Rendering di colonne personalizzate
È possibile eseguire il rendering di componenti personalizzati nelle colonne specificando `render` all'interno della hashtable della colonna. Può accedere ai dati della riga corrente utilizzando la variabile `$EventData` o `$Row`
In questo esempio, il numero è mostrato nella colonna del nome con un componente `New-UDTypography`.
```powershell
New-UDDataGrid -LoadRows {
$Rows = 1..100 | % {
@{ Name = 'Adam'; Number = Get-Random}
}
$Rows| Out-UDDataGridData -Context $EventData -TotalRows $Rows.Length
} -Columns @(
New-UDDataGridColumn -Field name -Render {
New-UDTypography $EventData.number
}
New-UDDataGridColumn -Field number
) -AutoHeight $true
```
### Colonne a larghezza flessibile
La fluidità o la reattività delle colonne può essere ottenuta impostando la proprietà `flex` di una colonna.
La proprietà `flex` accetta un valore compreso tra 0 e ∞. Funziona dividendo lo spazio rimanente nella griglia tra tutte le colonne flex in proporzione al loro valore `flex`.
Ad esempio, si consideri una griglia con una larghezza totale di 500px che ha tre colonne: la prima con `width: 200`; la seconda con `flex: 1`; e la terza con `flex: 0.5`. La prima colonna sarà larga 200px, lasciando 300px rimanenti. La colonna con `flex: 1` è il doppio della dimensione di `flex: 0.5`, il che significa che le dimensioni finali saranno: 200px, 200px, 100px.
Per impostare una larghezza minima e massima per una colonna `flex`, imposti le proprietà `minWidth` e `maxWidth` sulla colonna.
```powershell
New-UDDataGrid -LoadRows {
$Rows = 1..100 | % {
@{ Name = 'Adam'; Number = "This column is a very long string. This column is a very long string. This column is a very long string. This column is a very long string. This column is a very long string. This column is a very long string."}
}
$Rows| Out-UDDataGridData -Context $EventData -TotalRows $Rows.Length
} -Columns @(
New-UDDataGridColumn -Field name -Render {
New-UDTypography $EventData.number
}
New-UDDataGridColumn -Field number -Flex 1.0
) -AutoHeight $true
```
### Ridimensionamento automatico delle colonne
Se desidera che la data grid dimensioni automaticamente le larghezze delle colonne, può utilizzare il parametro `-AutoSizeColumns` di `New-UDDataGrid`. La data grid valuterà la dimensione dei dati e determinerà la dimensione migliore per le colonne dopo il caricamento dei dati. Ciò può causare una riorganizzazione dell'interfaccia utente dopo il caricamento dei dati.
```powershell
New-UDDataGrid -LoadRows {
$Rows = 1..100 | % {
@{ Name = 'Adam'; Number = "This column is a very long string. This column is a very long string. This column is a very long string. This column is a very long string. This column is a very long string. This column is a very long string."}
}
$Rows| Out-UDDataGridData -Context $EventData -TotalRows $Rows.Length
} -Columns @(
New-UDDataGridColumn -Field name -Render {
New-UDTypography $EventData.number
}
New-UDDataGridColumn -Field number
) -AutoHeight $true -AutoSizeColumns
```
## LoadRows
Il parametro `-LoadRows` viene utilizzato per restituire i dati per la data grid. Lo stato della tabella verrà fornito al gestore di eventi come `$EventData`. Troverà le seguenti proprietà all'interno dell'oggetto `$EventData`.
| Proprietà | Descrizione | Tipo |
| --------- | ------------------------------------------------------------------------ | --------- |
| Filter | Un oggetto filtro che può utilizzare per costruire filtri sui suoi dati. | Hashtable |
| Page | La pagina corrente. Inizia da 0. | Integer |
| PageSize | Il numero di record in una pagina. | Integer |
| Sort | Le opzioni di ordinamento per la tabella | Hashtable |
## Paginazione
Per implementare la paginazione, può accedere alle proprietà `page` e `pageSize` della variabile `$EventData`. Se utilizza un'origine dati remota, sarà opportuno implementare una logica di paginazione personalizzata. Di seguito è riportato un esempio di utilizzo delle proprietà di paginazione per scorrere le righe localmente. A seconda della sua origine dati (ad es. SQL), potrebbe scorrere i dati in modo diverso.
```powershell
New-UDDataGrid -LoadRows {
$Rows = 1..100 | % {
@{ Name = 'Adam'; Number = Get-Random}
}
$Rows = $Rows | Select-Object -First $EventData.pageSize -Skip ($EventData.Page * $EventData.PageSize)
$Rows| Out-UDDataGridData -Context $EventData -TotalRows $Rows.Length
} -Columns @(
New-UDDataGridColumn -Field name
New-UDDataGridColumn -Field number
) -AutoHeight $true -Pagination
```
`Out-UDDataGridData` implementa automaticamente la paginazione e non è necessario fare quanto sopra se ha tutti i suoi dati in memoria. Quanto sopra è utilizzato solo a scopo dimostrativo.
## Filtraggio
La data grid supporta il filtraggio dei dati in base a ciascuna colonna. È possibile definire più filtri per consentire all'utente di restringere il set di dati visualizzato. Per impostazione predefinita, il cmdlet `Out-UDDataGridData` implementa il filtraggio per i dati locali. Quando si utilizza un'origine dati remota, come SQL, si consiglia di implementare un filtraggio personalizzato per migliorare l'esperienza utente e le prestazioni.
### Struttura dati del filtro
L'oggetto filtro è incluso in `$EventData` per il gestore di eventi `-LoadRows` quando è definito un filtro. L'oggetto ha la struttura seguente.
```powershell
@{
items = @(
@{
field = "Name"
operator = "contains"
value = "test"
}
)
logicOperator = "and"
quickFilterValues = @("test")
quickFilterLogicOperator = "and"
}
```
#### Items
La proprietà items contiene una raccolta di campi, operatori e valori. Può utilizzarli per filtrare i suoi dati.
| Proprietà | Descrizione | Tipo |
| --------- | ------------------------------------------------------------------ | ------ |
| Field | Il nome del campo da filtrare | String |
| Operator | Il tipo di operatore da utilizzare durante il filtraggio dei dati. | String |
| Value | Il valore utilizzato per filtrare | Object |
#### LogicOperator
Il campo dell'operatore logico viene utilizzato per specificare il collegamento tra i filtri. Può essere `and` o `or`.
#### QuickFilterValues
Contiene una raccolta di valori di filtro rapido che può scegliere come applicare ai suoi dati.
#### QuickFilterLogicOperator
Contiene l'operatore logico per i valori di filtro rapido specificati dall'utente. Può essere `and` o `or`.
### Filtro personalizzato
Il cmdlet `Out-UDDataGridData` fornisce un'implementazione del filtraggio per dati statici. Se utilizza questo cmdlet, non è necessario implementare manualmente il filtraggio. Se dispone di un'origine dati remota, sarà opportuno fornire un'implementazione personalizzata per il filtraggio. Di seguito è riportato un esempio di utilizzo della struttura del filtro in `$EventData` per eliminare righe in base ai filtri forniti dall'utente.
```powershell
New-UDDataGrid -LoadRows {
$Rows = 1..100 | % {
@{ Name = 'Adam'; Number = Get-Random}
}
foreach($filter in $eventData.Filter.items)
{
if ($filter.operator -eq 'equals')
{
$Rows = $Rows | Where-Object $filter.field -eq $filter.value
}
elseif ($filter.operator -eq 'contains')
{
$Rows = $Rows | Where-Object $filter.field -match $filter.value
}
}
$Rows| Out-UDDataGridData -Context $EventData -TotalRows $Rows.Length
} -Columns @(
New-UDDataGridColumn -Field name
New-UDDataGridColumn -Field number
) -AutoHeight $true
```
### Filtro rapido personalizzato
Il filtro rapido è simile a una semplice casella di ricerca. Può abilitare il filtraggio rapido con il parametro `-ShowQuickFilter` su `New-UDDataGrid`. Una casella di ricerca apparirà in alto a destra nella data grid. Quando l'utente inserisce un valore nella data grid, verranno fornite le informazioni sul filtro rapido.
Di seguito è riportato un esempio di come utilizzare i filtri rapidi. `Out-UDDataGridData` implementa il filtraggio rapido e non è richiesto quando si utilizzano dati locali. Quanto segue è a solo scopo dimostrativo.
```powershell
New-UDDataGrid -LoadRows {
$Rows = 1..100 | % {
@{ Name = 'Adam'; Number = Get-Random}
}
foreach($filter in $eventData.QuickFilterValues)
{
$Rows = $Rows | Where-Object $filter.field -match $filter
}
$Rows| Out-UDDataGridData -Context $EventData -TotalRows $Rows.Length
} -Columns @(
New-UDDataGridColumn -Field name
New-UDDataGridColumn -Field number
) -AutoHeight $true
```
## Ordinamento
L'oggetto `$EventData` conterrà una proprietà `Sort` quando l'utente ordina la data grid. Contiene proprietà per ogni colonna ordinata. Le proprietà inizieranno da 0 e aumenteranno man mano che vengono ordinate più colonne.
Ad esempio, può accedere alla prima colonna ordinata come segue.
```powershell
$EventData.Sort.'0'.field
```
Riceverà anche la direzione di ordinamento per ciascuna colonna.
| Proprietà | Descrizione | Tipo |
| --------- | -------------------------------------- | --------- |
| Field | Il campo da ordinare. | String |
| Sort | La direzione in cui ordinare il campo. | asc, desc |
## Contenuto dettagliato
Può utilizzare il gestore di eventi `-LoadDetailContent` per visualizzare informazioni aggiuntive sulla riga che sta espandendo. Le informazioni sulla riga corrente sono disponibili in `$EventData.row`.
```powershell
New-UDDataGrid -LoadRows {
$Data = @(
@{ Name = 'Adam'; Number = Get-Random }
@{ Name = 'Tom'; Number = Get-Random }
@{ Name = 'Sarah'; Number = Get-Random }
)
$Data| Out-UDDataGridData -Context $EventData -TotalRows $Data.Length
} -Columns @(
New-UDDataGridColumn -Field name
New-UDDataGridColumn -Field number
) -AutoHeight $true -LoadDetailContent {
Show-UDToast $Body
New-UDAlert -Text $EventData.row.Name
}
```
### Esempio: data grid annidate
Può utilizzare il parametro -LoadDetailContent per cercare dati annidati su un oggetto. In questo esempio, carichiamo una data grid di macchine virtuali e visualizziamo il nome, il sistema operativo, la memoria e i core della CPU. L'espansione del contenuto di dettaglio fornisce una data grid delle schede di rete disponibili sulla macchina virtuale. In questo esempio utilizziamo dati fittizi, ma potrebbe utilizzare qualsiasi cmdlet disponibile in PowerShell Universal.
```powershell
function Get-VirtualMachine {
1..10 | ForEach-Object {
[PSCustomObject]@{
Name = "VM-$_"
OperatingSystem = @("Windows Server 2019", "Windows Server 2022", "Ubuntu 20.02") | Get-Random
Memory = @(64, 128, 512, 1024) | Get-Random
Cores = @(8, 16, 32) | Get-Random
}
}
}
function Get-NetworkCard {
param($VirtualMachine)
1..4 | ForEach-Object {
[PSCustomObject]@{
Name = "NIC-$_"
Speed = @(64, 128, 512, 1024) | Get-Random
}
}
}
New-UDApp -Content {
New-UDDataGrid -LoadRows {
$VMs = Get-VirtualMachine
$VMs| Out-UDDataGridData -Context $EventData -TotalRows $VMs.Length
} -Columns @(
New-UDDataGridColumn -Field Name
New-UDDataGridColumn -Field OperatingSystem
New-UDDataGridColumn -Field Memory -Render {
New-UDTypography -Text "$($EventData.Memory) GB\s"
}
New-UDDataGridColumn -Field Cores
) -AutoHeight $true -LoadDetailContent {
$VirutalMachine = $EventData.row
New-UDDataGrid -LoadRows {
$NICs = Get-NetworkCard -VirtualMachine $VirutalMachine
$NICs | Out-UDDataGridData -Context $EventData -TotalRows $NICs.Length
} -Columns @(
New-UDDataGridColumn -Field Name
New-UDDataGridColumn -Field Speed -Render {
New-UDTypography -Text "$($EventData.Speed) GB\s"
}
) -AutoHeight $true
}
}
```
## Modifica
Le tabelle forniscono il supporto per l'editor specificando il gestore di eventi `-OnEdit`. I nuovi dati della riga verranno forniti come `$EventData`. Può scegliere di restituire informazioni aggiornate sulla riga (ad esempio, modificando qualcosa che l'utente ha inserito) e restituirle dal gestore di eventi. Se non restituisce nulla, la riga rifletterà quanto inserito dall'utente.
`$EventData` ha il formato seguente.
```powershell
@{
newRow = @{}
oldRow = @{}
}
```
Si assicuri di fornire la proprietà `editable` a ogni colonna che desidera far modificare all'utente.
```powershell
$Cache:Data = @(
@{ Name = 'Adam'; number = Get-Random }
@{ Name = 'Tom'; number = Get-Random }
@{ Name = 'Sarah'; number = Get-Random }
)
New-UDDataGrid -LoadRows {
$Cache:Data| Out-UDDataGridData -Context $EventData -TotalRows $Cache:Data.Length
} -Columns @(
New-UDDataGridColumn -Field name -Render {
New-UDButton -Text $EventData.number
}
New-UDDataGridColumn -Field number -Editable
) -AutoHeight $true -OnEdit {
$Cache:Data | Where-Object { $_.Name -eq $EventData.NewRow.Name } | ForEach-Object {
$_.Number = $EventData.NewRow.Number
}
}
```
## Selezione
Può abilitare la selezione delle righe utilizzando il parametro `-CheckboxSelection` per visualizzare le caselle di controllo per le righe da selezionare. La selezione delle righe richiede un ID deterministico per le righe di dati fornite. Nell'esempio seguente, vedrà che ogni riga ha un ID specifico.
```powershell
New-UDApp -Content {
$Rows = 1..100 | % {
@{ Id = $_; Name = 'Adam'; Number = Get-Random}
}
New-UDDataGrid -id DataGrid -LoadRows {
$Rows| Out-UDDataGridData -Context $EventData -TotalRows $Rows.Length
} -Columns @(
New-UDDataGridColumn -Field name
New-UDDataGridColumn -Field number
) -AutoHeight $true -Pagination -CheckboxSelection -CheckboxSelectionVisibleOnly -DisableRowSelectionOnClick
```
Può accedere ai dati selezionati con il gestore di eventi `-OnSelectionChange` o recuperando gli ID delle righe tramite `Get-UDElement`.
```powershell
New-UDButton -Text 'Get Selected Rows' -OnClick {
$Value = Get-UDElement -ID 'DataGrid'
Show-UDToast $Value.selection
}
```
## Esportazione personalizzata
Per sovrascrivere la funzionalità di esportazione predefinita, utilizzi il gestore di eventi `-OnExport`. `$EventData` sarà lo stesso oggetto di contesto utilizzato per `-LoadRows`. Dovrebbe utilizzare `Out-UDDataGridExport` per restituire i dati da `-OnExport`.
```powershell
$Data = @(
@{ name = 'Adam'; Number = Get-Random}
@{ name = 'Tom'; Number = Get-Random}
@{ name = 'Sarah'; Number = Get-Random}
)
New-UDDataGrid -LoadRows {
@{
rows = $Data
rowCount = $Data.Length
}
} -Columns @(
New-UDDataGridColumn -Field name
New-UDDataGridColumn -Field number
) -OnExport {
$ExportContent = $Data | ConvertTo-Csv -NoTypeInformation | Out-String
Out-UDDataGridExport -Data $ExportContent -FileName 'export.csv'
}
```
### Tipi di esportazione multipli
Quando si utilizza un'esportazione personalizzata, può utilizzare il parametro `-ExportOptions`per definire più tipi di esportazione. Quando l'utente seleziona il tipo di esportazione, può controllare la proprietà Type di `$EventData`per determinare quale tipo di esportazione produrre.
```powershell
$Data = @(
@{ name = 'Adam'; Number = Get-Random}
@{ name = 'Tom'; Number = Get-Random}
@{ name = 'Sarah'; Number = Get-Random}
)
New-UDDataGrid -LoadRows {
@{
rows = $Data
rowCount = $Data.Length
}
} -Columns @(
New-UDDataGridColumn -Field name
New-UDDataGridColumn -Field number
) -OnExport {
if ($EventData.Type -eq 'CSV')
{
$ExportContent = $Data | ConvertTo-Csv -NoTypeInformation | Out-String
Out-UDDataGridExport -Data $ExportContent -FileName 'export.csv'
}
} -ExportOptions @("CSV", "PDF")
```
## Esempio: dati statici
In questo esempio, generiamo un array di 10.000 record. Creeremo una nuova funzione, `Out-UDDataGridData`, per gestire la paginazione, l'ordinamento e il filtraggio. Questa funzione è già inclusa nel [modulo Universal](/powershell-universal/it/comandi-powershell/out-uddatagriddata.md).
```powershell
New-UDApp -Title 'PowerShell Universal' -Content {
$Data = 1..10000 | % {
@{ Name = 'Adam'; Number = Get-Random }
}
New-UDDataGrid -LoadRows {
$Data | Out-UDDataGridData -Context $EventData
} -Columns @(
New-UDDataGridColumn -Field name
New-UDDataGridColumn -Field number -Render {
New-UDButton -Icon (New-UDIcon -Icon User) -OnClick { Show-UDToast $EventData.Name }
}
) -AutoHeight $true -Pagination -HeaderFilters
}
```
## Esempio: dati SQL
In questo esempio, interrogheremo il database di PowerShell Universal con dbatools.
```powershell
function Out-UDSQLDataGrid {
param(
$Context,
[Parameter(Mandatory)]
[string]$Table,
[Parameter(Mandatory)]
[string]$SqlInstance,
[Parameter(Mandatory)]
[string]$Database,
[Parameter(Mandatory)]
[pscredential]$SqlCredential,
[Int32]$RowsPerPage
)
End {
$simpleFilter = @()
if ($null -ne $Context.Filter.Items -and $Context.Filter.Items.Count -gt 0) {
$logicOperator = $Context.Filter.logicOperator #The link operator is 'AND' or 'OR'. It will always be one or the other for all properties
foreach ($item in $Context.Filter.Items) {
$simpleFilter += [PSCustomObject]@{
Property = $item.Field
Value = $item.Value
Operator = $item.Operator
}
}
}
if ($null -ne $simpleFilter -and $simpleFilter.Count -gt 0) {
$count = 1
foreach ($filter in $simpleFilter) {
if ($count -gt 1) {
$SqlFilter += " $($logicOperator) "
}
else {
$SqlFilter += " WHERE "
}
switch ($filter.Operator) {
"contains" { $SqlFilter += " $($filter.Property) LIKE '%$($filter.Value)%' " }
"equals" { $SqlFilter += " $($filter.Property) = '$($filter.Value)' " }
"startsWith" { $SqlFilter += " $($filter.Property) LIKE '$($filter.Value)%' " }
"endsWith" { $SqlFilter += " $($filter.Property) LIKE '%$($filter.Value)' " }
"isAnyOf" {
$count = 1
foreach ($val in $filter.Value) {
if ($count -gt 1) {
$list += ", '$val'"
}
else {
$list += "'$val'"
}
$count += 1
}
$SqlFilter += " $($filter.Property) IN ($($list)) "
}
"isempty" { $SqlFilter += " TRIM ($($filter.Property)) IS NULL " }
"isnotempty" { $SqlFilter += " TRIM ($($filter.Property)) IS NOT NULL " }
"notequals" { $SqlFilter += " $($filter.Property) != '$($filter.Value)' " }
"notcontains" { $SqlFilter += " $($filter.Property) NOT LIKE '%$($filter.Value)%' " }
}
$count += 1
}
}
else {
$SqlFilter = $null
}
if ($null -eq $SqlFilter) {
$totalCount = (Invoke-DbaQuery -SqlInstance $SqlInstance -Database $Database -SqlCredential $SqlCredential -Query "SELECT COUNT(*) As Count FROM $Table").Count
}
else {
$totalCount = (Invoke-DbaQuery -SqlInstance $SqlInstance -Database $Database -SqlCredential $SqlCredential -Query "SELECT COUNT(*) As Count FROM $Table $SqlFilter").Count
$sort = $Context.Sort.'0'
}
if ($sort) {
$sqlSort = "ORDER BY $($sort.field) $($sort.Sort) "
}
else {
$sqlSort = "ORDER BY (SELECT NULL)"
}
if ($null -ne $SqlFilter) {
$sqlPage = "OFFSET $($Context.Page * $Context.PageSize) ROWS FETCH NEXT $($Context.PageSize) ROWS ONLY;"
$Query = "SELECT * FROM $Table $sqlFilter $sqlSort $sqlPage"
}
else {
$sqlPage = "OFFSET $($RowsPerPage) ROWS FETCH NEXT $($RowsPerPage) ROWS ONLY;"
$Query = "SELECT * FROM $Table $sqlSort $sqlPage"
}
$Rows = Invoke-DbaQuery -SqlInstance $SqlInstance -Database $Database -SqlCredential $SqlCredential -Query $Query -As PSObject
@{
rows = [Array]$Rows
rowCount = $TotalCount
}
}
}
New-UDDashboard -Title 'PowerShell Universal' -Content {
New-UDDataGrid -LoadRows {
Out-UDSqlDataGrid -Context $EventData -SqlInstance "(localdb)\MSSQLLocalDb" -Database "PSU" -Table "Job"
} -Columns @(
New-UDDataGridColumn -Field id
New-UDDataGridColumn -Field startTime
New-UDDataGridColumn -Field status -Render {
if ($EventData.Status -eq 2) {
New-UDAlert -Severity 'Success' -Text 'Success'
}
if ($EventData.Status -eq 3) {
New-UDAlert -Severity 'Error' -Text 'Failed'
}
}
) -AutoHeight $true -Pagination
}
```
## API
* [New-UDDataGrid](/powershell-universal/it/comandi-powershell/new-uddatagrid.md)
* [New-UDDataGridColumn](/powershell-universal/it/comandi-powershell/new-uddatagridcolumn.md)
* [Out-UDDataGridData](/powershell-universal/it/comandi-powershell/out-uddatagriddata.md)
* [Out-UDDataGridExport](/powershell-universal/it/comandi-powershell/out-uddatagridexport.md)
---
# 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/data-grid.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.