In a table with many rows, visitors should not have to scroll to find one product, plan or name.
The Table Searchable option of the Table widget from The Plus Addons for Elementor adds a search box above the table. Rows that do not match are hidden while the visitor types.
To check the complete feature overview documentation of The Plus Addons for Elementor Table widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free — this works in the free plugin; Pro is not needed.
- Widget to enable: Table, switched on under The Plus Addons > Widgets.
How to Add a Search Box
- Add the Table widget to your page and fill in your table.
- Open Extra Settings in the Content tab.
- Turn on Table Searchable.
- In Search Field Label, type the text shown before the search box, for example “Search products:”. The default is “Search”.
- Publish the page and try a search on the live page.
This is how a search for “office” looks on the page:
How It Behaves
- The search checks every column and ignores upper and lower case.
- Several words narrow the result: “audio 4.8” only kept the row that contains both.
- When nothing matches, the table shows “No matching records found”.
- Clearing the box brings all rows back.
- The search box also appears in the Elementor editor preview.
Limitations
- The search is not supported for tables that use Column Span or Row Span cells, as the note under the option says.
- The option is not available when Content Table is set to Plus Form.
- The search box has no placeholder text, and the “No matching records found” message cannot be changed from the widget.
Troubleshooting
The search box does not appear
Check that Table Searchable is on and view the published page. If the table uses Plus Form as its source, the option is hidden.
I want to style the search box
Go to Style > Search Bar / Show Entries for the label colour, input colours, typography, padding, border and width.
