handsontable-column-filter

Column filter plugin for Handsontable 6.x (free/MIT version). Adds Excel-like dropdown filter with checkboxes to column headers.

Features

• Dropdown filter button (▼) in each column header
• Checkbox list to select/deselect values
• "Select All" and "Clear" buttons
• Visual indicator when filter is active
• Callback on filter change
• API to get/set filter state programmatically

Installation

npm install handsontable-column-filter

Usage

With bundler (webpack, etc.)

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.css';
import ColumnFilterPlugin from 'handsontable-column-filter';

// Register the plugin
ColumnFilterPlugin(Handsontable);

// Create table with filter enabled
const hot = new Handsontable(container, {
  data: myData,
  columns: [
    { data: 'id', title: 'ID' },
    { data: 'name', title: 'Name' },
    { data: 'city', title: 'City' },
  ],
  colHeaders: true,
  columnFilter: true,  // Enable the plugin
  licenseKey: 'non-commercial-and-evaluation',
});

With script tag

<script src="handsontable/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="handsontable/dist/handsontable.full.min.css">
<script src="handsontable-column-filter/dist/handsontable-column-filter.js"></script>

<script>
  // Plugin auto-registers when Handsontable is available globally
  const hot = new Handsontable(container, {
    data: myData,
    columnFilter: true,
  });
</script>

Options

columnFilter: {
  // Callback when filter changes
  onFilter: (visibleCount, totalCount) => {
    console.log(`Showing ${visibleCount} of ${totalCount} rows`);
  }
}

API

Get plugin instance:

const filterPlugin = hot.getPlugin('columnFilter');

Methods

resetFilters()

Reset all filters to show all data.

filterPlugin.resetFilters();

getFilterState()

Get current filter state.

const state = filterPlugin.getFilterState();
// { 0: [1, 2, 3], 1: ['Moscow', 'London'], ... }

setFilterState(state)

Set filter state programmatically.

filterPlugin.setFilterState({
  2: ['Moscow', 'London']  // Column 2: only show Moscow and London
});

Compatibility

• Handsontable 6.x (free/MIT version)
• Works with both array and object data sources
• Works with React wrapper (@handsontable/react)

Why this plugin?

The built-in filters plugin in Handsontable is a PRO feature requiring a paid license. This plugin provides similar functionality for the free version (6.2.x).

License

MIT