2016-07-23 11:24:21 +02:00
[![Build Status ](https://api.travis-ci.org/koalyptus/TableFilter.svg?branch=master )](https://travis-ci.org/koalyptus/TableFilter)
2018-05-18 07:50:34 +02:00
[![Document ](https://www.tablefilter.com/docs/badge.svg )](https://www.tablefilter.com/docs/source.html)
2016-12-07 14:16:14 +01:00
[![codecov ](https://codecov.io/gh/koalyptus/TableFilter/branch/master/graph/badge.svg )](https://codecov.io/gh/koalyptus/TableFilter)
2017-06-28 12:47:32 +02:00
[![Greenkeeper badge ](https://badges.greenkeeper.io/koalyptus/TableFilter.svg )](https://greenkeeper.io/)
2018-08-08 13:15:10 +02:00
[![Donate ](https://img.shields.io/badge/donate-%24-green.svg )](https://www.tablefilter.com/donate.html)
2016-07-23 11:24:21 +02:00
# TableFilter
2014-07-20 13:32:13 +02:00
2015-07-10 01:21:11 +02:00
> A Javascript library making HTML tables filterable
2015-02-14 09:59:12 +01:00
2015-07-07 09:52:42 +02:00
TableFilter is a modernised version of the [HTML Table Filter generator ](http://tablefilter.free.fr ) javascript plugin.
This library adds to any html table a "filter by column" feature that enables
2015-06-09 10:46:08 +02:00
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.
2015-06-08 13:49:14 +02:00
2015-07-19 13:30:16 +02:00
## Features
2015-06-06 16:16:41 +02:00
* Convert a regular HTML table into an advanced grid component providing:
* Advanced columns filtering model
2016-11-26 10:30:00 +01:00
* Sorting and pagination capabilities
2015-10-28 08:09:37 +01:00
* Complete selection model ([ezEditTable](http://codecanyon.net/item/ezedittable-enhance-html-tables/2425123?ref=koalyptus) extension)
* Extended keyboard navigation ([ezEditTable](http://codecanyon.net/item/ezedittable-enhance-html-tables/2425123?ref=koalyptus) extension)
* Inline cell or row editing ([ezEditTable](http://codecanyon.net/item/ezedittable-enhance-html-tables/2425123?ref=koalyptus) extension)
* Row insertion or deleting ([ezEditTable](http://codecanyon.net/item/ezedittable-enhance-html-tables/2425123?ref=koalyptus) extension)
2016-04-12 09:49:54 +02:00
* And even more features...
2015-06-06 16:16:41 +02:00
* Attach to an existing HTML table
* Integration with any server-side technology as this is a pure client-side
solution
2016-04-12 09:49:54 +02:00
* Exhaustive documentation and poweful API
2015-06-06 16:16:41 +02:00
2015-07-19 13:30:16 +02:00
## Getting started
2015-10-15 13:24:22 +02:00
* Clone the repo using Git:
2015-07-10 01:21:11 +02:00
```shell
2016-11-26 10:30:00 +01:00
git clone https://github.com/koalyptus/TableFilter.git
2015-07-10 01:21:11 +02:00
```
2015-10-15 13:24:22 +02:00
* You can [download ](https://github.com/koalyptus/TableFilter/archive/master.zip ) this repository.
2017-05-13 03:09:21 +02:00
* TableFilter is available on [npm repository ](https://www.npmjs.com/package/tablefilter ), you can install it from the command line using the following command:
2015-10-15 13:24:22 +02:00
```shell
2017-01-26 10:14:34 +01:00
npm install tablefilter --save-dev
2017-05-13 12:51:10 +02:00
```
2015-12-30 06:56:44 +01:00
* or get the future features from the ``next`` release channel:
```shell
2017-01-26 10:14:34 +01:00
npm install tablefilter@next --save-dev
2015-12-30 06:56:44 +01:00
```
2017-05-13 03:09:21 +02:00
* Alternatively you can also [access these files from unpkg CDN ](https://unpkg.com/tablefilter/ ), download them or point your package manager to them.
2015-07-10 01:21:11 +02:00
2015-07-19 13:30:16 +02:00
## Setup
2017-05-13 03:09:21 +02:00
### Using modules
Require `TableFilter` :
```javascript
// 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:
```html
< script src = "path_to/node_modules/tablefilter/dist/tablefilter/tablefilter.js" > < / script >
```
### Placing manually the distribution scripts in your project
2015-07-07 15:08:08 +02:00
Copy the ``tablefilter`` directory under ``dist`` and place it at desired location in your project. Then include the main js file in your page:
2015-06-08 13:49:14 +02:00
```shell
2015-06-08 13:55:57 +02:00
< script src = "path/to/my/scripts/tablefilter/tablefilter.js" > < / script >
2015-06-08 13:49:14 +02:00
```
2017-05-13 03:09:21 +02:00
### Usage
2015-06-08 13:55:57 +02:00
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
2015-06-06 17:18:53 +02:00
```shell
2015-06-08 13:49:14 +02:00
< script >
2015-10-31 09:00:28 +01:00
var tf = new TableFilter(document.querySelector('.my-table'), {
2015-06-08 13:55:57 +02:00
base_path: 'path/to/my/scripts/tablefilter/'
});
2015-06-08 13:49:14 +02:00
tf.init();
< / script >
2015-06-06 17:18:53 +02:00
```
2015-07-01 09:39:29 +02:00
If the ``base_path`` property is not specified, it will default to ``/tablefilter`` directory:
```shell
your-page.html
2015-07-19 13:30:16 +02:00
|— tablefilter
2017-05-13 12:51:10 +02:00
```
2015-06-06 17:18:53 +02:00
2015-07-19 13:30:16 +02:00
## Development
This project requires node.js and Grunt to be installed:
2018-03-03 00:49:32 +01:00
- install [node.js ](https://nodejs.org/ ) v8.9.4 or higher
2015-07-20 09:21:04 +02:00
- install [Grunt ](http://gruntjs.com/getting-started ) from the command line using npm (comes with node.js):
2015-07-19 13:30:16 +02:00
```shell
npm install -g grunt-cli
```
Once ``Grunt`` is sorted out you can follow the instructions below.
2015-06-06 16:16:41 +02:00
Start by installing any dependencies.
```shell
npm install
```
2017-05-13 12:51:10 +02:00
Use
2016-11-26 10:30:00 +01:00
```shell
npm run dev
2017-05-13 12:51:10 +02:00
```
2016-11-26 10:30:00 +01:00
command to launch a build / watch cycle and start the local
2016-11-26 07:43:59 +01:00
sever on port ``8080``.
2015-06-06 16:36:49 +02:00
2017-05-13 12:51:10 +02:00
Use
2016-11-26 10:30:00 +01:00
```shell
npm run build
2017-05-13 12:51:10 +02:00
```
2016-11-26 10:30:00 +01:00
command to generate a production build.
2015-06-06 16:36:49 +02:00
2017-05-13 12:51:10 +02:00
The
2016-11-26 10:30:00 +01:00
```shell
2017-01-07 12:51:49 +01:00
npm run dist
2017-05-13 12:51:10 +02:00
```
command will create a production build, run the tests and finally generate
2016-11-26 10:30:00 +01:00
the demos:
2015-06-06 16:36:49 +02:00
2016-12-07 14:16:14 +01:00
To run all the tests and generate the coverage report:
2015-06-06 16:36:49 +02:00
```shell
2016-11-26 07:43:59 +01:00
npm test
2015-06-06 16:36:49 +02:00
```
2016-12-07 14:16:14 +01:00
or to run specific test(s):
2015-06-06 16:36:49 +02:00
```shell
grunt test-only:test.html
2015-06-06 16:41:58 +02:00
grunt test-only:test.html,test-sort.html
2015-06-06 16:36:49 +02:00
```
2015-06-06 16:16:41 +02:00
2016-12-07 14:16:14 +01:00
to view the coverage report(s), open the `index.html` under the
`report/coverage` folder or
[online ](https://codecov.io/gh/koalyptus/TableFilter ).
2015-07-07 14:45:49 +02:00
## Demos
2018-05-18 07:50:34 +02:00
Check out the online [examples ](http://www.tablefilter.com/examples.html )
2016-11-26 10:30:00 +01:00
or generate the demos locally:
2015-12-26 07:17:15 +01:00
```shell
2017-01-07 12:51:49 +01:00
npm run build:demos
2015-12-26 07:17:15 +01:00
```
then run the local webserver:
2015-07-07 14:45:49 +02:00
```shell
2016-11-26 07:43:59 +01:00
npm start
2015-07-07 14:45:49 +02:00
```
then pick a demo from:
```shell
2015-07-07 15:22:37 +02:00
http://localhost:8080/demos/
2015-07-07 14:45:49 +02:00
```
2015-06-11 09:44:16 +02:00
## Documentation
2015-09-12 05:42:47 +02:00
Find exhaustive documentation on the configuration options in the [WIKI ](https://github.com/koalyptus/TableFilter/wiki ) section.
2018-05-18 07:50:34 +02:00
Autogenerated documentation of the ES6 modules is available on the website: [docs ](http://www.tablefilter.com/docs )
2015-09-12 05:42:47 +02:00
2016-04-30 04:58:15 +02:00
If you previously used the HTML Table Filter Generator plugin, verify the configuration
2016-05-12 13:37:41 +02:00
options you are using are still supported: [Obsolete ](https://github.com/koalyptus/TableFilter/wiki/Obsolete )
2016-04-30 04:58:15 +02:00
2015-09-12 05:42:47 +02:00
Run this task to generate the documentation in the ``docs/docs`` directory:
2015-08-06 08:24:34 +02:00
```shell
2016-11-26 07:43:59 +01:00
npm run esdoc
2015-08-06 08:24:34 +02:00
```
2015-09-12 05:42:47 +02:00
2015-06-06 17:02:31 +02:00
## Support
2017-04-16 11:38:10 +02:00
* GitHub for [reporting bugs ](https://github.com/koalyptus/TableFilter/blob/master/CONTRIBUTING.md#reporting-bugs ) and [feature requests ](https://github.com/koalyptus/TableFilter/blob/master/CONTRIBUTING.md#suggesting-enhancements-and-features ).
2015-06-06 16:16:41 +02:00
2015-06-06 17:02:31 +02:00
## License
2015-10-17 10:49:38 +02:00
[MIT ](LICENSE )
2015-06-13 11:03:33 +02:00
2015-06-26 10:11:16 +02:00
2015-06-13 11:03:33 +02:00
2015-07-06 10:08:37 +02:00