Skip to content

Documentation - Table directive

The table directive is the main directive and is required to create the other directives.

Factory

To instantiate a smart table you can use its factory.

Arguments

The first argument is an options object with the following properties:

data
A Javascript Array with your data.
tableState
An Object with the initial table state. It defaults to
{sort: {}, slice: {page: 1}, filter: {}, search: {}}
sortFactory
The factory which will turns the sort state into the sort function. It defaults to smart-table-sort
filterFactory
The factory which will turns the filter state into the filter function. It defaults to smart-table-filter
searchFactory
The factory which will turns the search state into the search function. It defaults to smart-table-search (regexp based implementation)

You can then add any number of directive extensions. See extend smart table for more details

Instance API

.sort

This method will change the sort part of the table state and will trigger a refresh of the displayed data. It is the low level API if you don't want to use the sort directive

Arguments

An object with the following properties

pointer
The pointer string which refers to the sorted property
direction
A string with the sort direction. Allowed values are 'asc', 'desc', 'none'. If value is omitted it will be equivalent to 'none'

See smart-table-sort for more details.

.filter

This method will change the filter part of the table state and will trigger a refresh of the displayed data. It is the low level API if you don't want to use the filter directive

Arguments

An object whose keys are pointer to data properties and whose values are filter clauses. Refer to smart-table-filter for more details.

.search

This method will change the search part of the table state and will trigger a refresh of the displayed data. It is the low level API if you don't want to use the search directive

Arguments

An object with the following properties

scope
An array with string pointers referencing properties you want to include in the text search
value
A string with the regexp pattern you want to search for
flags
A regexp flag
escape
Whether you want to escape special regexp characters in the input value.

See smart-table-search for more details.

.slice

This method will change the slice part of the table state and will trigger a refresh of the displayed data. It is the low level API if you don't want to use the slice directive

Arguments

An object with the following properties

page
An integer referencing the index of page you want to display. The first page starts at 1
size
An integer with the number of item per page you want to display. If this value is omitted the whole data set will be considered as a single page.

.exec

All the methods above which mutate the table state will have as side effect to call this method. This method updates the displayed data accordingly to the current table state and will notify the system of changes through events.

You can call this method manually after you have registered event listeners so they are aware of the latest table state/displayed data.

Arguments

An object with following property

processingDelay
As the calculation of the displayed data may be long, the calculation is delayed a little bit to allow the system to notify the other parts that eventually a long process is going to take place. The default value is 20(ms)

.eval

This method lets you calculate the displayed data without having any side effects. It is useful when you want to use the smart table as a data source

Arguments

Takes a table state as argument and defaults to the actual table state

returned value

It returns a Promise which will eventually resolve with a data array whose items have the following structure:

index
The index of the item in the data source collection
value
The item

.getTableState

It returns a deep copy of the current table state

.getMatchingItems

It returns an array with all the items that match the current search, sort and filter state (ie with no pagination)

.onDisplayChange

it is a convenient method to register an event listener to the DISPLAY_CHANGED event.

Arguments

Takes a function whose only argument will be an array with the new displayed collection. Every item will have the same structure as in .eval method