Documentation
HTML Table Filter Generator is no longer maintained, it is now replaced by the TableFilter project. Don't hesitate to check the demos out in their new location along with exhaustive documentation in the project's WIKI.
Extensions
Columns Visibility Manager | Columns Resizer | Filters Row Visibility Manager
Updated Columns Visibility Manager
Download and extract the extension's zip at same location than tablefilter.js document. Note this extension doesn't work with TF versions lower than 1.9.4.
Configuration properties
| Property | Type | Description | Remarks | Example |
|---|---|---|---|---|
| cols_visibility | boolean | if set true, it will enable the columns visibility extension (default - true) | var tfConfig = { cols_visibility: true } |
|
| btn_showHide_cols_target_id | string | defines the id of the element that will contain the link showing the columns visibility selection container (default - null) | If this property is not defined the link will be generated in the rDiv element | var tfConfig = { btn_showHide_cols_target_id: 'myContainerId'
} |
| btn_showHide_cols_text | string | sets the text of the link showing the columns visibility selection container (default - Display columns▼) | var tfConfig = { btn_showHide_cols_text: 'Show/Hide columns'
} |
|
| btn_showHide_cols_html | string | defines the HTML of the button showing the columns visibility selection container (default - null) | note that the onclick event is added automatically
to the html element and overwrites any eventual onclick
attribute |
var tfConfig = { btn_showHide_cols_html: '<button class="myCssClass">Expand/collapse
columns</button>' } |
| btn_showHide_cols_css_class | string | defines the css class of the link showing the columns visibility selection container (default - 'showHideCols') | var tfConfig = { btn_showHide_cols_css_class: 'myClass' } |
|
| btn_showHide_cols_close_text | string | sets the text of the button closing the columns visibility selection container (default - 'Close') | var tfConfig = { btn_showHide_cols_close_text: 'Hide' } |
|
| btn_showHide_cols_close_html | string | defines the HTML of the button closing the columns visibility selection container (default - null) | note that the onclick event is added automatically
to the html element and overwrites any eventual onclick
attribute |
var tfConfig = { btn_showHide_cols_close_html: 'Hide' } |
| btn_showHide_cols_close_css_class | string | defines the css class of the button closing the columns visibility selection container (default - 'showHideCols') | var tfConfig = { btn_showHide_cols_close_css_class: 'myClass'
} |
|
| showHide_cols_tick_to_hide | boolean | sets the check action of the column checkbox: by default column is hidden when checkbox is checked | var tfConfig = { showHide_cols_tick_to_hide: false } |
|
| showHide_cols_manager | boolean | enables/disables columns manager elements generation (default - true) | set this property to false if you want to create your own custom columns manager | var tfConfig = { showHide_cols_manager: false } |
| showHide_cols_container_target_id | string | defines the id of the element that will contain the columns list container (default - null) | var tfConfig = { showHide_cols_container_target_id: 'myContainerId'
} |
|
| showHide_cols_headers_text | array | array containing alternative columns headers text (default - null) | var tfConfig = { showHide_cols_headers_text: ['Column header
0','Column header 1','Column header 2'] } |
|
| showHide_cols_headers_table | object | if filters are in a separated table, this property tells the script to hide respective headers columns (default - null) | it is the table DOM element containing the separated filters | var tfConfig = { showHide_cols_headers_table: tf_Id('myHeadersTable')
} |
| showHide_cols_headers_index | number | only with external filters, this tells the scripts which row contains table headers (default - 1) | var tfConfig = { showHide_cols_headers_index: 1 } |
|
| showHide_cols_span_css_class | string | defines the css class of the span containing the columns visibility selection container (default - 'showHideColsSpan') | this span element contains the button displaying the columns selections container | var tfConfig = { showHide_cols_span_css_class: 'myClass' } |
| showHide_cols_cont_css_class | string | defines the css class of the div containing the columns visibility selection options (default - 'showHideColsCont') | var tfConfig = { showHide_cols_cont_css_class: 'myClass' } |
|
| showHide_cols_list_css_class | string | defines the css class of the checklist (ul element) of the columns (default - 'cols_checklist') | var tfConfig = { showHide_cols_list_css_class: 'myClass' } |
|
| checklist_item_css_class | string | defines the css class of the checklist item (li element) (default - 'cols_checklist_item') | var tfConfig = { checklist_item_css_class: 'myClass' } |
|
| checklist_selected_item_css_class | string | defines the css class of the selected checklist item (li element) (default - 'cols_checklist_slc_item') | var tfConfig = { checklist_selected_item_css_class: 'myClass'
} |
|
| showHide_cols_text | string | defines the text preceding the columns check list (default - 'Hide columns: ') | var tfConfig = { showHide_cols_text: 'Check columns to hide:
' } |
|
| showHide_cols_at_start | array | this property sets the colmuns to be hidden at extension load (default - null) | var tfConfig = { showHide_cols_at_start: [2,3] } |
|
| showHide_cols_enable_hover | boolean | if set true the columns visibility selection container is displayed on mouseover event (default - false) | var tfConfig = { showHide_cols_enable_hover: true } |
|
| showHide_enable_tick_all | boolean | if set true the columns visibility selection list shows a tick all option allowing users to hide or show all the columns at once (default - false) | var tfConfig = { showHide_enable_tick_all: true } |
|
| showHide_tick_all_text | string | defines the text preceding the tick all option in the check list (default - 'Select all:') | var tfConfig = { showHide_tick_all_text: 'Tick all: ' } |
|
| on_cols_manager_loaded | function | callback invoked when extension is loaded and instanciated (default - null) | var tfConfig = { on_cols_manager_loaded: function(o){ alert(o.id); } } |
|
| on_before_open_cols_manager | function | calls defined function before columns visibility selection container is opened | var tfConfig = { on_before_open_cols_manager: function(o){
alert(o.id); } |
|
| on_after_open_cols_manager | function | calls defined function after columns visibility selection container is opened | var tfConfig = { on_after_open_cols_manager: function(o){
alert(o.id); } |
|
| on_before_close_cols_manager | function | calls defined function before columns visibility selection container is closed | var tfConfig = { on_before_close_cols_manager: function(o){
alert(o.id); } |
|
| on_after_close_cols_manager | function | calls defined function after columns visibility selection container is closed | var tfConfig = { on_after_close_cols_manager: function(o){
alert(o.id); } |
|
| on_before_col_is_hidden | function | calls defined function before selected column is hidden | var tfConfig = { on_before_col_is_hidden: function(o){ alert(o.id);
} |
|
| on_after_col_is_hidden | function | calls defined function after selected column is hidden | var tfConfig = { on_after_col_is_hidden: function(o){ alert(o.id);
} |
|
| on_before_col_is_displayed | function | calls defined function before selected column is displayed | var tfConfig = { on_before_col_is_displayed: function(o){
alert(o.id); } |
|
| on_after_col_is_displayed | function | calls defined function after selected column is displayed | var tfConfig = { on_after_col_is_displayed: function(o){ alert(o.id);
} |
Methods
| Method | Description | Remarks | Example |
|---|---|---|---|
| SetColsVisibility( extName ) | Initialises the extension:
|
The extension name matches the value defined in the extensions manager:extensions: { name:['ColsMng'] ... } |
myTF.SetColsVisibility('ColsMng'); |
| RemoveColsVisibility() | Removes the elements generated by the extension | myTF.RemoveColsVisibility(); |
|
| ShowCol( colIndex ) updated | Shows specified column:
|
myTF.ShowCol(0); |
|
| HideCol( colIndex ) updated | Hides specified column:
|
myTF.HideCol(0); |
|
| ToggleCol( colIndex ) new | Toggles visibility of specified column:
|
myTF.ToggleCol(2); |
|
| IsColHidden( colIndex ) new | Checks if specified column is hidden, returns a boolean:
|
myTF.ToggleCol(2); |
|
| GetHiddenColIndexes() new | Returns an array containin the indexes of hidden columns |
var hiddenCols = myTF.GetHiddenColIndexes(); |
Columns Resizer
Download and extract the extension's zip at same location than tablefilter.js document. Note this extension doesn't work with TF versions lower than 1.9.5.
Configuration properties
| Property | Type | Description | Remarks | Example |
|---|---|---|---|---|
| cols_resize | boolean | if set true, it will enable the enable the Columns Resizer extension (default - true) | var tfConfig = { cols_resize: true } |
|
| col_resizer_stylesheet | string | defines the stylesheet path | var tfConfig = { col_resizer_stylesheet: 'myStylesheetFolder/myStylesheet.css' } |
|
| col_resizer_show_handle | boolean | if set true, it shows a vertical line (handle) on column resize (default - true) | var tfConfig = { col_resizer_show_handle: false } |
|
| col_resizer_all_cells | boolean | if set true, all columns' cells become resizable instead of only the headers' cells (default - false) | var tfConfig = { col_resizer_all_cells: true } |
|
| col_resizer_disable_resize | array | this property defines the colmuns that are not resizable (default - null) | var tfConfig = { col_resizer_disable_resize: [2,3] } |
|
| col_resizer_hide_filters_on_resize | boolean | if set true, it hides the filters on column resize (default - false) | var tfConfig = { col_resizer_hide_filters_on_resize: true
} |
|
| col_resizer_table_css_class | string | defines an additional css class for the resizable table (default - 'resizable') | var tfConfig = { col_resizer_table_css_class: 'myClass' } |
|
| col_resizer_handle_css_class | string | defines the css class for the handle (vertical line) (default - 'resizer') | var tfConfig = { col_resizer_handle_css_class: 'myClass' } |
|
| col_resizer_text_ellipsis_css_class | string | defines the css class allowing the cell content ellipsis (default - 'ellipsis') | Only IE browser seems to behave correctly | var tfConfig = { col_resizer_text_ellipsis_css_class: 'myClass'
} |
| col_resizer_nowrap_css_class | string | defines the css class for the cell content white-space (default - 'nowrap') | var tfConfig = { col_resizer_nowrap_css_class: 'myClass' } |
|
| col_resizer_cursor_type | string | defines the cursor type to display on column resize (default - 'e-resize') | Check this resource to have a list of possible values: http://www.w3schools.com/CSS/pr_class_cursor.asp | var tfConfig = { col_resizer_cursor_type: 'pointer' } |
| col_resizer_table_layout | string | defines the table-layout property (default - 'fixed') | Check this resource to have a list of possible values: http://www.w3schools.com/CSS/pr_tab_table-layout.asp | var tfConfig = { col_resizer_table_layout: 'auto' } |
| col_enable_text_ellipsis | boolean | if set true, it will enable the cell content ellipsis (default - true) | var tfConfig = { col_enable_text_ellipsis: false } |
|
| col_resizer_enable_nowrap | boolean | if set true, it will enable the cell content wrap (default - false) | var tfConfig = { col_resizer_enable_nowrap: true } |
|
| col_resizer_min_width | number | defines the minimum width in px allowed for a resized column (default - 10) | var tfConfig = { col_resizer_min_width: 25 } |
|
| col_resizer_width_adjustment | number | defines an adjustment width delta to apply on width calculation after resize (default - 9) | var tfConfig = { col_resizer_width_adjustment: 15 } |
|
| col_resizer_cols_headers_table | string | if filters are in a separated table, this property tells the script to resize respective headers columns (default - null) | var tfConfig = { col_resizer_cols_headers_table: 'otherTableId'
} |
|
| col_resizer_cols_headers_index | number | only with external filters, this tells the scripts which row contains table headers (default - 1) | var tfConfig = { col_resizer_cols_headers_index: 0 } |
|
| on_before_col_resized updated | function | calls defined function before selected column is resized | note 2 parameters are sent back:
|
var tfConfig = { on_before_col_resized: function(o, colIndex){
alert('Column index '+ colIndex); } |
| on_after_col_resized updated | function | calls defined function after selected column is resized | note 2 parameters are sent back:
|
var tfConfig = { on_after_col_resized: function(o, colIndex){
alert('column index '+ colIndex); } |
Methods
| Method | Description | Remarks | Example |
|---|---|---|---|
| SetColsResizer( extName ) | Initialises the Columns Resizer extension:
|
myTF.SetColsResizer(); |
|
| RemoveColsResizer() | Removes the extension | myTF.RemoveColsResizer(); |
Filters Row Visibility Manager
Download and extract the extension's zip at same location than tablefilter.js document. Note this extension doesn't work with TF versions lower than 1.9.4.
Configuration properties
| Property | Type | Description | Remarks | Example |
|---|---|---|---|---|
| filters_row_visibility | boolean | if set true, it will enable the filters row visibility extension (default - true) | var tfConfig = { filters_row_visibility: true } |
|
| filters_row_visibility_target_id | string | defines the id of the element that will contain the link/button showing / hiding filters row (default - null) | var tfConfig = { filters_row_visibility_target_id: 'myContainerId'
} |
|
| filters_row_visibility_icon | boolean | enable/disable default icon placed just before the link (default - true) | var tfConfig = { filters_row_visibility_icon: true } |
|
| btn_filters_row_visibility_text | string | sets the text of the link showing / hiding filters row (default - '') | if filters_row_visibility_icon property is not set false the icon will appear by default | var tfConfig = { btn_filters_row_visibility_text: 'Show/hide
Filters' } |
| btn_filters_row_visibility_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 overwrites any eventual onclick
attribute |
var tfConfig = { btn_filters_row_visibility_html: '<button
class="myCssClass">Expand/collapse filters</button>'
} |
| btn_filters_row_visibility_css_class | string | defines the css class of the link showing / hiding filters row (default - 'btnExpClpFlt') | var tfConfig = { btn_filters_row_visibility_css_class: 'myClass'
} |
|
| filters_row_visibility_css_class | string | defines the css class of the container (default - 'expClpFlt') | var tfConfig = { filters_row_visibility_css_class: 'myClass'
} |
|
| filters_row_visibility_filters_table | string | If filters are in a separated table, this is the id of the filters table (default - null) | var tfConfig = { filters_row_visibility_filters_table: 'myTableId'
} |
|
| filters_row_visibility_filters_index | number | Only with external filters, this tells the scripts which row contains the filters (default - 1) | var tfConfig = { filters_row_visibility_filters_index: 1 } |
|
| filters_row_visibility_at_start | boolean | if set false it will hide the filters row at extension first load | var tfConfig = { filters_row_visibility_at_start: false } |
|
| on_before_filters_row_is_displayed | function | calls defined function before filters row is displayed | var tfConfig = { on_before_filters_row_is_displayed: function(o){
alert(o.id); } |
|
| on_after_filters_row_is_displayed | function | calls defined function after filters row is displayed | var tfConfig = { on_after_filters_row_is_displayed: function(o){
alert(o.id); } |
|
| on_before_filters_row_is_hidden | function | calls defined function before filters row is hidden | var tfConfig = { on_before_filters_row_is_hidden: function(o){
alert(o.id); } |
|
| on_after_filters_row_is_hidden | function | calls defined function after filters row is hidden | var tfConfig = { on_after_filters_row_is_hidden: function(o){
alert(o.id); } |
Methods
| Method | Description | Remarks | Example |
|---|---|---|---|
| SetFiltersRowVisibility( extName ) | Initialises the extension and sets the show/hide filters row link:
|
myTF.SetFiltersRowVisibility(); |
|
| RemoveFiltersRowVisibility() | Removes the show/hide filters row link | myTF.RemoveFiltersRowVisibility(); |
