Cards Layout Example

A step-by-step example of a blog index page

Click here for the complete demo.

Step 1: Data source definition:

a. Select Data Source Entry.

b. Select Section Blog.

c. Select Entry Type Default.

Step 2: Select Columns

Step 3: Create template override

Create a file under templates/_tablecloth/tables/posts/template/index.twig:

Use the templates under vendor/matfish/craft-tablecloth/src/templates/_site/template as a guide.

{% extends datatable.defaultComponentPath('index') %}

{% block tablewrap %}
<div class="tablecloth-wrapper tablecloth__{{ datatable.handle }}"
		 x-data="tablecloth('{{ datatable.handle }}')"
		 x-cloak>
<template x-if="!loading">
<div>
	<div class="row mb-4 flex justify-between items-center tablecloth-top">
		<div class="flex-1 pl-3 top-left">
		{% include datatable.defaultComponentPath('search') %}
		</div>
		<div class="mr-2 top-right">
			<select class="p-2 focus:outline-none" name="category" id="categeory"
					onchange="filterByCategory(this)">
				<option value="">Select Category</option>
				<option value="480">Sports</option>
				<option value="481">Entertainment</option>
				<option value="482">Politics</option>
				<option value="483">Finance</option>
				<option value="484">Games</option>
			</select>
			<button class="btn btn-dark" x-text="currentSort.asc ? 'Oldest -> Latest' : 'Latest -> Oldest'"
					@click="currentSort.asc=!currentSort.asc">
			</button>
		</div>
	</div>

<div class="row">
<template x-if="currentPageData.length===0">
	<h4 class="ml-3">No Posts Found</h4>
</template>

<template x-for="row in currentPageData" :key="row.id">
<div class="col-lg-4 mb-4">
	<div class="entry2">
	<img :src="row.blogifyPostImage[0].data.thumbnailUrl"
		 :alt="row.blogifyPostImage[0].data.title"
		 class="img-fluid rounded"/>
	<div class="excerpt">
		<a :href="row.blogifyPostCategories[0].data.url"
		   class="post-category text-white bg-secondary mb-3"
		   x-text="row.blogifyPostCategories[0].data.title">
		</a>

	<h2><a :href="`/blog/${row.slug}`" x-text="row.title"></a></h2>
	<div class="post-meta align-items-center text-left clearfix">
		<figure class="author-figure mb-0 mr-3 float-left">
			<img :src="row.authorId.data.photoUrl"
				 :alt="row.authorId.data.fullName"
				 class="img-fluid">
		</figure>
		<span class="d-inline-block mt-1">By <a
					:href="`{{ siteUrl }}blog/author?author=${row.authorId.data.username}`"
					x-text="row.authorId.data.fullName"></a></span>
		<span>&nbsp;-&nbsp;</span><span x-text="dateFormat(row.postDate)"></span>
	</div>
			<div x-text="row.blogifyPostExcerpt">
			</div>
			<p><a :href="`/blog/${row.slug}`">Read More</a></p>
		</div>
	</div>
</div>
</template>
</div>
<div class="row text-center pt-5 border-top">
	<div class="col-md-12">
		<div class="custom-pagination">
			<template x-for="page in renderablePages" :key="page">
				<a href="javascript:void(0);"
				   style="margin-right:10px;"
				   @click="setPage(page)"
				>
						<span x-text="page" :style="currentPage===page ? 'background:#2150fc':''"
						></span>
				</a>
			</template>
		</div>
	</div>
</div>
</div>
</template>
</div>
<script>
function filterByCategory(e) {
Tablecloth_posts.emit('filter', {
	column: 'blogifyPostCategories',
	query: e.value
})
}
</script>
{% endblock %}

Step 4: Render the table:

{{ tablecloth('posts') | raw }}