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
- 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
- Alternatively you can also access these files from unpkg CDN, download them or point your package manager to them.
Require TableFilter
:
// ES2015 modules
import TableFilter from 'tablefilter';
// CommonJS or AMD modules
var TableFilter = require('tablefilter');
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>
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(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
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
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.
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/
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
- GitHub for reporting bugs and feature requests.