Child Rows
Child Rows
Last updated
Child Rows
Last updated
Child rows allow you to display additional row data in a collapsible section under each row.
The child row visibility can be toggled using an additional control on the left hand side of the row, or programmatically.
In addition to all columns selected in the table definition step, you can also display Table and Matrix fields content in the child row.
Here are the steps of creating a child row with a Table, Matrix along with other "normal" fields:
In the table edit page, under "Options" check "Enable Child Rows?".
Assuming your data source has Matrix and Table fields, you will be presented with a list of those fields you wish to load into the front-end. Select the relevant fields:
If you examine your Network tab now, you will see that those fields are now loaded with each row. The next step is to tell Tablecloth how to render the child row.
3. Assuming your table handle is entries, create a file under templates/_tablecloth/tables/entries/childRow.twig.
Rendering normal fields
Normal fields are rendered using the same AlpineJs syntax we reviewed on Specific Field Templates.
Rendering Table fields
To render a table use the following syntax:
Replace tableTest with the handle of your table.
This will use the childRowTable.twig template to render the table. You can override this template like any other table template.
The above call will render all columns of the table. If you would like to display only some columns, you can pass their handles as the second argument:
Rendering Matrix Fields
Assuming a data table handle of entries and a matrix handle of matrixTest, create the following folder: templates/_tablecloth/tables/entries/fields/matrices/matrixTest
Now for each block of your matrix, create a file with the name corresponding to the block handle. E.g, if your block handle is block1, place a block1.twig file under the folder you created in step 1.
In each block file you will have access to a Javascript block variable, which will contain all block data. E.g, if you have a color field with a productColor handle, you may render it like so using AlpineJs syntax:
4. Finally, in your childRow.twig file, call the following method where you want your matrix to be rendered:
