---
title: Format Examples
group: Component Gallery
---
## PreviewFormat
Useful for rendering Table Cell data into different customizable formats, e.g:
### Currency
```html
```
### Bytes
```html
```
### Icon
```html
```
### Icon Rounded
```html
```
### Icon with custom class
```html
```
### Attachment (Image)
```html
```
### Attachment (Document)
```html
```
### Attachment (Document) with classes
```html
```
### Link
```html
```
### Link with class
```html
```
### Link Email
```html
```
### Link Phone
```html
```
## Using Formatters
Your App and custom templates can also utilize @servicestack/vue's [built-in formatting functions](/vue/use-formatters) from:
```js
import { useFormatters } from '@servicestack/vue'
const {
Formats, // Available format methods to use in
formatValue, // Format any value or object graph
currency, // Format number as Currency
bytes, // Format number in human readable disk size
link, // Format URL as link
linkTel, // Format Phone Number as tel: link
linkMailTo, // Format email as mailto: link
icon, // Format Image URL as an Icon
iconRounded, // Format Image URL as a full rounded Icon
attachment, // Format File attachment URL as an Attachment
hidden, // Format as empty string
time, // Format duration in time format
relativeTime, // Format Date as Relative Time from now
relativeTimeFromMs, // Format time in ms as Relative Time from now
formatDate, // Format as Date
formatNumber, // Format as Number
} = useFormatters()
```
Many of these formatting functions return rich HTML markup which will need to be rendered using Vue's **v-html** directive:
```html
```
## HtmlFormat
`HtmlFormat` can be used to render any Serializable object into a human-friendly HTML Format:
### Single Model
```html
```
### Item Collections
```html
```
### Nested Complex Types
```html
```
### Nested Complex Types with custom classes
When needed most default classes can be overridden with a custom **classes** function that can inspect the
type, tag, depth, and row index to return a custom class. The TypeScript function shows an example of checking
these different parameters to render a custom HTML resultset:
```html
```