Descripción general de los tipos de columnas React Grid

    React Grid proporciona un manejo predeterminado de los tipos de datos de columna número, cadena, fecha, booleano, moneda y porcentaje, según el cual estará presente la apariencia de las plantillas predeterminadas y de edición.

    React Grid Column Types Example

    React Grid Default Template

    Si desea habilitar una plantilla específica de tipo de datos, debe configurar la entrada dataType de la columna; de lo contrario, la columna se tratará como una columna de cadena, ya que ese es el valor predeterminado para dataType de la columna.

    Las siguientes secciones describen las plantillas predeterminadas para cada dataType.

    String

    ​dataType de esta columna no cambia la apariencia ni el formato del valor de la celda.

    Number

    Si el dataType se establece en número, el valor de la celda se formateará según la configuración locale de la aplicación o la cuadrícula, así como cuando se especifique la propiedad pipeArgs. Luego, el formato del número se cambiará según ellos, por ejemplo, podría cambiar:

    • Número de dígitos después del punto decimal
    • Separador decimal con, o.
    const formatOptions = new IgrColumnPipeArgs();
formatOptions.digitsInfo = "1.4-4";

<IgrColumn pipeArgs={formatOptions} dataType="number"></IgrColumn>

    DateTime, Date and Time

    La apariencia de las partes de fecha se establecerá (por ejemplo, día, mes, año) según el formato locale o la entrada pipeArgs. Los argumentos de canalización se pueden utilizar para especificar un formato de fecha personalizado o una zona horaria:

    • formato: el valor predeterminado para formatear la fecha es 'mediumDate'. Otras opciones disponibles son 'short', 'long', 'shortDate', 'fullDate', 'longTime', 'fullTime', etc.
    • zona horaria: la zona horaria del sistema local del usuario es el valor predeterminado. También se puede pasar el desplazamiento de la zona horaria o la abreviatura estándar GMT/UTC o de la zona horaria continental de EE. UU. Diferentes ejemplos de zonas horarias que mostrarán la hora correspondiente de la ubicación en cualquier parte del mundo:
    const formatOptions = new IgrColumnPipeArgs();
formatOptions.format = "long";
formatOptions.timezone = "UTC+0";

<IgrColumn pipeArgs={formatOptions} dataType="date"></IgrColumn>

    Zonas horarias disponibles:

    Zona horaria Valor
    Zona horaria alfa 'UTC+1'
    Hora central de Australia 'UTC+9:30/+10:30'
    Hora estándar de Arabia 'UTC+3'
    Hora estándar central 'UTC-6'
    Hora estándar de China 'UTC+8'
    Zona horaria delta 'UTC+4'
    Meridiano de Greenwich 'UTC+0'
    Hora estándar del Golfo 'UTC+4'
    Hora estándar de Hawái 'UTC-10'
    Hora estándar de la India 'UTC+4'

    ​IgrGrid acepta valores de fecha de tipo Objeto de fecha, Número (milisegundos), Una cadena de fecha y hora ISO. Esta sección muestra cómo configurar un formato de visualización personalizado.

    Como puede ver en el ejemplo, especificamos diferentes opciones de formato para mostrar los formatos disponibles para el tipo de columna específico. Por ejemplo, a continuación puede encontrar las opciones de formato para la parte de hora del objeto de fecha:

    const timeFormats = [
    { format: 'shortTime', eq: 'h:mm a' },
    { format: 'mediumTime', eq: 'h:mm:ss a' },
    { format: 'longTime', eq: 'h:mm:ss a z' },
    { format: 'fullTime', eq: 'h:mm:ss a zzzz' },
];

    Edición de celdas

    Cuando se trata de editar celdas según el tipo de columna, aparecerá un editor diferente:

    • DateTime: se utilizará DateTimeEditor. Este editor le dará instrucciones de máscara para los elementos de entrada que forman parte del objeto DateTime.
    • Date - IgrDatePicker will be used.
    • Time: se utilizará TimePicker.

    Filtración

    Se utilizarán los mismos editores enumerados anteriormente cuando se trata de filtrado rápido/filtrado estilo Excel. Estos son los siguientes operandos de filtrado que expone cada tipo:

    • DateTime y Date: es igual, no es igual, antes, después, hoy, ayer, este mes, el mes pasado, el mes siguiente, este año, el año pasado, el año siguiente, vacío, no vacío, nulo, no nulo;
    • Time: en, no en, antes, después, en o antes, en o después, vacío, no vacío, nulo, no nulo;

    resúmenes

    Los operandos de resumen disponibles serán Count, Early (fecha/hora) y Latest (fecha/hora).

    Clasificación

    • Time: las columnas se clasifican según la parte de tiempo del objeto; se ignorarán los ms.
    • Date: la columna se ordena según la parte de la fecha, ignora la parte de la hora.
    • DateTime: la columna se ordena según la fecha completa.

    Boolean

    La plantilla predeterminada utiliza íconos de materiales para la visualización de valores booleanos: ícono 'borrar' para valores falsos e ícono 'verificar' para valores verdaderos. En cuanto a la plantilla de edición, utiliza el componente IgrCheckbox.

    <IgrColumn dataType="boolean"></IgrColumn>

    Image

    La plantilla predeterminada utiliza el valor proveniente de los datos como fuente de imagen para una plantilla de imagen predeterminada. La plantilla de imagen predeterminada extraerá el nombre del archivo de imagen y lo establecerá como atributo alt de la imagen para cumplir con el requisito de accesibilidad. El tamaño de celda mostrado se ajusta a los tamaños de las imágenes representadas, así que tenga en cuenta que las imágenes grandes se seguirán representando y las filas de la cuadrícula serán tan grandes como las imágenes en la columna de imágenes. El filtrado, la clasificación y la agrupación estarán desactivados de forma predeterminada para las columnas de tipo de imagen. Si desea habilitarlos, debe proporcionar estrategias personalizadas que realicen las operaciones de datos.

    <IgrColumn field="Image" dataType="image"></IgrColumn>

    Cuando se utiliza autoGenerate para las columnas, la cuadrícula analiza los valores en el primer registro de datos. Si un valor es de tipo cadena y coincide con el patrón de una URL que termina en una extensión de imagen (gif, jpg, jpeg, tiff, png, webp, bmp), entonces la columna se marcará automáticamente como dataType === GridColumnDataType.Image y Se representará una plantilla de imagen predeterminada.

    Currency

    Plantilla predeterminada

    La plantilla predeterminada mostrará un valor numérico con un símbolo de moneda que tendrá un prefijo o un sufijo.

    const formatOptions = new IgrColumnPipeArgs();
