### Install Project Dependencies

Source: https://github.com/koalyptus/tablefilter/blob/master/README.md

Installs all necessary project dependencies defined in package.json. Run this after cloning the repository.

```shell
npm install
```

--------------------------------

### Start Local Webserver for Demos

Source: https://github.com/koalyptus/tablefilter/blob/master/README.md

Starts a local webserver to view generated demos. Access demos via http://localhost:8080/demos/.

```shell
npm start
```

--------------------------------

### Install TableFilter via npm

Source: https://github.com/koalyptus/tablefilter/blob/master/README.md

Install the TableFilter library from the npm repository for development.

```shell
npm install tablefilter --save-dev
```

--------------------------------

### Install Grunt CLI

Source: https://github.com/koalyptus/tablefilter/blob/master/README.md

Installs the Grunt command-line interface globally. This is a prerequisite for using Grunt tasks.

```shell
npm install -g grunt-cli
```

--------------------------------

### TableFilter Configuration Example

Source: https://github.com/koalyptus/tablefilter/wiki/1.0-Configuration

This extensive example demonstrates numerous TableFilter configuration options, including internationalization (German locale), state persistence, UI components like toolbar and status bar, and advanced features via extensions.

```javascript
const tf = new TableFilter(my_table, {
    base_path: 'tablefilter/',

    auto_filter: { delay: 500 },

    state: {
        types: ['local_storage'],
        filters: true,
        columns_visibility: true,
        filters_visibility: true,
    },

    sticky_headers: true,
    alternate_rows: true,
    mark_active_columns: {
        highlight_column: false,
    },

    grid_layout: false,

    filters_row_index: 0,

    toolbar: true,
    rows_counter: { text: 'Rows: ' },
    status_bar: {
        msg_filter: 'Filter aktiv...',
        toolbar_position: 'center',
    },
    btn_reset: {
        tooltip: 'Filter löschen',
        toolbar_position: 'right',
    },

    locale: 'de',
    thousands_separator: '.',
    decimal_separator: ',',
    empty_operator: '[empty]',
    nonempty_operator: '[nonempty]',
    help_instructions: {
        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 : '?',
    },

    no_results_message: {
        content: 'Keine zum Filter passende Einträge vorhanden',
    },

    loader: false,

    watermark: [ 'Filter...', ],

    extensions:[
        {
            name: 'colsVisibility',
            description: 'Sichbarkeit der Spalten verwalten',
            enable_hover: true,
            btn_text: 'Spalten verstecken&#9660;',
            tick_to_hide: true,
            text: 'Versteckte Spalten: ',
            btn_close_text: 'Schließen',
            enable_tick_all: false,
            tick_all_text: 'Alle auswählen:',
            toolbar_position: 'right',
        },
        {
            name: 'filtersVisibility',
            description: 'Sichtbarkeit der Filter',
            visible_at_start: true,
            enable_icon: true,
            btn_text: 'Filter',
            toolbar_position: 'right',
        },
    ],
});
tf.init();
```

--------------------------------

### Launch Development Server

Source: https://github.com/koalyptus/tablefilter/blob/master/README.md

Starts a build and watch cycle, launching a local development server on port 8080. Ideal for active development.

```shell
npm run dev
```

--------------------------------

### Install TableFilter Next Release via npm

Source: https://github.com/koalyptus/tablefilter/blob/master/README.md

Install the next release channel of TableFilter from npm for future features.

```shell
npm install tablefilter@next --save-dev
```

--------------------------------

### Configure colsVisibility Extension with on_before_col_displayed Callback

Source: https://github.com/koalyptus/tablefilter/wiki/3.4-Columns-visibility

Example of configuring the colsVisibility extension with an on_before_col_displayed callback. This callback is executed just before a column is displayed.

```javascript
var tfConfig = {
    extensions: [{
        name: 'colsVisibility',
        on_before_col_displayed: function(o, colIndex) {
            console.log( o.extension('colsVisibility'), colIndex );
        }
    }]
};
```

--------------------------------

### Subscribe to 'before-loading-themes' Event

Source: https://github.com/koalyptus/tablefilter/wiki/1.02-Main-features

This event is emitted just before TableFilter starts loading its required stylesheets. The callback receives the TableFilter instance.

```javascript
tf.emitter.on(['before-loading-themes'], function(tf){
  console.log(tf);
});
```

--------------------------------

### Configure colsVisibility Extension with on_after_col_displayed Callback

Source: https://github.com/koalyptus/tablefilter/wiki/3.4-Columns-visibility

Example of configuring the colsVisibility extension with an on_after_col_displayed callback. This callback is executed just after a column has been displayed.

```javascript
var tfConfig = {
    extensions: [{
        name: 'colsVisibility',
        on_after_col_displayed: function(o, colIndex) {
            console.log( o.extension('colsVisibility'), colIndex );
        }
    }]
};
```

--------------------------------

### Configure colsVisibility Extension with on_before_col_hidden Callback

Source: https://github.com/koalyptus/tablefilter/wiki/3.4-Columns-visibility

Example of configuring the colsVisibility extension with an on_before_col_hidden callback. This callback is executed just before a column is hidden.

```javascript
var tfConfig = {
    extensions: [{
        name: 'colsVisibility',
        on_before_col_hidden: function(o, colIndex) {
            console.log( o.extension('colsVisibility'), colIndex );
        }
    }]
};
```

--------------------------------

### Initialize TableFilter with Linked Filters

Source: https://github.com/koalyptus/tablefilter/blob/master/static/templates/linked-filters.html

Configure and initialize TableFilter with linked filters enabled. This setup allows for dynamic updates of filter options based on selections in other columns. Ensure the 'base_path' is correctly set to your TableFilter distribution.

```javascript
var filtersConfig = {
  base_path: '../dist/tablefilter/',
  linked_filters: true,
  col_1: 'multiple',
  col_2: 'checklist',
  btn_reset: true,
  clear_filter_text: '< Clear >',
  alternate_rows: true,
  rows_counter: true,
  enable_default_theme: true,
  extensions: [
    {
      name: 'sort',
      types: [
        'number',
        'string',
        'string',
        'formatted-number',
        'none',
        'string'
      ]
    }
  ]
};
var tf = new TableFilter('demo', filtersConfig);
tf.init();
```

--------------------------------

### Instantiate TableFilter with a reference row

