Specific Field Templates

Specific field templates allow you to create a template for a given column on a table. While the template is associated with a specific field, it can use all row data for rendering. A common example is a column with different actions the user can perform on a row (e.g view, edit and delete).

Unlike table and field type templates, specific field types are naturally defined on the single table level, so template would be placed under templates/_tablecloth/tables/{tableHandle}/fields. However, if you are using the same field across multiple tables and would like it to render consistently, you can also place it in the presets folder under templates/_tablecloth/presets/{presetName}/fields.

Let us create an actions template on the id column (this assumes you have selected this column in the table definition step)

Assuming a table handle of entries we will save the template under templates/_tablecloth/tables/entries/fields/id.twig:

<a :href="`/entries/${ {{ value }} }`">
    View
</a>
<template x-if="row.editable">
<a :href="`/entries/${ {{ value }} }/edit`">
    Edit
</a>
</template>

Note we are using AlpineJs syntax to render the template. While the syntax is declarative and self-explanatory you will need some basic knowledge of Alpine templating syntax. The most useful directives are probably x-if for conditional rendering, and x-for for looping over arrays (e.g in multiple list fields). Note that both directives must be declared on a template wrapper.

The {{value}} variable is a Tablecloth twig helper that is rendered as row[column.handle], i.e the value of the current column. In this case id.

All other row values can be accessed using the row.{handle} syntax. E.g in the example above we are using row.editable to determine whether we should show the edit link. This is assuming that we have a Boolean field (lightswitch or checkbox) with an editable handle on Craft, and that this field has been included in the table definition step, either as a visible or a hidden column.

You can find all available data and handles by looking at the response to the initial table load request under the Network tab on the Developer Console of your browser.