formatOptions.digitsInfo = "1.4-4";
formatOptions.display = "symbol-narrow";

<IgrColumn pipeArgs={formatOptions} dataType="currency" field="UnitsInStock"></IgrColumn>
    Parámetro Descripción
    dígitosInfo Representa la representación decimal del valor de la moneda.
    mostrar* Muestra el valor mediante símbolo estrecho o ancho.

    *display: para la configuración regional predeterminada en EE. UU., el código USD se puede representar mediante el símbolo estrecho $ o el símbolo ancho US$.

    Al editar el valor de la celda, el símbolo de moneda será visible como sufijo o prefijo. Se puede encontrar más información sobre esto en el tema oficial de edición de Cell.

    Cuando se utilizan las teclas de flecha arriba/abajo, el valor aumentará/disminuirá con un paso basado en digitsInfo - minFractionDigits (el número mínimo de dígitos después del punto decimal. El valor predeterminado es 0)

    Percent

    La plantilla predeterminada muestra el porcentaje equivalente del valor numérico subyacente. El valor de la celda mostrada es un resultado multiplicado por el factor de visualización de '100'; por ejemplo, como el factor predeterminado es 100 y el "valor" pasado a la celda es 0,123, el valor de la celda mostrada será "12,3%".

    Cuando se trata de edición de celdas, el valor será el mismo que el valor de la fuente de datos: el factor de visualización es '1'. Al editar la celda, se mostrará una vista previa del valor porcentual como elemento sufijo. Por ejemplo, al editar '0,0547', el elemento de vista previa mostrará '5,47%'.

    /**
* Decimal representation options, specified by a string in the following format:
* `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`.
* `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1.
* `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0.
* `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3.
*/
const formatOptions = new IgrColumnPipeArgs();
formatOptions.digitsInfo = "2.2-3";

<IgrColumn pipeArgs={formatOptions} dataType="percent"></IgrColumn>

    [!Note] When using up/down arrow keys the value will increment/decrement with a step based on the digitsInfo - minFractionDigits (The minimum number of digits after the decimal point. Default is 0)

    Default Editing Template

    Vea la parte de plantillas de edición del tema Edición de cuadrículas.

    Custom Editing Template and Formatter

    La plantilla personalizada y la definición del formateador de columnas siempre tendrán prioridad sobre el conjunto de tipos de datos de la columna:

    Custom Template

    function editCellTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <input></input>
        </>
    );
}

<IgrGrid autoGenerate="false">
    <IgrColumn inlineEditorTemplate={editCellTemplate}></IgrColumn>
</IgrGrid>

    Column Formatter

    function formatCurrency(value: number) {
    return `$ ${value.toFixed(0)}`;
}

<IgrGrid autoGenerate="false">
    <IgrColumn formatter={formatCurrency} field="UnitsInStock"></IgrColumn>
</IgrGrid>

    API References

    Additional Resources