Go to file
koalyptus 7afe45f1e6
Merge pull request #787 from koalyptus/dependabot/npm_and_yarn/codecov-3.7.1
Bump codecov from 3.7.0 to 3.7.1
2020-07-22 19:51:17 +10:00
.github/ISSUE_TEMPLATE Add support template 2019-04-28 11:21:18 +10:00
dist prepare dist 2020-07-22 19:45:07 +10:00
libs Added selection grid demo, removed old demos 2015-07-11 20:38:36 +10:00
src 769 refine empty nonempty operators logic 2020-06-16 12:28:12 +10:00
static introduce adjust_container_left_position option in help_instructions configuration 2020-05-13 20:46:23 +10:00
test 769 refine empty nonempty operators logic 2020-06-16 12:28:12 +10:00
.editorconfig Renamed long custom event names, added hashchange event 2016-03-16 18:08:26 +11:00
.esdoc.json Remove provate members from auto-generated documentation 2018-02-02 22:34:17 +11:00
.eslintrc 769 refine empty nonempty operators logic 2020-06-16 12:28:12 +10:00
.gitignore Added missing source maps 2016-12-24 23:55:31 +11:00
.travis.yml try name property in travis releases provider 2018-06-15 21:06:57 +10:00
CONTRIBUTING.md add donate badge 2018-08-08 21:15:10 +10:00
Gruntfile.js Enhance filter options sorting based on column data type 2019-06-07 18:26:33 +10:00
LICENSE Fixed clear all filters functionality when linked filters is on 2015-10-17 19:49:38 +11:00
PULL_REQUEST_TEMPLATE.md update pr template 2018-03-03 10:51:29 +11:00
README.md prepare dist + miscellaneous fixes 2019-12-09 14:44:37 +11:00
index.js Added index.js 2016-09-07 21:37:22 +10:00
package-lock.json prepare dist 2020-07-22 19:45:07 +10:00
package.json prepare dist 2020-07-22 19:45:07 +10:00
webpack.config.js prepare dist + miscellaneous fixes 2019-12-09 14:44:37 +11:00
webpack.dev.config.js convert var to const in webpack configs 2018-03-18 13:31:54 +11:00
webpack.test.config.js fix CleanWebpackPlugin webpack plugin upgrade 2019-06-06 11:22:03 +10:00


Build Status Document codecov Greenkeeper badge Donate


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.


  • Convert a regular HTML table into an advanced grid component providing:
    • Advanced columns filtering model
    • Sorting and pagination capabilities
    • 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 features...
  • Attach to an existing HTML table
  • Integration with any server-side technology as this is a pure client-side solution
  • Exhaustive documentation and powerful API

Getting started

  • Clone the repo using Git:
git clone https://github.com/koalyptus/TableFilter.git
  • You can download this repository.

  • TableFilter is available on npm repository, you can install it from the command line using the following command:

npm install tablefilter --save-dev
  • or get the future features from the next release channel:
npm install tablefilter@next --save-dev


Using modules

Require TableFilter:

// ES2015 modules
import TableFilter from 'tablefilter';

// CommonJS or AMD modules
var TableFilter = require('tablefilter');

Using distribution scripts

If you are not using a module system, you can reference the distribution scripts directly in your html pages:

<script src="path_to/node_modules/tablefilter/dist/tablefilter/tablefilter.js"></script>

Placing manually the distribution scripts in your project

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

var tf = new TableFilter(document.querySelector('.my-table'), {
    base_path: 'path/to/my/scripts/tablefilter/'

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

 |— tablefilter


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

  • install node.js v8.9.4 or higher
  • 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


npm run dev

command to launch a build / watch cycle and start the local sever on port 8080.


npm run build

command to generate a production build.


npm run dist

command will create a production build, run the tests and finally generate the demos:

To run all the tests and generate the coverage report:

npm test

or to run specific test(s):

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

to view the coverage report(s), open the index.html under the report/coverage folder or online.


Check out the online examples or generate the demos locally:

npm run build:demos

then run the local webserver:

npm start

then pick a demo from:



Find exhaustive documentation on the configuration options in the WIKI section.

Autogenerated documentation of the ES6 modules is available on the website: docs

If you previously used the HTML Table Filter Generator plugin, verify the configuration options you are using are still supported: Obsolete

Run this task to generate the documentation in the docs/docs directory:

npm run esdoc