Home Reference Source

Build Status Document codecov Greenkeeper badge Donate

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

Getting started

Setup

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>

Usage

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(document.querySelector('.my-table'), {
    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:

npm install

Use

npm run dev

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

Use

npm run build

command to generate a production build.

The

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.

Demos

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:

http://localhost:8080/demos/

Documentation

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

Support

License

MIT