Skip to content

Documentation - Search directive

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

import {smartTable, searchDirective as search} 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 search configuration
const directive = search({table: smartCollection, scope: ['surname', 'name']});

directive.search('Bar');
See in CodePen

Factory

Arguments

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

table
An instance of smart table
scope
An array of pointer strings which refer to the item properties you want to include in the search

Instance API

.search

Will search your data based on the directive configuration and the search input

Arguments

input
The input regexp pattern
option
An object to pass extra option to the search factory (like "flags" for example)

.onSearchChange

Will register an event listener to the SEARCH_CHANGED event (triggered whenever the search part of the table state changes)

Arguments

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