1 | [![Build Status](https://api.travis-ci.org/koalyptus/TableFilter.svg?branch=master)](https://travis-ci.org/koalyptus/TableFilter)
|
2 | [![Document](https://koalyptus.github.io/TableFilter/docs/badge.svg)](https://koalyptus.github.io/TableFilter/docs/source.html)
|
3 | [![codecov](https://codecov.io/gh/koalyptus/TableFilter/branch/master/graph/badge.svg)](https://codecov.io/gh/koalyptus/TableFilter)
|
4 | [![Greenkeeper badge](https://badges.greenkeeper.io/koalyptus/TableFilter.svg)](https://greenkeeper.io/)
|
5 |
|
6 | # TableFilter
|
7 |
|
8 | > A Javascript library making HTML tables filterable
|
9 |
|
10 | TableFilter is a modernised version of the [HTML Table Filter generator](http://tablefilter.free.fr) javascript plugin.
|
11 | This library adds to any html table a "filter by column" feature that enables
|
12 | 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.
|
13 |
|
14 | ## Features
|
15 | * Convert a regular HTML table into an advanced grid component providing:
|
16 | * Advanced columns filtering model
|
17 | * Sorting and pagination capabilities
|
18 | * Complete selection model ([ezEditTable](http://codecanyon.net/item/ezedittable-enhance-html-tables/2425123?ref=koalyptus) extension)
|
19 | * Extended keyboard navigation ([ezEditTable](http://codecanyon.net/item/ezedittable-enhance-html-tables/2425123?ref=koalyptus) extension)
|
20 | * Inline cell or row editing ([ezEditTable](http://codecanyon.net/item/ezedittable-enhance-html-tables/2425123?ref=koalyptus) extension)
|
21 | * Row insertion or deleting ([ezEditTable](http://codecanyon.net/item/ezedittable-enhance-html-tables/2425123?ref=koalyptus) extension)
|
22 | * And even more features...
|
23 | * Attach to an existing HTML table
|
24 | * Integration with any server-side technology as this is a pure client-side
|
25 | solution
|
26 | * Exhaustive documentation and poweful API
|
27 |
|
28 | ## Getting started
|
29 | * Clone the repo using Git:
|
30 | ```shell
|
31 | git clone https://github.com/koalyptus/TableFilter.git
|
32 | ```
|
33 |
|
34 | * You can [download](https://github.com/koalyptus/TableFilter/archive/master.zip) this repository.
|
35 |
|
36 | * TableFilter is available on [npm repository](https://www.npmjs.com/package/tablefilter), you can install it from the command line using the following command:
|
37 | ```shell
|
38 | npm install tablefilter --save-dev
|
39 | ```
|
40 | * or get the future features from the ``next`` release channel:
|
41 | ```shell
|
42 | npm install tablefilter@next --save-dev
|
43 | ```
|
44 | * Alternatively you can also [access these files from unpkg CDN](https://unpkg.com/tablefilter/), download them or point your package manager to them.
|
45 |
|
46 | ## Setup
|
47 | ### Using modules
|
48 | Require `TableFilter`:
|
49 | ```javascript
|
50 | // ES2015 modules
|
51 | import TableFilter from 'tablefilter';
|
52 |
|
53 | // CommonJS or AMD modules
|
54 | var TableFilter = require('tablefilter');
|
55 | ```
|
56 |
|
57 | ### Using distribution scripts
|
58 | If you are not using a module system, you can reference the distribution scripts directly in your html pages:
|
59 | ```html
|
60 | <script src="path_to/node_modules/tablefilter/dist/tablefilter/tablefilter.js"></script>
|
61 | ```
|
62 |
|
63 | ### Placing manually the distribution scripts in your project
|
64 | Copy the ``tablefilter`` directory under ``dist`` and place it at desired location in your project. Then include the main js file in your page:
|
65 | ```shell
|
66 | <script src="path/to/my/scripts/tablefilter/tablefilter.js"></script>
|
67 | ```
|
68 |
|
69 | ### Usage
|
70 | 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
|
71 | ```shell
|
72 | <script>
|
73 | var tf = new TableFilter(document.querySelector('.my-table'), {
|
74 | base_path: 'path/to/my/scripts/tablefilter/'
|
75 | });
|
76 | tf.init();
|
77 | </script>
|
78 | ```
|
79 | If the ``base_path`` property is not specified, it will default to ``/tablefilter`` directory:
|
80 | ```shell
|
81 | your-page.html
|
82 | |— tablefilter
|
83 | ```
|
84 |
|
85 | ## Development
|
86 | This project requires node.js and Grunt to be installed:
|
87 | - install [node.js](https://nodejs.org/)
|
88 | - install [Grunt](http://gruntjs.com/getting-started) from the command line using npm (comes with node.js):
|
89 | ```shell
|
90 | npm install -g grunt-cli
|
91 | ```
|
92 | Once ``Grunt`` is sorted out you can follow the instructions below.
|
93 | Start by installing any dependencies.
|
94 |
|
95 | ```shell
|
96 | npm install
|
97 | ```
|
98 | Use
|
99 | ```shell
|
100 | npm run dev
|
101 | ```
|
102 | command to launch a build / watch cycle and start the local
|
103 | sever on port ``8080``.
|
104 |
|
105 | Use
|
106 | ```shell
|
107 | npm run build
|
108 | ```
|
109 | command to generate a production build.
|
110 |
|
111 | The
|
112 | ```shell
|
113 | npm run dist
|
114 | ```
|
115 | command will create a production build, run the tests and finally generate
|
116 | the demos:
|
117 |
|
118 | To run all the tests and generate the coverage report:
|
119 |
|
120 | ```shell
|
121 | npm test
|
122 | ```
|
123 |
|
124 | or to run specific test(s):
|
125 |
|
126 | ```shell
|
127 | grunt test-only:test.html
|
128 | grunt test-only:test.html,test-sort.html
|
129 | ```
|
130 |
|
131 | to view the coverage report(s), open the `index.html` under the
|
132 | `report/coverage` folder or
|
133 | [online](https://codecov.io/gh/koalyptus/TableFilter).
|
134 |
|
135 | ## Demos
|
136 | Check out the online [examples](http://koalyptus.github.io/TableFilter/examples)
|
137 | or generate the demos locally:
|
138 | ```shell
|
139 | npm run build:demos
|
140 | ```
|
141 | then run the local webserver:
|
142 | ```shell
|
143 | npm start
|
144 | ```
|
145 | then pick a demo from:
|
146 | ```shell
|
147 | http://localhost:8080/demos/
|
148 | ```
|
149 |
|
150 | ## Documentation
|
151 | Find exhaustive documentation on the configuration options in the [WIKI](https://github.com/koalyptus/TableFilter/wiki) section.
|
152 |
|
153 | Autogenerated documentation of the ES6 modules is available on the website: [docs](http://koalyptus.github.io/TableFilter/docs)
|
154 |
|
155 | If you previously used the HTML Table Filter Generator plugin, verify the configuration
|
156 | options you are using are still supported: [Obsolete](https://github.com/koalyptus/TableFilter/wiki/Obsolete)
|
157 |
|
158 | Run this task to generate the documentation in the ``docs/docs`` directory:
|
159 | ```shell
|
160 | npm run esdoc
|
161 | ```
|
162 |
|
163 | ## Support
|
164 | * 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).
|
165 |
|
166 | ## License
|
167 | [MIT](LICENSE)
|
168 |
|
169 |
|
170 |
|
171 |
|
172 |
|
173 |
|