Examples

Browse the following examples to see TableFilter in action. This library takes HTML tables to a whole new level :)

Basic
0 configuration Alternating rows Case sensitive match Column widths Exact match Exact match by column Exclude rows Filter types Highlight keywords Ignore diacritics Ignore diacritics by column No filters No headers No results message Responsive grid layout Responsive table Single filter Watermark
Features
Auto filter, filter as you type behaviour Custom column filtering Custom filter options Data types, column operations Deep linking Grid layout Grouped headers Linked filters Linked filters with greyed-out options Load filters on demand Paging Persistence Pop-up filters Single filter, exclude columns
Extensions
Column calculations Columns visibility extension Editable grid Filters visibility extension Filters visibility extension with external toggle button Selectable grid Sort
API
Column calculations with API Enable features without configuration External filter operators External filters generation Extracting data APIs Sort a custom column type Sort columns with external command Theme roller Toggle features
Customisation — Styling
External toolbar Grid layout with custom styles Sticky headers with overrides Using Bootstrap Using Material Design Lite
Advanced
Add an extension at runtime Alphabetical pager Conditional cell formatting Custom checkbox selection Dynamically populate external filters Filter and sort column with images

Usage

Global

Import the main js file in your page, from desired location or for example from the default NPM location if you downloaded the package from NPM: 

<script src="node_modules/tablefilter/dist/tablefilter/tablefilter.js"></script>

This will expose the TableFilter global function as shown in example below.

See the Pen TableFilter starter by Max (@koalyptus) on CodePen.

Module

TableFilter can also be imported as a module and used in those projects following a module pattern as AMD or CommonJS:

Setup with Webpack Setup with SystemJS Setup with RequireJS