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
  • Presets
  • Specific table templates
  • Template Types
  1. Table Rendering

Templates

Build your own UI

PreviousDefault TableNextTable Templates

Last updated 2 years ago

While the default template with its togglable components may be perfectly enough for your use-case, we know that when it comes to UI flexibility is key, which is why literally everything, from the actual table template, to the rendering of individual cells, can be customized by the user.

The templating engine is the axis around which the front-end part of Tablecloth revolves. Technically, it relies on twig partials and AlpineJs to render the desired view. This makes swapping components and rendering custom cell content a breeze. No need to compile anything. Just place your templates in the right folder and let Tablecloth do its magic.

for an example of a blog listing page powered by Tablecloth.

Presets

Templates are gathered under presets, which are essentially a set of instructions for rendering a table.

The way it works is by creating a folder under templates/_tablecloth/presets/{presetName} which includes all of the relevant templates. If none is found, Tablecloth will fallback to the default preset.

So if we were to create a grid preset, we would put all templates under templates/_tablecloth/presets/grid.

Then under the table Options tab, we select the grid preset and save the table:

Specific table templates

A more targeted template definition is limiting the templates to a specific table. This is almost always the case with the third template type below, namely .

Specific table templates should be saved under templates/_tablecloth/tables/{tableName} where {tableName} is the handle of the given table. So for a posts table the templates would be saved under templates/_tablecloth/tables/posts

Once defined Tablecloth will automatically use the given template. Note that specific table templates take precedence over preset templates.

Template Types

There are three types of templates, each covered in a separate section, but all follow the same principle:

Table Templates
Field Type Templates
Specific Field Templates
Click here
Specific Field Templates