Skip to content

3.4 Columns visibility

Jump to bottom Edit New page
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:
  • o is the current TableFilter instance 
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:
  • o is the current TableFilter instance 
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:
  • o is the current TableFilter instance 
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:
  • o is the current TableFilter instance 
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:
  • o is the current TableFilter instance 
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:
  • o is the current TableFilter instance
  • colIndex is the index of the column being hidden 
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:
  • o is the current TableFilter instance
  • colIndex is the index of the column being hidden 
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:
  • o is the current TableFilter instance
  • colIndex is the index of the column being hidden 
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:
  • o is the current TableFilter instance
  • colIndex is the index of the column being hidden 
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'
  } 
};

Website | Examples | Es6 documentation

Clone this wiki locally