Cuadrícula editable personalizada

Este ejemplo demuestra cómo personalizar el control de cuadrícula editable Power Apps como se describe en Personalizar el control de cuadrícula editable.

Este ejemplo cambia la página de cuadrícula principal por una tabla que está configurada para usar este control. Todas las columnas de texto usarán texto verde. Cualquier valor para la columna creditlimit se mostrará en azul si el valor es superior a 100 000 y en rojo en caso contrario.

Disponible para

Aplicaciones basadas en modelo

Código

Puede encontrar el código para la muestra aquí: PowerApps -Samples/component-framework/PowerAppsGridCustomizerControl/.

El cambio clave es PAGridCustomizer/customizers/CellRendererOverrides.tsx .

Este ejemplo utiliza la siguiente modificación para que el procesador de celdas cambie el color del texto de los campos de texto a verde y el color de la columna creditlimit depende del valor.

import { Label } from '@fluentui/react';
import * as React from 'react';
import { CellRendererOverrides } from '../types';

export const cellRendererOverrides: CellRendererOverrides = {
    ["Text"]: (props, col) => {
        // Render all text cells in green font
        return <Label style={{ color: 'green' }}>{props.formattedValue}</Label>
    },
    ["Currency"]: (props, col) => {
        // Only override the cell renderer for the CreditLimit column
        if (col.colDefs[col.columnIndex].name === 'creditlimit') {
            // Render the cell value in blue when the value is more than $100,000 and red otherwise
            if ((props.value as number) > 100000) {
                return <Label style={{ color: 'blue' }}>{props.formattedValue}</Label>
            }
            else {
                return <Label style={{ color: 'red' }}>{props.formattedValue}</Label>
            }
        }
    }
}

Temas relacionados

Personalice el control de cuadrícula editable (Vista previa)
Descargar componentes de ejemplo
¿Cómo usar los componentes de ejemplo?
Referencia de la API de Power Apps component framework
Referencia de esquema de manifiesto de Power Apps component framework

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).