> 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/da/apps/components/data-display/data-grid.md).

# Datagitter

Byg avancerede datagitter i PowerShell Universal-apps med New-UDDataGrid, herunder filtrering, sortering, sideinddeling, redigering, markering og brugerdefinerede eksporter.

Komponenten `UDDataGrid` er en avanceret version af tabellen, der er nyttig til visning af store datamængder. Den understøtter mange af de samme funktioner som tabellen, men giver også kompleks filtrering, rækkevirtualisering, sortering efter flere kolonner og mere.

## Simpelt datagitter

![](https://218893503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAje1UFQFSPx2kH2ueeCf%2Fuploads%2Fgit-blob-caa96448a79e1dcf5ff239b05f5bd576567a7c73%2Fimage%20\(150\).png?alt=media)

Datagitre indlæser deres data via hændelseshandleren `-LoadRows`. De skal returnere en hashtable, der indeholder rækkedataene og det samlede antal rækker.

Kolonner defineres ved hjælp af hashtabeller.

```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
```

## Kolonner

Kolonner kan tilpasses ved hjælp af `New-UDDataGridColumn`. Flere oplysninger om denne cmdlet findes [her](/powershell-universal/da/powershell-kommandoer/new-uddatagridcolumn.md).

### Gengivelse af brugerdefinerede kolonner

De kan gengive brugerdefinerede komponenter i kolonner ved at angive `render` i kolonnens hashtable. De kan få adgang til den aktuelle rækkes data ved hjælp af variablen `$EventData` eller `$Row`

I dette eksempel vises tallet i navnekolonnen med en `New-UDTypography`-komponent.

```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
```

### Kolonner med fleksibel bredde

Fluiditet eller responsivitet for kolonner kan opnås ved at angive egenskaben `flex` for en kolonne.

Egenskaben `flex` accepterer en værdi mellem 0 og ∞. Den fungerer ved at fordele den resterende plads i gitteret mellem alle flex-kolonner i forhold til deres `flex`-værdi.

Overvej f.eks. et gitter med en samlet bredde på 500px, der har tre kolonner: den første med `width: 200`; den anden med `flex: 1`; og den tredje med `flex: 0.5`. Den første kolonne bliver 200px bred, så der resterer 300px. Kolonnen med `flex: 1` er dobbelt så stor som `flex: 0.5`, hvilket betyder, at de endelige størrelser bliver: 200px, 200px, 100px.

For at angive en minimums- og maksimumsbredde for en `flex`-kolonne skal De angive egenskaberne `minWidth` og `maxWidth` på kolonnen.

```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
```

### Automatisk størrelse på kolonner

Hvis De vil lade datagitteret tilpasse kolonnebredderne automatisk, kan De bruge parameteren `-AutoSizeColumns` til `New-UDDataGrid`. Datagitteret vurderer størrelsen af dataene og bestemmer den bedste størrelse for kolonnerne, efter at dataene er indlæst. Dette kan medføre en vis omarrangering af UI'et, efter at dataene indlæses.

```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

Parameteren `-LoadRows` bruges til at returnere data til datagitteret. Tabeltilstand leveres til hændelseshandleren som `$EventData`. De finder følgende egenskaber i objektet `$EventData`.

| Egenskab | Beskrivelse                                                             | Type      |
| -------- | ----------------------------------------------------------------------- | --------- |
| Filter   | Et filterobjekt, som De kan bruge til at opbygge filtre mod Deres data. | Hashtable |
| Page     | Den aktuelle side. Starter ved 0.                                       | Integer   |
| PageSize | Antallet af poster på en side.                                          | Integer   |
| Sort     | Sorteringsindstillingerne for tabellen                                  | Hashtable |

## Sideinddeling

For at implementere sideinddeling kan De få adgang til egenskaberne `page` og `pageSize` for variablen `$EventData`. Hvis De bruger en fjern-datakilde, bør De implementere brugerdefineret sideinddelingslogik. Nedenfor er et eksempel på brug af sideinddelingsegenskaberne til at bladre gennem rækkerne lokalt. Afhængigt af Deres datakilde (f.eks. SQL) kan De bladre gennem data på en anden måde.

```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` implementerer automatisk sideinddeling, og De behøver ikke gøre ovenstående, hvis De har alle Deres data i hukommelsen. Ovenstående bruges kun til demonstrationsformål.

## Filtrering

Datagitteret understøtter filtrering af data baseret på hver kolonne. Der kan defineres flere filtre, så brugeren kan indsnævre det viste datasæt. Som standard implementerer cmdletten `Out-UDDataGridData` filtrering af lokale data. Når der bruges en fjern datakilde, f.eks. SQL, anbefales det at implementere brugerdefineret filtrering for at forbedre brugeroplevelsen og ydeevnen.

![](https://218893503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAje1UFQFSPx2kH2ueeCf%2Fuploads%2Fgit-blob-5a5cd016eef2b5f968ede156051455430d747dc8%2Fimage%20\(374\).png?alt=media)

### Filterdatastruktur

Filterobjektet er inkluderet i `$EventData` for hændelseshandleren `-LoadRows`, når et filter er defineret. Objektet har en struktur som følger.

```powershell
@{
    items = @(
        @{ 
            field = "Name"
            operator = "contains"
            value = "test"
        }
    )
    logicOperator = "and"
    quickFilterValues = @("test")
    quickFilterLogicOperator = "and"
}
```

#### Items

Egenskaben items indeholder en samling af felter, operatorer og værdier. De kan bruge disse til at filtrere Deres data.

| Egenskab | Beskrivelse                                                   | Type   |
| -------- | ------------------------------------------------------------- | ------ |
| Field    | Navnet på det felt, der skal filtreres                        | String |
| Operator | Den type operator, der skal bruges ved filtrering af dataene. | String |
| Value    | Værdien, der bruges til filtrering                            | Object |

#### LogicOperator

Feltet for logikoperatoren bruges til at angive forbindelsen mellem filtrene. Dette kan være `and` eller `or`.

#### QuickFilterValues

Indeholder en samling af hurtigfilterværdier, hvor De kan vælge, hvordan værdierne anvendes på Deres data.

#### QuickFilterLogicOperator

Indeholder den logiske operator for hurtigfilterværdierne, som brugeren har angivet. Dette kan være `and` eller `or`.

### Brugerdefineret filter

Cmdletten `Out-UDDataGridData` giver en implementering af filtrering for statiske data. Hvis De bruger denne cmdlet, behøver De ikke at implementere filtrering manuelt. Hvis De har en fjern datakilde, vil De gerne levere en brugerdefineret implementering af filtrering. Nedenfor er et eksempel på brug af filterstrukturen i `$EventData` til at fjerne rækker ud fra de filtre, som brugeren har angivet.

```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
```

### Brugerdefineret hurtigfilter

Hurtigfilteret ligner et enkelt søgefelt. De kan aktivere hurtigfiltrering med parameteren `-ShowQuickFilter` på `New-UDDataGrid`. Et søgefelt vises øverst til højre i datagitteret. Når brugeren indtaster en værdi i datagitteret, stilles oplysningerne om hurtigfilteret til rådighed.

Nedenfor er et eksempel på, hvordan De bruger hurtigfiltre. `Out-UDDataGridData` implementerer hurtigfiltrering og er ikke påkrævet, når der bruges lokale data. Nedenstående er kun til demonstration.

```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
```

## Sortering

![](https://218893503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAje1UFQFSPx2kH2ueeCf%2Fuploads%2Fgit-blob-ed79fa12582bc8644e369b881bf0fd7c8166d60f%2Fimage%20\(389\).png?alt=media)

Objektet `$EventData` vil indeholde egenskaben `Sort`, når brugeren sorterer datagitteret. Det indeholder egenskaber for hver kolonne, der sorteres. Egenskaberne starter som 0 og øges, efterhånden som flere kolonner sorteres.

De kan f.eks. få adgang til den første sorterede kolonne på følgende måde.

```powershell
$EventData.Sort.'0'.field
```

De vil også modtage sorteringsretningen for hver kolonne.

| Egenskab | Beskrivelse                          | Type      |
| -------- | ------------------------------------ | --------- |
| Field    | Feltet, der skal sorteres.           | String    |
| Sort     | Den retning, feltet skal sorteres i. | asc, desc |

## Detaljeret indhold

<figure><img src="https://218893503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAje1UFQFSPx2kH2ueeCf%2Fuploads%2Fgit-blob-3e450750ffcb237cb5da89b7fb06ecb795a35a97%2Fimage%20(192).png?alt=media" alt=""><figcaption></figcaption></figure>

De kan bruge hændelseshandleren `-LoadDetailContent` til at vise yderligere oplysninger om den række, De udvider. Oplysninger om den aktuelle række er tilgængelige i `$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
}
```

### Eksempel: indlejrede datagitre

De kan bruge parameteren -LoadDetailContent til at slå indlejrede data om et objekt op. I dette eksempel indlæser vi et datagitter med virtuelle maskiner og viser navn, operativsystem, hukommelse og CPU-kerner. Udvidelse af detaljeindholdet giver et datagitter med de netværkskort, der er tilgængelige på den virtuelle maskine. Vi bruger dummydata i dette eksempel, men De kan bruge enhver cmdlet, der er tilgængelig i 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
    }
}
```

