Comment on page
Table Templates
Table templates allow you to override the components of the table itself, and even replace the table with a different repeatable structure. For example, you can override the
table.twig
file and replace it with a cards layout for displaying products.Table templates are to be placed under
templates/_tablecloth/presets/{presetName}/template
or templates/_tablecloth/tables/{tableHandle}/template
.Inside this root folder you should follow the same structure found in the repo, under
src/templates/_site/template
. There are two options to overriding a template:- 1.Copy the relevant file content in its entirety and modify it.
- 2.Extend the default file and override blocks inside it, using the twig engine. We will demonstrate this method below for the main entry file.
Below is the a breakdown of the different templates that make up the table. Check out the individual files for an in-depth look. Note that Indentation represents nesting level, and `.twig` differentiates a file from a block inside a file:
index.twig
: The main entry point for the table. In addition to the skeleton of the table it includes some important Javascript functionality. Be sure not to tamper with it. In fact it is better to use the second method for overriding blocks (example below). The file contains the following blocks:tablewrap
: the outermost block which encapsulates all table HTMLtable
: The inner content including all table componentscount
: Entries countentriesCount.twig
pagination
: Pagination and page countpagesCount.twig
pagination.twig
For example, if we were to replace the entire table using the extend method, for a
foo
preset, we would create a file under templates/_tablecloth/presets/foo/template/index.twig
:{% extends datatable.defaultComponentPath('index') %}
{% block tablewrap %}
// Your content goes here.
// Copy the block from the default template and use as a starting point.
{% endblock %}
Note that we are extending the default component by using the
defaultComponentPath
method on the datatable
object, passing the name of the relevant file, minus the .twig
extension, as a parameter.If you only seek to add content before or after the block, you can use the twig
{{parent()}}
method to load the default content and insert your own content before or after, as the case may be. If you are familiar with Vue.js, this is similar to the concept of slots.tableTop.twig
: The row of controls above the table, including the filter, columns dropdown and records-per-page dropdown.tableTopLeft
filter
search.twig
tableTopRight
columnsDisplay
columns.twig
perPage
perPageDropdown.twig
table.twig
tableHead.twig
headings
tableBody.twig
childRowToggler.twig
rowSelectCheckbox.twig
tableCells.twig
tableCell.twig
childRow.twig
notFound.twig
Last modified 1yr ago