Components.ModelsTable Class
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:
<ModelsTable @data={{model}} @columns={{columns}} />
Usage with block context:
<ModelsTable @data={{data}} @columns={{columns}} as |MT|>
<MT.GlobalFilter />
<MT.DataGroupBySelect />
<MT.ColumnsDropdown />
<MT.Table />
<MT.Footer />
</ModelsTable>
Usage with block content 2:
<ModelsTable @data={{data}} @columns={{columns}} as |MT|>
<MT.GlobalFilter />
<MT.DataGroupBySelect />
<MT.ColumnsDropdown />
<MT.Table />
<MT.PaginationNumeric />
<MT.PaginationSimple />
<MT.Summary />
<MT.PageSizeSelect />
</ModelsTable>
ModelsTable yields references to the following contextual components:
- models-table/global-filter - global filter used for table data
- models-table/columns-dropdown - dropdown with list of options to toggle columns and column-sets visibility
- models-table/data-group-by-select - dropdown to select property for table-rows grouping
- models-table/table - table with a data
- models-table/footer - summary and pagination
- models-table/summary - component with summary info about table data. It also contains button to clear all filters applied to the table
- models-table/size-select - component with a page sizes dropdown. It allows to select number if records shown on page
- models-table/pagination-numeric - component with a table navigation. It allows to move to the page by its number
- models-table/pagination-simple - component with a table navigation. It allows to move to the first, last, prev and next pages (this four buttons are shown always)
Check own docs for each component to get detailed info.
References to the following properties are yielded:
- processedColumns - list of columns in the table
- visibleProcessedColumns - list of currently visible columns in the table
- visibleContent - list of records shown in the current table's page
- groupedHeaders - extra headers for table's header. DOESN'T work properly with visibility toggle for columns
- groupedVisibleContent - list of records shown in the current table's page when rows grouping is enabled
- groupedVisibleContentValuesOrder - list of values for property used to group rows
- groupedArrangedContent - list of all filtered and sorted records in the table used when rows grouping is enabled
- displayGroupedValueAs - determines how value for grouping is shown. Can "row" and "column"
- sortByGroupedFieldDirection - sorting order for property used to group rows
- useDataGrouping - flag to turn on/off rows grouping
- globalFilterUsed -
trueif global filter is used - globalFilter - value of global filter
- anyFilterUsed -
truewhen any filter (global or for column) is used.falsewhen no filters are used - useFilteringByColumns - determines if columns filtering should be used. By default if it's
falseheader's row with filter input/select fields is not shown - collapsedGroupValues - list of values for property used to group rows. Row group with this value are collapsed
- pagesCount - number of pages in the table
- recordsCount - number of records in the table
- firstIndex - first row's index in the current page
- lastIndex - last row's index in the current page
- currentPageNumber - current page
- currentPageNumberOptions - list of options for current page
- pageSizeOptions - list of options for page size select
- pageSize - number of rows shown in the table's page
- columnDropdownOptions - list of options for columns dropdown
- allColumnsAreHidden -
trueif all columns are hidden.falseif at least one column is visible - dataGroupOptions - list of property names used for rows grouping
- currentGroupingPropertyName - property name used now for grouping rows * themeInstance - theme instance used in the table
- expandedItems - list of expanded rows
- selectedItems - list of selected rows
- isLoading -
truewhen data for table is loading (used only formodels-table-server-paginated) - isError -
truewhen request for data loading failed (used only formodels-table-server-paginated) - publicAPI - public API that allows for programmatic interaction with the component
References to the following actions are yielded:
- showAllColumns - show all columns in the table (by default used in the columns dropdown)
- hideAllColumns - hide all column in the table (by default used in the columns dropdown)
- restoreDefaultVisibility - show columns visible initially (by default used in the columns dropdown)
- toggleColumnSetVisibility - toggle visibility for columns in the custom columns set (by default used in the columns dropdown)
- toggleColumnVisibility - toggle visibility for column (by default used in the columns dropdown)
- expandRow - expand or collapse row to show details
- collapseRow - select or deselect row
- expandAllRows - expand all rows
- collapseAllRows - collapse all rows
- toggleAllSelection - select or deselect all rows
- goToPage - change table's page (by default used in the pagination)
- clearFilters - clear all filters (by default used in the summary)
- sort - sort provided column
- toggleGroupedRowsSelection - select or deselect all rows in the group (for cases when rows grouping is used)
- toggleGroupedRowsExpands - expand or collapse all rows in the group (for cases when rows grouping is used)
- toggleGroupedRows - toggle rows group (for cases when rows grouping is used)
- clickOnRow
- doubleClickOnRow
- hoverOnRow
- outRow
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
- _checkColumnTitles
- _clearFilters
- _createColumn
- _createColumnInstance
- _multiColumnsSorting
- _postProcessColumn
- _sendColumnsVisibilityChangedAction
- _setupColumns
- _setupColumnsComponent
- _setupColumnsOnce
- _setupPageSizeOptions
- _setupSelectedRows
- _singleColumnSorting
- collapseRowOnNavigate
- filteredContentObserver
- filteredContentObserverOnce
- focus
- forceToFirstPage
- rebuildTable
- refilter
- setup
- updateColumns
- updateHeaderCellsColspan
- updateHeaderCellsColspanOnce
- updateState
- userInteractionObserver
- userInteractionObserverOnce
- visibleContentObserver
- visibleContentObserverOnce
Properties
- allColumnsAreHidden
- anyFilterUsed
- arrangedContent
- arrangedContentLength
- checkTextTranslations
- collapsedGroupValues
- collapseNumPaginationForPagesCount
- columnComponents
- columnDropdownOptions
- columnFieldsToCheckUpdate
- columns
- columnsAreUpdateable
- columnSets
- currentGroupingPropertyName
- currentPageNumber
- currentPageNumberOptions
- data
- dataGroupOptions
- dataGroupProperties
- displayGroupedValueAs
- doFilteringByHiddenColumns
- expandedItems
- expandedRowComponent
- filteredContent
- filteringIgnoreCase
- filterString
- firstIndex
- focusGlobalFilter
- forceToFirstPageProps
- globalFilterUsed
- groupedArrangedContent
- groupedHeaders
- groupedVisibleContent
- groupedVisibleContentValuesOrder
- groupHeaderCellComponent
- groupingRowComponent
- groupSummaryRowComponent
- isLastPage
- isolated
- lastIndex
- multipleColumnsSorting
- multipleExpand
- multipleSelect
- noHeaderFilteringAndSorting
- pagesCount
- pageSize
- pageSizeOptions
- pageSizeValues
- processedColumns
- publicAPI
- registerAPI
- selectedItems
- selectRowOnClick
- showColumnsDropdown
- showComponentFooter
- showCurrentPageNumberSelect
- showGlobalFilter
- showPageSize
- sortByGroupedFieldDirection
- sortFunctions
- sortMap
- sortProperties
- ThemeInstance
- useDataGrouping
- useFilteringByColumns
- useNumericPagination
- visibleContent
- visibleProcessedColumns
Events
- clearFilters
- clickOnRow
- collapseAllRows
- collapseRow
- columnsVisibilityChangedAction
- displayDataChangedAction
- doubleClickOnRow
- expandAllRows
- expandRow
- gotoCustomPage
- hideAllColumns
- hoverOnRow
- outRow
- restoreDefaultVisibility
- rowDoubleClickAction
- rowHoverAction
- rowOutAction
- showAllColumns
- sort
- toggleAllSelection
- toggleColumnSet
- toggleGroupedRows
- toggleGroupedRowsExpands
- toggleGroupedRowsSelection
- toggleHidden
Methods
_checkColumnTitles
()
protected
_clearFilters
()
protected
Clear all filters.
_createColumn
-
options
Create a column. This can be overwritten if you need to use your own column object.
Override must something like:
Parameters:
-
optionsUtils.ModelsTableColumn
Returns:
Example:
_createColumn(options) {
const column = this._createColumnInstance(options);
setProperties(column, options);
return this._postProcessColumn(column);
}
_createColumnInstance
-
options
Generate hash for column-extend
Parameters:
-
optionsUtils.ModelsTableColumn
_multiColumnsSorting
()
protected
Set sortProperties when multi-columns sorting is used
_postProcessColumn
-
column
Set values for some column-properties after its creation
Parameters:
-
columnUtils.ModelsTableColumn
Returns:
Utils.ModelsTableColumn
_sendColumnsVisibilityChangedAction
()
protected
Send columnsVisibilityChangedAction-action when user changes which columns are visible.
Action is sent if columnsVisibilityChangedAction is a closure action
_setupColumns
()
private
Create new properties for columns
_setupColumnsComponent
()
protected
Create new properties for columns for components
_setupColumnsOnce
()
protected
Wrapper for _setupColumns to call it only once when observer is fired
_setupPageSizeOptions
()
protected
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
_setupSelectedRows
()
protected
Preselect table rows if selectedItems is provided
multipleSelected may be set true if selectedItems has more than 1 item
_singleColumnSorting
()
protected
Set sortProperties when single-column sorting is used
filteredContentObserver
()
protected
filteredContentObserverOnce
()
protected
focus
()
protected
Focus on 'Global filter' on component render
forceToFirstPage
()
protected
Handler for global filter and filter by each column
rebuildTable
()
protected
Rebuild the whole table. This can be called to force a complete re-render of the table.
refilter
()
protected
setup
()
protected
Component init
Set visibility and filtering attributes for each column
updateColumns
()
protected
Recalculate processedColumns when the columns attr changes
updateHeaderCellsColspan
()
protected
Update colspans for table header cells
updateHeaderCellsColspanOnce
()
protected
userInteractionObserver
()
protected
Send displayDataChangedAction-action when user does sort of filter.
Action is sent if displayDataChangedAction is a closure-action
userInteractionObserverOnce
()
protected
visibleContentObserver
()
protected
Show first page if for some reasons there is no content for current page, but table data exists
visibleContentObserverOnce
()
protected
Properties
allColumnsAreHidden
Boolean
protected
True if all processedColumns are hidden by isHidden
Default: false
anyFilterUsed
Boolean
protected
true if global filter or filter by any column is used
Default: false
checkTextTranslations
Boolean
Value for development purposes. Used to check translation issues like:
- Auto generated titles for columns
Default: false
collapsedGroupValues
Array[]
List of grouped property values where the groups are collapsed
Default: []
collapseNumPaginationForPagesCount
Number
Used in numeric pagination. If pages count is less than collapseNumPaginationForPagesCount, all pages will be shown.
E.g. for collapseNumPaginationForPagesCount = 4 and pagesCount = 4 pagination will be 1 2 3 4, however for
collapseNumPaginationForPagesCount = 1 and pagesCount = 4 pagination will be 1 2 ... 4
Default: 1
columnComponents
Object
Hash of components to be used for columns.
See ModelsTableColumn, property component
Default: {}
columnDropdownOptions
Internal.ColumnDropdownOptions
protected
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
Utils.ModelsTableColumn[]
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
Internal.ColumnSet[]
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 ofpropertyNamesto show, or a function. If it is a function, the function will be called with theprocessedColumnsas attribute.hideOtherColumns(boolean) - If this is true (default), all columns not specified inshowColumnswill 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 ofhideOtherColumns=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
currentPageNumberOptions
SelectOption
protected
List of options for pageNumber-selectBox
Default: []
data
Object[]
All table records
It's a first of the two attributes you must set to the component
Default: []
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: []
expandedRowComponent
Object
Component used in the 'expanded' row
It will receive several options:
record- current row valueprocessedColumns- current column (one of the processedColumns)index- current row indexselectedItems- bound from selectedItemsvisibleProcessedColumns- bound from visibleProcessedColumnsclickOnRow- closure action clickOnRowthemeInstance- bound from themeInstance
Default: null
Example:
<ModelsTable
@data={{model}}
@columns={{columns}}
@expandedRowComponent={{component "expanded-row"}}
/>
filteredContent
Object[]
protected
data filtered with a global filter and columns filters
Filtering by columns is ignored if useFilteringByColumns is set to false
Default: []
filteringIgnoreCase
Boolean
Determines if filtering (global and by column) should ignore case
Default: false
focusGlobalFilter
Boolean
Determines if focus should be on the 'Global filter'-field on component render
Default: false
forceToFirstPageProps
String[]
protected
Default: ['processedColumns.@each.filterString', 'filterString', 'pageSize']
groupedArrangedContent
Object[]
protected
filteredContent grouped by currentGroupingPropertyName sorted by needed properties
Default: []
groupedHeaders
Internal.GroupedHeader[]
List of the additional headers. Used to group columns.
Each object may have such fields:
title(string) - Header for grouped columncolspan(number) - HTML colspan attrrowspan(number) - HTML rowspan attr
Default: []
groupedVisibleContent
Object[]
protected
Content of the current table page when rows grouping is used
groupedVisibleContent sliced for currently shown page
Default: []
groupedVisibleContentValuesOrder
Object[]
protected
List of grouped property values in order to show groups in the table
Default: []
groupHeaderCellComponent
Object
Component for header cell for column with grouping value
This component won't be used if useDataGrouping is not true and displayGroupedValueAs is not columns
Default: null
Example:
<ModelsTable
@data={{model}}
@columns={{columns}}
@groupHeaderCellComponent={{component "group-header-cell"}}
/>
Component will receive such options:
currentGroupingPropertyName- property name used to group rows in the current moment
groupingRowComponent
Object
Component used in the row with a grouped value
This component won't be used if useDataGrouping is not true
Component will receive several options:
groupedValue- grouped property valuecurrentGroupingPropertyName- bound from currentGroupingPropertyNamedisplayGroupedValueAs- bound from displayGroupedValueAstoggleGroupedRows- closure action toggleGroupedRowstoggleGroupedRowsExpands- closure action toggleGroupedRowsExpandstoggleGroupedRowsSelection- closure action toggleGroupedRowsSelectionvisibleProcessedColumns- bound from visibleProcessedColumnsthemeInstance- bound from themeInstancegroupedItems- list of all rows group itemsvisibleGroupedItems- list of rows group items shown on the current table pageselectedGroupedItems- list of selected rows group itemsexpandedGroupedItems- list of expanded rows group items
Default: null
Example:
<ModelsTable
@data={{model}}
@columns={{columns}}
@groupingRowComponent={{component "grouping-row"}}
/>
groupSummaryRowComponent
Object
This component won't be used if useDataGrouping is not true
Component will receive several options:
visibleProcessedColumns- bound from visibleProcessedColumnsthemeInstance- bound from themeInstancegroupedItems- list of all rows group itemsvisibleGroupedItems- list of rows group items shown on the current table pageselectedGroupedItems- list of selected rows group itemsexpandedGroupedItems- list of expanded rows group items
Default: null
Example:
<ModelsTable
@data={{model}}
@columns={{columns}}
@groupSummaryRowComponent={{component "group-summary-row"}}
/>
isolated
Boolean
Flag to determine if component should bubble inner click action handler
It's useful when models-table is used inside the row-expand
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
protected
true if all processedColumns don't use filtering and sorting
Default: false
pageSizeOptions
SelectOption
protected
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
Utils.ModelsTableColumn[]
protected
List of columns shown in the table. It's created from the columns provided to the component
Default: []
publicAPI
Unknown
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
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: []
selectRowOnClick
Boolean
Allow or disallow to select rows on click.
If false - no row can be selected
Default: true
showCurrentPageNumberSelect
Boolean
Determines if dropdown for current page number should be shown near the pagination block
Default: true
sortByGroupedFieldDirection
String
protected
Sort direction for grouped property values
Default: 'asc'
sortMap
Internal.SortMap
Order of sorting for each columns. Unsorted column firstly become sorted ASC, then DESC, then sorting is dropped again
sortProperties
Unknown
protected
List of properties to sort table rows
Each value is like 'propertyName:sortDirection'
ThemeInstance
Themes.Bootstrap3Theme
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
visibleContent
Object[]
protected
Content of the current table page
arrangedContent sliced for currently shown page
Default: []
Events
clearFilters
protected
Clear all column filters and global filter
May trigger sending displayDataChangedAction
clickOnRow
protected
Handler for row-click
Toggle selected-state for row. Select only one or multiple rows depends on multipleSelect value. May trigger sending displayDataChangedAction
collapseAllRows
protected
Collapse all rows in the current page
May trigger sending displayDataChangedAction
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 }
Example:
<ModelsTable
@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 valuepropertyName:sortDirectioncurrentPageNumber- currently shown page numberpageSize- current page sizefilterString- global filter valuefilteredContent- filtered dataselectedItems- list with selected row itemsexpandedItems- list with expanded row itemscolumnFilters- hash with fields equal to filtered propertyName and values equal to filter values
Example:
<ModelsTable
@data={{model}}
@columns={{columns}}
@displayDataChangedAction={{action "someAction"}}
/>
expandAllRows
protected
Expand all rows in the current page
It works only if multipleExpand is set to true. May trigger sending displayDataChangedAction
expandRow
protected
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 displayDataChangedAction
gotoCustomPage
protected
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 displayDataChangedAction
Event Payload:
-
pageNumberNumber
hideAllColumns
protected
Hide all columns that may be hidden (see mayBeHidden)
May trigger sending columnsVisibilityChangedAction
restoreDefaultVisibility
protected
Restore columns visibility values according to their default visibility settings (see defaultVisible)
May trigger sending columnsVisibilityChangedAction
rowDoubleClickAction
Closure action sent on row double-click
Example:
<ModelsTable
@data={{model}}
@columns={{columns}}
@rowDoubleClickAction={{action "someAction"}}
/>
rowHoverAction
Closure action sent on row hover
Example:
<ModelsTable
@data={{model}}
@columns={{columns}}
@rowHoverAction={{action "someAction"}}
/>
rowOutAction
Closure action sent on row out
Example:
<ModelsTable
@data={{model}}
@columns={{columns}}
@rowOutAction={{action "someAction"}}
/>
showAllColumns
protected
Show all columns
Set each column isHidden value to false. May trigger sending columnsVisibilityChangedAction
sort
protected
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 displayDataChangedAction. Table will be dropped to the first page if sorting is done
For multiColumns-sorting calling sort will change sort-order. E.g.:
Event Payload:
-
columnUtils.ModelsTableColumn
Example:
sortProperties = ['a:asc', 'b:asc', 'c:desc'];
sort({propertyName: 'b'}); // sortProperties now is ['a:asc', 'c:desc', 'b:desc']
toggleColumnSet
protected
Toggle visibility for every column in the selected columns set
It ignore columns that can't be hidden (see mayBeHidden). May trigger sending columnsVisibilityChangedAction
Event Payload:
-
columnSetToToggleInternal.ColumnSet
toggleGroupedRows
protected
Collapse or expand rows group
toggleGroupedRowsExpands
protected
Expand or collapse all rows in the rows group
IMPORTANT multipleExpand should be set to true otherwise this action won't do anything
toggleGroupedRowsSelection
protected
Select/deselect rows from the rows group
IMPORTANT multipleSelect should be set to true otherwise this action won't do anything
May trigger sending displayDataChangedAction
toggleHidden
protected
Toggle visibility for provided column
It doesn't do nothing if column can't be hidden (see mayBeHidden). May trigger sending columnsVisibilityChangedAction
Event Payload:
-
columnUtils.ModelsTableColumn