# Column Formats The purpose of the formatting is to convert a [`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) and [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object to a human-readable string by using the culture-specific settings. To apply specific column formatting, set the [`format`](https://www.telerik.com/kendo-angular-ui/components/grid/api/columncomponent#format) option to the `` tag in the [Angular Grid](https://www.telerik.com/kendo-angular-ui/components/grid). ```html ``` Depending on the data type, the `format` option accepts different values. * [Number Column Formatting](https://www.telerik.com/kendo-angular-ui/components/grid/columns/formats#number-column-formatting) * [Date Column Formatting](https://www.telerik.com/kendo-angular-ui/components/grid/columns/formats#date-column-formatting) > The format is applied to the built-in filter components as well. For more details, refer to the [Date Filter](https://www.telerik.com/kendo-angular-ui/components/grid/filtering/basics#date-filter) documentation section. ## Number Column Formatting You can set the [`format`](https://www.telerik.com/kendo-angular-ui/components/grid/api/columncomponent#format) option to: * [Predefined number formats](https://www.telerik.com/kendo-angular-ui/components/grid/columns/formats#predefined-number-formats) * [Number format objects](https://www.telerik.com/kendo-angular-ui/components/grid/columns/formats#number-format-objects) * [Custom number formats](https://www.telerik.com/kendo-angular-ui/components/grid/columns/formats#custom-number-formats) ### Predefined Number Formats The predefined number formats are string literal specifiers which format numbers based on the locale. ```html ``` The supported predefined format specifiers are: * `n`—Formats the number as a decimal number based on the locale. To specify the precision, you can add a number after the `n`. By default, the number is formatted and rounded to three decimal digits. * `c`—Formats the number as a currency based on the locale. The latest currency symbol of the specified locale is used for the formatting. To specify the precision, add a number after `c`. * `a`—The same as the `c` specifier except that the `a` specifier uses the currency accounting format. * `p`—Formats the number as a percentage based on the locale. The passed number is multiplied by **100**. To specify the precision, add a number after `p`. By default, the number is formatted and rounded to zero decimal digits. * `e`—Formats the number in exponential notation. The following example demonstrates the predefined number format specifiers in action. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/columns/format/number/specifier/source.txt) ### Number Format Objects You can also format the Grid column by setting the [`format`](https://www.telerik.com/kendo-angular-ui/components/grid/api/columncomponent#format) option to a [`NumberFormatOptions`](https://www.telerik.com/kendo-angular-ui/components/globalization/internationalization/api/numberformatoptions) object. ```html ``` The following example demonstrates how to format the Grid column using `NumberFormatOptions` object. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/columns/format/number/object/source.txt) ### Custom Number Formats When the predefined format options do not fit the requirements, you can create a custom number format string by using one or more custom number specifiers. This approach is useful when you want to format a percentage value without multiplying the number by **100** or when the number should appear as is (without setting decimal points). The supported format specifiers are: * `0`—A zero placeholder. It replaces the zero with the corresponding digit if one is present. Otherwise, zero appears in the result string. * `#`—A digit placeholder. It replaces the Pound sign with the corresponding digit if one is present. Otherwise, no digit appears in the result string. * `.`—A decimal placeholder. It determines the location of the decimal separator in the result string. * `,`—A group separator placeholder. It inserts a localized group separator between each group. * `%`—A percentage placeholder. It multiplies a number by **100** and inserts a localized percentage symbol in the result string. * `$`—A currency placeholder. It is replaced by the locale currency symbol. * `;`—A section separator. It defines sections with separate format strings for positive, negative, and zero numbers. * `string` or `'string'`—A literal string delimiter. It indicates that the enclosed characters should be copied to the result string. * `\`—The backslash indicates that the next character should be treated as a literal character rather than as a special character or string delimiter. ```html ``` The following example demonstrates the custom number format specifiers in action. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/columns/format/number/custom/source.txt) ## Date Column Formatting You can set the [`format`](https://www.telerik.com/kendo-angular-ui/components/grid/api/columncomponent#format) option to: * [Predefined date formats](https://www.telerik.com/kendo-angular-ui/components/grid/columns/formats#predefined-date-formats) * [Date format objects](https://www.telerik.com/kendo-angular-ui/components/grid/columns/formats#date-format-objects) * [Custom date formats](https://www.telerik.com/kendo-angular-ui/components/grid/columns/formats#custom-date-formats) ### Predefined Date Formats The predefined date formats are specifiers that convert a valid [JavaScript `Date` object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) into a human readable date or time based on the locale. ```html ``` The following table lists the supported date format specifiers for the `en` locale. | Specifier | Description | Result | | --------- | -------------------------------------------------------------------------------- | -------------------------------------- | | `d` | Short date pattern: `M/d/y`. | `10/6/2025` | | `D` | Long date pattern: `EEEE, MMMM d, y`. | `Monday, November 6, 2025` | | `F` | Full date and time pattern: `EEEE, MMMM d, y h:mm:ss a`. | `Monday, November 6, 2025 12:00:00 AM` | | `g` | General date and time pattern (short time): `M/d/y h:mm a`. | `11/6/2025 12:00 AM` | | `G` | General date and time pattern (long time): `M/d/y h:mm:ss a`. | `11/6/2025 12:00:00 AM` | | `m` | Renders an abbreviated month and day pattern: `MMM d`. | `Nov 6` | | `M` | Wide month and day pattern: `MMMM d`. | `November 6` | | `y` | Renders an abbreviated month/year pattern: `MMM y`. | `Nov 2025` | | `Y` | Wide month and year pattern: `MMMM y`. | `November 2025` | | `t` | Short time pattern: `h:mm a`. | `2:30 PM` | | `T` | Long time pattern: `h:mm:ss a`. | `2:30:45 PM` | | `s` | Renders a universal sortable local date and time pattern: `yyyy-MM-dd HH:mm:ss`. | `2025-11-06T00:00:00` | | `u` | Renders a universal sortable UTC date and time pattern: `yyyy-MM-dd HH:mm:ssZ`. | `2025-11-06 00:00:00Z` | The following example demonstrates the predefined date format specifiers in action. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/columns/format/date/specifier/source.txt) ### Date Format Objects You can format the Grid date column by setting the [`format`](https://www.telerik.com/kendo-angular-ui/components/grid/api/columncomponent#format) option to an object. The supported types of format options are: * Predefined formats (defined by the [Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/))—Sets the format from the [`dateFormats`](https://unicode.org/reports/tr35/tr35-dates.html#dateFormats), [`timeFormats`](https://unicode.org/reports/tr35/tr35-dates.html#timeFormats), and [`dateTimeFormats`](https://unicode.org/reports/tr35/tr35-dates.html#dateTimeFormats) elements of the calendar. ```html ``` * Skeleton formats—Sets the format from the [`availableFormats`](https://unicode.org/reports/tr35/tr35-dates.html#availableFormats_appendItems) of the calendar based on the date fields that you want to display. ```html ``` * Fields formats—Similar to the skeleton formats except that you need to set the required fields by using separate options in the same way as the [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) object. ```html ``` The following example demonstrates the date format objects in action. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/columns/format/date/object/source.txt) ### Custom Date Formats When the predefined date format options do not fit the requirements, you can create a custom date format string by using one or more custom date specifiers. This approach is useful when you want to format dates in a specific format. ```html ``` The following table lists the supported format specifiers that can be used in custom date formats: | Specifier | Description | Result | | --------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `y` | Renders the year. | | | `M` | Renders the month. | | | `L` | The same as the `M` specifier except that the `L` specifier uses the standalone names. | See `M`. | | `d` | Renders the day of the month. | | | `E` | Renders the day of the week. | | | `e` | The same as the `E` specifier except that it adds a numeric value that depends on the local starting day of the week. | | | `c` | The same as the `e` specifier except that it uses the standalone names. | See `e`. | | `a` | Renders the day period. | | | `h` | Renders the hour using a 12-hour clock from 1 to 12. | | | `H` | Renders the hour using a 24-hour clock from 1 to 23. | | | `k` | Renders the hour using a 24-hour clock from 1 to 24. | | | `K` | Renders the hour using a 12-hour clock from 0 to 11. | | | `m` | Renders the minutes from 0 to 59. | | | `s` | Renders the seconds from 0 to 59. | | | `S` | Renders the fractional seconds. It truncates based on the number of letters. | | | `q` | The same as the `Q` specifier except that the `q` specifier uses the standalone names. | See `Q`. | | `Q` | Renders a quarter of the year. | | | `z` | Renders the timezone. | | | `Z` | Renders the timezone. | | | `x` | The same as the `X` specifier except that the `x` specifier does not add the UTC indicator when the offset is `0` (zero). | See `X`. | | `X` | Renders the timezone. | | | `G` | Renders the era name. | | The following example demonstrates the custom date format specifiers in action. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/columns/format/date/custom/source.txt) ## Suggested Links * [Parsing and Formatting of Dates and Numbers](https://www.telerik.com/kendo-angular-ui/components/globalization/internationalization/parsing-and-formatting) * [Kendo Intl Date Formatting](https://github.com/telerik/kendo-intl/blob/develop/docs/date-formatting/index.md) * [Kendo Intl Number Formatting](https://github.com/telerik/kendo-intl/blob/develop/docs/num-formatting/index.md) * [API Reference of the ColumnComponent](https://www.telerik.com/kendo-angular-ui/components/grid/api/columncomponent) * [API Index of the Grid](https://www.telerik.com/kendo-angular-ui/components/grid/api) * [Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/)