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.
Cree bonitas mesas
Con el editor de bloques
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 al editor.
Set el number of columns and rows you want. Then, hit the Create button.
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 icono más (+) 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.
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 cómo crear una tabla con Tableberg.
Step 03: Enable the Search Bar
Seleccione toda la tabla haciendo clic en el botón Icono Tableberg en la barra de herramientas. A continuación, vaya a la pestaña Ficha Configuración en la barra lateral derecha.
Ven al [PRO] Search section by scrolling the tab. Activar el Enable Search option. You’ll see the search bar has appeared on top of the table.
Step 04: Select a Position for the Search Bar
You can place the search bar on the left, center, right, o 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.
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.
