> 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/es/aplicaciones/components/data-display/data-grid.md).
# Cuadrícula de datos
El componente `UDDataGrid` es una versión avanzada de la tabla que resulta útil para mostrar grandes cantidades de datos. Admite muchas de las mismas funciones que la tabla, pero también ofrece filtrado complejo, virtualización de filas, ordenación multicolumna y más.
## Cuadrícula de datos simple
Las cuadrículas de datos cargan sus datos mediante el controlador de eventos `-LoadRows`. Deberá devolver una hashtable que contenga los datos de las filas y el número total de filas.
Las columnas se definen mediante hashtables.
```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
```
## Columnas
Las columnas se pueden personalizar usando `New-UDDataGridColumn`. Puede encontrar más información sobre este cmdlet [aquí](/powershell-universal/es/comandos-de-powershell/new-uddatagridcolumn.md).
### Renderizado de columnas personalizadas
Puede renderizar componentes personalizados en las columnas especificando `render` dentro de la hashtable de la columna. Puede acceder a los datos de la fila actual mediante la variable `$EventData` o `$Row`
En este ejemplo, el número se muestra en la columna de nombre 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
```
### Columnas de ancho flexible
La fluidez o capacidad de respuesta de las columnas se puede lograr estableciendo la propiedad `flex` de una columna.
La propiedad `flex` acepta un valor entre 0 e ∞. Funciona dividiendo el espacio restante en la cuadrícula entre todas las columnas flex en proporción a su valor `flex`.
Por ejemplo, considere una cuadrícula con un ancho total de 500px que tiene tres columnas: la primera con `width: 200`; la segunda con `flex: 1`; y la tercera con `flex: 0.5`. La primera columna tendrá 200px de ancho, dejando 300px restantes. La columna con `flex: 1` es el doble del tamaño de `flex: 0.5`, lo que significa que los tamaños finales serán: 200px, 200px, 100px.
Para establecer un ancho mínimo y máximo para una columna `flex`, establezca las propiedades `minWidth` y `maxWidth` en la columna.
```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
```
### Ajuste automático del tamaño de las columnas
Si desea que la cuadrícula de datos ajuste automáticamente el ancho de las columnas, puede usar el parámetro `-AutoSizeColumns` de `New-UDDataGrid`. La cuadrícula de datos evaluará el tamaño de los datos y determinará el mejor tamaño para las columnas después de que se carguen los datos. Esto puede provocar cierta reorganización de la interfaz de usuario después de que se carguen los datos.
```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
El parámetro `-LoadRows` se usa para devolver datos para la cuadrícula de datos. El estado de la tabla se proporcionará al controlador de eventos como `$EventData`. Encontrará las siguientes propiedades dentro del objeto `$EventData`.
| Propiedad | Descripción | Tipo |
| --------- | --------------------------------------------------------------------------- | --------- |
| Filter | Un objeto de filtro que puede usar para construir filtros contra sus datos. | Hashtable |
| Page | La página actual. Comienza en 0. | Integer |
| PageSize | El número de registros en una página. | Integer |
| Sort | Las opciones de ordenación de la tabla | Hashtable |
## Paginación
Para implementar la paginación, puede acceder a las propiedades `page` y `pageSize` de la variable `$EventData`. Si usa una fuente de datos remota, querrá implementar una lógica de paginación personalizada. A continuación se muestra un ejemplo de uso de las propiedades de paginación para paginar las filas localmente. Según su fuente de datos (p. ej., SQL), puede paginar los datos de forma diferente.
```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 automáticamente la paginación, y no es necesario hacer lo anterior si tiene todos sus datos en memoria. Lo anterior solo se usa con fines de demostración.
## Filtrado
La cuadrícula de datos admite el filtrado de datos según cada columna. Se pueden definir varios filtros para permitir al usuario restringir el conjunto de datos mostrado. De forma predeterminada, el cmdlet `Out-UDDataGridData` implementa el filtrado para datos locales. Cuando se usa una fuente de datos remota, como SQL, se sugiere implementar un filtrado personalizado para mejorar la experiencia del usuario y el rendimiento.
### Estructura de datos del filtro
El objeto de filtro se incluye en el `$EventData` del controlador de eventos `-LoadRows` cuando se define un filtro. El objeto tiene la siguiente estructura.
```powershell
@{
items = @(
@{
field = "Name"
operator = "contains"
value = "test"
}
)
logicOperator = "and"
quickFilterValues = @("test")
quickFilterLogicOperator = "and"
}
```
#### Items
La propiedad items contiene una colección de campos, operadores y valores. Puede usarlos para filtrar sus datos.
| Propiedad | Descripción | Tipo |
| --------- | ------------------------------------------------------ | ------ |
| Field | El nombre del campo por el que filtrar | String |
| Operator | El tipo de operador que se usará al filtrar los datos. | String |
| Value | El valor usado para filtrar | Object |
#### LogicOperator
El campo del operador lógico se usa para especificar el vínculo entre los filtros. Puede ser `and` u `or`.
#### QuickFilterValues
Contiene una colección de valores de filtro rápido que puede elegir cómo aplicar a sus datos.
#### QuickFilterLogicOperator
Contiene el operador lógico para los valores de filtro rápido especificados por el usuario. Puede ser `and` u `or`.
### Filtro personalizado
El cmdlet `Out-UDDataGridData` proporciona una implementación de filtrado para datos estáticos. Si usa este cmdlet, no necesita implementar el filtrado manualmente. Si tiene una fuente de datos remota, querrá proporcionar una implementación personalizada para el filtrado. A continuación se muestra un ejemplo de uso de la estructura de filtro en `$EventData` para eliminar filas según los filtros proporcionados por el usuario.
```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 rápido personalizado
El filtro rápido es similar a un simple cuadro de búsqueda. Puede habilitar el filtrado rápido con el parámetro `-ShowQuickFilter` en `New-UDDataGrid`. Aparecerá un cuadro de búsqueda en la parte superior derecha de la cuadrícula de datos. Cuando el usuario introduzca un valor en la cuadrícula de datos, se proporcionará la información del filtro rápido.
A continuación se muestra un ejemplo de cómo usar los filtros rápidos. `Out-UDDataGridData` implementa el filtrado rápido y no es necesario cuando se usan datos locales. Lo siguiente se hace solo con fines de demostración.
```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
```
## Ordenación
El objeto `$EventData` contendrá una propiedad `Sort` cuando el usuario ordene la cuadrícula de datos. Contiene propiedades para cada columna que se ordena. Las propiedades comenzarán en 0 y se incrementarán a medida que se ordenen más columnas.
Por ejemplo, puede acceder a la primera columna ordenada de la siguiente manera.
```powershell
$EventData.Sort.'0'.field
```
También recibirá la dirección de ordenación de cada columna.
| Propiedad | Descripción | Tipo |
| --------- | ---------------------------------------- | --------- |
| Field | El campo por el que ordenar. | String |
| Sort | La dirección en la que ordenar el campo. | asc, desc |
## Contenido detallado
Puede usar el controlador de eventos `-LoadDetailContent` para mostrar información adicional sobre la fila que está expandiendo. La información sobre la fila actual está disponible en `$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
}
```
### Ejemplo: cuadrículas de datos anidadas
Puede usar el parámetro -LoadDetailContent para buscar datos anidados sobre un objeto. En este ejemplo, cargamos una cuadrícula de datos de máquinas virtuales y mostramos el nombre, el sistema operativo, la memoria y los núcleos de CPU. Al expandir el contenido detallado se proporciona una cuadrícula de datos de las tarjetas de red disponibles en la máquina virtual. En este ejemplo usamos datos ficticios, pero podría usar cualquier cmdlet disponible para 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
}
}
```
## Edición
Las tablas proporcionan compatibilidad con el editor especificando el controlador de eventos `-OnEdit`. Los nuevos datos de la fila se proporcionarán como `$EventData`. Puede elegir devolver información actualizada de la fila (por ejemplo, ajustar algo que el usuario haya introducido) y devolverla desde el controlador de eventos. Si no devuelve nada, la fila reflejará lo que el usuario introdujo.
El `$EventData` tiene el siguiente formato.
```powershell
@{
newRow = @{}
oldRow = @{}
}
```
Asegúrese de proporcionar la propiedad `editable` a cada columna que desee que el usuario edite.
```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
}
}
```
## Selección
Puede habilitar la selección de filas usando el parámetro `-CheckboxSelection` para mostrar casillas de verificación para las filas a seleccionar. La selección de filas requiere un ID determinista para las filas de datos proporcionadas. En el ejemplo siguiente, verá que cada fila tiene un ID específico especificado.
```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
```
Puede acceder a los datos seleccionados con el controlador de eventos `-OnSelectionChange` o recuperando los ID de las filas mediante `Get-UDElement`.
```powershell
New-UDButton -Text 'Get Selected Rows' -OnClick {
$Value = Get-UDElement -ID 'DataGrid'
Show-UDToast $Value.selection
}
```
## Exportación personalizada
Para anular la funcionalidad de exportación predeterminada, use el controlador de eventos `-OnExport`. `$EventData` será el mismo objeto de contexto usado para `-LoadRows`. Debe usar `Out-UDDataGridExport` para devolver los datos desde `-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'
}
```
### Múltiples tipos de exportación
Cuando use una exportación personalizada, puede usar el parámetro `-ExportOptions`para definir varios tipos de exportación. Cuando el usuario seleccione el tipo de exportación, puede comprobar la propiedad Type de `$EventData`para determinar qué tipo de exportación producir.
```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")
```
## Ejemplo: datos estáticos
En este ejemplo, generamos un array de 10.000 registros. Crearemos una nueva función, `Out-UDDataGridData`, para gestionar la paginación, la ordenación y el filtrado. Esta función ya está incluida en el [módulo Universal](/powershell-universal/es/comandos-de-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
}
```
## Ejemplo: datos SQL
En este ejemplo, consultaremos la base de datos de 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/es/comandos-de-powershell/new-uddatagrid.md)
* [New-UDDataGridColumn](/powershell-universal/es/comandos-de-powershell/new-uddatagridcolumn.md)
* [Out-UDDataGridData](/powershell-universal/es/comandos-de-powershell/out-uddatagriddata.md)
* [Out-UDDataGridExport](/powershell-universal/es/comandos-de-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/es/aplicaciones/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.