React Data Grid Column filter

Filter your data by a value or by a combination of conditions.

Overview
Basic configuration
Custom filter menu
Custom implementations
- Filter as you type
- Filter from the outside the table
Related API reference

Overview

The Filters plugin allows filtering the data in the table's columns using a range of pre-defined conditions.

Basic configuration

To enable the plugin, set the filters configuration option to true and enable the filters dependency, which is the DropdownMenu plugin.

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

export const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],
        ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],
        ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],
        ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],
        ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5]
      ]}
      columns={[
        { type: 'text' },
        { type: 'text' },
        { type: 'text' },
        { type: 'text' },
        { type: 'date', dateFormat: 'M/D/YYYY' },
        { type: 'numeric' }
      ]}
      colHeaders={true}
      rowHeaders={true}
      dropdownMenu={true}
      filters={true}
      height="auto"
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.2/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.2/scripts/fixer.js"></script>

<div id="example1" class="hot "></div>

To display filters while hiding the other elements in the dropdown menu, pass the elements to be displayed as an array into the configuration.

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

export const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],
        ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],
        ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],
        ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],
        ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5]
      ]}
      columns={[
        { type: 'text' },
        { type: 'text' },
        { type: 'text' },
        { type: 'text' },
        { type: 'date', dateFormat: 'M/D/YYYY' },
        { type: 'numeric' }
      ]}
      colHeaders={true}
      rowHeaders={true}
      filters={true}
      dropdownMenu={['filter_by_condition', 'filter_action_bar']}
      height="auto"
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example2'));

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.2/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.2/scripts/fixer.js"></script>

<div id="example2" class="hot "></div>

Custom implementations

The examples below show how to adjust the Filter plugin to your needs. They include customizing the UI components, changing the default behavior, and using filters outside the table.

Filter as you type

This example places a basic input element inside each column header (A, B, C), separated by a horizontal line. The data is being filtered as you type, with a 100 ms delay. The filter element is excluded from the selection event, so the column doesn’t get selected when clicked on.

The demo below is just a demonstration (e.g., you can't add more columns). We don't recommend using it in your production code.

import { useEffect, useRef } from 'react';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

function debounce(func, wait = 200) {
  let lastTimer = null;
  let result;

  function _debounce(...args) {
    if (lastTimer) {
      clearTimeout(lastTimer);
    }
    lastTimer = setTimeout(() => {
      result = func.apply(this, args);
    }, wait);

    return result;
  }

  return _debounce;
}

export const ExampleComponent = () => {
  const hotRef = useRef(null);
  let debounceFn = null;

  const addEventListeners = (input, colIndex) => {
    input.addEventListener('keydown', event => {
      debounceFn(colIndex, event);
    });
  };

  //  Build elements which will be displayed in header.
  const getInitializedElements = colIndex => {
    const div = document.createElement('div');
    const input = document.createElement('input');

    div.className = 'filterHeader';

    addEventListeners(input, colIndex);

    div.appendChild(input);

    return div;
  };

  //  Add elements to header on `afterGetColHeader` hook.
  const addInput = (col, TH) => {
    // Hooks can return a value other than number (for example `columnSorting` plugin uses this).
    if (typeof col !== 'number') {
      return col;
    }

    if (col >= 0 && TH.childElementCount < 2) {
      TH.appendChild(getInitializedElements(col));
    }
  };

  useEffect(() => {
    const hot = hotRef.current.hotInstance;

    //  Event for `keydown` event. Add condition after delay of 200 ms which is counted from the time of last pressed key.
    debounceFn = debounce((colIndex, event) => {
      const filtersPlugin = hot.getPlugin('filters');

      filtersPlugin.removeConditions(colIndex);
      filtersPlugin.addCondition(colIndex, 'contains', [event.target.value]);
      filtersPlugin.filter();
    }, 100);
  });

  return (
    <HotTable
      ref={hotRef}
      data={[
        ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],
        ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],
        ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],
        ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],
        ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5]
      ]}
      height="auto"
      colHeaders={true}
      rowHeaders={true}
      className="as-you-type-demo"
      filters={true}
      colWidths={100}
      afterGetColHeader={addInput}
      beforeOnCellMouseDown={function(event, coords){
        // Deselect the column after clicking on input.
        if (coords.row === -1 && event.target.nodeName === 'INPUT') {
          event.stopImmediatePropagation();
          this.deselectCell();
        }
      }}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example3'));

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.2/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.2/scripts/fixer.js"></script>

<div id="example3" class="hot "></div>

import { useEffect, useRef } from 'react';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

function debounce(func, wait = 200) {
  let lastTimer = null;
  let result;

  function _debounce(...args) {
    if (lastTimer) {
      clearTimeout(lastTimer);
    }
    lastTimer = setTimeout(() => {
      result = func.apply(this, args);
    }, wait);

    return result;
  }

  return _debounce;
}

