Tipos de columnas de cuadrícula Angular

Ignite UI for Angular 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.

Angular Column Types Example

Plantilla predeterminada

Si desea habilitar una plantilla específica del 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 el tipo de datos de la columna. Veamos cuáles son las plantillas predeterminadas para cada tipo.

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.

public options = {
  digitsInfo: '1.4-4',
};
public formatOptions = this.options;

<igx-column [pipeArgs]="formatOptions" [dataType]="'number'">
</igx-column>

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 "corta", "larga", "fecha corta", "fecha completa", "tiempo largo", "tiempo completo", etc. Esta es una lista completa de todas las opciones de formato predefinidas disponibles.
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:

public formatDateOptions = {
    /** The date/time components that a date column will display, using predefined options or a custom format string. */
    /** e.g 'dd/mm/yyyy' or 'shortDate' **/
    format: 'longDate',
    /** A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation. */
    timezone: 'GMT'
};
public formatOptions = this.options;

<igx-column [pipeArgs]="formatDateOptions" [dataType]="'date'">
</igx-column>

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'

La cuadrícula 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:

// Time format with equivalent example
public 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á la directiva IgxDateTimeEditor. Este editor le dará instrucciones de máscara para los elementos de entrada que forman parte del objeto DateTime.
fecha: se utilizará el componente IgxDatePicker.
time: se utilizará el componente IgxTimePicker.

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:

fecha, hora y fecha: 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;
tiempo: 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

La columna de tipo de tiempo se clasifica según la porción de tiempo del objeto; se ignorarán los ms. La columna de tipo de fecha se ordena según la parte de la fecha, ignora la parte de la hora. La columna DateTime 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 igx-checkbox.

<igx-column [dataType]="'boolean'">
</igx-column>

Currency

Plantilla predeterminada

La plantilla predeterminada mostrará un valor numérico con un símbolo de moneda que tendrá un prefijo o un sufijo. Tanto la ubicación del símbolo de moneda como el formato del valor numérico se basan en la locale de la aplicación LOCALE_ID o Grid proporcionada.

Usando LOCALE_ID

import { LOCALE_ID } from '@angular/core';
...

 @Component({
    selector: 'app-component.sample',
    templateUrl: 'grid-component.sample.html',
    providers: [{provide: LOCALE_ID, useValue: 'fr-FR' }]
})

Usando la configuración regional de Grid

<igx-grid [locale]="'fr-FR'" [data]="data">
</igx-grid>

Al utilizar la entrada pipeArgs, el usuario final puede personalizar el formato del número mediante punto decimal, código de moneda y visualización.

public options = {
  digitsInfo: '3.4-4',
  currencyCode: 'USD',
  display: 'symbol-narrow'
};
public formatOptions = this.options;

<igx-column field="UnitsInStock"
    [pipeArgs]="formatOptions"
    [dataType]="'currency'">
</igx-column>

Parámetro	Descripción
dígitosInfo	Representa la representación decimal del valor de la moneda.
código de moneda	Código de moneda ISO 4217
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.

Note

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%'.

public options = {
    /**
    * 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.
    */
    digitsInfo: '2.2-3'
};
public formatPercentOptions = this.options;

<igx-column field="UnitsInStock"
    [pipeArgs]="formatPercentOptions"
    [dataType]="'percent'">
</igx-column>

Note

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.

<igx-column [dataType]="'image'">
</igx-column>

Al generar columnas automáticamente, 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.

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

<igx-grid #grid1 [data]="data | async" [autoGenerate]="false">
    <igx-column [field]="'UnitsInStock'" [dataType]="'currency'" [pipeArgs]="formatOptions" [editable]="true">
        <ng-template igxCellEditor let-value>
            {{ value | currency:'USD':'symbol':'1.0-0'}}
        </ng-template>
    </igx-column>
</igx-grid>

Column formatter

 // Through column formatter property
public formatCurrency(value: number) {
    return `Dollar sign ${value.toFixed(0)}`;
}

public init(column: IgxColumnComponent) {
    switch (column.field) {
        case 'UnitsInStock':
            column.formatter = this.formatCurrency;
            break;
        default:
            return;
}

API References

IgxGridCell
Args de tubería de columna
Ubicación de la cuadrícula
Tipo de datos de columna

Additional Resources

Para plantillas personalizadas, puede ver el tema de edición de celdas.
Tema de descripción general de la cuadrícula
Editando tema
Tema de resúmenes

Tipos de columnas de cuadrícula Angular

Angular Column Types Example

Plantilla predeterminada

String

Number

DateTime, Date and Time

Edición de celdas

Filtración

resúmenes

Clasificación

Boolean

Currency

Plantilla predeterminada

Note

Percent

Note

Image

Default editing template

Custom editing template and formatter

Custom template

Column formatter

API References

Additional Resources

Tematización