Skip to content

Version

Since 2022

Experimental

Quickfilters

Limits

Note

Custom quickfilters will collide with Grouping. Be careful when combining both, as the results may be mixed up and not clear to the user.

Get variable

1
2
3
4
5
6
// file: hooks/TABLENAME-tv.js
jQuery(document).ready(function() {
    let tv = AppGiniHelper.tv;
    let filters = tv.getFilters();
    // ...
});

Add a simple filter

Create filter-button on every row in fieldname -column. On click, all visible table rows will be filtered by the exact (text-) value of the cell.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// file: hooks/TABLENAME-tv.js
jQuery(document).ready(function() {

    let tv = AppGiniHelper.tv;
    var filters = tv.getFilters();

    filters.add("fieldname");
    // ...add more...

    // apply changes after adding one or more filters:
    filters.render(); // render filters in table view

});

Syntax

1
2
3
filters.add("fieldname", "unique_key", "icon", "text", "tooltip", function(value) {
    return value;
});

Parameters

  • fieldname (string, required)
    Name of the column
  • unique_key (string)
    Unique key for this filter. This allows you to create more than one filter per column. If null , fieldname will be used as unique_key .
  • icon (string)
    Name of the icon (without "glyphicon-"-prefix). Default: "filter"
  • text (string)
    Button text. Default: "" (empty string)
  • tooltip (string)
    String containing a (mouseover-) tooltip for the filter button. Available placeholders: %VALUE% , %ID%
  • value-getter-function
    Callback function(value) { return value; } This callback function can be used to return different custom values to the filter. See "date"-example below.

Examples

Simple Filter with placeholder in tooltip

1
2
3
4
5
6
7
8
// syntax
filters.add("key", "fieldname", "icon", "text", "tooltip");

// example
filters.add("product_name", "product_name_filter", "cog", "Click here", "Filter by product name: %VALUE%");

// ...
filters.render();

Date example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
filters.add("created_on", "created_on_filter_by_year", "calendar", "Y", "Filter by year: %VALUE%", function(value) {
    let date = moment(value);
    return date.format("YYYY");
});

filters.add("created_on", "created_on_filter_by_month", "calendar", "Y/M", "Filter by month: %VALUE%", function(value) {
    let date = moment(value);
    return date.format("YYYY-MM");
});

filters.render();

Warning

Don't forget to filters.render(); after you have added all required filters

See also