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

Support

• GitHub for reporting bugs and feature requests.

License

MIT

Documentation

Configuration

Filters appearance

Property	Type	Description	Remarks	Example
base_path	string	new defines the path to the script's directory (default: 'TableFilter/')		var tfConfig = { base_path: 'myDir/' }
stylesheet	string	new defines the global stylesheet (default: 'filtergrid.css')		var tfConfig = { stylesheet: 'myDir/myStylesheet.css' }
fixed_headers	boolean	enables / disables fixed headers and table body scrolling (default -false)	Table needs to have thead and tbody tags defined. Table headers are fixed with a light css solution. It doesn't seem to work on browsers such as Opera and Chrome. In any case, it is not the intent of this script to implement a fully tested solution for generating fixed headers. A simple and easy alternative is to place a table with same number of columns and widths above the data table and use the external_flt_grid property to generate filters in the corresponding columns (external_flt_grid_ids)! Check this example.	var tfConfig = { fixed_headers: true }
tbody_height	number	defines the height of the table body when fixed headers are enabled (default - 200)		var tfConfig = { fixed_headers: true, tbody_height: 300 }
filters_cell_tag	string	specifies the tag of the cell containing a filter ('td' / 'th')		var tfConfig = { filters_cell_tag: 'th' }
col_width	array	this property defines column widths. It accepts an array containing width values (['150px','10%'])		var tfConfig = { col_width: ["150px","15%",null,null] }
inf_div_css_class	string	defines the css class of div containing paging elements, rows counter etc.	This div contains the paging elements, subdivided in 3 divs (left, middle and right).	var tfConfig = { inf_div_css_class: "myclass" }
left_div_css_class	string	defines the css class of left div	This div contains the rows counter	var tfConfig = { left_div_css_class: "myclass" }
right_div_css_class	string	defines the css class of right div	This div contains the Clear button and the results per page drop-down list if paging is enabled	var tfConfig = { right_div_css_class: "myclass" }
middle_div_css_class	string	defines the css class of middle div	This div contains the pages drop-down list and paging navigation buttons	var tfConfig = { middle_div_css_class: "myclass" }
flts_row_css_class	string	defines the css class of filters row		var tfConfig = { flts_row_css_class: "myclass" }
flt_css_class	string	defines the css class of filters (inputs and selects)		var tfConfig = { flt_css_class: "myclass" }
flt_small_css_class	string	defines the css class of smaller filters (if validation button is generated in the same column of a filter)		var tfConfig = { flt_small_css_class: "myclass" }
flt_multi_css_class	string	defines css class of multiple select filters		var tfConfig = { flt_multi_css_class: "myclass" }
single_flt_css_class	string	defines the css class of the single filter when the single_search_filter property is on		var tfConfig = { single_flt_css_class: "myclass" }
highlight_css_class	string	defines the css class of highlighted keywords		var tfConfig = { highlight_css_class: "myclass" }
even_row_css_class	string	defines the css class for even rows		var tfConfig = { even_row_css_class: "myclass" }
odd_row_css_class	string	defines the css class for odd rows		var tfConfig = { odd_row_css_class: "myclass" }
input_watermark_css_class	string	defines the css class of the watermark in input filters (default - fltWatermark)		var tfConfig = { input_watermark_css_class: "myclass" }
active_columns_css_class	string	defines the css class of the active column headers (default - activeHeader)		var tfConfig = { active_columns_css_class: "myclass" }