API Docs for: 2.5.0.563646c7
Show:

Components.ModelsTable Class

Extends Ember.Component

Table-component with pagination, sorting and filtering.

It should be used when whole dataset is already loaded. For server-side pagination, filtering and sorting models-table-server-paginated should be used.

Basic usage example:

{{models-table data=model columns=columns}}

Usage with block context:

{{#models-table data=data columns=columns as |mt|}}
  {{mt.global-filter}}
  {{mt.data-group-by-select}}
  {{mt.columns-dropdown}}
  {{mt.table}}
  {{mt.footer}}
{{/models-table}}

ModelsTable yields references to the following contextual components:

Check own docs for each component to get detailed info.

ModelsTable has a lot of options you may configure, but there are two required properties called data and columns. First one contains data (e.g. list of records from the store). Second one is a list of table's columns (check models-table-column for available options).

Item Index

Methods

_clearFilters

() Undefined private

Clear all filters.

Returns:

Undefined:

_createColumn

(
  • options
)
Object

Create a column. This can be overwritten if you need to use your own column object.

Override must something like:

_createColumn(options) {
  const hash = this._createColumnHash(options);
  const column = ModelsTableColumn.extend(hash).create(options);
  return this._postProcessColumn(column);
}

Parameters:

Returns:

_createColumnHash

(
  • options
)
Object private

Generate hash for column-extend

Parameters:

Returns:

_multiColumnsSorting

(
  • column
  • sortedBy
  • newSorting
)
Undefined private

Set sortProperties when multi-columns sorting is used

Parameters:

  • column ModelsTableColumn
  • sortedBy String
  • newSorting String

    'asc|desc|none'

Returns:

Undefined:

_postProcessColumn

(
  • column
)
Object private

Set values for some column-properties after its creation

Parameters:

Returns:

_sendColumnsVisibilityChangedAction

() Undefined private

Send columnsVisibilityChangedAction-action when user changes which columns are visible. Action is sent if columnsVisibilityChangedAction is a closure action

Returns:

Undefined:

_setupColumns

() Undefined private

Create new properties for columns

Returns:

Undefined:

_setupColumnsComponent

(
  • c
  • column
)
Undefined private

Create new properties for columns for components

Parameters:

  • c ModelsTableColumn
  • column Object

    raw column

Returns:

Undefined:

_setupColumnsOnce

() Undefined private

Wrapper for _setupColumns to call it only once when observer is fired

Returns:

Undefined:

_setupPageSizeOptions

() Undefined private

Provide backward compatibility with pageSizeValues equal to an array with numbers and not objects pageSizeValues is live as is, pageSizeOptions is used in the templates

Returns:

Undefined:

_singleColumnSorting

(
  • column
  • sortedBy
  • newSorting
)
Undefined private

Set sortProperties when single-column sorting is used

Parameters:

  • column ModelsTableColumn
  • sortedBy String
  • newSorting String

    'asc|desc|none'

Returns:

Undefined:

actions.clearFilters

() Undefined

Clear all column filters and global filter

May trigger sending Components.ModelsTable/displayDataChangedAction:property

Returns:

Undefined:

actions.clickOnRow

(
  • index
  • dataItem
)
Undefined

Handler for row-click

Toggle selected-state for row. Select only one or multiple rows depends on multipleSelect value. May trigger sending Components.ModelsTable/displayDataChangedAction:property

Parameters:

Returns:

Undefined:

actions.collapseAllRows

() Undefined

Collapse all rows in the current page

May trigger sending Components.ModelsTable/displayDataChangedAction:property

Returns:

Undefined:

actions.collapseRow

(
  • index
  • dataItem
)
Undefined

Collapse selected row

May trigger sending Components.ModelsTable/displayDataChangedAction:property

Parameters:

Returns:

Undefined:

actions.doubleClickOnRow

(
  • index
  • dataItem
)
Undefined

Handler for double-click on row

May trigger sending Components.ModelsTable/rowDoubleClickAction:property

Parameters:

Returns:

Undefined:

actions.expandAllRows

() Undefined

Expand all rows in the current page

It works only if multipleExpand is set to true. May trigger sending Components.ModelsTable/displayDataChangedAction:property

Returns:

Undefined:

actions.expandRow

(
  • index
  • dataItem
)
Undefined

Expand selected row

It will cause expandedRowComponent to be used for it. It will collapse already expanded row if multipleExpand is set to false. Expanding is assigned to the record itself and not their index. So, if page #1 has first row expanded and user is moved to any another page, first row on new page won't be expanded. But when user will be back to the first page, first row will be expanded. May trigger sending Components.ModelsTable/displayDataChangedAction:property

Parameters:

Returns:

Undefined:

actions.gotoCustomPage

(
  • pageNumber
)
Undefined

Pagination click-handler

It moves user to the selected page. Check models-table/pagination-numeric and models-table/pagination-simple for usage examples. May trigger sending Components.ModelsTable/displayDataChangedAction:property

Parameters:

Returns:

Undefined:

actions.hideAllColumns

() Undefined

Hide all columns that may be hidden (see mayBeHidden)

May trigger sending Components.ModelsTable/columnsVisibilityChangedAction:property

Returns:

Undefined:

actions.hoverOnRow

(
  • index
  • dataItem
)
Undefined

Handler for row-hover

May trigger sending Components.ModelsTable/rowHoverAction:property

Parameters:

Returns:

Undefined:

actions.outRow

(
  • index
  • dataItem
)
Undefined

Handler for row-hover

May trigger sending Components.ModelsTable/rowHoverAction:property

Parameters:

Returns:

Undefined:

actions.restoreDefaultVisibility

() Undefined

Restore columns visibility values according to their default visibility settings (see defaultVisible)

May trigger sending Components.ModelsTable/columnsVisibilityChangedAction:property

Returns:

Undefined:

actions.sendAction

() Undefined

Send action to the outside context

sendAction signature is the same as Ember.Component#sendAction

Returns:

Undefined:

actions.showAllColumns

() Undefined

Show all columns

Set each column isHidden value to false. May trigger sending Components.ModelsTable/columnsVisibilityChangedAction:property

Returns:

Undefined:

actions.sort

(
  • column
)
Undefined

Sort selected column by sortedBy or propertyName

It will drop sorting for other columns if multipleColumnsSorting is set to false. It will add new sorting if multipleColumnsSorting is set to true. May trigger sending Components.ModelsTable/displayDataChangedAction:property. Table will be dropped to the first page if sorting is done

For multiColumns-sorting calling sort will change sort-order. E.g.:

sortProperties = ['a:asc', 'b:asc', 'c:desc'];
sort({propertyName: 'b'}); // sortProperties now is ['a:asc', 'c:desc', 'b:desc']

Parameters:

  • column ModelsTableColumn

Returns:

Undefined:

actions.toggleAllSelection

() Undefined

Select/deselect all rows

May trigger sending Components.ModelsTable/displayDataChangedAction:property

Returns:

Undefined:

actions.toggleColumnSet

() Undefined

Toggle visibility for every column in the selected columns set

It ignore columns that can't be hidden (see mayBeHidden). May trigger sending Components.ModelsTable/columnsVisibilityChangedAction:property

Returns:

Undefined:

actions.toggleGroupedRows

(
  • groupedValue
)
Undefined

Collapse or expand rows group

Parameters:

  • groupedValue

Returns:

Undefined:

actions.toggleGroupedRowsExpands

(
  • groupedValue
)
Undefined

Expand or collapse all rows in the rows group

IMPORTANT multipleExpand should be set to true otherwise this action won't do anything

Parameters:

  • groupedValue

Returns:

Undefined:

actions.toggleGroupedRowsSelection

(
  • groupedValue
)
Undefined

Select/deselect rows from the rows group

IMPORTANT multipleSelect should be set to true otherwise this action won't do anything

May trigger sending Components.ModelsTable/displayDataChangedAction:property

Parameters:

  • groupedValue

Returns:

Undefined:

actions.toggleHidden

(
  • column
)
Undefined

Toggle visibility for provided column

It doesn't do nothing if column can't be hidden (see mayBeHidden). May trigger sending Components.ModelsTable/columnsVisibilityChangedAction:property

Parameters:

  • column ModelsTableColumn

Returns:

Undefined:

collapseRowOnNavigate

() Undefined private

Collapse open rows when user change page size or moved to the another page

Returns:

Undefined:

focus

() Undefined

Focus on 'Global filter' on component render

Returns:

Undefined:

forceToFirstPage

() Undefined private

Handler for global filter and filter by each column

Returns:

Undefined:

rebuildTable

() Undefined

Rebuild the whole table. This can be called to force a complete re-render of the table.

Returns:

Undefined:

setup

() Undefined

Component init

Set visibility and filtering attributes for each column

Returns:

Undefined:

updateColumns

() Undefined

Recalculate processedColumns when the columns attr changes

Returns:

Undefined:

updateHeaderCellsColspan

() Undefined private

Update colspans for table header cells

Returns:

Undefined:

() Undefined private

Preselect table rows if selectedItems is provided

multipleSelected may be set true if selectedItems has more than 1 item

Returns:

Undefined:

updateHeaderCellsColspanOnce

() Undefined private

Returns:

Undefined:

userInteractionObserver

() Undefined private

Send displayDataChangedAction-action when user does sort of filter. Action is sent if displayDataChangedAction is a closure-action

Returns:

Undefined:

userInteractionObserverOnce

() Undefined private

Returns:

Undefined:

visibleContentObserver

() Undefined private

Show first page if for some reasons there is no content for current page, but table data exists

Returns:

Undefined:

visibleContentObserverOnce

() Undefined private

Returns:

Undefined:

Properties

allColumnsAreHidden

Boolean private

True if all processedColumns are hidden by isHidden

anyFilterUsed

Boolean private

true if global filter or filter by any column is used

arrangedContent

Object[] private

filteredContent sorted by needed properties

arrangedContentLength

Number private

Alias to arrangedContent.length

collapsedGroupValues

Array

List of grouped property values where the groups are collapsed

Default: []

columnComponents

Object

Hash of components to be used for columns.

See ModelsTableColumn, property component

Default: {}

columnDropdownOptions

showAll: boolean, hideAll: boolean, restoreDefaults: boolean, columnSets: object private

These are options for the columns dropdown. By default, the 'Show All', 'Hide All' and 'Restore Defaults' buttons are displayed.

columnFieldsToCheckUpdate

String[]

columns fields which are observed to update shown table-columns It is used only if columnsAreUpdateable is true

Default: ['propertyName', 'component']

columns

Object[]

Table columns. Check ModelsTableColumn for available properties

It's a second of the two attributes you must set to the component

Default: []

columnsAreUpdateable

Boolean

Determines if processedColumns will be updated if columns are changed (propertyName and template are observed) IMPORTANT All filter, sort and visibility options will be dropped to the default values while updating

Default: false

columnSets

Object[]

Sets of columns that can be toggled together. Each object should have:

  • label (string) - The label for the set. This will be displayed in the columns dropdown.
  • showColumns (array|Function) - This should either be an array of propertyNames to show, or a function. If it is a function, the function will be called with the processedColumns as attribute.
  • hideOtherColumns (boolean) - If this is true (default), all columns not specified in showColumns will be hidden. If this is set to false, other columns will be left at whatever visibility they were before.
  • toggleSet (boolean) - If this is true (default is false), the set columns will be shown if one of them is currently hidden, else they will all be hidden. Settings this will result in a default of hideOtherColumns=false

Default: []

currentGroupingPropertyName

String

Property name used now for grouping rows

IMPORTANT It should be set initially if useDataGrouping is set to true

Default: null

currentPageNumber

Number

Currently shown page number. It may be set initially

Default: 1

data

Object[]

All table records

It's a first of the two attributes you must set to the component

Default: []

dataGroupOptions

Object[] private

dataGroupProperties

String[] | Object[]

List of property names can be used for grouping

It may be a list of strings of list of objects. In first case label and value in the select-box will be the same. In the second case you must set label and value properties for each list item

IMPORTANT It must contain currentGroupingPropertyName-value

Default: []

displayGroupedValueAs

String

Determines how grouped value will be displayed - as a row or column

Allowed values are row and column

Default: 'row'

doFilteringByHiddenColumns

Boolean

Determines if filtering should be done by hidden columns

Notice: after changing this value filtering results will be updated only after filter options are changed

Default: true

expandedItems

Object[]

Expanded row items.

It's set to the initial value when current page or page size is changed

Default: null

expandedRowComponent

Object

Component used in the 'expanded' row

It will receive several options:

  • record - current row value
  • processedColumns - current column (one of the {{#crossLink 'Components.ModelsTable/processedColumns:property'}}processedColumns{{/crossLink}})
  • index - current row index
  • selectedItems - bound from {{#crossLink 'Components.ModelsTable/selectedItems:property'}}selectedItems{{/crossLink}}
  • visibleProcessedColumns - bound from {{#crossLink 'Components.ModelsTable/visibleProcessedColumns:property'}}visibleProcessedColumns{{/crossLink}}
  • clickOnRow - closure action {{#crossLink 'Components.ModelsTable/actions.clickOnRow:method'}}ModelsTable.actions.clickOnRow{{/crossLink}}
  • sendAction - closure action {{#crossLink 'Components.ModelsTable/actions.sendAction:method'}}ModelsTable.actions.sendAction{{/crossLink}}
  • themeInstance - bound from {{#crossLink 'Components.ModelsTable/themeInstance:property'}}themeInstance{{/crossLink}}

Usage:

{{models-table data=model columns=columns expandedRowComponent=(component "expanded-row")}}

Default: null

filteredContent

Object[] private

data filtered with a global filter and columns filters

Filtering by columns is ignored if useFilteringByColumns is set to false

filteringIgnoreCase

Boolean

Determines if filtering (global and by column) should ignore case

Default: false

filterString

String

Global filter value

Default: ''

firstIndex

Number private

Index of the first currently shown record

focusGlobalFilter

Boolean

Determines if focus should be on the 'Global filter'-field on component render

Default: false

globalFilterUsed

Boolean private

true if some value is set to the global filter

groupedArrangedContent

Object[] private

filteredContent grouped by currentGroupingPropertyName sorted by needed properties

groupedHeaders

GroupedHeader[]

List of the additional headers. Used to group columns.

Each object may have such fields:

  • title (string) - Header for grouped column
  • colspan (number) - HTML colspan attr
  • rowspan (number) - HTML rowspan attr

Default: []

groupedVisibleContent

Object private

Content of the current table page when rows grouping is used

groupedVisibleContent sliced for currently shown page

Default: {}

groupedVisibleContentValuesOrder

Array private

List of grouped property values in order to show groups in the table

groupingRowComponent

Object

Component used in the row with a grouped value

This component won't be used if {{#crossLink 'Component.ModelsTable/useDataGrouping:property'}}useDataGrouping{{/crossLink}} is not true

Component will receive several options:

  • groupedValue - grouped property value
  • currentGroupingPropertyName - bound from {{#crossLink 'Components.ModelsTable/currentGroupingPropertyName:property'}}currentGroupingPropertyName{{/crossLink}}
  • displayGroupedValueAs - bound from {{#crossLink 'Components.ModelsTable/displayGroupedValueAs:property'}}ModelsTable.displayGroupedValueAs{{/crossLink}}
  • toggleGroupedRows - closure action {{#crossLink 'Components.ModelsTable/actions.toggleGroupedRows:method'}}ModelsTable.actions.toggleGroupedRows{{/crossLink}}
  • toggleGroupedRowsExpands - closure action {{#crossLink 'Components.ModelsTable/actions.toggleGroupedRowsExpands:method'}}ModelsTable.actions.toggleGroupedRowsExpands{{/crossLink}}
  • toggleGroupedRowsSelection - closure action {{#crossLink 'Components.ModelsTable/actions.toggleGroupedRowsSelection:method'}}ModelsTable.actions.toggleGroupedRowsSelection{{/crossLink}}
  • visibleProcessedColumns - bound from {{#crossLink 'Components.ModelsTable/visibleProcessedColumns:property'}}ModelsTable.visibleProcessedColumns{{/crossLink}}
  • themeInstance - bound from {{#crossLink 'Components.ModelsTable/themeInstance:property'}}ModelsTable.themeInstance{{/crossLink}}
  • sendAction - closure action {{#crossLink 'Components.ModelsTable/actions.sendAction:method'}}ModelsTable.actions.sendAction{{/crossLink}}
  • groupedItems - list of all rows group items
  • visibleGroupedItems - list of rows group items shown on the current table page
  • selectedGroupedItems - list of selected rows group items
  • expandedGroupedItems - list of expanded rows group items

Usage:

{{models-table data=model columns=columns groupingRowComponent=(component "grouping-row")}}

Default: null

groupSummaryRowComponent

Object

This component won't be used if {{#crossLink 'Component.ModelsTable/useDataGrouping:property'}}useDataGrouping{{/crossLink}} is not true

Component will receive several options:

  • visibleProcessedColumns - bound from {{#crossLink 'Components.ModelsTable/visibleProcessedColumns:property'}}ModelsTable.visibleProcessedColumns{{/crossLink}}
  • themeInstance - bound from {{#crossLink 'Components.ModelsTable/themeInstance:property'}}ModelsTable.themeInstance{{/crossLink}}
  • sendAction - closure action {{#crossLink 'Components.ModelsTable/actions.sendAction:method'}}ModelsTable.actions.sendAction{{/crossLink}}
  • groupedItems - list of all rows group items
  • visibleGroupedItems - list of rows group items shown on the current table page
  • selectedGroupedItems - list of selected rows group items
  • expandedGroupedItems - list of expanded rows group items

Usage:

{{models-table data=model columns=columns groupSummaryRowComponent=(component "group-summary-row")}}

Default: null

isLastPage

Boolean private

Is user on the last page

lastIndex

Number private

Index of the last currently shown record

multipleColumnsSorting

Boolean

Determines if multi-columns sorting should be used

Default: false

multipleExpand

Boolean

true - allow to expand more than 1 row, false - only 1 row may be expanded in the same time

Default: false

multipleSelect

Boolean

Allow or disallow to select multiple rows. If false - only one row may be selected in the same time

Default: false

noHeaderFilteringAndSorting

Boolean private

true if all processedColumns don't use filtering and sorting

pagesCount

Number private

Number of pages

pageSize

Number

Number of records shown on one table-page

Default: 10

pageSizeOptions

Value: string | Number, label: string | Number private

List of options for pageSize-selectBox It's mapped from pageSizeValues This value should not be set manually!

Default: []

pageSizeValues

Number[]

List of possible pageSize values. Used to change size of visibleContent

Default: [10, 25, 50]

processedColumns

Object[] private

List of columns shown in the table. It's created from the columns provided to the component

Default: []

publicAPI

Object

Public API that allows for programmatic interaction with the component

{ refilter() - Invalidates the filteredContent property, causing the table to be re-filtered. recordsCount - Size of the current arranged content }

registerAPI

ClosureFunction

Action sent on init to give access to the Public API

Default: null

selectedItems

Object[]

List of currently selected row items

Row may be selected by clicking on it, if selectRowOnClick is set to true

Default: null

selectRowOnClick

Boolean

Allow or disallow to select rows on click. If false - no row can be selected

Default: true

showColumnsDropdown

Boolean

Determines if columns-dropdown should be shown

Default: true

showComponentFooter

Boolean

Determines if component footer should be shown on the page

Default: true

showGlobalFilter

Boolean

Determines if 'Global filter'-field should be shown

Default: true

showPageSize

Boolean

Determines if page size should be shown

Default: true

sortByGroupedFieldDirection

String private

Sort direction for grouped property values

Default: 'asc'

sortProperties

String[] private

List of properties to sort table rows

Each value is like 'propertyName:sortDirection'

Default: []

themeInstance

Themes.Default

themeInstance is an instance of DefaultTheme or it's children. By default models-table uses BootstrapTheme instance.

You may create your own theme-class and set themeInstance to it's instance. Check Theme properties you may define in your own theme.

useDataGrouping

Boolean

Determines if rows should be grouped for some property

Grouped value may be shown in the separated row on the top of the group or in the first column (in the cell with rowspan) in the each group (see displayGroupedValueAs)

Generally you should not show column with property which is used for grouping (but it's up to you)

Default: false

useFilteringByColumns

Boolean

Determines if filtering by columns should be available to the user

Default: true

useNumericPagination

Boolean

Determines if numeric pagination should be used

Default: false

visibleContent

Object[] private

Content of the current table page

arrangedContent sliced for currently shown page

visibleProcessedColumns

Object[] private

List of the currently visible columns

Default: []

{number} rowspan HTML rowspan attr

String

Events

columnsVisibilityChangedAction

Closure action sent on change of visible columns

The action will receive an array of objects as parameter, where every object looks like this: { propertyName: 'firstName', isHidden: true, mayBeHidden: false }

  • Usage:
{{models-table data=model columns=columns columnsVisibilityChangedAction=(action "someAction")}}
                    

displayDataChangedAction

Closure action sent on user interaction

Action will send one parameter - object with fields:

  • sort - list with sort value propertyName:sortDirection
  • currentPageNumber - currently shown page number
  • pageSize - current page size
  • filterString - global filter value
  • filteredContent - filtered data
  • selectedItems - list with selected row items
  • expandedItems - list with expanded row items
  • columnFilters - hash with fields equal to filtered propertyName and values equal to filter values

Usage:

{{models-table data=model columns=columns displayDataChangedAction=(action "someAction")}}
                    

rowDoubleClickAction

Closure action sent on row double-click

Usage

{{models-table data=model columns=columns rowDoubleClickAction=(action "someAction")}}
                    

rowHoverAction

Closure action sent on row hover

Usage

{{models-table data=model columns=columns rowHoverAction=(action "someAction")}}
                    

rowOutAction

Closure action sent on row out

Usage

{{models-table data=model columns=columns rowOutAction=(action "someAction")}}