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}`);
});

smartCollection.exec();
See in CodePen

Factory

Arguments

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

table
An instance of smart table

Instance API

.onSummaryChange

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

Arguments

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