> 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/table.md).
# Tabla
Las tablas muestran conjuntos de datos. Se pueden personalizar por completo.
Las tablas muestran la información de forma fácil de examinar, para que los usuarios puedan buscar patrones e información útil. Se pueden insertar en contenido principal, como tarjetas.
## Tabla simple
Un ejemplo sencillo y sin adornos. Las columnas de la tabla se definen a partir de los datos.
```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
```
## Tabla con columnas personalizadas
Defina columnas personalizadas para su tabla.
```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
```
## Tabla con renderizado de columnas personalizado
Defina el renderizado de columnas. La ordenación y la exportación siguen funcionando en la tabla.
```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
```
## Ancho de columna de la tabla
El ancho de columna se puede definir mediante el parámetro `-Width`. También puede decidir truncar las columnas que se extiendan más allá de ese ancho.
```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
```
## Filtros
Puede configurar filtros personalizados por columna. La tabla admite los filtros `text`, `select`, `fuzzy` , `slider`, `range`, `date` , `number` y `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
```
### Opciones estáticas para los filtros de selección
Cuando se utiliza el procesamiento en el servidor, los filtros disponibles pueden no mostrar todo el rango de opciones, ya que el desplegable de selección solo tiene acceso a la página de resultados actual. Para evitarlo, puede utilizar el parámetro `-Options` en `New-UDTableColumn`.
```powershell
New-UDTableColumn -Property Dessert -Title 'Dessert' -Filter -FilterType 'Select' -Options @('Frozen yoghurt', 'Eclair', 'Cupcake')
```
## Buscar
Para habilitar la búsqueda, utilice el parámetro `-ShowSearch` en `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
```
Cuando utilice columnas personalizadas, deberá añadir el parámetro `-IncludeInSearch` a las columnas que desee incluir en la búsqueda.
```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
```
## Tabla con procesamiento en el servidor
Procese los datos en el servidor para poder realizar la paginación, el filtrado, la ordenación y la búsqueda en sistemas como SQL. Para implementar una tabla en el servidor, utilizará el parámetro `-LoadData`. Este parámetro acepta un `ScriptBlock`. La variable `$EventData` incluye información sobre el estado de la tabla. Puede utilizar cmdlets para procesar los datos en función de esta información.
### Estructura de $EventData
El objeto `$EventData` contiene las siguientes propiedades.
| Nombre de la propiedad | Tipo | Descripción |
| ---------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| Filters |
Hashtable\[]
@{ id = 'fieldName'
value = 'filterValue' }
| Una lista de valores de filtro. Cada hashtable tiene una propiedad `Id` y una propiedad `Value`. |
| OrderBy |
Hashtable
@{ field = "fieldName" }
| Nombre de la propiedad por la que ordenar. |
| OrderDirection | string | `asc` o `desc` según el orden de clasificación. |
| Page | int | La página actual (empezando por 0). |
| PageSize | int | El tamaño de página seleccionado. |
| Properties | string\[] | Una matriz de propiedades que se muestran en la tabla. |
| Search | string | Una cadena de búsqueda proporcionada por el usuario. |
| TotalCount | int | El número total de registros antes del filtrado o la paginación. |
### Ejemplo
```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
```
### Recuperar los datos mostrados
Puede que desee permitir que el usuario actúe sobre el conjunto actual de datos mostrados. Para ello, utilice `Get-UDElement` en el objeto de entrada del que desee recuperar los datos y obtenga la tabla por Id. Una vez que tenga el elemento, puede utilizar la propiedad `Data` del elemento para obtener una matriz de las filas mostradas actualmente.
```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
```
## Paginación
De forma predeterminada, la paginación está deshabilitada y las tablas crecerán según el número de filas de datos que proporcione. Puede habilitar la paginación utilizando el cmdlet `-ShowPagination` (alias `-Paging`). Puede configurar el tamaño de página utilizando el 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
```
### Deshabilitar el tamaño de página Todo
De forma predeterminada, el selector de tamaño de página ofrece una opción para mostrar todas las filas. Si desea impedir que los usuarios hagan esto, utilice el cmdlet `-DisablePageSizeAll`.
### Ubicación de la paginación
Puede cambiar la ubicación del control de paginación utilizando el parámetro `-PaginationLocation`. Acepta top, bottom y both.
### Tamaños de página
El tamaño de página, de forma predeterminada, se establece en 5. Los usuarios pueden ajustar el número de filas por página utilizando el desplegable Filas por página. Puede ajustar el tamaño de página predeterminado utilizando el parámetro `-PageSize`. Para ajustar los valores disponibles en el desplegable Filas por página, puede pasar una matriz de enteros al parámetro `-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)
```
## Ordenación
Para habilitar la ordenación de una tabla, utilice el parámetro `-ShowSort`. Cuando habilite la ordenación, podrá hacer clic en los encabezados de la tabla para ordenarla haciendo clic en los encabezados. De forma predeterminada, la ordenación múltiple está habilitada. Para ordenar por varias columnas, mantenga pulsada la tecla Mayús y haga clic en el encabezado de una columna.
```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
```
Puede controlar qué columnas se pueden ordenar utilizando `New-UDTableColumn` y el parámetro `-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
```
### Deshabilitar la eliminación de la ordenación
De forma predeterminada, la ordenación de una tabla tiene 3 estados: sin ordenar, ascendente y descendente. Si desea deshabilitar el estado sin ordenar, utilice el parámetro `-DisableSortRemove` de `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
```
## Selección
### Datos de tabla estáticos
Las tablas admiten la selección de filas. Puede crear un controlador de eventos para el parámetro `OnRowSelected` a fin de recibir cuándo se selecciona o se anula la selección de una nueva fila, o puede utilizar `Get-UDElement` para recuperar el conjunto actual de filas seleccionadas.
El siguiente ejemplo crea una tabla con la selección de filas habilitada. Se muestra un aviso al hacer clic en la fila o al hacer clic en el botón 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 variable `$EventData` para el evento `-OnRowSelected` incluirá todas las columnas como propiedades y una propiedad selected que indica si la fila se ha seleccionado o se ha anulado su selección.
Por ejemplo, los datos de la tabla de servicios tendrían este aspecto.
```powershell
@{
Id = 0
Name = 'AESMService',
Status = 'Running'
StartupType = 'AutomaticDelayedStart'
StartType = 'Automation'
selected = $true
}
```
### Tablas dinámicas (en el servidor)
Cuando se utiliza la selección junto con `-LoadData`, el `-OnRowSelected $EventData` contendrá los ID de las filas y no todos los datos de la fila. Seguirá indicando si la fila se ha seleccionado o se ha anulado su selección.
## Filas contraíbles
Puede incluir información adicional en la tabla utilizando el parámetro `-OnRowExpand` de `New-UDTable`. Acepta un ScriptBlock que puede utilizar para devolver componentes adicionales.
```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'
)
```
## Exportación
Las tablas admiten la exportación de los datos que contienen. Puede exportar como CSV, XLSX, JSON o PDF. Puede definir qué columnas incluir en una exportación y elegir exportar solo la página actual o todos los datos de la tabla.
```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
```
### Columnas ocultas
Las columnas ocultas le permiten incluir datos que no se muestran en la tabla pero que sí se incluyen en los datos exportados.
Lo siguiente oculta la columna StartType al usuario pero la incluye en la exportación.
```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
```
## Exportación en el servidor
Puede controlar la funcionalidad de exportación con un bloque de script de PowerShell. Esto resulta útil al exportar desde orígenes en el servidor, como tablas de SQL Server.
En este ejemplo, tengo una tabla SQL que contiene podcasts. Al exportar, recibirá información sobre el estado actual de la tabla para poder personalizar qué datos se exportan.
```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
}
```
## Personalizar las opciones de exportación
Puede decidir qué opciones de exportación presentar a sus usuarios utilizando el cmdlet `-ExportOption`. El siguiente ejemplo solo mostraría la opción de exportación 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"
```
## Personalizar las etiquetas
Puede utilizar el parámetro `-TextOption` junto con el cmdlet `New-UDTableTextOption` para establecer los campos de texto dentro de la tabla.
```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
```
## Actualizar con un botón
### Parámetro Data
Puede actualizar una tabla de forma externa colocándola dentro de una región dinámica y utilizando `Sync-UDElement`.
Este ejemplo crea un botón para actualizar la tabla.
```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)
}
```
### Parámetro LoadData
Si utiliza el parámetro `-LoadData`, puede sincronizar la tabla directamente. Esto tiene la ventaja de mantener el estado de la tabla, como la página y el filtrado, después de la actualización.
```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'
```
## Mostrar el botón de actualización
Puede utilizar el parámetro `-ShowRefresh` para proporcionar un botón de actualización en las tablas del servidor.
```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
}
```
## Colores de fila alternos
Puede utilizar un tema para crear una tabla con colores de fila alternos.
```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
```
## Estilos de fila personalizados
Estilo de fila personalizado de la tabla
Utilice el parámetro `-OnRowStyle` para aplicar estilo a las filas en función de su contenido. Devuelva un hashtable con estilos CSS para la fila.
```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/es/comandos-de-powershell/new-udtable.md)
* [New-UDTableColumn](/powershell-universal/es/comandos-de-powershell/new-udtablecolumn.md)
* [Out-UDTableColumn](/powershell-universal/es/comandos-de-powershell/out-udtabledata.md)
* [New-UDTableTextOption](/powershell-universal/es/comandos-de-powershell/new-udtabletextoption.md)
#### Véase también
* [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/es/aplicaciones/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.