TableFilter

A Javascript library making HTML tables filterable

TableFilter is a modernised version of the HTML Table Filter generator javascript plugin. This library 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 (ezEditTable extension)
  • Extended keyboard navigation (ezEditTable extension)
  • Inline cell or row editing (ezEditTable extension)
  • Row insertion or deleting (ezEditTable extension)
  • 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

Getting started

Clone the repo using Git:

git clone --bare https://github.com/koalyptus/TableFilter.git

Alternatively you can download this repository.

Setup

Copy the tablefilter directory under dist and place it at desired location in your project. Then include the main 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>

If the base_path property is not specified, it will default to /tablefilter directory:

your-page.html
 |— tablefilter

Development

This project requires node.js and Grunt to be installed:

• install node.js
• install Grunt from the command line using npm (comes with node.js):

npm install -g grunt-cli

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, run the tests and finally generate the demos:

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

Demos

Run the local webserver:

grunt server

then pick a demo from:

http://localhost:8080/demos/

Documentation

Run this task to generate the documentation in the doc directory:

grunt esdoc

Find the complete documentation in the WIKI section.

Support

• GitHub for reporting bugs and feature requests.

License

MIT