{"id":23702,"date":"2021-09-16T14:45:40","date_gmt":"2021-09-16T14:45:40","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=23702"},"modified":"2023-07-28T09:55:07","modified_gmt":"2023-07-28T09:55:07","slug":"jetsmartfilters-adding-filters-to-table","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-adding-filters-to-table\/","title":{"rendered":"How to Add Filters to the Table"},"content":{"rendered":"\n

We understand entirely how actionable filters can be. Organizing the table content will be much easier with the help of JetEngine<\/a><\/strong>, JetSmartFilters<\/a><\/strong>, and their widgets. So now we will discover how you can do it.<\/p>\n\n\n\n

Let\u2019s begin with the Search Filter<\/strong> that is a good solution for content systematization.  <\/p>\n\n\n\n

Search Filter<\/strong><\/h2>\n\n\n\n
\n

To add a Search Filter<\/a>,<\/strong> you need to create a filter based on which a widget will work. To build it, navigate to the Smart Filters<\/strong> tab on the WordPress dashboard and click \u201cAdd New<\/strong>.\u201d<\/p>\n\n\n\n

Fill in the Title<\/strong>, Filter Labels<\/strong>, and pick the Search <\/strong>option from the Filter Type<\/strong> drop-down. <\/p>\n\n\n\n

You can also change the Placeholder <\/strong>value and choose a source for the search as a Search by <\/strong>option. You can pick either \u201cDefault WordPress search\u201d or \u201cBy Custom Field,\u201d <\/strong>which will let the users search data according to Query Settings<\/strong> you applied. Now let\u2019s select the first variant for our Search Filter<\/strong>. <\/p>\n\n\n\n\"search\n\n\n\n

When all customizations are ready, hit the \u201cPublish<\/strong>\u201d <\/strong>button.<\/p>\n\n\n\n

Open the Page Editor<\/strong>. If you haven\u2019t created a table yet, check out a table customization tutorial<\/a>. <\/p>\n\n\n\n

You can find the needed widget by typing \u201cSearch Filter\u201d in the search bar. <\/p>\n\n\n\n\"search\n\n\n\n

The next step is Content editing. It is essential as it makes the filter work as intended. Primarily, select the filter that you have just created.<\/p>\n\n\n\n

One of the most important fields is This filter for<\/strong>, where we single out the JetEngine Dynamic Table <\/strong>option. <\/p>\n\n\n\n\"search\n\n\n\n

Besides that, you can customize other options such as Apply type<\/strong> (where you can choose from \u201cAJAX,\u201d \u201cAJAX on typing,\u201d \u201cPage reload,\u201d and \u201cMixed\u201d), the Search Button <\/strong>text, and its icon. There is also an opportunity to hide or show Filter Label<\/strong>, set the unique Query ID<\/strong>, and enable Additional Providers<\/strong> if needed.<\/p>\n\n\n\n\"additional\n\n\n\n

There are just a couple of customizations left to do to get a search filter up and running \u2013 Style <\/strong>and Advanced <\/strong>Settings. Once you are done, the Elementor search filter is ready. <\/p>\n\n\n\n\"search\n\n\n\n

Now we can attach a Select Filter<\/a><\/strong> to our newly created Search Filter<\/strong>.<\/p>\n<\/div><\/div>\n\n\n\n

Select Filter<\/strong><\/h2>\n\n\n\n
\n

The method is pretty much the same. The first action is to add a new filter. So let\u2019s repeat the steps that were taken previously. Go to Smart Filters > Add New<\/em><\/strong> and fill in all the Filter Labels.<\/p>\n\n\n\n

We need to choose Select Filter Type<\/strong>. There you can switch on the Is hierarchical<\/strong> toggle, where you can add a new filter hierarchy level if enabled.<\/p>\n\n\n\n

However, if this option is off, you will see some other extra options. The first one is Data Source<\/strong>, where you have a choice between the default options. For our table, we can choose \u201cTaxonomies\u201d as Data Source <\/strong>and work with <\/strong>the Product color <\/strong>taxonomy.<\/strong><\/p>\n\n\n\n

Further settings offer to choose whether to Show empty terms<\/strong> and Show only childs of current term<\/strong>.<\/p>\n\n\n\n

You can also pick a new Placeholder <\/strong>instead of the default one, decide if you need to filter data from Checkbox meta fields type, and exclude\/include the desired items.<\/p>\n\n\n\n\"select\n\n\n\n

All the colors will be pulled from the products\u2019 Attributes<\/strong>, which can be added when editing the product posts. <\/p>\n\n\n\n

If you want to learn more about creating Attributes<\/strong>, consider reading this guide<\/a>. <\/p>\n\n\n\n\"color\n\n\n\n

Don\u2019t forget to push the \u201cPublish<\/strong>\u201d <\/strong>button to save all the changes and return to the page editor.<\/p>\n\n\n\n

Attach the Select Filter<\/strong>; it can be found by typing the eponymous title in the search bar. <\/p>\n\n\n\n\"select\n\n\n\n

Some Content settings are similar to the Search Filter\u2019. Here, it is also vital to select a filter; this time, it will be Filter by<\/strong> \u201cProduct color.\u201d <\/strong>The next thing to mention is This filter for<\/strong> drop-down menu. As you remember, we work with the table created with the help of the JetEngine plugin<\/a><\/strong>, so we click on the JetEngine Dynamic Table<\/strong>. <\/p>\n\n\n\n

Configure the filter settings identically to the Search Filter settings, include the Apply type<\/strong> drop-down where you choose between the \u201cAJAX,\u201d \u201cPage Reload,\u201d and \u201cMixed\u201d <\/strong>options. Along with that, there is an Apply on<\/strong> bar with two alternatives \u2014 \u201cValue change\u201d and \u201cClick on apply button.\u201d<\/p>\n\n\n\n

There are also two toggles that allow you to show or hide Apply Button<\/strong> and Filter Label. <\/strong><\/p>\n\n\n\n

Moreover, you can set the Query ID <\/strong>and enable Additional Providers<\/strong> with the toggle.<\/p>\n\n\n\n\"select\n\n\n\n

By far, there are only Style <\/strong>and Advanced <\/strong>settings left. <\/p>\n\n\n\n

After you customize them, the work with Color Select Filter is wholly done. Now we proceed to the next widget \u2013 Range Filter<\/a><\/strong>. <\/p>\n<\/div><\/div>\n\n\n\n

Range Filter<\/strong><\/h2>\n\n\n\n
\n

Firstly, we should create a new filter one more time. <\/p>\n\n\n\n

Let\u2019s add Filter Labels and proceed to the Filter Settings. In the Filter Type <\/strong>drop-down, we need to select \u201cRange.\u201d<\/p>\n\n\n\n\"range\n\n\n\n

All the other settings allow you to set a fit-for-purpose filter. If you want to fine-tune all of them, you can check our Range Filter <\/a><\/strong>overview<\/a> tutorial.<\/p>\n\n\n\n

Open the page editor and find the Range Filter<\/strong> widget by typing this title in the search box.<\/p>\n\n\n\n\"range\n\n\n\n

Select the newly added filter and indicate that this filter should relate to the JetEngine Dynamic Table<\/strong>. Continue further customization of the Content <\/strong>settings that is identical to the Select Filter <\/strong>setup.<\/p>\n\n\n\n\"range\n\n\n\n

A few Style customizations and our Range Filter<\/strong> is ready as well. <\/p>\n\n\n\n\"range\n\n\n\n

The following widget to overview is Active Tags<\/a><\/strong>. We will find out what it is for and how to apply it to the table. <\/p>\n<\/div><\/div>\n\n\n\n

Active Tags<\/strong><\/h2>\n\n\n\n
\n

This widget is created to simplify the work with filters. Its primary purpose is to <\/strong>manage them, namely, display the chosen filters and disable some without removing all the entered data. It works in case the user wants to remove just one filtered item without deleting other filtered results.<\/p>\n\n\n\n

In our case, we will continue to work with the page where we placed the table.<\/p>\n\n\n\n

You can find the Active Tags <\/strong>widget by typing its title in the search box.<\/p>\n\n\n\n\"active\n\n\n\n

Pay attention to the fact that your page should already include at least one filter to display the Active Tags widget correctly.<\/p>\n\n\n\n

Choose the table to be used with the Active Tags widget and select either AJAX <\/strong>or Page Reload <\/strong>Apply type for it. <\/p>\n\n\n\n

If you enabled the Clear Item <\/strong>option, add the main Label <\/strong>and Clear Item Label<\/strong>. As in any other filters described in this tutorial, you could set a unique Query ID<\/strong> and enable Additional Providers<\/strong>.<\/p>\n\n\n\n

After managing the Style <\/strong>and Advanced <\/strong>Settings, proceed to the front end and check out the result.<\/p>\n\n\n\n\"active\n\n\n\n

We have used the Price Range filter to see how the Active tags widget works. It allows users to select what filter data they want to remove from their search criteria. <\/p>\n\n\n\n

However, there is another widget that helps with managing the filters \u2013 Remove Filters<\/strong>. Its main feature is the ability to reset all the applied filters.<\/p>\n<\/div><\/div>\n\n\n\n

Remove Filters<\/strong><\/h2>\n\n\n\n
\n

If you want to add the ability to remove unnecessary filtration, this tutorial explains how to use the Remove Filters widget<\/a>.<\/p>\n\n\n\n

Please note that we choose JetEngine Dynamic Table as an option in This filter for<\/strong> drop-down list. All other customizations are up to your choice.<\/p>\n\n\n\n

As a result, we get a button that will clear all the applied filters.<\/p>\n\n\n\n\"remove\n\n\n\n

Another widget that you can add to your Elementor table to make it more convenient for users is Pagination<\/strong>. Its purpose is to simplify table navigation.  <\/p>\n\n\n\n

If you want to learn more about this widget, please check our guide about adding Pagination<\/a> to the table created with the help of the JetEngine plugin<\/a><\/strong>.<\/p>\n<\/div><\/div>\n\n\n\n

By now, you have discovered how to work with the JetSmartFilters<\/a><\/strong> widgets in conjunction with JetEngine Dynamic Table<\/strong>. <\/p>\n","protected":false},"excerpt":{"rendered":"

This tutorial will help you learn how to add various filters to the table, thanks to JetSmartFilters and JetEngine plugins.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[418,408],"yoast_head":"\nHow to Add Filters to the Table \u2014 JetSmartFilters | Crocoblock<\/title>\n<meta name=\"description\" content=\"Discover how to organize the table content with the help of JetEngine and JetSmartFilters plugins, and their useful features.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-adding-filters-to-table\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Filters to the Table \u2014 JetSmartFilters | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Discover how to organize the table content with the help of JetEngine and JetSmartFilters plugins, and their useful features.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-adding-filters-to-table\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-28T09:55:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/search-filter-settings.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-adding-filters-to-table\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-adding-filters-to-table\/\",\"name\":\"How to Add Filters to the Table \u2014 JetSmartFilters | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2021-09-16T14:45:40+00:00\",\"dateModified\":\"2023-07-28T09:55:07+00:00\",\"description\":\"Discover how to organize the table content with the help of JetEngine and JetSmartFilters plugins, and their useful features.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-adding-filters-to-table\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-adding-filters-to-table\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-adding-filters-to-table\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add Filters to the Table\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Filters to the Table \u2014 JetSmartFilters | Crocoblock","description":"Discover how to organize the table content with the help of JetEngine and JetSmartFilters plugins, and their useful features.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-adding-filters-to-table\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Filters to the Table \u2014 JetSmartFilters | Crocoblock","og_description":"Discover how to organize the table content with the help of JetEngine and JetSmartFilters plugins, and their useful features.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-adding-filters-to-table\/","og_site_name":"Help Center","article_modified_time":"2023-07-28T09:55:07+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/search-filter-settings.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-adding-filters-to-table\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-adding-filters-to-table\/","name":"How to Add Filters to the Table \u2014 JetSmartFilters | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2021-09-16T14:45:40+00:00","dateModified":"2023-07-28T09:55:07+00:00","description":"Discover how to organize the table content with the help of JetEngine and JetSmartFilters plugins, and their useful features.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-adding-filters-to-table\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-adding-filters-to-table\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-adding-filters-to-table\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Add Filters to the Table"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/23702"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=23702"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=23702"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=23702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}