Skip to content

Documentation - Summary directive

The displayed collection may not reveal the full description of a table state: for example if you decide to show twenty items per page, the displayed collection won't tell you how many items match your current search. This directive will allow you to know that information by listening to the SUMMARY_CHANGED event.

Note that the slice directive will include the behavior of this directive as well.

import {smartTable, summaryDirective as summary} from 'smart-table-core';

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

const smartCollection = smartTable({data});

const directive = summary({table: smartCollection});

directive.onSummaryChange(({page, size, filteredCount}) => {
    console.log(`page: ${page}`);
    console.log(`size: ${page}`);
    console.log(`filtered items count: ${filteredCount}`);

See in CodePen



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

An instance of smart table

Instance API


Register an event listener to the SUMMARY_CHANGED event (triggered whenever the displayed collection changes)


A function whose unique argument will be an object with the following structure
The index of the currently displayed page (starting at 1)
The current size of the page
The number of items in your data set matching your current search and filter query