Custom Filters

Ninja Tables offers you a powerful feature known as Custom Filters, which lets users filter data from tables in various ways.

Custom Filter is a Pro Feature!

• First, go to the Ninja Tables dashboard and click on the Edit option of your preferred table.

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

• Clicking the Table Configuration tab,  you will find a new window appearing with the Custom Filters option on the sidebar. 

Add Custom Filter #

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

• Now, click the Add New Filter button, then a pop-up form with a set of configuration options will appear. 

• This pop-up has various 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 input field is for the filter title, which determines the filter name.

• 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 instructions in the frontend.

• Filter UI Type: You can choose the filter type to display the filter’s base in the frontend. There are eight subsets in the Filter UI type. Such as Select Dropdown, Radio, Checkbox, Date Picker, Date Range, Text Input, Number Range, and Reset Filter Button.

Reset Filter Button #

When you choose Reset Filter Button and click on that button, all of the Filter value field will be reset automatically.

• See, how Reset Filter Button works-

• Placeholder: To reset the table, the default placeholder is All. But if you want to change the text, you can type in your desired text.

• Value Type: Select How the value will be populated to the select dropdown. There are two types of Value types, including Manual Data & Dynamic Data from the Table.

Manual Data #

When you choose Manual Data, some options will appear below.

• Filter Options: This lets you place the value through which the filter will be implemented. Put your desired values to display 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.

• Label: The label of the filtered value is entered in the Label field.

• Filter Value: Put the value you want filtered in the Filter Value field.

• Action Button: 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 column, or you can pick multiple columns.

Dynamic Data from Table Column #

When choosing Dynamic Data from Value Type, more options will appear below.

• Target Column: This option enables you to select the column that you want to populate data.

• Parse Comma Separated Words: If you enable this option, and you choose multiple value types, values will be shown with Comma.

• Disable automatic filter Value sorting: By default, value sorting is disabled. The value sorting option will also be activated if you select this option.

• If Disable automatic filter value sorting is unchecked, then two more options will appear below, such as Sort Dynamic Value as & Sort Algorithm.

• Sort Dynamic Value as: By this option, you can select either an Ascending order or Descending order.

• Sort Algorithm: You can sort the algorithm as a text basis or a Numeric basis.

• Enable Multi-Select: Enable this select field if you want to choose the multi-select value type.

• Strict Mode: Enable this mode if you want the results to be accurately matching the values.

• Let’s have a look at an example where you could better understand Custom Filters.

• If you have a table like this with a numeric column (data type must need to as Numeric Value) and you would like to include the option to filter by selecting the range, then you can quickly do it.

• You can add a new filter by selecting the Add New Filter button under Custom Filters. Next, enter a filter title, choose the filter UI type and value type, and provide the filter label and value in the filter options. Choose the Column to which you wish to apply the filter as well.

• Here, For Greater than = {gt} yourValue

• For Less than = {lt} yourValue

• From firstValue to lastValue ~firstValue: lastValue

• Don’t forget to click on the Update button when you are done with your configuration.

• See how the table will work –

• After creating the custom Filter, go back to the Custom Filters area, and you will find some options below.

Filter Appearance #

You can choose any option in Filter Appearance between Show Filter inputs as Inline and Show Filter inputs as Columns.

• Show Filter inputs as inline: It will show the filter inputs in a row.

• Show Filter inputs as inline: The filter input area will be displayed as a column. Two Columns, Three Columns & Four Columns these options are available here.

• See how Filter Appearance works in the table.

Progressive Filter #

The user can filter any dynamic options in Progressive Filter to quickly access his specific requirements or desires. This option is enabled by default.

Let’s see how this works!

This is how you can use Custom Filters in the table step by step!