https://github.com/herdiansc/jquery.columnfilter

Filter table columns. Demo http://codepen.io/herdiansc/full/xgXoLJ/
https://github.com/herdiansc/jquery.columnfilter

columnfilter jquery table

Last synced: 4 months ago
JSON representation

Filter table columns. Demo http://codepen.io/herdiansc/full/xgXoLJ/

• Host: GitHub
• URL: https://github.com/herdiansc/jquery.columnfilter
• Owner: herdiansc
• License: mit
• Created: 2017-01-27T08:14:06.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2024-10-16T05:55:57.000Z (about 1 year ago)
• Last Synced: 2025-08-18T08:16:02.207Z (4 months ago)
• Topics: columnfilter, jquery, table
• Language: JavaScript
• Homepage:
• Size: 23.4 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# jQuery.columnFilter

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

## About

**jQuery columnFilter** is a plug-in that lets you create a filter for a table with many columns.

When you hide several columns then the table will only show selected columns.

## Functional Requirement

These are the requirements fulfilled by this plugin:

- Need to be able to hide several columns so that the table is easy to read

- The hidden column must remain hidden on sequence page(table) visits. 

## How  to Use It

Your table markup:

```html



    

        

            ID

            Username

            Email

            Display Name

        

    

    

        

            1

            John

            john@example.com

            John Doe

        

    

```

And use this basic plugin initiation:

```javascript

$('table').columnFilter();

```

Or use this advanced plugin initiation:

```javascript

$('table').columnFilter({

    columnCheckboxsContainer: '.column-list',

    localStorageNamespace: 'your.table.localstorage.name.column.' // Change this config if you have many tables

});

```

## Demo

http://codepen.io/herdiansc/full/xgXoLJ/

## Limitation

- Table structure: The table needs to have a head structure with this hierarchy: table > thead > tr > th

- This plugin relies on localStorage support on the browser

## Contribution

Please feel free to contribute by forking this repo and creating a PR.

## License

jQuery.columnFilter is licensed under the MIT License - see the LICENSE file for details