Source: https://github.com/koalyptus/tablefilter/wiki/2.0-TableFilter-class

Use this to specify a starting row index for filtering. This is an optional parameter.

```javascript
var myTF = new TableFilter("myTableId", 2);
```

--------------------------------

### Configure colsVisibility Extension with on_after_col_hidden Callback

Source: https://github.com/koalyptus/tablefilter/wiki/3.4-Columns-visibility

Example of configuring the colsVisibility extension with an on_after_col_hidden callback. This callback is executed just after a column has been hidden.

```javascript
var tfConfig = {
    extensions: [{
        name: 'colsVisibility',
        on_after_col_hidden: function(o, colIndex) {
            console.log( o.extension('colsVisibility'), colIndex );
        }
    }]
};
```

--------------------------------

### Instantiate TableFilter with a DOM element

Source: https://github.com/koalyptus/tablefilter/wiki/2.0-TableFilter-class

Use this when you have a direct reference to the table DOM element. No specific setup is required beyond having the element.

```javascript
var myTF = new TableFilter(document.querySelector(".my-table"));
```

--------------------------------

### Initialize TableFilter with Grid Layout

Source: https://github.com/koalyptus/tablefilter/blob/master/static/templates/grid-layout.html

Configure TableFilter to use a grid layout with various options enabled. This setup is suitable for tables requiring advanced filtering and a structured visual presentation.

```javascript
var filtersConfig = {
    base_path: '../dist/tablefilter/',
    grid_layout: true,
    alternate_rows: true,
    btn_reset: true,
    rows_counter: true,
    loader: true,
    status_bar: true,
    no_results_message: true,
    mark_active_columns: { highlight_column: true },
    col_1: 'select',
    col_2: 'select',
    col_widths: [ '150px', '70px', '70px', '120px', '120px', '100px', '100px', '100px', '100px' ],
    col_types: [ 'string', 'string', 'number', 'number', 'number', 'number', 'number', 'number', 'number' ],
    extensions:[
        {
            name: 'sort'
        }
    ]
};
var tf = new TableFilter('demo', filtersConfig);
tf.init();
```

--------------------------------

### Generate Demos

Source: https://github.com/koalyptus/tablefilter/blob/master/README.md

Builds the project's demos. These can then be served locally.

```shell
npm run build:demos
```

--------------------------------

### Ensure Build is Working

Source: https://github.com/koalyptus/tablefilter/blob/master/CONTRIBUTING.md

Verify that the project builds correctly by running the distribution command.

```bash
npm run dist
```

--------------------------------

### Set Help Instructions HTML

Source: https://github.com/koalyptus/tablefilter/wiki/1.13-Help-instructions

Sets the HTML content for the help instructions.

```javascript
var tfConfig = {
  help_instructions: {
    html: '<p>My Help text here...</p><p>Hello world!</p>'
  }
};
```

--------------------------------

### Get Sort Extension Instance

Source: https://github.com/koalyptus/tablefilter/wiki/3.1-Sort

Retrieve the sort extension instance from a TableFilter instance.

```javascript
var sort = tf.extension('sort');
```

--------------------------------

### Get filtersVisibility Extension Instance

Source: https://github.com/koalyptus/tablefilter/wiki/3.3-Filters-visibility

Retrieve an instance of the filtersVisibility extension from a TableFilter instance.

```javascript
var filtersVisibility = tf.extension('filtersVisibility');
```

--------------------------------

### Get advancedGrid Extension Instance

Source: https://github.com/koalyptus/tablefilter/wiki/3.1-Advanced-grid

Retrieve the instance of the advancedGrid extension from a TableFilter instance.

```javascript
var advancedGrid = tf.extension('advancedGrid');
```

--------------------------------

### Set Help Instructions Text

Source: https://github.com/koalyptus/tablefilter/wiki/1.13-Help-instructions

Sets the text content for the help instructions.

```javascript
var tfConfig = {
  help_instructions: {
    text: 'My Help text here...'
  }
};
```

--------------------------------

### Configure Default Date Type (Obsolete)

Source: https://github.com/koalyptus/tablefilter/wiki/1.11-Data-types

Set the default date type. This property is obsolete starting from v0.3.0.

```javascript
var tfConfig = { default_date_type: 'MDY'}
```

--------------------------------

### Generate Documentation

Source: https://github.com/koalyptus/tablefilter/blob/master/README.md

Runs the ESDoc task to generate API documentation in the 'docs/docs' directory.

```shell
npm run esdoc
```

--------------------------------

### Generate Production Build

Source: https://github.com/koalyptus/tablefilter/blob/master/README.md

Creates a production-ready build of the project. This command optimizes assets for deployment.

```shell
npm run build
```

--------------------------------

### Configure Column Date Type (Obsolete)

Source: https://github.com/koalyptus/tablefilter/wiki/1.11-Data-types

Define the date format for specific columns. This property is obsolete starting from v0.3.0.

```javascript
var tfConfig = { col_date_type: [null,'DMY','YMD','DDMMMYYYY' 
    ] }
```

--------------------------------

### Load and Access TableFilter Extension

Source: https://github.com/koalyptus/tablefilter/wiki/3.0-Extensions

Demonstrates how to initialize TableFilter with an extension and then retrieve its instance. Ensure the extension is listed in the extensions configuration.

```javascript
var tf = new TableFilter('tableId', {
    extensions: [{ name: 'sort' }]
});
var sort = tf.extension('sort');
```

--------------------------------

### Configure Column Number Format (Obsolete)

Source: https://github.com/koalyptus/tablefilter/wiki/1.11-Data-types

Define the number format for specific columns. This property is obsolete starting from v0.3.0.

```javascript
var tfConfig = { col_number_format: [null,'eu','eu', 'ipaddress'] 
    }
```

--------------------------------

### Enable Help Instructions

Source: https://github.com/koalyptus/tablefilter/wiki/1.13-Help-instructions

Enables the help instructions feature. Can be set to true or an empty object.

```javascript
var tfConfig = { help_instructions: true };
```

```javascript
var tfConfig = {
  help_instructions: {}
};
```

--------------------------------

### Get colOps Extension Instance

Source: https://github.com/koalyptus/tablefilter/wiki/3.2-Column-operations

Retrieve the colOps extension instance from a TableFilter instance. Ensure the extension is loaded before calling this.

```javascript
var colOps = tf.extension('colOps');
```

--------------------------------

