9 1.0 Configuration

koalyptus edited this page 2023-05-12 21:18:48 +10:00

In this section you will find all the configuration options (const tfConfig = { property: 'value' }).

Here is a more extensive example showing many of the features and options including texts in German:

const tf = new TableFilter(my_table, {  
    base_path: 'tablefilter/',					// Needed to resolve additional resources (css, extensions, etc.) at runtime 

    auto_filter: { delay: 500 },				// Delay for automatic filtering (milliseconds)  

    state: {							// Enable state persistence   
        types: ['local_storage'],				// Possible values: 'local_storage' 'hash' or 'cookie'  
        filters: true,						// Persist filters values, enabled by default  
        columns_visibility: true,				// Persist columns visibility  
        filters_visibility: true,				// Persist filters row visibility  
    },  

    sticky_headers: true,					// Sticky headers with overrides  
    alternate_rows: true,					// Enable alternating rows  
    mark_active_columns: {					// Mark active columns  
        highlight_column: false,				// .. but only the column header  
    },  

    grid_layout: false,						// Grit layout (but no simple copy&paste to Excel anymore)  

    filters_row_index: 0,  					// Row index to show the filter bar (default 0).  
        							// Show filter bar above header allows easy copy&paste of the table content.  

    toolbar: true,						// Enable toolbar component  
    rows_counter: { text: 'Rows: ' },			// Enable rows counter UI component  
    status_bar: {						// Enable status bar UI component  
        msg_filter: 'Filter aktiv...',				// Message during filtering  
        toolbar_position: 'center',  
    },  
    btn_reset: {  						// Enable clear button  
        tooltip: 'Filter löschen',  
        toolbar_position: 'right',  
    },  

    locale: 'de',						// Define default locale, default to 'en'  
    thousands_separator: '.',					// Define thousands separator ',' or '.', defaults to ','  
    decimal_separator: ',',					// Define decimal separator ',' or '.', defaults to '.'  
    empty_operator: '[empty]',  
    nonempty_operator: '[nonempty]',  
    help_instructions: {					// Instructions text (accepts HTML)  
        text :  
        'Filter-Operatoren:<br /> ' +  
        '<b>&lt;</b>, <b>&lt;=</b>, <b>=</b>, <b>&gt;=</b>, <b>&gt;</b>, <br />' +  
        '<b>*</b>, <b>!</b> (nicht), <b>{</b> (beginnt mit), <b>}</b> (endet mit), <br />' +  
        '<b>||</b> (oder),<b> &amp;&amp;</b> (und),<br />' +  
        '<b>[empty]</b>, <b>[nonempty]</b>, <b>rgx:</b><br />' +  
        '<a href="' +  
        'https://github.com/koalyptus/TableFilter/wiki/4.-Filter-operators' +  
        '" target="_blank">' +  
        'Weitere Informationen</a><hr/>'  
        ,  
        btn_text : '?',						// btn_text oder btn_html  
    },  

    no_results_message: {					// "No results" message  
        content: 'Keine zum Filter passende Einträge vorhanden',  
    },  

    loader: false,						// Loading indicator, { html : '...' }  

    watermark: [ 'Filter...', ],				// Repeated watermark text for input fields or watermark for each filter if an array is supplied  

    extensions:[						// Extensions load addititional script files  
        {   
            name: 'colsVisibility',  
            description: 'Sichbarkeit der Spalten verwalten',	// Module description  
            enable_hover: true,					// Enable hover behaviour on columns manager button/link  
            btn_text: 'Spalten verstecken&#9660;',		// Button's text, defaults to Columns&#9660;  
            //at_start: [3, 4],					// List of columns indexes to be hidden at initialization  
            tick_to_hide: true,					// Enable tick to hide a column, defaults to true  
            text: 'Versteckte Spalten: ', 			// Text preceding the columns list, defaults to 'Hide' or 'Show'  
            btn_close_text: 'Schließen',			// Columns manager UI close link text, defaults to 'Close'  
            enable_tick_all: false,				// Enable select all option, disabled by default  
            tick_all_text: 'Alle auswählen:',			// Text for select all option, defaults to 'Select all:'  
            toolbar_position: 'right',				// Default position in toolbar ('left'|'center'|'right')  
        },  
        {  
            name: 'filtersVisibility',  
            description: 'Sichtbarkeit der Filter',		// Module description  
            visible_at_start: true,				// Make filters visible at initialization, defaults to true  
            enable_icon: true,					// Enable expand/collapse icon, defaults to true  
            btn_text: 'Filter',					// Custom text for button  
            toolbar_position: 'right',				// Default position in toolbar ('left'|'center'|'right')  
        },  
        //{ name: 'sort' }					// Sort requires to classify numeric columns using "col_types : [ 'numeric', String', ...],"  
    ],  
});  
tf.init();

Website | Examples | Es6 documentation