Skip to content

3.3 Filters visibility

Jump to bottom Edit New page
koalyptus edited this page Oct 10, 2017 · 7 revisions

With this extension, users can toggle the filters row visibility.

To get the filtersVisibility extension instance:

var filtersVisibility = tf.extension('filtersVisibility');
where tf is an instance of TableFilter.
Property Type Description Remarks Example
stylesheet string the extension's stylesheet filename (default - 'filtersVisibility.css') 
var tfConfig = { 
    extensions: [{ 
        name: 'filtersVisibility',
        stylesheet: 'myStylesheet.css'
    }] 
};
target_id string defines the id of the container element that will contain the link/button showing / hiding filters row (default - null) 
var tfConfig = { 
    extensions: [{ 
        name: 'filtersVisibility',
        target_id: 'my_container_id'
    }] 
};
enable_icon boolean enable/disable default icon placed just before the link (default - true) 
var tfConfig = { 
    extensions: [{ 
        name: 'filtersVisibility',
        enable_icon: false
    }] 
};
btn_text string sets the text of the link showing / hiding filters row (default - '') 
var tfConfig = { 
    extensions: [{ 
        name: 'filtersVisibility',
        btn_text: 'Filters'
    }] 
};
btn_html string defines the HTML of the button showing / hiding filters row (default - null) note that the onclick event is added automatically to the html element and may overwrite any associated click event 
var tfConfig = { 
    extensions: [{ 
        name: 'filtersVisibility',
        btn_html: 'Filters'
    }] 
};
btn_css_class string defines the css class of the link showing / hiding filters row (default - 'btnExpClpFlt') 
var tfConfig = { 
    extensions: [{ 
        name: 'filtersVisibility',
        btn_css_class: 'my-css-class'
    }] 
};
cont_css_class string defines the css class of the container (default - 'expClpFlt') 
var tfConfig = { 
    extensions: [{ 
        name: 'filtersVisibility',
        cont_css_class: 'my-css-class'
    }] 
};
filters_row_index number Only with external filters, it specifies which row contains the filters (default - 1) 
var tfConfig = {
    grid_layout: true,
    extensions: [{ 
        name: 'filtersVisibility',
        filters_row_index: 0
    }] 
};
visible_at_start boolean Set filters row visibility at start 
var tfConfig = {
    extensions: [{ 
        name: 'filtersVisibility',
        visible_at_start: false
    }] 
};
on_before_show function callback fired before the filters' row is displayed 1 parameter:
  • o is the current TableFilter instance 
var tfConfig = {
    extensions: [{ 
        name: 'filtersVisibility',
        on_before_show: function(o) {
            console.log(o.id);
        }
    }] 
};
on_after_show function callback fired after filters' row is displayed 1 parameter:
  • o is the current TableFilter instance 
var tfConfig = {
    extensions: [{ 
        name: 'filtersVisibility',
        on_after_show: function(o) {
            console.log(o.id);
        }
    }] 
};
on_before_hide function callback fired before the filters' row is hidden 1 parameter:
  • o is the current TableFilter instance 
var tfConfig = {
    extensions: [{ 
        name: 'filtersVisibility',
        on_before_hide: function(o) {
            console.log(o.id);
        }
    }] 
};
on_after_hide function callback fired after the filters' row is hidden 1 parameter:
  • o is the current TableFilter instance 
var tfConfig = {
    extensions: [{ 
        name: 'filtersVisibility',
        on_after_hide: function(o) {
            console.log(o.id);
        }
    }] 
};
toolbar_position string defines where it will be placed inside the toolbar (default - 'right') 3 possible values: 'left', 'center' and 'right' 
var tfConfig = { 
  rows_counter: {
      toolbar_position: 'center'
  } 
};

Website | Examples | Es6 documentation

Clone this wiki locally