export const ExampleComponent = () => {
  const hotRef = useRef(null);
  let debounceFn = null;

  const addEventListeners = (input, colIndex) => {
    input.addEventListener('keydown', event => {
      debounceFn(colIndex, event);
    });
  };

  //  Build elements which will be displayed in header.
  const getInitializedElements = colIndex => {
    const div = document.createElement('div');
    const input = document.createElement('input');

    div.className = 'filterHeader';

    addEventListeners(input, colIndex);

    div.appendChild(input);

    return div;
  };

  //  Add elements to header on `afterGetColHeader` hook.
  const addInput = (col, TH) => {
    // Hooks can return a value other than number (for example `columnSorting` plugin uses this).
    if (typeof col !== 'number') {
      return col;
    }

    if (col >= 0 && TH.childElementCount < 2) {
      TH.appendChild(getInitializedElements(col));
    }
  };

  useEffect(() => {
    const hot = hotRef.current.hotInstance;

    //  Event for `keydown` event. Add condition after delay of 200 ms which is counted from the time of last pressed key.
    debounceFn = debounce((colIndex, event) => {
      const filtersPlugin = hot.getPlugin('filters');

      filtersPlugin.removeConditions(colIndex);
      filtersPlugin.addCondition(colIndex, 'contains', [event.target.value]);
      filtersPlugin.filter();
    }, 100);
  });

  return (
    <HotTable
      ref={hotRef}
      data={[
        ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],
        ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],
        ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],
        ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],
        ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5]
      ]}
      height="auto"
      colHeaders={true}
      rowHeaders={true}
      className="as-you-type-demo"
      filters={true}
      colWidths={100}
      afterGetColHeader={addInput}
      beforeOnCellMouseDown={function(event, coords){
        // Deselect the column after clicking on input.
        if (coords.row === -1 && event.target.nodeName === 'INPUT') {
          event.stopImmediatePropagation();
          this.deselectCell();
        }
      }}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

Filter from the outside the table

The external Filter component is controlling the main table by passing values for particular columns. Only a fraction of the code is related to Handsontable API, for example, addConditionsByValue, filter, and removeConditions.

TIP

Note that selecting a column in the Filter component resets the state of the table. This implementation can filter only one column at a time.

import React, { useEffect, useRef } from 'react';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

export const ExampleComponent = () => {
  const hotRef = useRef(null);
  const [colHeaders, setColHeaders] = React.useState([]);
  const [selectedColumnIndex, setSelectedColumnIndex] = React.useState(0);
  const [rowEntries, setRowEntries] = React.useState([]);
  const [selectedRowEntries, setSelectedRowEntries] = React.useState([]);

  const selectEntry = (rowEntry) => {
    if (selectedRowEntries.includes(rowEntry)) {
      setSelectedRowEntries(selectedRowEntries.filter(entry => entry !== rowEntry));

    } else {
      setSelectedRowEntries([...selectedRowEntries, rowEntry]);
    }
  };

  const toggleSelectAll = (event) => {
    if (event.target.checked) {
      setSelectedRowEntries(rowEntries);

    } else {
      setSelectedRowEntries([]);
    }
  }

  let updateSelectedColumn;
  let applyFilter;
  let clearFilter;

  useEffect(() => {
    const hot = hotRef.current.hotInstance;
    const filtersPlugin = hot.getPlugin('filters');

    if (colHeaders.length === 0) {
      const fetchedEntries = hot.getSourceDataAtCol(0);

      setColHeaders(hot.getColHeader());
      setRowEntries(fetchedEntries);
      setSelectedRowEntries(fetchedEntries);
    }

    updateSelectedColumn = (event) => {
      const fetchedEntries = hot.getSourceDataAtCol(event.target.value);

      clearFilter();
      setRowEntries(fetchedEntries);
      setSelectedColumnIndex(event.target.value);
      setSelectedRowEntries(fetchedEntries);
    };

    applyFilter = () => {
      filtersPlugin.removeConditions(selectedColumnIndex);
      if (selectedRowEntries.length) {
        selectedRowEntries.forEach((selectedEntry) => {
          filtersPlugin.addCondition(selectedColumnIndex, 'contains', [selectedEntry], 'disjunction');
        });

      } else {
        rowEntries.forEach((selectedEntry) => {
          filtersPlugin.addCondition(selectedColumnIndex, 'not_contains', [selectedEntry], 'conjunction');
        });
      }

      filtersPlugin.filter();
    };

    clearFilter = () => {
      filtersPlugin.removeConditions(selectedColumnIndex);
      filtersPlugin.filter();
      setSelectedRowEntries(rowEntries);
    };
  });

  return (
    <>
      <HotTable
        ref={hotRef}
        data={[
          ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],
          ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],
          ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],
          ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],
          ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5]
        ]}
        height="auto"
        colHeaders={true}
        rowHeaders={true}
        filters={true}
        colWidths={100}
        editor={false}
        fillHandle={false}
        licenseKey="non-commercial-and-evaluation"
      />
      <div id="externalFilter">
        <div className="columnChoose">
          <label>Choose Column: </label>
          <select onChange={(event) => updateSelectedColumn(event)}>
            {colHeaders.map(
              (headerLabel, index) => <option key={`${headerLabel}-${index}`} value={index}>{headerLabel}</option>
            )}
          </select>
        </div>

        <div id="filterSelect">
          <div className="controllers">
            <div>
              <label><input type="checkbox" onChange={(event) => toggleSelectAll(event)} id="filtersSelectAll"
                defaultChecked="checked"/> (Select all)</label>
            </div>
          </div>
          <div className="items">
            {rowEntries.map(
              (rowEntry, index) => <React.Fragment key={`${rowEntry}-${index}`}>
                <label><input type="checkbox" onChange={() => selectEntry(rowEntry)}
                  checked={selectedRowEntries.includes(rowEntry)}/>{rowEntry}</label><br/>
              </React.Fragment>
            )}
          </div>
        </div>

        <div className="buttons controls">
          <button onClick={() => applyFilter()} className="apply">Apply filter</button>
          <button onClick={() => clearFilter()} className="clear">Clear filter</button>
        </div>
      </div>

    </>
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example4'));

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.2/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.2/scripts/fixer.js"></script>