### Initialize TableFilter with Filters Visibility Extension

Source: https://github.com/koalyptus/tablefilter/blob/master/static/templates/filters-visibility.html

Configure TableFilter to use the filters visibility extension. Set 'visible_at_start' to false to hide filters initially.

```javascript
var tfConfig = { 
  base_path: '../dist/tablefilter/', 
  col_1: 'multiple', 
  col_2: 'checklist', 
  col_widths: [ '75px', '200px', '200px', '100px', '75px', '400px' ], 
  paging: true, 
  alternate_rows: true, 
  rows_counter: true, 
  btn_reset: true, 
  loader: true, 
  status_bar: true, 
  extensions: [{ name: 'filtersVisibility', visible_at_start: false }]
};
var tf = new TableFilter('demo', tfConfig);
tf.init();
```

--------------------------------

### Run ESLint and Tests

Source: https://github.com/koalyptus/tablefilter/blob/master/CONTRIBUTING.md

Run the ESLint linter and unit tests to ensure code quality and functionality before submitting changes.

```bash
npm run eslint test
```

--------------------------------

### Callback on Loader Show

Source: https://github.com/koalyptus/tablefilter/wiki/1.08-Loading-indicator

Implement the 'on_show_loader' function to execute code just before the loader is displayed. The loader instance is passed as an argument.

```javascript
var tfConfig = {
  loader: {
    on_show_loader: function(feature) { console.log(feature); }
  }
};
```

--------------------------------

### Set Help Instructions Button Text

Source: https://github.com/koalyptus/tablefilter/wiki/1.13-Help-instructions

Sets the text displayed on the help instructions button.

```javascript
var tfConfig = {
  help_instructions: {
    btn_text: 'Help'
  }
};
```

--------------------------------

### Get colsVisibility Extension Instance

Source: https://github.com/koalyptus/tablefilter/wiki/3.4-Columns-visibility

Retrieve the colsVisibility extension instance from a TableFilter instance. Ensure 'tf' is an initialized TableFilter object.

```javascript
var colsVisibility = tf.extension('colsVisibility');
```

--------------------------------

### Instantiate TableFilter with configuration

Source: https://github.com/koalyptus/tablefilter/wiki/2.0-TableFilter-class

Use this to provide custom configuration options, such as enabling paging. This is an optional parameter.

```javascript
var myTF = new TableFilter("myTableId", 2, { paging:true });
```

--------------------------------

### Configure ColOps Extension with on_before_operation

Source: https://github.com/koalyptus/tablefilter/wiki/3.2-Column-operations

Configuration for the ColOps extension, specifying column operations and a callback for before calculation.

```javascript
var tfConfig = {
    extensions: [{
        name: 'colOps',
        id: ['col2Total', 'col4Mean'],
        col: [2, 4],
        operation: ['sum', 'mean'],
        write_method: ['innerHTML', 'setValue']
        exclude_row: [7, 18],
        decimal_precision: [2, 1],
        on_before_operation: function(o){
            console.log(o.getExtension('colOps'));
        }
    }]
};
```

--------------------------------

### Initialize TableFilter with Configuration

Source: https://github.com/koalyptus/tablefilter/blob/master/static/templates/demo.html

This snippet shows how to define the configuration object for TableFilter, including filter types for each column, custom options, column widths, and extensions. It then initializes a new TableFilter instance with this configuration.

```javascript
var filtersConfig = {
    base_path: '../dist/tablefilter/',
    col_0: 'checklist',
    col_1: 'select',
    col_2: 'multiple',
    col_3: 'select',
    alternate_rows: true,
    rows_counter: true,
    btn_reset: true,
    loader: true,
    status_bar: true,
    mark_active_columns: { highlight_column: true },
    no_results_message: true,
    custom_options: {
        cols: [3],
        texts: [
            ['na', '0 - 50', '50 - 500', '500 - 15 000', '15 000 - 25 000', '25 000 - 100 000', '100 000 - 1 500 000', 'not na']
        ],
        values: [
            ['na', '>0 && <=50', '>50 && <=500', '>500 && <=15000', '>15000 && <=25000', '>25000 && <=100000', '>100000 && <=1500000', '!na']
        ],
        sorts: [false]
    },
    col_widths: [
        '150px',
        '100px',
        '100px',
        '90px',
        '90px',
        '90px',
        '90px',
        '70px',
        '70px'
    ],
    extensions: [{ name: 'sort' }]
};
var tf = new TableFilter('demo', filtersConfig);
tf.init();
```

--------------------------------

### Configure advancedGrid with Vendor Path

Source: https://github.com/koalyptus/tablefilter/wiki/3.1-Advanced-grid

Configure the advancedGrid extension by providing the mandatory vendor_path to the ezEditTable library.

```javascript
var tfConfig = {
    extensions: [{
        name: 'advancedGrid',
        vendor_path: 'path/to/ezEditTable'
    }]
};
```

--------------------------------

### Subscribe to 'after-populating-filter' Event

Source: https://github.com/koalyptus/tablefilter/wiki/1.06-Checklist-filter

Execute code after a filter has been populated by subscribing to the 'after-populating-filter' event. Subscribers get the TableFilter instance, column index, and the filter's DOM element.

```javascript
tf.emitter.on(['after-populating-filter'], function(tf, colIndex, element){
  console.log(tf, colIndex, element);
});
```

--------------------------------

### Configure Multiple Themes

Source: https://github.com/koalyptus/tablefilter/wiki/1.12-Themes

Use the 'themes' property to specify an array of theme objects, each with a 'name' and 'path'. This allows loading multiple custom stylesheets.

```javascript
var tfConfig = { themes: [{ name:'stylesheet01', path:'path/to/style01.css'}, { name:'stylesheet02', path:'path/to/style02.css'}] }
```

--------------------------------

### TableFilter Configuration for Linked Filters with Disabled Options

Source: https://github.com/koalyptus/tablefilter/blob/master/static/templates/linked-filters-disabled.html

Configure TableFilter to enable linked filters and disable excluded options. This setup links multiple column filters and greys out invalid choices.

