Skip to content

Documentation - Filter directive

Create a filter directive to conveniently interact with the filter capabilities of your smart table instance

import {smartTable, filterDirective as filter} from 'smart-table-core';

const data = [
    {surname: 'Deubaze', name: 'Raymond'},
    {surname: 'Foo', name: 'Bar'},
    {surname: 'Doe', name: 'John'}
];

const smartCollection = smartTable({data});
smartCollection.onDisplayChange((items) => {
    console.log(items.map(item => item.value));
});

//create a directive bound to a filter configuration
const directive = filter({table: smartCollection, pointer: 'surname', operator: 'lt', type: 'string'});

directive.filter('f');
See in CodePen

Factory

Arguments

The factory takes as argument an options object with the following properties

table
An instance of smart table
pointer
A pointer string which refers to the item property to filter
operator
The filter operator. It can be
  • includes: check whether a string contains a substring (default)
  • is: strict equality ( === )
  • isNot: negation of "is" (!==)
  • lt: lower than (<)
  • gte: greater than or equal to (>=)
  • gt: greater than (>)
  • lte: lower than or equal to (<=)
  • equals: loose equality (==)
  • notEqualS: negation of "equals" (!=)
  • anyOf: check whether a values belongs to a given set of values
and defaults to "includes"
type
The expected type of the filtered property (boolean, number, date or string). It defaults to "string"

Instance API

Your directive will have the following API

.filter

Will filter the data based on the directive configuration and the input string

Arguments

input
The input string

onFilterChange

Will register an event listener to the FILTER_CHANGED event (which triggers whenever the filter part of the table state changes)

Arguments

listener
A function whose unique argument will be the current filter part of the table state.