How to add search filters to your tables

With Tabulizer you can add easily search/filtering controls to your table, so the end user can filter the table data and view only the contents the match the search filter value. In this article we will present a search filter that will apply to the whole table data, meaning all columns. If you want to add filters for specific columns, please read this article.

Adding a search filter is as simple as adding a new table rule to your ruleset, using the following settings:

  • Element: table
  • Range: all
  • Table/Search Filter: In the Table Filter box, check the Enabled checkbox. Optionally, you can change the Header size or the Position. The Header Size specifies how many top rows are considered to be part of the header, therefore they will be excluded from any search operation and will be always visible. The Position specifies where the search filter control should appear with regard to the table contents.

  • Sample Table

    Header 1Header 2Header 3Header 4
    10203040
    11223344
    110220330440
    45381222

    Notice how the first two rows remain unaffected by the search value. This is because we have set the header size = 2.

    How to change the default filter label
    If you want to change the Filter label, you can do that easily by editing the appropriate language file. The literal you need to change is the JSEARCH_FILTER_LABEL constant defined in the main language file, which is {joomla root directory}/language/en-GB/en-GB.ini for the English language.
    So, instead of:
    JSEARCH_FILTER_LABEL="Filter"
    You can change it to, let's say:
    JSEARCH_FILTER_LABEL="Find your results"
    Do not forget the quotes!
    An alternative approach, is it redefine the constant JSEARCH_FILTER_LABEL at the end of Tabulizer's language file, which is {joomla root directory}/administrator/language/en-GB/en-GB.com_tabulizer.ini