f5a989d977
Date type tests |
||
---|---|---|
dist | ||
libs | ||
src | ||
static | ||
test | ||
.editorconfig | ||
.eslintrc | ||
.gitignore | ||
.travis.yml | ||
Gruntfile.js | ||
index.js | ||
LICENSE | ||
package.json | ||
README.md | ||
webpack.config.js |
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
- If you don't use
npm
, you can also access these files on unpkg, download them or point your package manager to them.
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.