April 11, 2023

Add an Elementor Data Table with JetEngine

Play Video

What is the tutorial about?

Learn how to add an Elementor data table with JetEngine to enhance your website. Moxet Khan will show you how to implement a table, a feature that provides sorting, filtering, and pagination functionalities. This process is particularly useful when you have many records to display in a tabular form.

DataTables explained

A highly flexible tool built upon the foundations of progressive enhancement, that adds advanced interaction controls to any HTML table. It is a plug-in for the jQuery Javascript library.

Here are some key features:

  1. Pagination:
    Split the rows in tables into individual pages, which is much more manageable for the user.
  2. Instant Search:
    One of the most powerful features is its ability to dynamically filter the data in a table, allowing users to instantly find the data they need.
  3. Sorting:
    Sort the data in tables according to any column, in ascending or descending order.
  4. Accessible:
    The design is focused on usability, which means it is easy to navigate using the keyboard alone. It also provides roles and descriptions for assistive technologies.
  5. Internationalisation:
    A wide range of options is available for customizing the language information used in the table, capable of handling any global language.

In the context of the tutorial, DataTables is used to enhance the functionality of tables created with the JetEngine Table Builder in WordPress, providing sorting, filtering, and pagination functionalities.

Steps to Add an Elementor Data Table with JetEngine

  1. Copy code:
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.2/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.2/datatables.min.js"></script>
    jQuery(document).ready(function($) { 

    Source: GitHub

  2. Paste the Code to Your Site:
    Go to your website and navigate to the page editor. Search for the HTML widget, drag it into your workspace, and paste the copied code. Update your page to apply the changes.
  3. Testing the Functionality:
    Refresh your page and check your table. It should now have search functionality, entries control, and pagination. You can also sort your records.
  4. Customizing Your DataTable:
    If you want to add additional features to your table, you can refer to the DataTables documentation. It provides various options like default sorting, hidden columns, and state saving.

Benefits of the Tutorial

Adding an Elementor data table brings several benefits that enhance the functionality and user experience of your website.

Improved Data Management

A robust platform for managing large datasets. With features like sorting, filtering, and pagination, you can present data in a more organized and accessible way. This is particularly beneficial for websites that handle complex or extensive data.

Enhanced User Experience

The interactive features, such as search functionality and entries control, significantly improve the user experience. Visitors can easily navigate through the data, find specific information, and customize their view according to their preferences.


By integrating DataTables, you can streamline the data presentation process. Instead of manually creating filters or sorting functions, DataTables automatically provides these features. This not only saves time but also ensures a more efficient and error-free data management process.


You can add additional features like default sorting, hidden columns, and state saving based on your needs. This allows you to tailor your tables to fit the specific requirements of your website and audience.


DataTables are highly scalable, making them suitable for both small and large datasets. As your website grows and your data needs increase, DataTables can easily accommodate this growth without compromising performance.

Required Resources

JetEngine Logo
Payment required
Credit to Moxet Khan
Moxet Khan is a YouTuber who specializes in solving complex WordPress scenarios with simple logic. He provides tutorials and walkthroughs on how to resolve various WordPress issues and challenges, such as fixing common errors, troubleshooting plugin conflicts, optimizing website performance, and more.
Add an Elementor Data Table with JetEngine
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.