```javascript
var filtersConfig = {
    base_path: '../dist/tablefilter/',
    linked_filters: true,
    disable_excluded_options: true,
    col_1: 'multiple',
    col_2: 'checklist',
    col_types: [
        'number',
        'string',
        'string',
        'formatted-number',
        'none',
        'string'
    ],
    col_widths: [
        '60px',
        '160px',
        '160px',
        '85px',
        '70px',
        '270px'
    ],
    btn_reset: true,
    clear_filter_text: '< Clear >',
    alternate_rows: true,
    rows_counter: true,
    enable_default_theme: true,
    extensions: [
        {
            name: 'sort'
        }
    ]
};
var tf = new TableFilter('demo', filtersConfig);
tf.init();
```

--------------------------------

### Configure colsVisibility: Initial Invisible Columns

Source: https://github.com/koalyptus/tablefilter/wiki/3.4-Columns-visibility

Specify columns that should be hidden when the table initially loads using the 'at_start' property. Column indices are 0-based.

```javascript
var tfConfig = {
    extensions: [{
        name: 'colsVisibility',
        at_start: [1, 3]
    }]
};
```

--------------------------------

### Run All Tests and Generate Coverage Report

Source: https://github.com/koalyptus/tablefilter/blob/master/README.md

Executes all project tests and generates a code coverage report. Useful for assessing test completeness.

```shell
npm test
```

--------------------------------

### TableFilter Initialization with Pagination

Source: https://github.com/koalyptus/tablefilter/blob/master/static/templates/pagination.html

Configuration object for TableFilter, enabling pagination with custom results per page options and state persistence. Includes settings for loader and status bar.

```javascript
var filtersConfig = {
    base_path: '../dist/tablefilter/',
    paging: {
        results_per_page: ['Records: ', [10, 25, 50, 100]]
    },
    state: {
        types: ['local_storage'],
        filters: true,
        page_number: true,
        page_length: true,
        sort: true
    },
    responsive: true,
    help_instructions: {
        container_adjust_left_position: 30
    },
    alternate_rows: true,
    btn_reset: true,
    rows_counter: true,
    loader: {
        html: '<div id="lblMsg"></div>',
        css_class: 'myLoader'
    },
    status_bar: {
        target_id: 'lblMsg',
        css_class: 'myStatus'
    },
    no_results_message: true,
    col_0: 'select',
    col_1: 'select',
    col_2: 'select',
    extensions: [
        {
            name: 'sort',
            types: [
                'string',
                'string',
                'number',
                'number',
                'number',
                'number',
                'number',
                'number',
                'number'
            ]
        }
    ]
};
var tf = new TableFilter('demo', filtersConfig);
tf.init();
```

--------------------------------

### Set Help Instructions Button HTML

Source: https://github.com/koalyptus/tablefilter/wiki/1.13-Help-instructions

Sets the HTML for the help instructions button. Note that the onclick event is added by default and may overwrite existing onclick attributes.

```javascript
var tfConfig = {
  help_instructions: {
    btn_html: '<button>Help</button>'
  }
};
```

--------------------------------

### Subscribe to 'before-loading-extensions' Event

Source: https://github.com/koalyptus/tablefilter/wiki/1.02-Main-features

This event is emitted just before TableFilter begins loading its extensions. The callback receives the TableFilter instance.

```javascript
tf.emitter.on(['before-loading-extensions'], function(tf){
  console.log(tf);
});
```

--------------------------------

### Configure advancedGrid to Load Stylesheet

Source: https://github.com/koalyptus/tablefilter/wiki/3.1-Advanced-grid

Enable loading of the vendor's stylesheet by setting load_stylesheet to true for the advancedGrid extension.

```javascript
var tfConfig = {
    extensions: [{
        name: 'advancedGrid',
        vendor_path: 'path/to/ezEditTable/',
        filename: 'ezEditTable_min.js',
        load_stylesheet: true
    }]
};
```

--------------------------------

### Configure Columns Visibility Extension

Source: https://github.com/koalyptus/tablefilter/wiki/3.4-Columns-visibility

Basic configuration for the Columns Visibility extension, including a custom close button HTML.

```javascript
var tfConfig = {
    extensions: [{
        name: 'colsVisibility',
        btn_close_html: '<button>X</button>'
    }]
};
```

--------------------------------

### Configure colOps Extension - Basic

Source: https://github.com/koalyptus/tablefilter/wiki/3.2-Column-operations

Basic configuration for the colOps extension, specifying its name. The 'name' property must match the extension's directory and file name.

```javascript
var tfConfig = { extensions: [{ name: 'colOps' }] };
```

--------------------------------

### Dynamic Configuration Loading

Source: https://github.com/koalyptus/tablefilter/blob/master/dist/starter.html

This snippet demonstrates how to find and append configuration from script tags to a pre element. It's useful for dynamically loading or displaying filter configurations.

```javascript
var configs = document.querySelectorAll('script[data-config]'); var pre = document.body.getElementsByTagName('pre')[0]; [].forEach.call(configs, function(config) { if(pre){ pre.innerHTML += config.innerHTML.replace('<', '&lt;').replace('>', '&gt;'); } });
```

--------------------------------

### Initialize TableFilter with Base Path

Source: https://github.com/koalyptus/tablefilter/blob/master/README.md

Initialize TableFilter with a specified base path, placed directly under the HTML table.

```html
<script>
var tf = new TableFilter(document.querySelector('.my-table'), {
    base_path: 'path/to/my/scripts/tablefilter/'
});
tf.init();
</script>
```

--------------------------------

### Set Help Instructions Button CSS Class

Source: https://github.com/koalyptus/tablefilter/wiki/1.13-Help-instructions

Defines the CSS class for the help instructions button.

```javascript
var tfConfig = {
  help_instructions: {
    btn_css_class: 'myCssClass'
  }
};
```

--------------------------------

### Set Help Instructions Container CSS Class

Source: https://github.com/koalyptus/tablefilter/wiki/1.13-Help-instructions

Defines the CSS class for the help instructions container.

```javascript
var tfConfig = {
  help_instructions: {
    container_css_class: 'myCssClass'
  }
};
```

--------------------------------

### Subscribe to 'before-populating-filter' Event

Source: https://github.com/koalyptus/tablefilter/wiki/1.06-Checklist-filter

Listen for the 'before-populating-filter' event to execute code just before a filter begins populating. Subscribers receive the TableFilter instance and the column index.

```javascript
tf.emitter.on(['before-populating-filter'], function(tf, colIndex){
  console.log(tf, colIndex);
});
```

--------------------------------

### Configure advancedGrid Extension with Name

Source: https://github.com/koalyptus/tablefilter/wiki/3.1-Advanced-grid

