TableFilter

Filter HTML tables data easily

TableFilter is a modernised version of the HTML Table Filter generator plugin. This script adds to any html table a "filter by column" feature that enables users to filter and limit the data displayed within a long table. By default, the script automatically adds a filter grid bar at the top of the desired table.

##Features

• Convert a regular HTML table into an advanced grid component providing:
  • Advanced columns filtering model
  • Sorting and pagination facilities
  • Complete selection model (addon)
  • Extended keyboard navigation (addon)
  • Inline cell or row editing (addon)
  • Row insertion or deleting (addon)
  • And even more behaviors...
• Attach to an existing HTML table
• Integration with any server-side technology as this is a pure client-side solution
• Callbacks for all events, and delegates for most actions
• Exhaustive documentation and API
• Valuable support provided under a Premium request

##Setup Copy the tablefilter directory under dist and place it at desired location in your project. Then include the bundle js file in your page:

<script src="path/to/my/scripts/tablefilter/tablefilter.js"></script>

Place the following snippet just under the HTML table and always define a base_path property in the configuration object to reflect the path to the script

<script>
var tf = new TableFilter('my-table-id', {
    base_path: 'path/to/my/scripts/tablefilter/'
});
tf.init();
</script>

##Development If you are not familiar with Grunt visit this page: gruntjs.com/getting-started. Once Grunt is sorted out you can follow the instructions below. Start by installing any dependencies.

npm install

Use the Grunt dev task to launch a build / watch cycle and start the local sever on port 8080:

grunt dev

Use the build task to generate a production build:

grunt build

The default Grunt task will create a production build and also run the tests:

grunt

To run all the tests:

grunt test

and to run specific test(s):

grunt test-only:test.html
grunt test-only:test.html,test-sort.html

Documentation

Find the complete documentation in the WIKI section.

Support

• GitHub for reporting bugs and feature requests.

License

MIT

Property	Type	Description	Remarks	Example
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' target_id: 'my_container_id', enable_icon: false }] };
btn_text	string	sets the text of the link showing / hiding filters row (default - '')		var tfConfig = { extensions: [{ name: 'filtersVisibility' target_id: 'my_container_id', enable_icon: false, btn_text: 'Filters' }] };
btn_filters_row_visibility_html	string	defines the HTML of the button showing / hiding filters row (default * null)	note that the <code>onclick</code> event is added automatically to the html element and overwrites any eventual <code>onclick</code> attribute </td> <td> <code>var tfConfig = { btn_filters_row_visibility_html: '&lt;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); }