<div id="example4" class="hot "></div>

import React, { useEffect, useRef } from 'react';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

export const ExampleComponent = () => {
  const hotRef = useRef(null);
  const [colHeaders, setColHeaders] = React.useState([]);
  const [selectedColumnIndex, setSelectedColumnIndex] = React.useState(0);
  const [rowEntries, setRowEntries] = React.useState([]);
  const [selectedRowEntries, setSelectedRowEntries] = React.useState([]);

  const selectEntry = (rowEntry) => {
    if (selectedRowEntries.includes(rowEntry)) {
      setSelectedRowEntries(selectedRowEntries.filter(entry => entry !== rowEntry));

    } else {
      setSelectedRowEntries([...selectedRowEntries, rowEntry]);
    }
  };

  const toggleSelectAll = (event) => {
    if (event.target.checked) {
      setSelectedRowEntries(rowEntries);

    } else {
      setSelectedRowEntries([]);
    }
  }

  let updateSelectedColumn;
  let applyFilter;
  let clearFilter;

  useEffect(() => {
    const hot = hotRef.current.hotInstance;
    const filtersPlugin = hot.getPlugin('filters');

    if (colHeaders.length === 0) {
      const fetchedEntries = hot.getSourceDataAtCol(0);

      setColHeaders(hot.getColHeader());
      setRowEntries(fetchedEntries);
      setSelectedRowEntries(fetchedEntries);
    }

    updateSelectedColumn = (event) => {
      const fetchedEntries = hot.getSourceDataAtCol(event.target.value);

      clearFilter();
      setRowEntries(fetchedEntries);
      setSelectedColumnIndex(event.target.value);
      setSelectedRowEntries(fetchedEntries);
    };

    applyFilter = () => {
      filtersPlugin.removeConditions(selectedColumnIndex);
      if (selectedRowEntries.length) {
        selectedRowEntries.forEach((selectedEntry) => {
          filtersPlugin.addCondition(selectedColumnIndex, 'contains', [selectedEntry], 'disjunction');
        });

      } else {
        rowEntries.forEach((selectedEntry) => {
          filtersPlugin.addCondition(selectedColumnIndex, 'not_contains', [selectedEntry], 'conjunction');
        });
      }

      filtersPlugin.filter();
    };

    clearFilter = () => {
      filtersPlugin.removeConditions(selectedColumnIndex);
      filtersPlugin.filter();
      setSelectedRowEntries(rowEntries);
    };
  });

  return (
    <>
      <HotTable
        ref={hotRef}
        data={[
          ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],
          ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],
          ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],
          ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],
          ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5]
        ]}
        height="auto"
        colHeaders={true}
        rowHeaders={true}
        filters={true}
        colWidths={100}
        editor={false}
        fillHandle={false}
        licenseKey="non-commercial-and-evaluation"
      />
      <div id="externalFilter">
        <div className="columnChoose">
          <label>Choose Column: </label>
          <select onChange={(event) => updateSelectedColumn(event)}>
            {colHeaders.map(
              (headerLabel, index) => <option key={`${headerLabel}-${index}`} value={index}>{headerLabel}</option>
            )}
          </select>
        </div>

        <div id="filterSelect">
          <div className="controllers">
            <div>
              <label><input type="checkbox" onChange={(event) => toggleSelectAll(event)} id="filtersSelectAll"
                defaultChecked="checked"/> (Select all)</label>
            </div>
          </div>
          <div className="items">
            {rowEntries.map(
              (rowEntry, index) => <React.Fragment key={`${rowEntry}-${index}`}>
                <label><input type="checkbox" onChange={() => selectEntry(rowEntry)}
                  checked={selectedRowEntries.includes(rowEntry)}/>{rowEntry}</label><br/>
              </React.Fragment>
            )}
          </div>
        </div>

        <div className="buttons controls">
          <button onClick={() => applyFilter()} className="apply">Apply filter</button>
          <button onClick={() => clearFilter()} className="clear">Clear filter</button>
        </div>
      </div>

    </>
  );
};

Configuration options:
- dropdownMenu
- filters
Hooks:
- afterFilter
- beforeFilter
Plugins:
- DropdownMenu
- Filters

← Column menu Row headers →