# 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

Check out the online examples or 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