Craft Tablecloth
  • What is Tablecloth?
  • Installation
  • Table Definition
    • Data Source
    • Columns
    • Options
    • General Settings
    • Advanced
  • Table Rendering
    • Default Table
    • Templates
      • Table Templates
        • Cards Layout Example
      • Field Type Templates
      • Specific Field Templates
      • Child Rows
  • Programmatic Interaction
    • Interacting with The Table
    • Events
    • Methods
  • Localization
  • Contact Us
Powered by GitBook
On this page
  • Numeric and Date Fields
  • Relation Fields
  1. Table Rendering
  2. Templates

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

Intl.NumberFormat().format(val)
<span x-text="numberFormat({{ value }},'us',{style:'currency',currency:'USD'})"></span>

Date Fields

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

  • Entries:

    • title

    • slug

    • url

  • Users:

    • firstName

    • lastName

    • username

    • fullName

PreviousCards Layout ExampleNextSpecific Field Templates

Last updated 3 years ago

The default rendering of numeric fields uses the native object:

You can override this by using the numberFormat helper in a or a . E.g, to render a number as US dollars:

Dates are rendered using the library, based on the date format set in the table settings.

thumbnail - URL to the thumbnail (size is determined in ).

Intl.NumberFormat()
field type template
specific field template
date-fns
settings