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.

Components

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 HTML

    • table: The inner content including all table components

      • count: Entries count

        • entriesCount.twig

      • pagination: Pagination and page count

        • pagesCount.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