TableFilter

by koalyptus

koalyptus / TableFilter

A Javascript library making HTML tables filterable and a bit more :)

222 Stars 58 Forks Last release: 3 months ago (0.7.3) MIT License 1.8K Commits 101 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Build Status Document codecov Greenkeeper badge Donate

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 powerful API

Getting started

  • Clone the repo using Git:

    shell
    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:

    shell
    npm install tablefilter --save-dev
    
  • or get the future features from the

    next
    release channel:
    shell
    npm install [email protected] --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
: ```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

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:
shell

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
shell

If the
base_path
property is not specified, it will default to
/tablefilter
directory:
shell
your-page.html
 |— tablefilter

Development

This project requires node.js and Grunt to be installed: - install node.js v8.9.4 or higher - install Grunt from the command line using npm (comes with node.js):

shell
npm install -g grunt-cli
Once
Grunt
is sorted out you can follow the instructions below. Start by installing any dependencies.
npm install

Use

shell
npm run dev
command to launch a build / watch cycle and start the local sever on port
8080
.

Use

shell
npm run build
command to generate a production build.

The

shell
npm run dist
command will create a production build, run the tests and finally generate the demos:

To run all the tests and generate the coverage report:

npm test

or to run specific test(s):

grunt test-only:test.html
grunt test-only:test.html,test-sort.html

to 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:

shell
npm run build:demos
then run the local webserver:
shell
npm start
then pick a demo from:
shell
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:
shell
npm run esdoc

Support

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.