Basic configuration for the advancedGrid extension, specifying its name.

```javascript
var tfConfig = { extensions: [{ name: 'advancedGrid' }] };
```

--------------------------------

### Enable Hover for Columns List UI

Source: https://github.com/koalyptus/tablefilter/wiki/3.4-Columns-visibility

Configure the columns list UI to display on hover instead of requiring a click.

```javascript
var tfConfig = {
    extensions: [{
        name: 'colsVisibility',
        enable_hover: true
    }]
};
```

--------------------------------

### Initialize TableFilter with RequireJS

Source: https://github.com/koalyptus/tablefilter/blob/master/static/templates/requirejs.html

Loads the TableFilter module using RequireJS and initializes it with a configuration object. Ensure the base path is correctly set to locate TableFilter assets.

```javascript
requirejs( [ '../dist/tablefilter/tablefilter'], function(mod){ var TableFilter = mod.TableFilter; var tfConfig = { base_path: '../dist/tablefilter/', col_1: 'multiple', col_2: 'checklist', alternate_rows: true, rows_counter: true, enable_default_theme: true, col_widths: [ '70px', '170px', '170px', '110px', '90px', '250px' ], extensions:[ { name: 'sort', types: [ 'number', 'string', 'string', 'US', 'none', 'string' ] }, { name: 'colsVisibility' }, { name: 'filtersVisibility' } ] }; tf = new TableFilter('demo', tfConfig); tf.init(); } );
```

--------------------------------

### Configure advancedGrid with Custom Stylesheet Path

Source: https://github.com/koalyptus/tablefilter/wiki/3.1-Advanced-grid

Provide a specific path or URL for the vendor's stylesheet when configuring the advancedGrid extension.

```javascript
var tfConfig = {
    extensions: [{
        name: 'advancedGrid',
        vendor_path: 'path/to/ezEditTable/',
        filename: 'ezEditTable_min.js',
        load_stylesheet: true,
        stylesheet: 'path/to/ezEditTable/stylesheet/style.css'
    }]
};
```

--------------------------------

### Enable Grid Layout

Source: https://github.com/koalyptus/tablefilter/wiki/1.03-Grid-layout

Enables the grid layout generation. Can be set to true or an empty object.

```javascript
var tfConfig = { grid_layout: true };
// or
var tfConfig = { 
  grid_layout: {} 
};
```

--------------------------------

### Configure Page Text

Source: https://github.com/koalyptus/tablefilter/wiki/1.04-Paging

Defines the text that precedes the page selector drop-down. Default is ' Page '.

```javascript
var tfConfig = {
  paging: {
    page_text: 'Pg'
  }
};
```

--------------------------------

### Configure Results Per Page Options

Source: https://github.com/koalyptus/tablefilter/wiki/1.04-Paging

Enable users to change the number of results displayed per page by providing an array to 'results_per_page'. This array should contain a label string and an array of numeric options.

```javascript
var tfConfig = {
  paging: {
    results_per_page: ['Results per page', [25, 50, 100]]
  }
};
```

--------------------------------

### Configure ColOps Extension with on_after_operation

Source: https://github.com/koalyptus/tablefilter/wiki/3.2-Column-operations

Configuration for the ColOps extension, specifying column operations and a callback for after calculation.

```javascript
var tfConfig = {
    extensions: [{
        name: 'colOps',
        id: ['col2Total', 'col4Mean'],
        col: [2, 4],
        operation: ['sum', 'mean'],
        write_method: ['innerHTML', 'setValue']
        exclude_row: [7, 18],
        decimal_precision: [2, 1],
        on_after_operation: function(o){
            console.log(o.getExtension('colOps'));
        }
    }]
};
```

--------------------------------

### Handle Before Filter Initialization Event

Source: https://github.com/koalyptus/tablefilter/wiki/1.02-Main-features

Use the 'before-filter-init' event to run code just before a filter is created for a column. Both the TableFilter instance and the column index are provided.

```javascript
tf.emitter.on(['before-filter-init'], function(tf, colIndex){
  console.log(tf, colIndex);
});
```

--------------------------------

### Load Script Configurations

Source: https://github.com/koalyptus/tablefilter/blob/master/static/partials/pre-inline-script.html

This script selects all script tags with a 'data-config' attribute and appends their content to the first pre tag found in the body. It replaces '<' with '&lt;' and '>' with '&gt;' to ensure proper HTML rendering.

```javascript
var configs = document.querySelectorAll('script[data-config]');
var pre = document.body.getElementsByTagName('pre')[0];
[].forEach.call(configs, function(config) {
  if(pre){
    pre.innerHTML += config.innerHTML.replace('<', '&lt;').replace('>', '&gt;');
  }
});
```

--------------------------------

### TableFilter Initialization

Source: https://github.com/koalyptus/tablefilter/blob/master/dist/starter.html

This snippet shows how to initialize TableFilter with a configuration object. It specifies column types, custom filter options, column widths, and enables the 'sort' extension.

```javascript
var filtersConfig = { base_path: 'tablefilter/', col_1: 'select', col_2: 'select', col_3: 'select', alternate_rows: true, rows_counter: true, btn_reset: true, loader: true, status_bar: true, mark_active_columns: true, highlight_keywords: true, col_types: [ 'string', 'string', 'number', 'number', 'number', 'number', 'number', 'number', 'number' ], custom_options: { cols:[3], texts: [[ '0 - 25 000', '100 000 - 1 500 000' ]], values: [[ '>0 && <=25000', '>100000 && <=1500000' ]], sorts: [false] }, col_widths: [ '150px', '100px', '100px', '100px', '100px', '100px', '70px', '60px', '60px' ], extensions:[{ name: 'sort' }] }; var tf = new TableFilter('demo', filtersConfig); tf.init();
```

--------------------------------

### Configure Toolbar Container CSS Class

Source: https://github.com/koalyptus/tablefilter/wiki/1.19-Toolbar

Set a custom CSS class for the main toolbar container element.

```javascript
var tfConfig = {
  toolbar: {
    container_css_class: 'my-css-class'
  }
};
```

--------------------------------

### Listen for before-reset-page Event

Source: https://github.com/koalyptus/tablefilter/wiki/1.04-Paging

Use this snippet to execute code just before the page is reset. Subscribers receive the TableFilter instance.

```javascript
tf.emitter.on(['before-reset-page'], function(tf) {
  console.log(tf);
});
```