## Redigering

Tabeller understøtter redigering ved at angive hændelseshandleren `-OnEdit`. Nye rækkedata leveres som `$EventData`. De kan vælge at returnere opdaterede rækkeoplysninger (f.eks. ved at justere noget, brugeren har indtastet) og returnere dem fra hændelseshandleren. Hvis De ikke returnerer noget, afspejler rækken det, brugeren har indtastet.

`$EventData` har følgende format.

```powershell
@{
    newRow = @{}
    oldRow = @{}
}
```

Sørg for, at De angiver egenskaben `editable` for hver kolonne, De ønsker, at brugeren skal redigere.

```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
    }
}
```

## Valg

De kan aktivere rækkevalg ved hjælp af parameteren `-CheckboxSelection` for at vise afkrydsningsfelter for de rækker, der skal vælges. Rækkevalg kræver et deterministisk id for de angivne datarækker. I nedenstående eksempel kan De se, at hver række har et bestemt id angivet.

```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
}
```

De kan få adgang til valgte data med hændelseshandleren `-OnSelectionChange` eller ved at hente række-id'erne via `Get-UDElement`.

```powershell
New-UDButton -Text 'Get Selected Rows' -OnClick {
   $Value = Get-UDElement -ID 'DataGrid'
   Show-UDToast $Value.selection
}
```

