Skip to content

Documentation - Slice directive

Create a directive to conveniently interact with the slice capabilities of smart table. Useful to implement a pagination logic

import {smartTable, paginationDirective as slice} from 'smart-table-core';

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

const smartCollection = smartTable({
    data, tableState: {
        sort: {},
        filter: {},
        search: {},
        slice: {page: 1, size: 1}
    }
});

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

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

directive.selectPage(3);
See in CodePen.

Factory

Arguments

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

table
A reference to a smart table instance.

Instance API

.selectPage

Allows you to select a page with the current smart table configuration (ie given a particular page size)

Arguments

page
The index of the requested page (starts at 1)

.selectNextPage

Select the next page

.selectPreviousPage

Select the previous page

.changePageSize

Change the configured page size

Arguments

size
The number of item to display by page.

.isPreviousPageEnabled

Tells you whether there is a previous page.

Returned value

A boolean with the value true if there is any previous page.

.isNextPageEnabled

Tells you whether there is a next page

Returned value

A boolean with the value true if there is a next page.

onSummaryChange

see summary directive for more details

onPageChange

Registers an event listener to the PAGE_CHANGED event

Arguments

listener
A function which takes as unique argument the slice part of the table state.