# 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 No filters No headers No results message Single filter Watermark
Features
Auto filter, filter as you type behaviour Custom column filtering Custom filter options Data types, column operations Grid layout Grouped headers Linked filters Linked filters with greyed-out options Load filters on demand Paging Pop-up filters
Extensions
Column calculations Columns visibility extension Editable grid Filters visibility extension Filters visibility extension with external toggle button Selectable grid Sort
API
External filter operators External filters generation Extracting data APIs Sort a custom column type Sort columns with external command Theme roller Toggle features
Customisation
External toolbar Grid layout with custom styles
Advanced
Alphabetical pager 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 RequireJS Setup with SystemJS