Ignite UI for Angular Grid provides a default handling of number, string, date, boolean, currency and percent column data types, based on which the appearance of the default and editing templates will be present.
最速で機能豊富な Angular Data Grid は、ページング、ソート、フィルタリング、グループ化、PDF および Excel へのエクスポートなどの機能を提供します。究極のアプリ構築エクスペリエンスとデータ操作に必要なすべてが揃っています。
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
Default template
If you want to enable a data type-specific template, you should set the column dataType input otherwise the column will be treated as a string column since that is the default value for column dataType. Let's see what are the default templates for each type.
String
This column dataType is not changing the appearance or format of the cell value.
Number
If the dataType is set to number, the cell value will be formatted based on application or grid's locale settings, as well as when pipeArgs property is specified. Then the number format will be changed based on them, for example it might change the:
Number of digits after the decimal point
Decimal separator with , or .
public options = {
digitsInfo: '1.4-4',
};
public formatOptions = this.options;
ts
The appearance of the date portions will be set (e.g. day, month, year) based on locale format or pipeArgs input. The pipe arguments can be used to specify a custom date format or timezone:
format - The default value for formatting the date is 'mediumDate'. Other available options are 'short', 'long', 'shortDate', 'fullDate', 'longTime', 'fulLTime' and etc. This is a full list of all available pre-defined format options.
timezone - The user's local system timezone is the default value. The timezone offset or standard GMT/UTC or continental US timezone abbreviation can also be passed. Different timezone examples which will display the corresponding time of the location anywhere in the world:
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;
ts
As you can see in the sample, we specify a different format options in order to showcase the available formats for the specific column type. For example, below you can find the format options for the time portion of the date object:
// Time format with equivalent examplepublic 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' },
];
ts
Cell editing
When it comes to cell editing based on the column type a different editor will appear:
dateTime - IgxDateTimeEditor directive will be used. This editor will give you a mask directions for the input elements part of the DateTime object.
The same editors listed above will be used when it comes to Quick Filtering/Excel-style Filtering. These are the following filtering operands that each type exposes:
dateTime and date - Equals, Does Not Equal, Before, After, Today, Yesterday, This Month, Last Month, Next Month, This Year, Last Year, Next Year, Empty, Not Empty, Null, Not Null;
time - At, Not At, Before, After, At or Before, At or After, Empty, Not Empty, Null, Not Null;
Summaries
The available Summary operands will be Count, Earliest (date/time) and Latest (date/time).
Sorting
Time type column sorts based on the time portion of the object, ms will be disregarded.
Date type column sorts based on the date portion, disregards the time portion.
DateTime column sorts based on the full date
Boolean
The default template is using material icons for visualization of boolean values - 'clear' icon for false values and 'check' icon for true values. As for the editing template, it is using igx-checkbox component.
The default template will show a numeric value with currency symbol that would be either prefixed or suffixed. Both currency symbol location and number value formatting is based on the provided Application LOCALE_ID or Grid locale.
Represents Decimal representation of currency value
currencyCode
ISO 4217 currency code
display*
Displays the value by narrow or wide symbol
*display - for the default en-US locale, the code USD can be represented by the narrow symbol $ or the wide symbol US$.
Upon editing of cell's value the currency symbol will be visible as suffix or prefix. More about that could be found in the official Cell editing topic.
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)
Percent
Default template is showing the percent equivalent of the underlying numeric value. The displayed cell value is a multiplied result by display factor of '100' - for example, as the default factor is 100 and the "value" passed to the cell is 0.123, then the displayed cell value will be "12.3%".
When it comes to cell editing, the value will be the same as the data source value - the display factor is '1'. Upon editing of the cell a preview of the percent value will be shown as a suffix element.For example, while editing '0.0547' the preview element will show '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;
ts
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)
Image
Default template is using the value coming from the data as an image source to a default image template. The default image template will extract the name of the image file and set it as alt attribute of the image to meet the accessibility requirement. The displayed cell size is adjusted to the sizes of the images rendered, so keep in mind that large images will still be rendered and the grid rows will become as large as the images in the image column. Filtering, sorting and grouping will be turned off by default for image type columns. If you want to enable them, you need to provide custom strategies which perform the data operations.
When auto-generating columns, the grid analyses the values in the first data record. If a value is of type string and matches the pattern of a url ending in an image extension (gif, jpg, jpeg, tiff, png, webp, bmp) then the column will automatically be marked as dataType === GridColumnDataType.Image and a default image template will be rendered.
GitHub