Demos
HTML Table Filter Generator is no longer maintained, it is now replaced by the TableFilter project. Don't hesitate to check the demos out in their new location along with exhaustive documentation in the project's WIKI.
In this page you will find a collection of advanced demos showing most of the script's behaviours and features.
Instructions: filter Description and Properties columns to find desired demo and double-click on a row to open it in a popup window or new tab.
- Behaviours
- Themes
- Data types
- Programmability
- Operations
- Extensions
- All
Description | Properties | Url | Category |
---|---|---|---|
Large HTML table (1176 rows) | rows_counter, btn_reset, loader, alternate_rows, status_bar, mark_active_columns, custom_slc_options, sort, remember_grid_values, filters_row_index, col_number_format, extensions, col_resizer_all_cells | http://tablefilter.free.fr/datademo.htm | Behaviours |
Large HTML table with pagination (1176 rows) | sort, remember_grid_values, remember_page_number, remember_page_length, alternate_rows, paging, results_per_page, rows_counter, rows_counter_text, loader, loader_html, loader_css_class, status_bar, status_bar_text, status_bar_target_id, status_bar_css_class, display_all_text | http://tablefilter.free.fr/datademo2.htm | Behaviours |
Filter and sort example (Sortable Table extension) | filters_row_index, sort, sort_config, remember_grid_values, alternate_rows, rows_counter, rows_counter_text, btn_reset, btn_reset_text, btn_text, loader, loader_text, loader_html, on_show_loader, on_hide_loader, display_all_text, col_width | http://tablefilter.free.fr/filter-sort.htm | Extensions |
Default theme example | sort, col_number_format, filters_row_index, remember_grid_values, alternate_rows, rows_counter, rows_counter_text, btn_reset, btn_reset_text, status_bar, fill_slc_on_demand, display_all_text, enable_default_theme, input_watermark, enable_empty_option, enable_non_empty_option, public_methods | http://tablefilter.free.fr/theme.htm | Themes |
Custom theme example | rows_counter, rows_counter_text, btn_reset, btn_reset_text, status_bar, fill_slc_on_demand, paging, paging_length, display_all_text, input_watermark, enable_empty_option, enable_non_empty_option, popup_filters, themes | http://tablefilter.free.fr/custom-theme.htm | Themes |
Generate a grid with fixed headers, selectable and editable cells (Grid Layout) | sort, col_number_format, filters_row_index, remember_grid_values, alternate_rows, filters_row_index, remember_grid_values, remember_page_number, alternate_rows, rows_counter, btn_reset, btn_reset_text, loader, status_bar, col_number_format, display_all_text, custom_slc_options, col_width, paging, paging_length, grid_layout, grid_width, extensions, btn_showHide_cols_text, grid_width, selectable, editable, ezEditTable_config, default_selection | http://tablefilter.free.fr/grid-layout.htm | Behaviours |
Grid with fixed column widths and selectable rows(Grid Layout) | filters_row_index, remember_grid_values, alternate_rows, rows_counter, btn_reset, btn_reset_text, loader, status_bar, col_number_format, display_all_text, selectable, grid_layout, grid_width, grid_height, grid_default_col_width, grid_enable_cols_resizer | http://tablefilter.free.fr/grid-layout2.htm | Behaviours |
Grid with a customised layout and with no filters (Grid Layout) | sort, filters_row_index, alternate_rows, loader, col_number_format, col_date_type, col_width, grid_layout, grid_width, grid_enable_default_filters, grid_cont_css_class, grid_tblHead_cont_css_class, grid_tbl_cont_css_class | http://tablefilter.free.fr/grid-layout3.htm | Behaviours, Themes |
Selection grid with ezEditTable extension | btn_reset, alternate_rows, filters_row_index, col_width, col_date_type, sort_config, grid_layout, grid_width, grid_height, grid_enable_cols_resizer, enable_default_theme, selectable, editable, ezEditTable_config, default_selection, selected_row_css, on_validate_row | http://tablefilter.free.fr/selection-grid.php | Behaviours |
Editable grid with ezEditTable extension | btn_reset, alternate_rows, filters_row_index, col_width, col_date_type, sort_config, grid_layout, grid_width, grid_height, selectable, editable, ezEditTable_config, default_selection, editor_model, cell_editors, actions, validate_modified_value, open_custom_editor, close_custom_editor, get_custom_editor_value, set_custom_editor_value | http://tablefilter.free.fr/editable-grid.php | Behaviours, Programmability |
Editable grid with command buttons (ezEditTable extension) | enable_default_theme, btn_reset, alternate_rows, popup_filters, rows_counter, paging, col_width, col_date_type, sort_config, grid_layout, grid_width, grid_height, grid_enable_cols_resizer, selectable, editable, ezEditTable_config, cell_editors, actions, validate_modified_value: function, open_custom_editor, close_custom_editor, get_custom_editor_value, set_custom_editor_value, on_server_activity_start, on_server_activity_stop, msg_submit_ok, msg_confirm_delete_selected_rows, msg_error_occured, msg_submit_unsuccessful | http://tablefilter.free.fr/editable-grid-cmd.php | Behaviours, Programmability |
Checkbox selection grid with ezEditTable extension | public_methods, btn_reset, alternate_rows, loader, rows_counter, paging, filters_row_index, col_width, col_date_type, sort_config, grid_layout, grid_width, grid_height, grid_enable_cols_resizer, enable_default_theme, on_filters_loaded, selectable, editable, ezEditTable_config, key_navigation, key_selection, selection_model, default_selection, selected_row_css, on_after_selected_row, on_after_deselected_row, themes | http://tablefilter.free.fr/checkbox-selection-grid.php | Behaviours, Programmability, Themes |
External filters and filter programmatically the table | sort, alternate_rows, rows_counter, rows_counter_text, loader, loader_html, status, status_bar, col_number_format, display_all_text, status_bar_target_id, external_flt_grid, external_flt_grid_ids, public_methods | http://tablefilter.free.fr/external-grid.htm | Programmability |
AJAX example (jQuery library) New | filters_row_index, alternate_rows, rows_counter, rows_counter_text, btn_reset, btn_reset, btn_reset_html, loader, loader_html, loader_css_class, status, status_bar, status_bar_target_id, remember_grid_values, col_width, extensions, col_resizer_all_cells | http://tablefilter.free.fr/ajax-demo.htm | Programmability, Behaviours |
Editable AJAX table example (jQuery library) with ezEditTable extension New | grid_layout, grid_width, sort, alternate_rows, rows_counter, mark_active_columns, loader, loader_html, loader_css_class, btn_reset, status_bar, remember_grid_values, remember_page_number, col_width, paging, paging_length, on_filters_loaded, custom_cell_data_cols, custom_cell_data, themes, extensions, col_resizer_all_cells, selectable, editable, ezEditTable_config | http://tablefilter.free.fr/ajax-demo-editable-grid.htm | Programmability, Behaviours |
AJAX example (prototype framework) Deprecated | filters_row_index, alternate_rows, rows_counter, rows_counter_text, btn_reset, btn_reset, btn_reset_html, loader, loader_html, loader_css_class, status, status_bar, status_bar_target_id, remember_grid_values, col_width, extensions, col_resizer_all_cells | http://tablefilter.free.fr/ajaxdemo.htm | Programmability |
AJAX example with external grid (prototype framework) Deprecated | filters_row_index, sort, col_number_format, external_flt_grid, external_flt_grid_ids, alternate_rows, rows_counter, rows_counter_text,loader, loader_text, loader_html, loader_css_class, status, status_bar, status_bar_target_id, col_width, extensions, col_resizer_all_cells, col_resizer_show_handle | http://tablefilter.free.fr/ajaxdemo2.htm | Programmability |
Columns operations | sort, sort_config, fixed_headers, filters_row_index, remember_grid_values, alternate_rows, rows_counter, rows_counter_text, btn_reset, btn_reset_text, btn_text, status_bar, sort_select, display_all_text, inf_div_css_class, col_width, col_operation | http://tablefilter.free.fr/col-ops.htm | Operations |
Filter columns as you type | on_keyup, on_keyup_delay, filters_row_index, remember_grid_values, alternate_rows, rows_counter, rows_counter_text, btn_reset, btn_reset_text, loader, loader_html, status_bar, status_bar_target_id, msg_filter | http://tablefilter.free.fr/filter-as-u-type.htm | Behaviours |
Populate drop-downs at first use | sort, col_number_format, filters_row_index, remember_grid_values, alternate_rows, rows_counter, rows_counter_text, btn_reset, btn_reset_text, loader, loader_html, loader_css_class, on_show_loader, on_hide_loader, status_bar, status_bar_target_id, fill_slc_on_demand, display_all_text | http://tablefilter.free.fr/load-filters-on-demand.htm | Behaviours |
Columns with date and numeric data types | enable_icons, sort, sort_config, filters_row_index, alternate_rows, rows_counter, rows_counter_text, btn_reset, btn_reset_text, loader, loader_html, loader_css_class, status_bar, status_bar_target_id, default_date_type, on_filters_loaded | http://tablefilter.free.fr/data-types.htm | Data types, Operations |
Filter column data by using delegate function custom_cell_data |
sort, sort_config, filters_row_index, alternate_rows, rows_counter, rows_counter_text, btn_reset, btn_reset_text, loader, loader_html, loader_css_class, status_bar, status_bar_target_id, col_number_format, col_date_type, rows_always_visible, on_filters_loaded, custom_cell_data_cols, custom_cell_data, col_operation, on_after_operation | http://tablefilter.free.fr/custom-data.htm | Programmability |
Columns Resizer extension (table with resizable columns) | sort, filters_row_index, remember_grid_values, alternate_rows, rows_counter, rows_counter_text, btn_reset, btn_reset_text, loader, loader_html, loader_css_class, status_bar, col_number_format, display_all_text, custom_slc_options, col_width, extensions, col_resizer_all_cells | http://tablefilter.free.fr/cols-resizer.htm | Extensions |
Columns Visibility Manager extension (show/hide columns control) | remember_grid_values, alternate_rows, rows_counter, btn_reset, btn_reset_text, status_bar, status_bar_target_id, display_all_text, extensions, showHide_cols_tick_to_hide, btn_showHide_cols_target_id, showHide_cols_container_target_id, showHide_cols_at_start, btn_showHide_cols_html, btn_showHide_cols_close_html, showHide_cols_text, showHide_cols_cont_css_class, showHide_cols_enable_hover, on_before_open_cols_manager, on_after_close_cols_manager | http://tablefilter.free.fr/cols-manager.htm | Extensions |
Filters Row Visibility Manager extension (expand/collapse filters feature) | paging, sort, sort_config, remember_grid_values, alternate_rows, rows_counter, btn_reset, btn_reset_text, status_bar, status_bar_target_id, display_all_text, extensions, on_before_filters_row_is_hidden, on_after_filters_row_is_displayed, filters_row_visibility_target_id, filters_row_visibility_at_start, btn_filters_row_visibility_text | http://tablefilter.free.fr/filters-manager.htm | Extensions |
Huge HTML tables (more than 5000 rows), tips on how to configure the TF object | col_width, sort, sort_config, paging, paging_target_id, custom_slc_options, display_all_text, filters_row_index, alternate_rows, rows_counter, rows_counter_text, btn_reset, loader, loader_html, loader_css_class, status_bar, status_bar_target_id, themes | http://tablefilter.free.fr/extra-large-data.htm | Programmability, Behaviours |
Combine paging, columns' calculations and columns with different data types | enable_default_theme, paging_length, sort, filters_row_index, alternate_rows, rows_counter, rows_counter_text, btn_reset, btn_reset_text, loader, loader_html, loader_css_class, status_bar, col_number_format, col_date_type, rows_always_visible, col_operation, on_after_operation, on_filters_loaded | http://tablefilter.free.fr/data-types-paging-operations.htm | Programmability, Operations, Data types |
Filter multiple tables with a single filter | rows_counter, single_search_filter, highlight_keywords, highlight_css_class, enable_default_theme, alternate_rows, on_filters_loaded | http://tablefilter.free.fr/filter-multiple-tables.htm | Programmability |
Auto-suggest drop-down grid control | public_methods, single_search_filter, external_flt_grid, external_flt_grid_ids, on_keyup, on_keyup_delay, highlight_keywords, highlight_css_class, enable_default_theme | http://tablefilter.free.fr/drop-down-grid.htm | Programmability |
Alphabetical paging control | public_methods, rows_counter, rows_counter_text, alternate_rows, toolbar_target_id, paging, paging_length, on_filters_loaded | http://tablefilter.free.fr/alphabetical-pager.htm | Programmability, Behaviours |
Filter columns at page load by using url querystring parameters | sort, filters_row_index, alternate_rows, rows_counter, rows_counter_text, btn_reset, btn_reset_text, loader, loader_html, loader_css_class, status_bar, status_bar_target_id, col_number_format, col_date_type, rows_always_visible, col_operation, on_after_operation, on_filters_loaded | http://tablefilter.free.fr/url-params.htm | Programmability |
Implement a custom column sorter programmatically | enable_default_theme, filters_row_index, alternate_rows, rows_counter, rows_counter_text, btn_reset, btn_reset_text, loader, loader_html, loader_css_class, status_bar, sort, sort_config, on_sort_loaded | http://tablefilter.free.fr/custom-sort.htm | Programmability, Data types |
Sort columns by using custom sort keys | enable_default_theme, filters_row_index, alternate_rows, rows_counter, rows_counter_text, btn_reset, btn_reset_text, loader, loader_html, loader_css_class, status_bar, selectable, sort, sort_config | http://tablefilter.free.fr/custom-sort-keys.htm | Programmability, Data types |
Refresh filters behaviour | refresh_filters, sor, sort_config, btn_reset, display_all_text, alternate_rows, rows_counter, enable_default_theme | http://tablefilter.free.fr/refresh-filters.htm | Behaviours |
Refresh filters behaviour, disable excluded options | refresh_filters, disable_excluded_options, paging, filters_row_index, col_width, sort, sort_config, btn_reset, display_all_text, alternate_rows, rows_counter, enable_default_theme, extensions, col_resizer_all_cells | http://tablefilter.free.fr/refresh-filters2.htm | Behaviours |
Grouped or multi-line headers, place filters at desired position | sort, col_number_format, filters_row_index, headers_row_index, remember_grid_values, highlight_keywords, alternate_rows, rows_counter, rows_counter_text, btn_reset, status_bar, paging, paging_length, display_all_text, input_watermark, enable_empty_option, enable_non_empty_option, enable_default_theme, selectable | http://tablefilter.free.fr/grouped-headers.htm | Behaviours |
Combine 2 instances of the TF object, a single filter and the default filters by column | sort, filters_row_index, alternate_rows, rows_counter, rows_counter_text, btn_reset, loader, loader_css_class, status_bar, col_number_format, col_date_type, rows_always_visible, col_operation, on_after_operation, on_filters_loaded, on_after_filter | http://tablefilter.free.fr/columnfilters-and-singlefilter.htm | Programmability |
Theme roller | filters_row_index, headers_row_index, sort, col_number_format, col_date_type, rows_counter: true, rows_counter_text, alternate_rows, btn_reset, mark_active_columns, selectable, custom_cell_data_cols, custom_cell_data, custom_slc_options, themes | http://tablefilter.free.fr/theme-roller.htm | Themes, Programmability |
Filter and sort a column containing images by using the custom_cell_data
delegate function and the _sortKey attribute |
filters_row_index, headers_row_index, sort, col_number_format, col_date_type, rows_counter, rows_counter_text, alternate_rows, btn_reset, custom_cell_data_cols, custom_cell_data, custom_slc_options, themes | http://tablefilter.free.fr/filter-images.htm | Programmability |
The following list is generated programmatically by using the script's API:
Top of page