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