## Brugerdefineret eksport

For at tilsidesætte standardeksportfunktionaliteten skal De bruge hændelseshandleren `-OnExport`. `$EventData` er det samme kontekstobjekt, som bruges til `-LoadRows`. De bør bruge `Out-UDDataGridExport` til at returnere dataene fra `-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' 
}
```

### Flere eksporttyper

Når De bruger en brugerdefineret eksport, kan De bruge parameteren `-ExportOptions` til at definere flere eksporttyper. Når brugeren vælger eksporttypen, kan De kontrollere egenskaben Type for `$EventData` for at afgøre, hvilken type eksport der skal oprettes.

```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")
```

## Eksempel: statiske data

I dette eksempel genererer vi en matrix med 10.000 poster. Vi opretter en ny funktion, `Out-UDDataGridData`, til at håndtere sideopdeling, sortering og filtrering. Denne funktion er allerede inkluderet i [Universal-modulet](/powershell-universal/da/powershell-kommandoer/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
}     
```

<figure><img src="https://218893503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAje1UFQFSPx2kH2ueeCf%2Fuploads%2Fgit-blob-9ddc3ae5a17c866d5bcbb5dfa50bb760f511ed99%2Fimage%20(356).png?alt=media" alt=""><figcaption></figcaption></figure>

## Eksempel: SQL-data

I dette eksempel vil vi forespørge PowerShell Universal-databasen med 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
}
```

<figure><img src="https://218893503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAje1UFQFSPx2kH2ueeCf%2Fuploads%2Fgit-blob-4c72f87ae9eb99fc37f7c47fe947ca2c410683d8%2Fimage%20(499).png?alt=media" alt=""><figcaption></figcaption></figure>

## API

* [New-UDDataGrid](/powershell-universal/da/powershell-kommandoer/new-uddatagrid.md)
* [New-UDDataGridColumn](/powershell-universal/da/powershell-kommandoer/new-uddatagridcolumn.md)
* [Out-UDDataGridData](/powershell-universal/da/powershell-kommandoer/out-uddatagriddata.md)
* [Out-UDDataGridExport](/powershell-universal/da/powershell-kommandoer/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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.devolutions.net/powershell-universal/da/apps/components/data-display/data-grid.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
