assets | ||
docs | ||
tablefilter | ||
.gitignore | ||
0-configuration.html | ||
advanced-grid-editable.html | ||
advanced-grid-selection.html | ||
alphabetical-pager.html | ||
alternating-rows.html | ||
auto-filter.html | ||
basic-usage.html | ||
case-sensitive.html | ||
column-calculations.html | ||
column-widths.html | ||
columns-visibility.html | ||
conditional-cell-formatting.html | ||
custom-checkbox-selection.html | ||
custom-filter-options.html | ||
custom-filtering.html | ||
data-types.html | ||
deep-linking.html | ||
exact-match-by-column.html | ||
exact-match.html | ||
examples.html | ||
external-filter-operators.html | ||
external-filters.html | ||
external-toolbar.html | ||
extract-data-apis.html | ||
filter-images.html | ||
filter-types.html | ||
filters-visibility-external-toggle.html | ||
filters-visibility.html | ||
grid-layout-custom-css.html | ||
grid-layout.html | ||
grouped-headers.html | ||
highlight-keywords.html | ||
index.html | ||
LICENSE | ||
linked-filters-greyed-out-options.html | ||
linked-filters.html | ||
load-filters-on-demand.html | ||
no-filters.html | ||
no-headers.html | ||
no-results-message.html | ||
paging.html | ||
persistence.html | ||
popup-filters.html | ||
README.md | ||
responsive.html | ||
rows-always-visible.html | ||
setup-requirejs.html | ||
setup-systemjs.html | ||
single-filter.html | ||
sort-columns-external-command.html | ||
sort-custom-type.html | ||
sort.html | ||
starter.html | ||
theme-roller.html | ||
toggle-features.html | ||
watermark.html |
TableFilter ![Build Status](https://api.travis-ci.org/koalyptus/TableFilter.svg?branch=master)
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.