How to Create a Searchable Table in WordPress

How to Create a Searchable Table in WordPress

A searchable table allows users to quickly find the specific data within a larger dataset presented in a tabular format. This feature not only helps users locate the information they need but also keeps them engaged by providing an intuitive browsing experience.

Enabling this feature in your tables can help users save valuable time when exploring data. This can significantly reduce frustrations and enhance user satisfaction. With the Tabelberg plugin, you can easily enable this feature on your tables.

In this tutorial post, we’ll provide a step-by-step guide on how to create a searchable table in WordPress. Get the plugin by clicking the buttons attached below.

Créer de belles tables
Avec l'éditeur de blocs

Once the plugin is installed on your site, follow the tutorial below.

Step 01: Add the Tableberg Block to the Editor

Just like any Gutenberg block, find and add the Tabelberg block à l'éditeur.

Add the TableBerg block to your Gutenberg editor

Set les number of columns and rows you want. Then, hit the Create button.

Set the number of rows and columns

Once the columns and rows are ready, start adding information as you want.

Step 02: Add Content to the Table

An interesting feature of Tableberg is that it allows you to add various custom blocks to the table, such as the Gutenberg block editor.

Place your cursor on any cell of the table. The icône plus (+) will appear. Then, add your desired blocks to the cells and content accordingly. 

For example, you can add images to the table cells using the Image block.

Add necessary content to the searchable table

We have already prepared the table with the necessary information. Since our prime objective is to show you how to add a search bar to the WordPress table to make it searchable, we don’t want to waste time on other things.

For inspiration, you can visit this guide on comment créer un tableau avec Tableberg.

Step 03: Enable the Search Bar 

Sélectionnez l'ensemble du tableau en cliquant sur le bouton Icône Tableberg dans la barre d'outils. Ensuite, allez dans la section Onglet Paramètres sur la barre latérale droite.

Go to the Search Bar option of the Tableberg plugin

Venez au [PRO] Search section by scrolling the tab. Basculer sur les Enable Search option. You’ll see the search bar has appeared on top of the table.

Enable the Search option to Tableberg

Step 04: Select a Position for the Search Bar

You can place the search bar on the left, center, right, ou wide. Select the option you like.

That’s it. Your table is now searchable.

Step 05: Preview the Search Bar

Go to the preview section of the post. Type something in the search bar that exists in the table. You’ll instantly see the result. 

Let’s look at the video clip attached below. It’s working fine on our end.

Step 06: Stylize the Searchable Table

Go to the Styles tab again while keeping the table selected. You’ll see numerous customization options to stylize the table.

Stylize the Searchable Table

For example, some crucial things you can do there are:

  • Change the column, row, and cell colors individually
  • Modify the cell dimension and padding
  • Add block spacing
  • Customize/remove/colorize the inner and external borders
  • Update the Global Fonts

Hope you can do them alone. Or explore our DIY documentation posts for the necessary guide.

Closing Remarks!

As already said, the search bar option is extremely helpful for tables dealing with extensive datasets. But to ensure your searchable tables are effective, you must keep your table design clean and organized.

Secondly, the search bar should be placed in a suitable position so users can easily find it. If possible, also add the filtering option to make your table sortable so people can reorder the table rows and columns as needed.

Here’s a guide on how to make your table sortable in WordPress.



L'équipe Tableberg