- - - -

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

- - -