branch: master
SHA: 2b3a728d91
range SHA: 3be600a070c9...2b3a728d9137
build id: 126820501
build number: 288
4.4 KiB
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 features...
- Attach to an existing HTML table
- Integration with any server-side technology as this is a pure client-side solution
- Exhaustive documentation and poweful API
Getting started
- Clone the repo using Git:
git clone --bare https://github.com/koalyptus/TableFilter.git
-
You can download this repository.
-
Alternatively, install TableFilter files in your npm enabled project using:
npm install tablefilter --save
- or get the future features from the
next
release channel:
npm install tablefilter@next --save
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(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 -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 generate the demos locally:
grunt build-demos
then run the local webserver:
grunt server
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:
grunt esdoc
Support
- GitHub for reporting bugs and feature requests.