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:
<ModelsTableServerPaginated @data={{data}} @columns={{columns}} />
Usage with block context:
<ModelsTableServerPaginated @data={{data}} @columns={{columns}} as |MT|>
<MT.GlobalFilter />
<MT.DataGroupBySelect />
<MT.ColumnsDropdown />
<MT.Table />
<MT.Footer />
</ModelsTable>
ModelsTableServerPaginated yields same components, actions and properties as a ModelsTable does. Check its docs for more info.
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() {
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
filterWithSelect
for a column, you must usepredefinedFilterOptions
, because the automatic loading of possible filter values cannot work here. - There is a new optional field
filteredBy
for 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: false
on 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
- _checkColumnTitles
- _clearFilters
- _createColumn
- _createColumnInstance
- _loadData
- _multiColumnsSorting
- _postProcessColumn
- _sendColumnsVisibilityChangedAction
- _setupColumns
- _setupColumnsComponent
- _setupColumnsOnce
- _setupPageSizeOptions
- _setupSelectedRows
- _singleColumnSorting
- collapseRowOnNavigate
- doQuery
- filteredContentObserver
- filteredContentObserverOnce
- focus
- forceToFirstPage
- getCustomFilterTitle
- multipleColumnsSortingWrapper
- rebuildTable
- refilter
- setQueryFilter
- setup
- singleColumnSortingWrapper
- 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
- debounceDataLoadTime
- displayGroupedValueAs
- doFilteringByHiddenColumns
- expandedItems
- expandedRowComponent
- filteredContent
- filteringIgnoreCase
- filterQueryParameters
- filterString
- firstIndex
- focusGlobalFilter
- forceToFirstPageProps
- globalFilterUsed
- groupedArrangedContent
- groupedHeaders
- groupedVisibleContent
- groupedVisibleContentValuesOrder
- groupHeaderCellComponent
- groupingRowComponent
- groupSummaryRowComponent
- isError
- isLastPage
- isLoading
- isolated
- lastIndex
- metaItemsCountProperty
- metaPagesCountProperty
- multipleColumnsSorting
- multipleExpand
- multipleSelect
- noHeaderFilteringAndSorting
- observedProperties
- 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
_createColumn
-
options
Parameters:
-
options
Utils.ModelsTableColumn
Returns:
Example:
_createColumn(options) {
const column = this._createColumnInstance(options);
setProperties(column, options);
return this._postProcessColumn(column);
}
_createColumnInstance
-
options
extend
Parameters:
-
options
Utils.ModelsTableColumn
_loadData
()
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:
Promise
_multiColumnsSorting
()
protected
sortProperties
when multi-columns sorting is used
_postProcessColumn
-
column
Parameters:
-
column
Utils.ModelsTableColumn
Returns:
_sendColumnsVisibilityChangedAction
()
protected
columnsVisibilityChangedAction
-action when user changes which columns are visible.
Action is sent if columnsVisibilityChangedAction
is a closure action
_setupColumns
()
private
columns
_setupColumnsComponent
()
protected
columns
for components
_setupColumnsOnce
()
protected
_setupPageSizeOptions
()
protected
pageSizeValues
equal to an array with numbers and not objects
pageSizeValues
is live as is, pageSizeOptions
is used in the templates
_setupSelectedRows
()
protected
selectedItems
is provided
multipleSelected
may be set true
if selectedItems
has more than 1 item
_singleColumnSorting
()
protected
sortProperties
when single-column sorting is used
doQuery
-
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:
Promise
filteredContentObserver
()
protected
filteredContentObserverOnce
()
protected
focus
()
protected
forceToFirstPage
()
protected
getCustomFilterTitle
-
column
Customize filter title
Parameters:
-
column
Object
Returns:
string title
multipleColumnsSortingWrapper
-
query
-
sortProperties
Wrapper for sorting query when multi columns sorting is used
Returns:
object query parameters
rebuildTable
()
protected
refilter
()
protected
setQueryFilter
-
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!
setup
()
protected
singleColumnSortingWrapper
-
query
-
sortBy
-
sortDirection
Wrapper for sorting query when single column sorting is used
Returns:
object query parameters
updateColumns
()
protected
updateHeaderCellsColspan
()
protected
updateHeaderCellsColspanOnce
()
protected
userInteractionObserver
()
protected
displayDataChangedAction
-action when user does sort of filter.
Action is sent if displayDataChangedAction
is a closure-action
userInteractionObserverOnce
()
protected
visibleContentObserver
()
protected
visibleContentObserverOnce
()
protected
Properties
allColumnsAreHidden
Boolean
protected
isHidden
Default: false
anyFilterUsed
Boolean
protected
true
if global filter or filter by any column is used
Default: false
arrangedContent
Object[]
protected
For server side filtering, arrangedContent is same as the filtered content
arrangedContentLength
Number
protected
The total content length is get from the meta information. Set metaItemsCountProperty to change from which meta property this is loaded.
checkTextTranslations
Boolean
Default: false
collapsedGroupValues
Array[]
Default: []
collapseNumPaginationForPagesCount
Number
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
Default: {}
columnDropdownOptions
Internal.ColumnDropdownOptions
protected
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[]
Default: []
columnsAreUpdateable
Boolean
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[]
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
true
Default: null
currentPageNumberOptions
SelectOption
protected
Default: []
data
Object[]
Default: []
dataGroupProperties
String[] | Object[]
label
and value
properties for each list item
**IMPORTANT** It must contain [currentGroupingPropertyName](Components.ModelsTable.html#property_currentGroupingPropertyName)-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
row
and column
Default: 'row'
doFilteringByHiddenColumns
Boolean
Default: true
expandedItems
Object[]
Default: []
expandedRowComponent
Object
record
- current row value
* processedColumns
- current column (one of the [processedColumns](Components.ModelsTable.html#property_processedColumns))
* index
- current row index
* selectedItems
- bound from [selectedItems](Components.ModelsTable.html#property_selectedItems)
* visibleProcessedColumns
- bound from [visibleProcessedColumns](Components.ModelsTable.html#property_visibleProcessedColumns)
* clickOnRow
- closure action [clickOnRow](Components.ModelsTable.html#event_clickOnRow)
* themeInstance
- bound from [themeInstance](Components.ModelsTable.html#property_themeInstance)
Default: null
Example:
<ModelsTable
@data={{model}}
@columns={{columns}}
@expandedRowComponent={{component "expanded-row"}}
/>
filteredContent
Object[]
protected
This is set during didReceiveAttr and whenever the page/filters change.
Default: null
filteringIgnoreCase
Boolean
Default: false
focusGlobalFilter
Boolean
Default: false
forceToFirstPageProps
String[]
protected
Default: ['processedColumns.@each.filterString', 'filterString', 'pageSize']
groupedArrangedContent
Object[]
protected
Default: []
groupedHeaders
Internal.GroupedHeader[]
title
(string) - Header for grouped column
* colspan
(number) - HTML colspan attr
* rowspan
(number) - HTML rowspan attr
Default: []
groupedVisibleContent
Object[]
protected
Default: []
groupedVisibleContentValuesOrder
Object[]
protected
Default: []
groupHeaderCellComponent
Object
true
and [displayGroupedValueAs](Components.ModelsTable.html#property_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
true
Component will receive several options:
* groupedValue
- grouped property value
* currentGroupingPropertyName
- bound from [currentGroupingPropertyName](Components.ModelsTable.html#property_currentGroupingPropertyName)
* displayGroupedValueAs
- bound from [displayGroupedValueAs](Components.ModelsTable.html#property_displayGroupedValueAs)
* toggleGroupedRows
- closure action [toggleGroupedRows](Components.ModelsTable.html#event_toggleGroupedRows)
* toggleGroupedRowsExpands
- closure action [toggleGroupedRowsExpands](Components.ModelsTable.html#event_toggleGroupedRowsExpands)
* toggleGroupedRowsSelection
- closure action [toggleGroupedRowsSelection](Components.ModelsTable.html#event_toggleGroupedRowsSelection)
* visibleProcessedColumns
- bound from [visibleProcessedColumns](Components.ModelsTable.html#event_visibleProcessedColumns)
* themeInstance
- bound from [themeInstance](Components.ModelsTable.html#property_themeInstance)
* 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
Default: null
Example:
<ModelsTable
@data={{model}}
@columns={{columns}}
@groupingRowComponent={{component "grouping-row"}}
/>
groupSummaryRowComponent
Object
true
Component will receive several options:
* visibleProcessedColumns
- bound from [visibleProcessedColumns](Components.ModelsTable.html#property_visibleProcessedColumns)
* themeInstance
- bound from [themeInstance](Components.ModelsTable.html#property_themeInstance)
* 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
Default: null
Example:
<ModelsTable
@data={{model}}
@columns={{columns}}
@groupSummaryRowComponent={{component "group-summary-row"}}
/>
isError
Boolean
protected
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
protected
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
isolated
Boolean
click
action handler
It's useful when models-table
is used inside the row-expand
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
Default: false
multipleSelect
Boolean
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
observedProperties
String[]
protected
Default: ['currentPageNumber', 'sortProperties.[]', 'pageSize', 'filterString', 'processedColumns.@each.filterString']
pagesCount
Number
protected
The pages count is get from the meta information. Set metaPagesCountProperty to change from which meta property this is loaded.
pageSizeOptions
SelectOption
protected
Default: []
pageSizeValues
Number[]
visibleContent
Default: [10, 25, 50]
processedColumns
Utils.ModelsTableColumn[]
protected
Default: []
publicAPI
Unknown
refilter()
- Invalidates the filteredContent property, causing the table to be re-filtered.
* recordsCount
- Size of the current arranged content
Default: null
selectedItems
Object[]
true
Default: []
selectRowOnClick
Boolean
false
- no row can be selected
Default: true
showCurrentPageNumberSelect
Boolean
Default: true
sortByGroupedFieldDirection
String
protected
Default: 'asc'
sortMap
Internal.SortMap
sortProperties
Unknown
protected
ThemeInstance
Themes.Bootstrap3Theme
themeInstance
is an instance of [DefaultTheme](Themes.Default.html) or it's children.
By default models-table
uses [BootstrapTheme](Themes.Bootstrap3.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
Default: false
useFilteringByColumns
Boolean
Default: true
visibleContent
Object[]
protected
For server side filtering, visibleContent is same as the filtered content
Events
clearFilters
protected
clickOnRow
protected
selected
-state for row. Select only one or multiple rows depends on [multipleSelect](Components.ModelsTable.html#property_multipleSelect) value. May trigger sending [displayDataChangedAction](Components.ModelsTable.html#event_displayDataChangedAction)
collapseAllRows
protected
collapseRow
protected
columnsVisibilityChangedAction
{ propertyName: 'firstName', isHidden: true, mayBeHidden: false }
Example:
<ModelsTable
@data={{model}}
@columns={{columns}}
@columnsVisibilityChangedAction={{action "someAction"}}
/>
displayDataChangedAction
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
Example:
<ModelsTable
@data={{model}}
@columns={{columns}}
@displayDataChangedAction={{action "someAction"}}
/>
doubleClickOnRow
protected
expandAllRows
protected
true
. May trigger sending [displayDataChangedAction](Components.ModelsTable.html#event_displayDataChangedAction)
expandRow
protected
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](Components.ModelsTable.html#event_displayDataChangedAction)
gotoCustomPage
protected
Event Payload:
-
pageNumber
Number
hideAllColumns
protected
hoverOnRow
protected
outRow
protected
restoreDefaultVisibility
protected
rowDoubleClickAction
Example:
<ModelsTable
@data={{model}}
@columns={{columns}}
@rowDoubleClickAction={{action "someAction"}}
/>
rowHoverAction
Example:
<ModelsTable
@data={{model}}
@columns={{columns}}
@rowHoverAction={{action "someAction"}}
/>
rowOutAction
Example:
<ModelsTable
@data={{model}}
@columns={{columns}}
@rowOutAction={{action "someAction"}}
/>
showAllColumns
protected
isHidden
value to false
. May trigger sending [columnsVisibilityChangedAction](Components.ModelsTable.html#event_columnsVisibilityChangedAction)
toggleAllSelection
protected
toggleColumnSet
protected
Event Payload:
-
columnSetToToggle
Internal.ColumnSet
toggleGroupedRows
protected
toggleGroupedRowsExpands
protected
multipleExpand
should be set to true
otherwise this action won't do anything
toggleGroupedRowsSelection
protected
multipleSelect
should be set to true
otherwise this action won't do anything
May trigger sending [displayDataChangedAction](Components.ModelsTable.html#event_displayDataChangedAction)
toggleHidden
protected
Event Payload:
-
column
Utils.ModelsTableColumn