--------------------------------

### Set Help Instructions Toolbar Position

Source: https://github.com/koalyptus/tablefilter/wiki/1.13-Help-instructions

Defines the position of the help instructions button within the toolbar. Possible values are 'left', 'center', and 'right'.

```javascript
var tfConfig = {
  help_instructions: {
      toolbar_position: 'center'
  }
};
```

--------------------------------

### Set Help Instructions Container Target ID

Source: https://github.com/koalyptus/tablefilter/wiki/1.13-Help-instructions

Defines the ID of the container element for the help instructions content.

```javascript
var tfConfig = {
  help_instructions: {
    container_target_id: 'myContainerId'
  }
};
```

--------------------------------

### Enable Default Theme

Source: https://github.com/koalyptus/tablefilter/wiki/1.12-Themes

Set 'enable_default_theme' to true to load the default theme located in the 'style/themes/default/' folder. The default stylesheet name is 'default.css'.

```javascript
var tfConfig = { enable_default_theme: true }
```

--------------------------------

### Enable Paging

Source: https://github.com/koalyptus/tablefilter/wiki/1.04-Paging

Set the 'paging' property to true to enable the default paging feature. Alternatively, an empty object can be used to enable paging with default settings.

```javascript
var tfConfig = { paging: true };
```

```javascript
var tfConfig = {
  paging: {}
};
```

--------------------------------

### Sort Extension Configuration: images_path

Source: https://github.com/koalyptus/tablefilter/wiki/3.1-Sort

Specifies the path to the images used for sorting indicators. The default path is 'style/themes/'.

```javascript
var tfConfig = {
    extensions: [{
        name: 'sort',
        images_path: 'path/to/images/'
    }]
};
```

--------------------------------

### Listen for before-reset-page-length Event

Source: https://github.com/koalyptus/tablefilter/wiki/1.04-Paging

Use this snippet to execute code just before the page length is reset. Subscribers receive the TableFilter instance.

```javascript
tf.emitter.on(['before-reset-page-length'], function(tf) {
  console.log(tf);
});
```

--------------------------------

### Initialize TableFilter with On-Demand Loading

Source: https://github.com/koalyptus/tablefilter/blob/master/static/templates/load-filters-on-demand.html

Configure TableFilter to load filter functionalities only when they are first used. Set 'load_filters_on_demand' to true in the configuration object.

```javascript
var tfConfig = {
    base_path: '../dist/tablefilter/',
    col_widths: [
        '150px',
        '100px',
        '100px',
        '100px',
        '100px',
        '100px',
        '90px',
        '90px',
        '90px'
    ],
    alternate_rows: true,
    rows_counter: true,
    btn_reset: true,
    status_bar: true,
    load_filters_on_demand: true,
    sticky_headers: true,
    col_0: 'multiple',
    col_1: 'select',
    col_2: 'checklist'
};
var tf = new TableFilter('demo', tfConfig);
tf.init();
```

--------------------------------

### Import TableFilter using ES2015 Modules

Source: https://github.com/koalyptus/tablefilter/blob/master/README.md

Import the TableFilter library using ES2015 module syntax.

```javascript
// ES2015 modules
import TableFilter from 'tablefilter';
```

--------------------------------

### Set Help Instructions Target ID

Source: https://github.com/koalyptus/tablefilter/wiki/1.13-Help-instructions

Defines the ID of the element that will contain the help instructions button (?).

```javascript
var tfConfig = {
  help_instructions: {
    target_id: 'myContainerId'
  }
};
```

--------------------------------

### images_path configuration

Source: https://github.com/koalyptus/tablefilter/wiki/3.1-Sort

Sets the path for images used by the sort extension. Defaults to 'style/themes/'.

```APIDOC
## images_path

### Description
Sets the images path for this extension.

### Type
string

### Default
'style/themes/'

### Example
```javascript
var tfConfig = {
    extensions: [{
        name: 'sort',
        images_path: 'path/to/images/'
    }]
};
```
```

--------------------------------

### Configure colOps Extension - Output IDs

Source: https://github.com/koalyptus/tablefilter/wiki/3.2-Column-operations

Configure the colOps extension by providing a list of element IDs where calculation results will be displayed. Ensure these IDs correspond to existing HTML elements.

```javascript
var tfConfig = {
    extensions: [{
        name: 'colOps',
        id: ['col2Total', 'col4Mean']
    }]
};
```

--------------------------------

### Enable Toolbar

Source: https://github.com/koalyptus/tablefilter/wiki/1.19-Toolbar

Activate the toolbar at the top of the table. Can be set to true or an empty object.

```javascript
var tfConfig = { toolbar: true };
```

```javascript
var tfConfig = {
  toolbar: {}
};
```

--------------------------------

### Import TableFilter using CommonJS or AMD Modules

Source: https://github.com/koalyptus/tablefilter/blob/master/README.md

Import the TableFilter library using CommonJS or AMD module syntax.

```javascript
// CommonJS or AMD modules
var TableFilter = require('tablefilter');
```

--------------------------------

### Columns Visibility onBeforeOpen Callback

Source: https://github.com/koalyptus/tablefilter/wiki/3.4-Columns-visibility

Execute a function just before the columns list UI is displayed. The callback receives the TableFilter instance.

```javascript
var tfConfig = {
    extensions: [{
        name: 'colsVisibility',
        on_before_open: function(o) {
            console.log( o.extension('colsVisibility') );
        }
    }]
};
```

--------------------------------

### Enable Loading Indicator

Source: https://github.com/koalyptus/tablefilter/wiki/1.08-Loading-indicator

Set the 'loader' property to true to display a default loading message. Alternatively, an empty object can be used to enable the loader with default settings.

```javascript
var tfConfig = { loader: true };
```

```javascript
var tfConfig = {
  loader: {}
};
```

--------------------------------

### Configure advancedGrid with ezEditTable Properties

Source: https://github.com/koalyptus/tablefilter/wiki/3.1-Advanced-grid

Configure the advancedGrid extension, including ezEditTable-specific properties like selectable, editable, default_selection, and auto_save.

```javascript
var tfConfig = {
    extensions: [{
        name: 'advancedGrid',
        vendor_path: 'path/to/ezEditTable/',
        filename: 'ezEditTable_min.js',
        load_stylesheet: true,
        stylesheet: 'path/to/ezEditTable/stylesheet/style.css'

        // ezEditTable configuration properties below:
        selectable: true,
        editable: true,
        default_selection: 'both',
        auto_save: false
    }]
};
```

