Custom Filters On Ninja Tables

The above table example was created by Ninja Tables Pro. You can click the boxes and notice the changes in the table. In this guide, you’ll learn how to correctly use Custom filters to your tables. Ninja Tables offers you a powerful feature known as Custom Filters, which lets users filter data from tables in various ways.

Go to the NinjaTables dashboard, to enable custom filters on your table. Then go to the Edit button of your preferred table. You can see the button when you hover your cursor on the title of the table.

Next, a Table Configurations tab will appear along with the other tabs.

Clicking the Configuration tab,  you will find a new window appear with the Custom Filters option on the sidebar. See in the example below:

Click on the Custom Filters, there a new tab will open with an Add New Filter button.

Click the button, then a pop-up form with a set of configuration options will open. Here’s the Pop-up Form screenshot:

This pop-up has a variety of options to choose from, to make your table’s filter more interactive. The following options can be found in the custom filter pop-up form:

→ Filter Title: This field of input is for the filter title which determines what the filter name will be.

→ Filter Label: This input field is used if you want to add a label to your filter. Keep it blank if you don’t need any filter instruction in the frontend.

→ Filter UI Type: You can choose the type of filter to display the base of the filter in the frontend. There are eight subsets in the Filter UI type. Such as- a) Select Dropdown b) Radio c) Checkbox d) Date Picker e) Date Range f) Text Input g) Number Range h) Reset Filter Button 

→ Default Label (placeholder): To reset the table, the default placeholder is All. But if you want to change the text you can do it by typing in your desired text.

→ Filter Options: This lets you place the value through which the filter will be implemented. Put your desired values to display it on the frontend, be aware that those values need to match your cell data on that table. Filter options feature three sequential fields called Label, Filter Value, and Action Button: 

• The label of the filtered value is entered in the Label field.
• Put the value that you want to get filtered in the Filter Value field.
• There are 2 action buttons to add and delete in each of the Label and Filter Value fields.

→ Filter Columns: This option is to pick the columns you wish to apply the filter. You can choose any single columns, or you can pick multiple columns.→ Strict Mode: Enable this mode if you want the results to be accurately matching the values.

Some Advance feature of Custom filter

You are going to get a few amazing features after the release of Ninja Tables 3.4.1 version. And Select Range Filter is one of them.

If you have a table like this with a column numeric column and you would like to include the option to filter by selecting the range, then you can quickly do it like this:

Simply set the filter value to this:

• For less than {lt} yourValue
• For greater than {gt} yourValue
• Between two value ~firstValue: lastValue

That is how you can use the Ninja Tables to create and add a custom filter on your table in different ways.