Column filtering options, tips and tricks

Sometimes you want to filter specific columns, not just the whole table. This is called column filtering and in this tutorial we present the various options you have and some useful tricks you can use for fine tuning. When you define a column filter you specify either explicitly or implicitly the following parameters:

  1. Column ID
  2. Control Type
  3. Search Method

Let's see them one by one.

Column ID

Column ID is just an integer, where 1 corresponds to the first column, 2 to the second and so on.

Control Type

This can be:
  • input: an input text box, where the user can type any value.
  • select: a drop-down selection box where the use an select a value from a list. The values for the list are getting populated automatically from the column values. Apparently this type is appropriate only in cases where the number of column values is limited.
  • range: a drop-down selection box where the user selects a range, instead of a specific value. Example: 10 or less, 10-20, 20 or more. If you choose this type you need to specify the range interval as well.
If you specify the column filters using the table wizard don't forget to use the Column Selection Helper because it will make the specification much easier.

Search Method

By selecting one the available search methods you can make the filter to search for the exact value, for values similar to the key-phrase, or values that fall in a certain range. Let's see them summarized in the table below.
Search MethodDescription
smartThe default search method. Will return all cells that contain anywhere the key phrase.
exactThis method will return only cells that contain the exact phrase. Example: The key phrase is "20" will return only cells with value "20", but not "120" or "220", i.e. that contain the value "20".
start_withThis method will return only cells that contain the key phrase at the beginning. Example: The key phrase "20" will return "20" and "209" but not "320".
numeric_intUse this method to search for numeric ranges. For instance, if the column contain prices and you want to display only cells whose price is greater than $1000 or less than $500. You could also search for prices between $500 and $1000. The syntax is quite simple and it's summarized in the examples below:
  • 1000 : will search for all values equal to 1000
  • > 1000 : will search for all values greater then 1000
  • < 500 : will search for all values less then 1000
  • 500 & 1000 : will search for all values between 500 and 1000
This search method is smart enough to remove currency symbol, or other extra characters.
numeric_periodSame as above. when you have decimal numbers (e.g. 12.564) the period will be treated as the separator for the decimal number, and the comma (,) as the thousands separator. If it's the other way around use the next search method numeric_comma.
numeric_commaSame as above. The only difference is in decimal numbers, where the comma will be treated as the separator for the decimal number, and the period (.) as the thousands separator.
date_autoUse this method to search for date ranges. Similar to the numeric equivalent described previously. The date format of the column will be detected automatically.
date_ymdSame as above. The only difference is that you have specified the date format to be year-month-day.
date_ydmSame as above. The only difference is that you have specified the date format to be year-day-month.
date_dmySame as above. The only difference is that you have specified the date format to be day-month-year.
date_mdySame as above. The only difference is that you have specified the date format to be month-day-year.

Tips and Tricks

Below is a list with the most common tips when it comes to column filtering.
  1. Put the filters on a separate row
    The best place is right below the top header row(s). So, if you have one top row, then the best place is the second row. To do so, add an extra row and adjust the header size and header row value according to the following rule:
    • Header Size: is the total number of header rows. In this example is 2, as the first row contains the column headers and the second row the column filters. All rows to belong to the header are excluded from any filtering.
    • Header Row: is the id/order of the header row in which the column filters will appear. In this example is 2, because the row that contains the column filters is the second one.

    If you don't have control over your table input you can add an empty row using the modification function addemptyrow that takes an argument the position in which the row will be added. For instance, 2 means add an empty row to appear 2nd in the table.
  2. Use Filter Labels
    It's easy to add labels to your column filters. Just add the label you wish to the table cell that the column filter will appear. For instance, if you add our column filters on the second column and we wish to add the label "search by name" to the filter for the name column, this is the sample input we would use:
    Name,Age
    search by name,
    Nicolas,16
    Jenna,32
    James,28,
    Anthony,67
    George,82
    Tina,6
    Gail,48
    
  3. Use Filter Pre-selection
    It is possible to pre-populate the value of an input search filter or pre-select a drop-down control box using the URL parameter column_filter_preselection, using the following format: table_id_1:column_id_1:value_1^table_id_2:column_id_2:value_2^....^table_id_n:column_ id_n:value_n Note that:
    • table_id is not the id of the table HTML element, but the table ordering (the sequence of appearance in the page, counting only tables with search filtering enabled) that starts from 0, instead of 1. So, the first table in the page has table_id = 0, the second has table_id = 1 and so on.
    • column_id is the column ordering (the sequence of appearance in the row) that starts from from 0, instead of 1. So, the first row column has column_id = 0, the second has column_id = 1 and so on.
    • value should be URL encoded, as this is part of the URL.
    Example: If we wanted to pre-populate the filter for column name in our example with the value James, we could add the following URL parameter: column_filter_preselection=0:0:James Here is why: 0:0:James as our sample table is the only one which has column filters in it. Since we start counting from 0, the first table has id = 0.
    0:0:James as the column that contains the name is the first one. Since we start counting from 0, the first column has id = 0 .
    0:0:James: James is our URL encoded value, which happens to be as same as the unencoded since there are no special characters or white spaces.

    Try to click the link below to see it in action:
    Visit this page with name filter preselected to James

Sample Table

NameAge
search by name
Nicolas16
Jenna32
James28
Anthony67
George82
Tina6
Gail48