--------------------------------

### Configure colOps Extension - Write Method

Source: https://github.com/koalyptus/tablefilter/wiki/3.2-Column-operations

Define how calculation results are written to the target elements. Possible methods are 'innerHTML', 'setValue', and 'createTextNode'. Defaults to 'innerHTML'.

```javascript
var tfConfig = {
    extensions: [{
        name: 'colOps',
        id: ['col2Total', 'col4Mean'],
        col: [2, 4],
        operation: ['sum', 'mean'],
        write_method: ['innerHTML', 'setValue']
    }]
};
```

--------------------------------

### image_blank configuration

Source: https://github.com/koalyptus/tablefilter/wiki/3.1-Sort

Sets the filename for the default sorting icon when a column is not sorted. Defaults to 'blank.png'.

```APIDOC
## image_blank

### Description
Sets the default sorting icon filename.

### Type
string

### Default
'blank.png'

### Example
```javascript
var tfConfig = {
    extensions: [{
        name: 'sort',
        image_blank: 'myImage.gif'
    }]
};
```
```

--------------------------------

### Run Specific Test(s)

Source: https://github.com/koalyptus/tablefilter/blob/master/README.md

Executes one or more specific test files. Useful for targeted testing during development.

```shell
grunt test-only:test.html
```

```shell
grunt test-only:test.html,test-sort.html
```

--------------------------------

### Set Custom Themes Path

Source: https://github.com/koalyptus/tablefilter/wiki/1.12-Themes

Use 'themes_path' to define an alternative directory for your stylesheets, overriding the default 'style/themes/'.

```javascript
var tfConfig = { themes_path: 'myThemes/' }
```

--------------------------------

### Callback Before Reset

Source: https://github.com/koalyptus/tablefilter/wiki/1.09-Submit-and-reset-button

Execute a function before filters are cleared using 'on_before_reset'. Passes the TableFilter instance and filter values.

```javascript
var tfConfig = { on_before_reset: function(tf, filterValues){ alert('Filters values to be cleared: '+filterValues); }}
```

--------------------------------

### Include Manually Placed TableFilter Script

Source: https://github.com/koalyptus/tablefilter/blob/master/README.md

Include the main JavaScript file after manually copying the 'tablefilter' directory into your project.

```html
<script src="path/to/my/scripts/tablefilter/tablefilter.js"></script>
```

--------------------------------

### Columns Visibility onAfterOpen Callback

Source: https://github.com/koalyptus/tablefilter/wiki/3.4-Columns-visibility

Execute a function immediately after the columns list UI is displayed. The callback receives the TableFilter instance.

```javascript
var tfConfig = {
    extensions: [{
        name: 'colsVisibility',
        on_after_open: function(o) {
            console.log( o.extension('colsVisibility') );
        }
    }]
};
```

--------------------------------

### Configure advancedGrid with Filename

Source: https://github.com/koalyptus/tablefilter/wiki/3.1-Advanced-grid

Specify a custom filename for the ezEditTable plugin when configuring the advancedGrid extension.

```javascript
var tfConfig = {
    extensions: [{
        name: 'advancedGrid',
        vendor_path: 'path/to/ezEditTable/',
        filename: 'ezEditTable_min.js'
    }]
};
```

--------------------------------

### TableFilter Configuration with Columns Visibility

Source: https://github.com/koalyptus/tablefilter/blob/master/static/templates/columns-visibility.html

Configure TableFilter to enable column visibility management. The 'colsVisibility' extension is added, with initial hidden columns specified by 'at_start'.

```javascript
var tfConfig = {
  base_path: '../dist/tablefilter/',
  col_types: [
    'number',
    'string',
    'string',
    'formatted-number',
    'formatted-number',
    'string'
  ],
  paging: true,
  state: {
    types: ['cookie'],
    filters: true,
    columns_visibility: true
  },
  alternate_rows: true,
  rows_counter: true,
  btn_reset: {
    text: 'Clear'
  },
  status_bar: true,
  col_1: 'select',
  col_2: 'select',
  /* columns visibility and sort extension */
  extensions: [
    {
      name: 'colsVisibility',
      at_start: [3, 5],
      text: 'Columns: ',
      enable_tick_all: true
    },
    {
      name: 'sort'
    }
  ]
};
var tf = new TableFilter('demo', tfConfig);
tf.init();
```

--------------------------------

### Configure Thousands Separator

Source: https://github.com/koalyptus/tablefilter/wiki/1.11-Data-types

Define the default thousands separator. Accepts '.' or ','.

```javascript
var tfConfig = { thousands_separator: "." }
```

--------------------------------

### Enhancement Suggestion Template

Source: https://github.com/koalyptus/tablefilter/blob/master/CONTRIBUTING.md

Use this template when suggesting a new enhancement or feature to clearly outline the proposed changes and their benefits.

```markdown
[Short description of suggestion]

**Steps which explain the enhancement/feature**

1. [First Step]
2. [Second Step]
3. [Other Steps...]

**Current and suggested behavior**

[Describe current and suggested behavior here]

**Why would the enhancement be useful to most users**

[Explain why the enhancement would be useful to most users]

**Screenshots and GIFs**

![Screenshots and GIFs which demonstrate the steps or part of TableFilter 
the enhancement suggestion is related to](url)

**TableFilter Version:** [Enter TableFilter version here]
**Browser and version:** [Enter Browser name and version here]
**OS and version:** [Enter OS name and version here]
```

--------------------------------

### Subscribe to 'after-loading-extensions' Event

Source: https://github.com/koalyptus/tablefilter/wiki/1.02-Main-features

This event is emitted immediately after TableFilter has finished loading its extensions. The callback receives the TableFilter instance.

```javascript
tf.emitter.on(['after-loading-extensions'], function(tf){
  console.log(tf);
});
```

--------------------------------

### Configure First Page Button HTML

Source: https://github.com/koalyptus/tablefilter/wiki/1.04-Paging

Defines the HTML for the 'first page' button. The 'onclick' event is automatically added and may overwrite existing attributes.

```javascript
var tfConfig = {
  paging: {
    btn_first_page_html: '<a href="javascript:void(0);">First >></a>'
  }
};
```

--------------------------------

