-
-
-
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 capabilities -
- 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 https://github.com/koalyptus/TableFilter.git
-You can download this repository.
-
-TableFilter is available on npm repository, you can install it from the command line using the following command:
-
-npm install tablefilter --save-dev
-- or get the future features from the
nextrelease channel:
-npm install tablefilter@next --save-dev
- - Alternatively you can also access these files from unpkg CDN, download them or point your package manager to them. -
Setup
-Using modules
-Require TableFilter:
// 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:
-<script src="path_to/node_modules/tablefilter/dist/tablefilter/tablefilter.js"></script>Placing manually the distribution scripts in your project
-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>Usage
-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
- |— tablefilterDevelopment
-This project requires node.js and Grunt to be installed:
--
-
- install node.js -
- install Grunt from the command line using npm (comes with node.js):
-Oncenpm install -g grunt-cliGruntis sorted out you can follow the instructions below. -Start by installing any dependencies.
-
npm installUse
-npm run devcommand to launch a build / watch cycle and start the local
-sever on port 8080.
Use
-npm run buildcommand to generate a production build.
-The
-npm run distcommand will create a production build, run the tests and finally generate -the demos:
-To run all the tests and generate the coverage report:
-npm testor to run specific test(s):
-grunt test-only:test.html
-grunt test-only:test.html,test-sort.htmlto view the coverage report(s), open the index.html under the
-report/coverage folder or
-online.
Demos
-Check out the online examples -or generate the demos locally:
-npm run build:demosthen run the local webserver:
-npm startthen 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:
npm run esdocSupport
--
-
- GitHub for reporting bugs and feature requests. -