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.

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í.

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.

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.

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.

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.

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.

@{
    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.

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.

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.

$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.

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.

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.

@{
    newRow = @{}
    oldRow = @{}
}

Asegúrese de proporcionar la propiedad editable a cada columna que desee que el usuario edite.

$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.

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.

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.

$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 -ExportOptionspara definir varios tipos de exportación. Cuando el usuario seleccione el tipo de exportación, puede comprobar la propiedad Type de $EventDatapara determinar qué tipo de exportación producir.

$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.

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.

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
• New-UDDataGridColumn
• Out-UDDataGridData
• Out-UDDataGridExport