TableFilter JavaScript Library

If you are not using a module system, you can include the distribution scripts directly in your HTML pages. You can either reference the files within your node_modules folder or manually copy the tablefilter directory from dist into your project and reference it locally.

<!-- Referencing node_modules -->
<script src="path_to/node_modules/tablefilter/dist/tablefilter/tablefilter.js"></script>

<!-- Referencing manually placed scripts -->
<script src="path/to/my/scripts/tablefilter/tablefilter.js"></script>

You can install TableFilter using npm. To install the current stable version, use the standard install command. To access upcoming features, you can install from the next release channel.

# Install stable version
npm install tablefilter --save-dev

# Install from the next release channel
npm install tablefilter@next --save-dev

If you are using a module bundler, you can import TableFilter using ES2015 modules or CommonJS/AMD modules.

// ES2015 modules
import TableFilter from 'tablefilter';

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

To use TableFilter, instantiate the TableFilter class by passing the target HTML table element and a configuration object.

Important: You must define the base_path property in the configuration object to reflect the path to the TableFilter scripts. If base_path is omitted, it defaults to the /tablefilter directory relative to your page.

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

The core API for interacting with TableFilter involves the TableFilter constructor and the .init() method.

// Constructor
// new TableFilter(tableElement, configurationObject)

// Configuration Object Keys
// base_path: string (The path to the TableFilter scripts)

// Methods
// tf.init(): Initializes the filter functionality on the table

The main entry point for the library is the TableFilter class. You can import it from the root module to initialize filtering capabilities on an HTML table. While the specific constructor arguments are defined in the distribution files, the entry point allows you to require the library and access the TableFilter constructor directly.

const TableFilter = require('tablefilter');

// Initialize TableFilter on a table element
const tf = new TableFilter({
  // configuration options go here
});

The AUTO_FILTER_DELAY constant defines the default delay in milliseconds used for auto-filtering (debouncing input). The default value is 750 ms.

// The default delay is 750ms
export const AUTO_FILTER_DELAY = 750;

TableFilter uses data types to understand how to process and compare values in your table cells. Supported data types include:

• string: Standard text comparison.
• number: Numeric comparison.
• formatted-number: Numbers that may contain formatting (like currency or separators).
• date: Date-based comparison.
• ipaddress: IP address comparison.

// Example of specifying a data type in column configuration
const config = {
  columns: [
    { selector: 'th:nth-child(4)', type: 'date' },
    { selector: 'th:nth-child(5)', type: 'number' }
  ]
};

The Toolbar module exports three constants representing the available alignment positions within the toolbar container. Use these when calling the container() method to ensure type safety and avoid string errors.

• LEFT: 'left'
• CENTER: 'center'
• RIGHT: 'right'

export const LEFT = 'left';
export const RIGHT = 'right';
export const CENTER = 'center';

When configuring TableFilter, you can specify the type of input element used for filtering. The available filter types are:

• input: Standard text input.
• select: A single-selection dropdown.
• multiple: A multiple-selection dropdown.
• checklist: A list of checkboxes.
• none: No filter input is provided for the column.

// Example of using the constants for configuration
import { INPUT, SELECT, CHECKLIST } from './path/to/src/const.js';

const config = {
  columns: [
    { selector: 'th:nth-child(1)', filterType: INPUT },
    { selector: 'th:nth-child(2)', filterType: SELECT },
    { selector: 'th:nth-child(3)', filterType: CHECKLIST }
  ]
};