1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-05 16:13:34 +02:00
TableFilter/README.md

2.5 KiB

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