Create Data Table Block With ACF, dataTables, And Sticky First Column

In this blog, we will learn about how to create a data table block with ACF. I am assuming you have the ACF pro plugin. This table will allow you to sort the data, as well as the first column, will be sticky.

Register ACF Data Table Block

Let’s register our block first.

<?php
/**
 * Register Block
 *
 * @package MyBlocks
 */

namespace MyBlocks;

add_action( 'init', __NAMESPACE__ . '\\register_data_table_block' );

function register_data_table_block() {

	// Check function exists.
	if ( ! function_exists( 'acf_register_block_type' ) ) {
		return;
	}

	// Register block.
	acf_register_block_type(
		[
			'name'            => 'data-table',
			'title'           => __( 'Data Table', 'text-domain' ),
			'description'     => __( 'A block with Data table', 'text-domain' ),
			'render_template' => 'template-parts/data-table.php',
			'category'        => 'widgets',
			'icon'            => 'format-image',
			'keywords'        => [
				__( 'table', 'text-domain' ),
				__( 'sort', 'text-domain' ),
			],
			'supports'        => [
				'align'    => true,
			],
      'enqueue_assets'  => __NAMESPACE__ . '\\data_table_scripts',
		]
	);
}

/**
 * A function to enqueue the scripts for the slider.
 */
function data_table_scripts() {
	wp_enqueue_style( 'data-table-css', 'https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css', [], '1.10.19' );
	wp_enqueue_script( 'data-table-js', 'https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js', [ 'jquery' ], '1.10.19' );
}

Create Custom Field.

Now create a custom field and select the Data table block in the dropdown.

Create Block Template

Create a block template template-parts/data-table.php

<?php
/**
 * Room Comparison.
 *
 * @package VenuesLive
 */

namespace MyBlocks;

?>
<section>
	<!--Container-->
	<div class="table-wrap">
		<!--Card-->
		<div id='recipients' class="overflow-auto mt-6 lg:mt-0 rounded shadow bg-white">

			<table id="example-table" class="stripe hover" style="width:100%; padding-top: 1em;  padding-bottom: 1em;">
				<thead>
				<tr>
					<th class="cell-sticky" data-priority="1">ROOM</th>
					<th data-priority="2">Name</th>
					<th data-priority="3">Title</th>
					<th data-priority="4">Details</th>
					<th data-priority="5">Data</th>
					<th data-priority="6">Price</th>
				</tr>
				</thead>
				<tbody>
				<tr class="relative comparison-table-row">
					<td class="cell-sticky">Tina May</td>
					<td>Coffee Manager</td>
					<td>Ljubljana</td>
					<td data-order="1200">1200 px</td>
					<td>2011/04/25</td>
					<td>$320,800</td>
				</tr>

				<!-- Rest of your data (refer to https://datatables.net/examples/server_side/ for server side processing)-->

				<tr>
					<td class="cell-sticky">Donna Snider</td>
					<td>Customer Support</td>
					<td>New York</td>
					<td data-order="750">750 px</td>
					<td>2011/01/25</td>
					<td>$112,000</td>
				</tr>

				<tr>
					<td class="cell-sticky">Snider</td>
					<td>Support</td>
					<td>Denmark</td>
					<td data-order="250">250 px</td>
					<td>2011/01/21</td>
					<td>$111,000</td>
				</tr>
				<tr>
					<td class="cell-sticky">Imran</td>
					<td>Superb Support</td>
					<td>London</td>
					<td data-order="850">850 px</td>
					<td>2011/01/23</td>
					<td>$110,000</td>
				</tr>
				</tbody>

			</table>


		</div>
		<!--/Card-->


	</div>
	<!--/container-->
</section>

Adding styles

To make the CSS responsive and stick the first column, use the below CSS in main.scss

table.dataTable thead {
	th {
		@apply bg-brand-dark-navy text-white;
	}

	tr {
		overflow: auto;
	}
}

.cell-sticky {
	position: sticky;
	left: 0;
	z-index: 10;
}

Adding Scripts

( function( $ ) {
	$(document).ready(function() {
		
		$('#example-table').DataTable( {
			responsive: true,
			searching: false, // set it true for search
			paging: false, // set it true to show pagination
			info: false // set it true to show details
		} )
	} );
} )( jQuery );

Ensure you enqueue the above two styles and scripts.

That’s all folks.