Components.ModelsTableServerPaginated Class
Table-component with pagination, sorting and filtering.
It should be used when pagination, filtering and sorting are done on the server-side. Otherwise models-table should be used.
This component extends the base models-table component. For the end user, it can be used (nearly) the same:
{{models-table-server-paginated data=data columns=columns}}
Usage with block context:
{{#models-table-server-paginated data=data columns=columns as |mt|}}
{{mt.global-filter}}
{{mt.columns-dropdown}}
{{mt.table}}
{{mt.footer}}
{{/models-table}}
ModelsTableServerPaginated 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/table - table with a data
- models-table/footer - summary and pagination
Check own docs for each component to get detailed info.
ModelsTableServerPaginated has a lot of options you may configure, but there are two required properties called data and columns. First one contains data-query:
model: function() {
return this.store.query('my-model', {});
}
It will then take this query and extend it with pagination, sorting and filtering information. All other query parameters added in will remain untouched. Everything else works exactly the same - global filters, column filters etc. still use the same properties to control them. A few things to notice:
- When using
filterWithSelectfor a column, you must usepredefinedFilterOptions, because the automatic loading of possible filter values cannot work here. - There is a new optional field
filteredByfor columns, which works much likesortedBy: if set, this field will be used as query parameter, otherwise it will use thepropertyName. - Sorting will not use multipleColumnSorting, it will only sort by one column.
- If you set
sortedBy: falseon a column, sorting will be disabled for this column.
There are a couple of things which can be configured to adapt to your API:
// The property on meta to load the pages count from.
metaPagesCountProperty: 'pagesCount',
// The property on meta to load the total item count from.
metaItemsCountProperty: 'itemsCount',
// The time to wait until new data is actually loaded.
// This can be tweaked to avoid making too many server requests.
debounceDataLoadTime: 500,
// The query parameters to use for server side filtering / querying.
filterQueryParameters: {
globalFilter: 'search',
sort: 'sort',
sortDirection: 'sortDirection',
page: 'page',
pageSize: 'pageSize'
},
This default configuration would try to get the total page count from model.get('meta.pagesCount') and the total item count from model.get('meta.itemsCount'), and would then go on to build the following query:
columns: [
{
propertyName: 'name',
filteredBy: 'model_name'
}
]
// after searching globally for "searchtexthere"
// and in the name column for "filterforname",
// and going to page 2,
// the following query would be built:
?page=2&pageSize=50&search=searchtexthere&sort=name&sortDirection=ASC&model_name=filterforname
Item Index
Methods
- _clearFilters
- _createColumn
- _createColumnHash
- _loadData
- _multiColumnsSorting
- _postProcessColumn
- _sendColumnsVisibilityChangedAction
- _setupColumns
- _setupColumnsComponent
- _setupColumnsOnce
- _setupPageSizeOptions
- _singleColumnSorting
- actions.clearFilters
- actions.clickOnRow
- actions.collapseAllRows
- actions.collapseRow
- actions.doubleClickOnRow
- actions.expandAllRows
- actions.expandRow
- actions.gotoCustomPage
- actions.hideAllColumns
- actions.hoverOnRow
- actions.outRow
- actions.restoreDefaultVisibility
- actions.sendAction
- actions.showAllColumns
- actions.sort
- actions.toggleAllSelection
- actions.toggleColumnSet
- actions.toggleGroupedRows
- actions.toggleGroupedRowsExpands
- actions.toggleGroupedRowsSelection
- actions.toggleHidden
- checkColumnTitles
- collapseRowOnNavigate
- doQuery
- focus
- forceToFirstPage
- getCustomFilterTitle
- multipleColumnsSortingWrapper
- rebuildTable
- setQueryFilter
- setup
- singleColumnSortingWrapper
- updateColumns
- updateHeaderCellsColspan
- updateHeaderCellsColspanOnce
- userInteractionObserver
- userInteractionObserverOnce
- visibleContentObserver
- visibleContentObserverOnce
Properties
- allColumnsAreHidden
- anyFilterUsed
- arrangedContent
- arrangedContentLength
- checkTextTranslations
- collapsedGroupValues
- columnComponents
- columnDropdownOptions
- columnFieldsToCheckUpdate
- columns
- columnsAreUpdateable
- columnSets
- currentGroupingPropertyName
- currentPageNumber
- data
- dataGroupOptions
- dataGroupProperties
- debounceDataLoadTime
- displayGroupedValueAs
- doFilteringByHiddenColumns
- expandedItems
- expandedRowComponent
- filteredContent
- filteringIgnoreCase
- filterQueryParameters
- filterString
- firstIndex
- focusGlobalFilter
- globalFilterUsed
- groupedArrangedContent
- groupedHeaders
- groupedVisibleContent
- groupedVisibleContentValuesOrder
- groupHeaderCellComponent
- groupingRowComponent
- groupSummaryRowComponent
- isError
- isLastPage
- isLoading
- lastIndex
- metaItemsCountProperty
- metaPagesCountProperty
- multipleColumnsSorting
- multipleExpand
- multipleSelect
- noHeaderFilteringAndSorting
- observedProperties
- pagesCount
- pageSize
- pageSizeOptions
- pageSizeValues
- processedColumns
- publicAPI
- registerAPI
- selectedItems
- selectRowOnClick
- showColumnsDropdown
- showComponentFooter
- showGlobalFilter
- showPageSize
- sortByGroupedFieldDirection
- sortFunctions
- sortMap
- sortProperties
- themeInstance
- useDataGrouping
- useFilteringByColumns
- useNumericPagination
- visibleContent
- visibleProcessedColumns
- {number} rowspan HTML rowspan attr
Methods
_clearFilters
()
Undefined
private
Clear all filters.
Returns:
Undefined:
_createColumn
(
Object
-
options
Create a column.
This can be overwritten if you need to use your own column object.
Override must something like:
`js
_createColumn(options) {
const hash = this._createColumnHash(options);
const column = ModelsTableColumn.extend(hash).create(options);
return this._postProcessColumn(column);
}
`
Parameters:
-
optionsObject
Returns:
_createColumnHash
(
Object
private
-
options
Generate hash for column-
extend
Parameters:
-
optionsObject
Returns:
_loadData
()
Promise
private
This function actually loads the data from the server. It takes the store, modelName and query from the passed in data-object and adds page, sorting & filtering to it.
Returns:
_multiColumnsSorting
(
Undefined
private
-
column -
sortedBy -
newSorting
Set
sortProperties when multi-columns sorting is used
Returns:
Undefined:
_postProcessColumn
(
Object
private
-
column
Set values for some column-properties after its creation
Parameters:
-
columnObject
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
(
Undefined
private
-
c -
column
Create new properties for
columns for components
Parameters:
-
cModelsTableColumn -
columnObjectraw 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
(
Undefined
private
-
column -
sortedBy -
newSorting
Set
sortProperties when single-column sorting is used
Returns:
Undefined:
actions.clearFilters
()
Undefined
Clear all column filters and global filter
May trigger sending {{#crossLink 'Components.ModelsTable/displayDataChangedAction:property'}}displayDataChangedAction{{/crossLink}}
Returns:
Undefined:
actions.clickOnRow
(
Undefined
-
index -
dataItem
Handler for row-click
Toggle
selected-state for row. Select only one or multiple rows depends on {{#crossLink 'Components.ModelsTable/multipleSelect:property'}}multipleSelect{{/crossLink}} value. May trigger sending {{#crossLink 'Components.ModelsTable/displayDataChangedAction:property'}}displayDataChangedAction{{/crossLink}}
Returns:
Undefined:
actions.collapseAllRows
()
Undefined
Collapse all rows in the current page
May trigger sending {{#crossLink 'Components.ModelsTable/displayDataChangedAction:property'}}displayDataChangedAction{{/crossLink}}
Returns:
Undefined:
actions.collapseRow
(
Undefined
-
index -
dataItem
Collapse selected row
May trigger sending {{#crossLink 'Components.ModelsTable/displayDataChangedAction:property'}}displayDataChangedAction{{/crossLink}}
Returns:
Undefined:
actions.doubleClickOnRow
(
Undefined
-
index -
dataItem
Handler for double-click on row
May trigger sending {{#crossLink 'Components.ModelsTable/rowDoubleClickAction:property'}}rowDoubleClickAction{{/crossLink}}
Returns:
Undefined:
actions.expandAllRows
()
Undefined
Expand all rows in the current page
It works only if {{#crossLink 'Components.ModelsTable/multipleExpand:property'}}multipleExpand{{/crossLink}} is set to
true. May trigger sending {{#crossLink 'Components.ModelsTable/displayDataChangedAction:property'}}displayDataChangedAction{{/crossLink}}
Returns:
Undefined:
actions.expandRow
(
Undefined
-
index -
dataItem
Expand selected row
It will cause expandedRowComponent to be used for it. It will collapse already expanded row if {{#crossLink 'Components.ModelsTable/multipleExpand:property'}}multipleExpand{{/crossLink}} 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 {{#crossLink 'Components.ModelsTable/displayDataChangedAction:property'}}displayDataChangedAction{{/crossLink}}
Returns:
Undefined:
actions.gotoCustomPage
(
Undefined
-
pageNumber
Pagination click-handler
It moves user to the selected page. Check [models-table/pagination-numeric](Components.ModelsTablePaginationNumeric.html) and [models-table/pagination-simple](Components.ModelsTablePaginationSimple.html) for usage examples. May trigger sending {{#crossLink 'Components.ModelsTable/displayDataChangedAction:property'}}displayDataChangedAction{{/crossLink}}
Parameters:
-
pageNumberNumber
Returns:
Undefined:
actions.hideAllColumns
()
Undefined
Hide all columns that may be hidden (see {{#crossLink 'Utils.ModelsTableColumn/mayBeHidden:property'}}mayBeHidden{{/crossLink}})
May trigger sending {{#crossLink 'Components.ModelsTable/columnsVisibilityChangedAction:property'}}columnsVisibilityChangedAction{{/crossLink}}
Returns:
Undefined:
actions.hoverOnRow
(
Undefined
-
index -
dataItem
Handler for row-hover
May trigger sending {{#crossLink 'Components.ModelsTable/rowHoverAction:property'}}rowHoverAction{{/crossLink}}
Returns:
Undefined:
actions.outRow
(
Undefined
-
index -
dataItem
Handler for row-hover
May trigger sending {{#crossLink 'Components.ModelsTable/rowHoverAction:property'}}rowOutAction{{/crossLink}}
Returns:
Undefined:
actions.restoreDefaultVisibility
()
Undefined
Restore columns visibility values according to their default visibility settings (see {{#crossLink 'Utils.ModelsTableColumn/defaultVisible:property'}}defaultVisible{{/crossLink}})
May trigger sending {{#crossLink 'Components.ModelsTable/columnsVisibilityChangedAction:property'}}columnsVisibilityChangedAction{{/crossLink}}
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 {{#crossLink 'Components.ModelsTable/columnsVisibilityChangedAction:property'}}columnsVisibilityChangedAction{{/crossLink}}
Returns:
Undefined:
actions.sort
(
Undefined
-
column
Parameters:
-
columnModelsTableColumn
Returns:
Undefined:
actions.toggleAllSelection
()
Undefined
Select/deselect all rows
May trigger sending {{#crossLink 'Components.ModelsTable/displayDataChangedAction:property'}}displayDataChangedAction{{/crossLink}}
Returns:
Undefined:
actions.toggleColumnSet
()
Undefined
Toggle visibility for every column in the selected columns set
It ignore columns that can't be hidden (see {{#crossLink 'Utils.ModelsTableColumn/mayBeHidden:property'}}mayBeHidden{{/crossLink}}). May trigger sending {{#crossLink 'Components.ModelsTable/columnsVisibilityChangedAction:property'}}columnsVisibilityChangedAction{{/crossLink}}
Returns:
Undefined:
Preselect table rows if
selectedItems is provided
multipleSelected may be set true if selectedItems has more than 1 item
Returns:
Undefined:
actions.toggleGroupedRows
(
Undefined
-
groupedValue
Collapse or expand rows group
Parameters:
-
groupedValue
Returns:
Undefined:
actions.toggleGroupedRowsExpands
(
Undefined
-
groupedValue
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
(
Undefined
-
groupedValue
Select/deselect rows from the rows group
**IMPORTANT**
multipleSelect should be set to true otherwise this action won't do anything
May trigger sending {{#crossLink 'Components.ModelsTable/displayDataChangedAction:property'}}displayDataChangedAction{{/crossLink}}
Parameters:
-
groupedValue
Returns:
Undefined:
actions.toggleHidden
(
Undefined
-
column
Toggle visibility for provided column
It doesn't do nothing if column can't be hidden (see {{#crossLink 'Utils.ModelsTableColumn/mayBeHidden:property'}}mayBeHidden{{/crossLink}}). May trigger sending {{#crossLink 'Components.ModelsTable/columnsVisibilityChangedAction:property'}}columnsVisibilityChangedAction{{/crossLink}}
Parameters:
-
columnModelsTableColumn
Returns:
Undefined:
checkColumnTitles
()
Undefined
private
Returns:
Undefined:
doQuery
(
Promise
-
store -
modelName -
query
Do query-request to load new data
You may override this method to add some extra behavior or even additional requests
Returns:
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:
getCustomFilterTitle
(
String
-
column
Customize filter title
Parameters:
-
columnObject
Returns:
String:
title
multipleColumnsSortingWrapper
(
Object
-
query -
sortProperties
Wrapper for sorting query when multi columns sorting is used
Returns:
Object:
query parameters
rebuildTable
()
Undefined
Rebuild the whole table.
This can be called to force a complete re-render of the table.
Returns:
Undefined:
setQueryFilter
(
Undefined
-
query -
column -
filterTitle -
filter
Actually set the filter on a query. This can be overwritten for special case handling. Note that this will mutate the given query object!
Parameters:
Returns:
Undefined:
setup
()
Undefined
Component init
Set visibility and filtering attributes for each column
Returns:
Undefined:
singleColumnSortingWrapper
(
Object
-
query -
sortBy -
sortDirection
Wrapper for sorting query when single column sorting is used
Returns:
Object:
query parameters
updateColumns
()
Undefined
Recalculate processedColumns when the columns attr changes
Returns:
Undefined:
updateHeaderCellsColspan
()
Undefined
private
Update colspans for table header cells
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
arrangedContent
Object[]
private
For server side filtering, arrangedContent is same as the filtered content
arrangedContentLength
Number
private
The total content length is get from the meta information. Set metaItemsCountProperty to change from which meta property this is loaded.
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: []
columnComponents
Object
Hash of components to be used for columns.
See [ModelsTableColumn](Utils.ModelsTableColumn.html), 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](Utils.ModelsTableColumn.html) 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 {{#crossLink 'Components.ModelsTable/useDataGrouping:property'}}useDataGrouping{{/crossLink}} is set to
true
Default: null
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 {{#crossLink 'Components.ModelsTable/currentGroupingPropertyName:property'}}currentGroupingPropertyName{{/crossLink}}-value
Default: []
debounceDataLoadTime
Number
The time to wait until new data is actually loaded. This can be tweaked to avoid making too many server requests.
Default: 500
displayGroupedValueAs
String
Determines how grouped value will be displayed - as a row or column
Allowed values are
row and column
Default: 'row'
doFilteringByHiddenColumns
Unknown
Can't be used within models-table-server-paginated. Back-end determines how to filter data
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:
`hbs
{{models-table data=model columns=columns expandedRowComponent=(component "expanded-row")}}
`
Default: null
filteredContent
Object[]
private
This is set during didReceiveAttr and whenever the page/filters change.
Default: []
filteringIgnoreCase
Unknown
Can't be used within models-table-server-paginated. Back-end determines how to filter data
focusGlobalFilter
Boolean
Determines if focus should be on the 'Global filter'-field on component render
Default: false
groupedArrangedContent
Object[]
private
{{#crossLink 'Components.ModelsTable/filteredContent:property'}}filteredContent{{/crossLink}} grouped by {{#crossLink 'Components.ModelsTable/currentGroupingPropertyName:property'}}currentGroupingPropertyName{{/crossLink}} 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
{{#crossLink 'Components.ModelsTable/groupedVisibleContent:property'}}groupedVisibleContent{{/crossLink}} sliced for currently shown page
Default: {}
groupedVisibleContentValuesOrder
Array
private
List of grouped property values in order to show groups in the table
groupHeaderCellComponent
Object
Component for header cell for column with grouping value
This component won't be used if {{#crossLink 'Component.ModelsTable/useDataGrouping:property'}}useDataGrouping{{/crossLink}} is not
true and
{{#crossLink 'Component.ModelsTable/displayGroupedValueAs:property'}}displayGroupedValueAs{{/crossLink}} is not columns
Usage:
`hbs
{{models-table 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
Default: null
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:
`hbs
{{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:
`hbs
{{models-table data=model columns=columns groupSummaryRowComponent=(component "group-summary-row")}}
`
Default: null
isError
Boolean
private
True if last data query promise has been rejected. Can be used in the template to e.g. indicate stale data or to e.g. show error state.
Default: false
isLoading
Boolean
private
True if data is currently being loaded from the server. Can be used in the template to e.g. display a loading spinner.
Default: false
metaItemsCountProperty
String
The property on meta to load the total item count from.
Default: 'itemsCount'
metaPagesCountProperty
String
The property on meta to load the pages count from.
Default: 'pagesCount'
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
The pages count is get from the meta information. Set metaPagesCountProperty to change from which meta property this is loaded.
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 {{#crossLink 'Components.ModelsTable/columns:property'}}columns{{/crossLink}} 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 {{#crossLink 'Components.ModelsTable/selectRowOnClick:property'}}selectRowOnClick{{/crossLink}} 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
sortByGroupedFieldDirection
String
private
Sort direction for grouped property values
Default: 'asc'
sortMap
Object
Order of sorting for each columns. Unsorted column firstly become sorted ASC, then DESC, then sorting is dropped again
Default: {{ none: 'asc', asc: 'desc', desc: 'none' }}
sortProperties
String[]
private
List of properties to sort table rows
Each value is like 'propertyName:sortDirection'
Default: []
themeInstance
Themes.Bootstrap3
themeInstance is an instance of [DefaultTheme](Themes.Default.html) or it's children.
By default models-table uses [BootstrapTheme](Themes.Bootstrap.html) 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 {{#crossLink 'Components.ModelsTable/displayGroupedValueAs:property'}}displayGroupedValueAs{{/crossLink}})
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[]
private
For server side filtering, visibleContent is same as the filtered content
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:
`hbs
{{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:
`hbs
{{models-table data=model columns=columns displayDataChangedAction=(action "someAction")}}
`
rowDoubleClickAction
Closure action sent on row double-click
Usage
`hbs
{{models-table data=model columns=columns rowDoubleClickAction=(action "someAction")}}
`
rowHoverAction
Closure action sent on row hover
Usage
`hbs
{{models-table data=model columns=columns rowHoverAction=(action "someAction")}}
`
rowOutAction
Closure action sent on row out
Usage
`hbs
{{models-table data=model columns=columns rowOutAction=(action "someAction")}}
`