deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-03 15:13:15 +02:00
Code Issues Releases Wiki Activity
Page: 3.4 Columns visibility
Pages
1.0 Configuration 1.01 Appearance 1.02 Main features 1.03 Grid layout 1.04 Paging 1.05 Drop down filter 1.06 Checklist filter 1.07 Rows counter 1.08 Loading indicator 1.09 Submit and reset button 1.10 Status bar 1.11 Data types 1.12 Themes 1.13 Help instructions 1.14 Popup filters 1.15 No results message 1.16 Highlight keywords 1.17 State 1.18 Mark active columns 1.19 Toolbar 1.20 Single filter 2.0 TableFilter class 2.1 Public properties 2.2 Public methods 3.0 Extensions 3.1 Advanced grid 3.1 Sort 3.2 Column operations 3.3 Filters visibility 3.4 Columns visibility 4. Filter operators Home Obsolete TODO
3 3.4 Columns visibility
koalyptus edited this page 2017-10-10 13:51:56 +11:00

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: ''
    }] 
};
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: ''
    }] 
};
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