-
Notifications
You must be signed in to change notification settings - Fork 95
3.4 Columns visibility
koalyptus edited this page Oct 10, 2017
·
3 revisions
With this extension, users can easily toggle columns visibility.
To get the colsVisibility
extension instance:
var colsVisibility = tf.extension('colsVisibility');where
tf
is an instance of TableFilter
.
Property | Type | Description | Remarks | Example |
---|---|---|---|---|
tick_to_hide | boolean | set the action on the column checkbox: by default column is hidden when checkbox is checked (default - true) |
var tfConfig = { extensions: [{ name: 'colsVisibility', tick_to_hide: false }] }; |
|
at_start | array | Set the columns invisible at start (default - null) |
var tfConfig = { extensions: [{ name: 'colsVisibility', at_start: [1, 3] }] }; |
|
enable_tick_all | boolean | display `check all` option in colmuns list UI (default - false) |
var tfConfig = { extensions: [{ name: 'colsVisibility', enable_tick_all: true }] }; |
|
tick_all_text | text | define the text for the `check all` option in colmuns list UI (default - 'Select all:') |
var tfConfig = { extensions: [{ name: 'colsVisibility', enable_tick_all: true, tick_all_text: 'All:' }] }; |
|
btn_target_id | string | define the id of the container element that will contain the link/button showing / hiding columns list (default - null) |
var tfConfig = { extensions: [{ name: 'colsVisibility', btn_target_id: 'element-id-here' }] }; |
|
container_target_id | string | define the id of the external element containg the columns list (default - null) |
var tfConfig = { extensions: [{ name: 'colsVisibility', container_target_id: 'element-id-here' }] }; |
|
headers_text | array | define a custom caption for each column in the columns list (default - null) |
var tfConfig = { extensions: [{ name: 'colsVisibility', headers_text: ['header01', 'header02', 'header03', 'header04'] }] }; |
|
btn_text | string | define the text of the button displaying the columns list UI (default - 'Columns▼') |
var tfConfig = { extensions: [{ name: 'colsVisibility', btn_text: 'Columns Manager' }] }; |
|
btn_html | string | define the HTML of the button displaying the columns list UI (default - null) |
NOTE: the script will apply the expected onclick event to the custom HTML element.
|
var tfConfig = { extensions: [{ name: 'colsVisibility', btn_html: 'Columns' }] }; |
btn_css_class | string | define the CSS class for the button element (default - 'colVis') |
var tfConfig = { extensions: [{ name: 'colsVisibility', btn_css_class: 'my-css-class' }] }; |
|
btn_close_text | string | set the text of the close button appearing in the columns manager UI (default - null) |
var tfConfig = { extensions: [{ name: 'colsVisibility', btn_close_text: 'X' }] }; |
|
btn_close_html | string | define the HTML of the close button displayed in the columns list UI |
NOTE: the script will apply the expected onclick event to the custom HTML element.
|
var tfConfig = { extensions: [{ name: 'colsVisibility', btn_close_html: 'X' }] }; |
btn_close_css_class | string | define the CSS class for the close button element inside the columns list UI (default - 'colVis') |
var tfConfig = { extensions: [{ name: 'colsVisibility', btn_close_css_class: 'my-css-class' }] }; |
|
span_css_class | string | define the CSS class for the element containing the button triggering the columns list UI (default - 'colVisSpan') |
var tfConfig = { extensions: [{ name: 'colsVisibility', span_css_class: 'my-css-class' }] }; |
|
cont_css_class | string | define the CSS class for the element containing the columns list UI (default - 'colVisCont') |
var tfConfig = { extensions: [{ name: 'colsVisibility', cont_css_class: 'my-css-class' }] }; |
|
text | string | define the text above the columns list (default - 'Hide') |
var tfConfig = { extensions: [{ name: 'colsVisibility', text: 'Hide columns:' }] }; |
|
enable_hover | boolean | display columns list UI on hovering (default - false) |
var tfConfig = { extensions: [{ name: 'colsVisibility', enable_hover: true }] }; |
|
on_loaded | function | callback fired after extension is initialized |
1 parameter:
|
var tfConfig = { extensions: [{ name: 'colsVisibility', on_loaded: function(o) { console.log( o.extension('colsVisibility') ); } }] }; |
on_before_open | function | callback fired just before the columns list is displayed |
1 parameter:
|
var tfConfig = { extensions: [{ name: 'colsVisibility', on_before_open: function(o) { console.log( o.extension('colsVisibility') ); } }] }; |
on_after_open | function | callback fired just after the columns list is displayed |
1 parameter:
|
var tfConfig = { extensions: [{ name: 'colsVisibility', on_after_open: function(o) { console.log( o.extension('colsVisibility') ); } }] }; |
on_before_close | function | callback fired just before the columns list is closed |
1 parameter:
|
var tfConfig = { extensions: [{ name: 'colsVisibility', on_before_close: function(o) { console.log( o.extension('colsVisibility') ); } }] }; |
on_after_close | function | callback fired just after the columns list is closed |
1 parameter:
|
var tfConfig = { extensions: [{ name: 'colsVisibility', on_after_close: function(o) { console.log( o.extension('colsVisibility') ); } }] }; |
on_before_col_hidden | function | callback fired just before a column is hidden |
2 parameters:
|
var tfConfig = { extensions: [{ name: 'colsVisibility', on_before_col_hidden: function(o, colIndex) { console.log( o.extension('colsVisibility'), colIndex ); } }] }; |
on_after_col_hidden | function | callback fired just after a column is hidden |
2 parameters:
|
var tfConfig = { extensions: [{ name: 'colsVisibility', on_after_col_hidden: function(o, colIndex) { console.log( o.extension('colsVisibility'), colIndex ); } }] }; |
on_before_col_displayed | function | callback fired just before a column is displayed |
2 parameters:
|
var tfConfig = { extensions: [{ name: 'colsVisibility', on_before_col_displayed: function(o, colIndex) { console.log( o.extension('colsVisibility'), colIndex ); } }] }; |
on_after_col_displayed | function | callback fired just after a column is displayed |
2 parameters:
|
var tfConfig = { extensions: [{ name: 'colsVisibility', on_after_col_displayed: function(o, colIndex) { console.log( o.extension('colsVisibility'), colIndex ); } }] }; |
toolbar_position | string | defines where it will be placed inside the toolbar (default - 'right') | 3 possible values: 'left', 'center' and 'right' |
var tfConfig = { rows_counter: { toolbar_position: 'center' } }; |