How to Add a Searchable Database Table to Your WordPress Website
Hey, what’s up everyone? Welcome back to our website. And today, I’m going to show you how you can add a database table to your WordPress website that is searchable. So as you can see, I have a table like this, and I can filter it out through ascending or descending names, or I can sort it through years, country, and time. So you can see, we have all these options, and I can search for the data. So let’s say I want to search for, let’s say, Jackson, and here it is. So in this way, you can search for the data, and we have the pagination as well, like you can add multiple pages to the table so that it will not take up much space on the website. And you can also filter it out, like whether you want to display 10 entries per page or 20 entries per page, then you can display it like this.
Installing TablePress Plugin
So let’s check how we can add a searchable table in our WordPress website. So for this, let’s go to the dashboard and let’s go to the plugins, and I will click on ‘Add New’. So as you know, WordPress has a table block, but that has some limitations. But if you want advanced features, then you need a plugin like this. Just simply search for ‘TablePress‘. So it comes with a free version, so you can install it, and if you want more advanced features, then you can upgrade it to the premium version. So for now, let me install the free version of TablePress. Let me click on ‘Skip’.
Creating Your First Table
Now we have added the TablePress plugin. Let’s click on ‘Add New Table’, and here you can set a name for the table, and you can add a description if you want to display that description under that table. You can add that, and you can select the number of rows and number of columns. So let me select the number of columns to three and number of rows to five. Let’s click on ‘Add Table’. And this is how the interface of TablePress looks. So you can see the table. So the first row is your heading, so you can put your heading. Let’s say I want to add ‘Name’, and let’s say I want to add ‘Mark’ here, and I want to add a ‘Status’ like this. Now I can add my entry. Similarly, you can add more rows. For this, you have all these options, like you can add, let’s say, you want to add three more rows, then you can set three and click on ‘Add’, and it will add three more rows. And you can add one column, two columns, like this, and you can click on ‘Add’, and it will add more columns like this. And you can select any of the rows. So let’s say you want to delete this, then you can select this option ‘Delete’. Now if you want to delete this row, delete this column, then you can select that and delete it like this. So let me select this here, so let me select all these, so you can hold shift and select all these rows here, and let me delete it like this.
Table Configuration Options
And you have all the options: • The first row is the table header and the last row is the table footer, so you can enable that • You can set alternate row colors to display checkerboard tables • You can set a row hover highlighting color • You can print the table name above it and print the description below the table if you want • You can add your extra CSS class to style it further
And here you can enable a few of the features: • You can enable sorting option that we see here, so you can sort the table like this, so it will sort the table in ascending order or descending order, so you can set that • You can enable the search option if you want to, so that it will display a search field in the table and users can search for the data • Now you have the pagination change, and you can see the ‘Show 10 rows per page’, so you can display 10 entries first, and after that it will show pagination • You can enable horizontal scrolling
And let’s click on ‘Save Changes’.
Adding the Table to Your Pages
Once you create the table, all you have to do is just copy this shortcode and use it to your page. So let’s say I want to display it on a page, then I will go to ‘Pages’, and let’s say I want to display it on the ‘About’ page. Then let me click on ‘Edit with Elementor’ first. So we can use it with Elementor or Gutenberg, because we have the shortcode option, so you can use it anywhere, any page builder, it will support it. And here I will click on plus and search for ‘Shortcode’, and I will drag the shortcode widget here. Now let me paste it, and we have the table added like this. So you can see the table shows like this. So if you want to add more rows, more columns, then you can enable that. And as you can see, we have the table and the checkmark color is there. You can select the number of entries per page, you can search for the table, and we have the pagination show up like this.
Using with Gutenberg
So you can also use it with Gutenberg as well. So let me go back, and let me create a new page here. Here in the Gutenberg, all you have to do is just paste the shortcode here, and it will be automatically added to your page, or you can just search for the ‘Shortcode’ block and you can paste the shortcode like this. Or you have the option to select the table, just search for ‘TablePress Table’ and you can select the table here, so that it will add it to the page.
Importing Table Data from Other Sources
All right, now let’s check how you can import table data from other sources. So for this, let me go to TablePress, and here let’s click on ‘Import a Table’. So you can import tables from different file types, like you can import a table from a CSV file, or you can directly copy the table code to your website. So you can see, you can import multiple tables at once by placing them in a zip file, or you can import it from a URL, or you can import it from a file, or you can manually import it. So let’s say we have a table like this, so this is in CSV file, so you can copy it and let me paste it here like this, and let me add it as a new table, or you can replace any existing table or append rows to existing table. So you can add these data to an existing table as well. So let me create a new table for this. And as you can see, our table is added. So let me select the first column here and let me delete that. All right, our table is ready like this. So this is how you can import your table.
Manual Input Method
You can also import it through the table code. So let me click on ‘Manual Input’ and let’s say I have a table code like this, so you can see this is the table code. Let me copy it. Let me paste it here and let me import it. Now the table is added like this. So this is how you can import a database table to your WordPress website and display it on your WordPress website so that users can search for that table.
Exporting Your Tables
You can also export your table to other websites. Just click on ‘Export’, and here you can select the table you want to export, and you can export it in a CSV file, HTML, or JSON file. So you can select CSV, and you can create a zip file here. So suppose you want to export all the tables, then you can export it in a zip file like this.
Conclusion
So this is how the TablePress plugin works, and you can use it on your Gutenberg or Elementor or any other page builder through shortcode. And if you still have doubts, you can ask me in the comment section. And if you want to make the default WordPress table responsive, then you can read the article next. Thank you.
