Templates
Build your own UI
Last updated
Build your own UI
Last updated
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.
Click here for an example of a blog listing page powered by Tablecloth.
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:
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 Field Templates.
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.
There are three types of templates, each covered in a separate section, but all follow the same principle:
