Add models-table-server-paginated component

[mydea]

While models-table works great for certain amounts of data, it cannot work with server-side paginated data. In order to make this possible, I added a second component, models-table-server-paginated, which makes this scenario possible.

This component extends the base models-table component. For the end user, it can be used (nearly) the same:

{{models-table-server-paginated data=model columns=myColumns}}

It expects myData to be an ember-data query, eg:

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 filterWithSelect for a column, you must use predefinedFilterOptions, because the automatic loading of possible filter values cannot work here.
• There is a new optional field filteredBy for columns, which works much like sortedBy: if set, this field will be used as query parameter, otherwise it will use the propertyName.
• 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

[onechiporenko]

Wow! Great thanks, @mydea .

[progand]

@mydea Its great! Do you plan to make ember-data optional? It would be perfect to use it with custom data layer.

[Micke5]

Hi @mydea!
I really like your solution. I'm implementing it atm and its going well : )
I wondering how to avoid making double request to the server. The first is make when the model is declared:
model: function() { return this.store.query('my-model', {}); }
and then in the
_loadData() { ... store.query(modelName, query).then((newData) => { set(this, 'filteredContent', newData); set(this, 'isLoading', false); });
Is it possible to remove one of the requests?

[mydea]

Hey - I had a check in place that avoided calling this on initial load. But since a few things changed in the underlying models-table, this might not work anymore - I will try to look into it soon :)

[Micke5]

Sweet! I'm looking forward to it :)

[Micke5]

@mydea my last problem now is the double requests, how did you do to stop the first one? Does it work?