Craft Tablecloth
Search
⌃K
Comment on page

Field Type Templates

While textual content does not require any template in order to be rendered, other, more complex data types require a definite output format. The package comes with default templates for all field types, which you can override per preset. Default field type templates are stored under src/templates/_site/types:
  • assets.twig
  • boolean.twig
  • categories.twig
  • childRowTable.twig
  • color.twig
  • entries.twig
  • tags.twig
  • url.twig
  • users.twig
You can override them by creating a file with an identical name under templates/_tablecloth/presets/{presetName}/types or templates/_tablecloth/tables/{tableHandle}/types, as the case may be.
E.g to override the color field template in a foo preset create the following file:
templates/_tablecloth/presets/foo/types/color.twig

Numeric and Date Fields

As numeric and date fields require formatting of the raw value itself they are manipulated using helper functions, rather than templates.

Numeric fields

The default rendering of numeric fields uses the native Intl.NumberFormat() object:
Intl.NumberFormat().format(val)
You can override this by using the numberFormat helper in a field type template or a specific field template. E.g, to render a number as US dollars:
<span x-text="numberFormat({{ value }},'us',{style:'currency',currency:'USD'})"></span>

Date Fields

Dates are rendered using the date-fns library, based on the date format set in the table settings.
When using a date field in a template you can manually format the date using the dateFormat helper. E.g:
<span x-text="dateFormat({{ value }},'d-m-Y')"></span>
Note that the second argument is optional. If omitted the date format will be determined by the table settings.

Relation Fields

Relation Fields include Categories, Tags, Assets, Entries and Users.
They all have a default template. Data structure is an array of objects. Each object consists of a value property, which is the element id of the given relation, and a data property, which contains additional data:
  • Categories:
    • title
    • url
  • Tags:
    • title
    • url
  • Assets:
    • title
    • url - URL to the full-size image
    • thumbnail - URL to the thumbnail (size is determined in settings).
  • Entries:
    • title
    • slug
    • url
  • Users:
    • firstName
    • lastName
    • username
    • fullName
    ​
Previous
Cards Layout Example
Next
Specific Field Templates
Last modified 1yr ago