### Configure Decimal Separator

Source: https://github.com/koalyptus/tablefilter/wiki/1.11-Data-types

Define the default decimal separator. Accepts ',' or '.'

```javascript
var tfConfig = { decimal_separator: "," }
```

--------------------------------

### Columns Visibility onLoaded Callback

Source: https://github.com/koalyptus/tablefilter/wiki/3.4-Columns-visibility

Execute a function after the Columns Visibility extension is initialized. The callback receives the TableFilter instance.

```javascript
var tfConfig = {
    extensions: [{
        name: 'colsVisibility',
        on_loaded: function(o) {
            console.log( o.extension('colsVisibility') );
        }
    }]
};
```

--------------------------------

### Before Sort Callback

Source: https://github.com/koalyptus/tablefilter/wiki/3.1-Sort

Define a callback function to be executed before a column is sorted. Receives TableFilter instance and the column index.

```javascript
var tfConfig = {
    extensions: [{
        name: 'sort',
        on_before_sort:function(o, colIndex){

```

--------------------------------

### Subscribe to 'after-loading-themes' Event

Source: https://github.com/koalyptus/tablefilter/wiki/1.02-Main-features

This event is emitted immediately after TableFilter has finished loading its required stylesheets. The callback receives the TableFilter instance.

```javascript
tf.emitter.on(['after-loading-themes'], function(tf){
  console.log(tf);
});
```

--------------------------------

### Define Custom Loader HTML

Source: https://github.com/koalyptus/tablefilter/wiki/1.08-Loading-indicator

Use the 'html' property to provide custom HTML content for the loader when the 'loader' property is set to true. The default is null.

```javascript
var tfConfig = {
  loader: {
    html: '<span>Filtering data</span>'
  }
};
```

--------------------------------

### Configure Right Container CSS Class

Source: https://github.com/koalyptus/tablefilter/wiki/1.19-Toolbar

Set a custom CSS class for the right inner container of the toolbar.

```javascript
var tfConfig = {
  toolbar: {
    right_cont_css_class: 'my-css-class'
  }
};
```

--------------------------------

### Customize Theme Loading Message

Source: https://github.com/koalyptus/tablefilter/wiki/1.12-Themes

Configure the 'msg_load_themes' property to change the text displayed while stylesheets are being loaded.

```javascript
var tfConfig = { msg_load_themes: 'Loading my stylesheets..' }
```

--------------------------------

### Configure colOps Extension - Operations

Source: https://github.com/koalyptus/tablefilter/wiki/3.2-Column-operations

Specify the types of calculations to perform on each target column. Supported operations include 'sum', 'mean', 'min', 'max', 'median', 'q1', and 'q3'.

```javascript
var tfConfig = {
    extensions: [{
        name: 'colOps',
        id: ['col2Total', 'col4Mean'],
        col: [2, 4],
        operation: ['sum', 'mean']
    }]
};
```

--------------------------------

### TableFilter Configuration with Filters Visibility Extension

Source: https://github.com/koalyptus/tablefilter/blob/master/static/templates/external-filters-visibility-commad.html

Configuration object for TableFilter, enabling the filters visibility extension. Sets initial visibility to false and defines a toggle button.

```javascript
var tfConfig = { base_path: '../dist/tablefilter/', col_1: 'multiple', col_2: 'checklist', col_widths: [ '75px', '200px', '200px', '100px', '75px', '400px' ], grid_layout: true, paging: true, alternate_rows: true, rows_counter: true, btn_reset: true, loader: true, status_bar: true, extensions: [{ name: 'filtersVisibility', visible_at_start: false, target_id: 'filtersToggle', btn_html: '<button>Toggle filters</button>' }] }; var tf = new TableFilter('demo', tfConfig); tf.init();
```

--------------------------------

### Toolbar Position Configuration

Source: https://github.com/koalyptus/tablefilter/wiki/3.3-Filters-visibility

Configuration for the toolbar_position property, which defines the placement of elements within the toolbar.

```APIDOC
## Toolbar Configuration

### Description
Configuration for the toolbar_position property, which defines the placement of elements within the toolbar.

### Configuration Options

- **toolbar_position** (string) - Defines where an element will be placed inside the toolbar. Defaults to 'right'.
  - Possible values: 'left', 'center', 'right'.

### Example Usage

```javascript
var tfConfig = {
  rows_counter: {
      toolbar_position: 'center'
  }
};
```
```

--------------------------------

### Enable Keyword Highlighting

Source: https://github.com/koalyptus/tablefilter/wiki/1.16-Highlight-keywords

Set 'highlight_keywords' to true to enable highlighting of matched keywords. This is useful for visually identifying filtered results.

```javascript
var tfConfig = { highlight_keywords: true }
```

--------------------------------

### Columns Visibility onBeforeClose Callback

Source: https://github.com/koalyptus/tablefilter/wiki/3.4-Columns-visibility

Execute a function just before the columns list UI is closed. The callback receives the TableFilter instance.

```javascript
var tfConfig = {
    extensions: [{
        name: 'colsVisibility',
        on_before_close: function(o) {
            console.log( o.extension('colsVisibility') );
        }
    }]
};
```

--------------------------------

### Enable Mark Active Columns

Source: https://github.com/koalyptus/tablefilter/wiki/1.18-Mark-active-columns

Enable the visual indicator for active columns by setting mark_active_columns to true. This is the basic configuration to activate the feature.

```javascript
var tfConfig = { mark_active_columns: true };
```

--------------------------------

### Configure 'Of' Text

Source: https://github.com/koalyptus/tablefilter/wiki/1.04-Paging

Defines the text that appears after the page selector drop-down. Default is ' of '.

```javascript
var tfConfig = {
  paging: {
    of_text: ' / '
  }
};
```

--------------------------------

### Custom Options for Drop-down Filters

Source: https://github.com/koalyptus/tablefilter/wiki/1.02-Main-features

Configure custom options for drop-down filters using 'custom_options'. Specify columns, texts, values, and sorting behavior.

```javascript
var tfConfig = { custom_options: { 
    cols:[3,5],
    texts: [[],['1500 - 2000','2000 - 5000','5000 
* 15000','15000 - 25000']],
    values: [ ['Perl','C++','Suite'], 
['>=1500 && <=2000','>2000 && <=5000','>5000 && <=15000','>15000 && 
<=25000'] ], 
    sorts: [false,false] 
} };
```