How to Create a Data Table in WordPress

While displaying research data, statistics, product lists, pricing comparisons, etc., it is very much needed to display that complex information in a clean and structured format. In such cases, WordPress data tables come in handy.

Fortunately, integrating these tables doesn’t need any coding skills. All you need to figure out is the right method of adding these data tables in WordPress. Thankfully, this tutorial is fully focused on it.

In this guide, we promise to offer you the friendliest method of creating a data table in WordPress with the all-in-one Elementor addon and data table plugin, ElementsKit.

Prerequisites before integrating WordPress data table

The first requirement to add a data table is to install a solution that provides the easiest way to add a data table. ElementsKit is a no-code WordPress data table plugin that lets you add a custom or CSV data table in a drag-and-drop Elementor interface. To benefit from this solution, you will need additional free tools.

Voici les prerequisite plugins you need to install before diving into the process of adding a data table in WordPress:

• ElementsKit (gratuit & pro)

• Élémentor (gratuit)

How to create a data table in WordPress

Since you are all prepared to integrate WordPress data tables by downloading the required tools, let’s check out the complete five-step tutorial on how to create a data table in WordPress:

Step 1: Enable the Data Table widget.

In the first step, you need to enable the Data Table widget of ElementsKit after installing the prerequisite plugins. For that, navigate to ElementsKit >> Widgets et défiler vers le bas until you find the Data Table widget.

Après l'avoir trouvé, allumer the toggle button and scroll up.

Then, after scrolling up, you will see a "Sauvegarder les modifications" button that you have to hit to save the changes you have made.

Step 2: Drag-and-drop the Data Table widget.

In the second step, you need to add a page by visiting Pages >> Add Page et hitting the “Add Page” button. Or, you can add a data table to an existing page by clicking the “Edit with Elementor” option.

Après avoir été redirigé vers une nouvelle page, donner un titre to the page and appuyez sur le bouton « Modifier avec Elementor » bouton.

Next to redirecting to the Elementor editor, search for the Data Table widget et faites-le glisser et déposez-le sur le « + » icône.

Step 3: Edit the content of the custom data table.

After adding a Data Table widget, navigate to the content tab and customize table content by doing the following:

• Data Type: Select Custom from the dropdown option to upload a custom table.
• Header table area: Adjust the table header.
  • Texte: Enter header text.
  • Couleur de l'arrière plan: select background color for the table area.
  • Couleur du texte : Choose text color.
  • Type d'icône : Select icon type.
• Ajouter un item: Add more items or header columns by clicking on it.
• Header Alignment: Select alignment for this header.

Maintenant, expand the Body Content tab and edit the content of the row of your table. For that, expand row 1 and adjust the following areas:

• New Row: Enable the toggle button to add a new row.
• Texte: Insert text for column.
• Add a URL: Enable it to add a url.
• Couleur de l'arrière plan: Adjust background color.
• Couleur du texte : Select the text color.
• Type d'icône : Choose icon type.

Similarly, customize the content of the other rows for your data table.

After adjusting the body content, expand table settings, et make the following adjustments:

• Display Serial Number: Enable it to display the serial number.
• Recherche: Enable it to show the search option.
  • Espace réservé de recherche : Add the placeholder text for the search option.
• En-tête fixe : Turn on to fix the header.
• Commande : Enable to activate ordering.
• Sensible: Turn on for the table responsiveness.
• Pagination: Activate to show table pagination.
• Search Icon: Insert the search icon.
• Prev Text: Show previous text for pagination.
• Next Text: Add next text for pagination.
• Info: Enable it to add info text for the data table.
  • Info text: Insert info text.
• Entrées : Enable it to add entries.
  • Entries text: Add text for entries.
• Show items per page: Set how many rows or items you want to display on a single page.

Step 4: Upload a CSV file in WordPress

Besides a custom data table, you can also upload a CSV file in WordPress. You can directly télécharger un fichier CSV or from a remote file URL, or from a Google Sheet viewer URL.

Upload CSV file to WordPress

After expanding the Table, select CSV file from the dropdown option and select “Upload File” for the File Type. Then, enter the CSV file URL. Thus, your data table will be displayed. You can also adjust the header alignment. Then, after editing table settings and style customization, hit the "Publier" bouton.

URL du fichier distant

Also, you can add a data table from a remote URL. For that, select “Remote File URL” for the File Type and enter your CSV file URL in the respective field. Also, set header alignment et cliquez sur « Publier » button after customizing the complete data table.

URL de la visionneuse de feuilles de calcul Google

Again, you can add a Google Sheet by selecting “Google Sheet Viewer URL” for the File Type. Now, enter the URL of your Google Sheet and select header alignment. Finally, do table settings.

Step 5: Customize the style of the custom data table.

In the final step, after adjusting the content of your data table, customize the style of your table by editing the background Type, Rembourrage, Marge, Type de bordure, Boîte ombre, etc. of your Wrapper.

Similarly, adjust the style of the Entête, Header Image, Corps, Body Image, Recherche, Info, Entrées, et La navigation of your data table.

En résumé

Now, you know how to create a data table in Elementor, maintaining the best presentation and customization with ElementsKit. Because ElementsKit will hand you full control over the table settings and other customizations. Moreover, these customizations need zero coding knowledge.

So, whether you want to integrate a CSV file or Google Sheets, ElementsKit comes with all the possible options to add a custom data table in WordPress, avoiding coding hassle.