ember-tabular
EmberTabular Class
addon/components/ember-tabular.js:3
Basic Usage
columns- Controller array to setup the table headers/columns (detailed below).modelName- for the component to make the proper request when filtering/sorting, you must pass the model type matching your Ember model structure. e.g. brand/diagram, product.record- this is bound to the controller and is used to iterate over the table's model data.
Template
{{! app/templates/my-route.hbs }}
{{#ember-tabular columns=columns modelName="user" record=users as |section|}}
{{#if section.isBody}}
{{#each users as |row|}}
<tr>
<td>{{row.username}}</td>
<td>{{row.emailAddress}}</td>
<td>{{row.firstName}}</td>
<td>{{row.lastName}}</td>
<td>
{{#link-to "index" class="btn btn-xs" role="button"}}
Edit
{{/link-to}}
</td>
</tr>
{{/each}}
{{/if}}
{{/ember-tabular}}
Controller
Setup the columns array, which is how the table headers are constructed, label is required in all cases.
// app/controllers/my-route.js
export default Ember.Controller.extend({
users: null,
columns: [
{
property: 'username',
label: 'Username',
defaultSort: 'username',
},
{
property: 'emailAddress',
label: 'Email',
},
{
property: 'firstName',
label: 'First Name',
},
{
property: 'lastName',
label: 'Last Name',
},
{
property: 'updatedAt',
label: 'Last Updated',
type: 'date',
},
],
});
Item Index
Methods
Properties
- columnLength
- columns
- defaultFailureMessage
- defaultSuccessMessage
- errors
- filter
- isColumnFilters
- isFailure
- isLoading
- isrecordLoaded
- isSuccess
- limit
- makeRequest
- modelName
- offset
- page
- pageLimit
- paginationWrapperClass
- query
- record
- showFilterRow
- sort
- sortableClass
- staticParams
- tableClass
- tableLoadedMessage
- tableWrapperClass
Methods
defaultSort
()
Runs on init to set the default sort param.
normalize
-
data -
params
Used to normalize query parameters returned from request to components expected format.
Parameters:
Returns:
data
normalizeFilter
-
query
Used to normalize filter related query parameters returned from request to components expected format.
?filter[last-name] => filter[lastName].
?filter[user.first-name] => filter[user.firstName].
Parameters:
-
queryObjectThe returned object of query parameters.
Returns:
query
normalizePagination
-
data -
params
Used to normalize pagination related query parameters returned from request to components expected format.
?page[offset] => offset.
?page[limit] => limit.
Parameters:
Returns:
data
normalizeProperty
-
property
Used to normalize properties to components expected format. By default this will camelize the property.
Parameters:
-
propertyString
Returns:
property
normalizeSort
-
query
Used to normalize sort related query parameters returned from request to components expected format.
Expects json:api by default.
Parameters:
-
queryObjectThe returned object of query parameters.
Returns:
query
request
-
params -
modelName
Make request to API for data.
reset
()
Resets all state specific properties.
serialize
-
params
Used to serialize the parameters within request.
Parameters:
-
paramsObjectAn object of query parameters.
Returns:
params The serialized query parameters.
serializeFilter
-
params
Transform params related to filtering into API expected format.
Follows json:api spec by default: http://jsonapi.org/recommendations/#filtering.
?filter[lastName] => ?filter[last-name].
Parameters:
-
paramsObjectAn object of query parameters.
Returns:
params The serialized filter query parameters.
serializePagination
-
params
Transform params related to pagination into API expected format. Follows json:api spec by default: http://jsonapi.org/format/#fetching-pagination.
offset => ?page[offset].
limit => ?page[limit].
If you are not using Ember Data then you can extend this addon's component and override a set of serialize and normalized methods:
import EmberTabular from 'ember-tabular/components/ember-tabular';
export default EmberTabular.extend({
serializePagination(params) {
// override default pagination ?page[offset]= and ?[page]limit=
// offset and limit will be sent as ?offset= and ?limit=
params.offset = (params.page * params.limit) - params.limit;
if (isNaN(params.offset)) {
params.offset = null;
}
return params;
},
});
Parameters:
-
paramsObjectAn object of query parameters.
Returns:
params The serialized pagination query parameters.
serializeProperty
-
property
Follows json:api dasherized naming.
lastName => last-name.
If you are not supporting json:api's dasherized properties this can be extended to support other conventions:
import EmberTabular from 'ember-tabular/components/ember-tabular';
export default EmberTabular.extend({
serializeProperty(property) {
// Override to convert all properties sent in requests to camelize instead of the default dasherized
// ?filter[lastName]&sort=isAdmin
// (pseudo code)
if (property) {
return Ember.String.camelize(property);
}
return null;
},
});
Parameters:
-
propertyString
Returns:
property
serializeSort
-
params
Transform params related to sorting into API expected format.
Follows json:api spec by default: http://jsonapi.org/format/#fetching-sorting.
?sort=lastName => ?sort=last-name.
Parameters:
-
paramsObjectAn object of query parameters.
Returns:
params The serialized sort query parameters.
setColumnDefaults
()
Runs on init to setup the table header default columns.
setModel
()
Sets the record after the request is resolved.
updateSortUI
-
sortProperty
Sets the proper classes on table headers when sorting.
Parameters:
-
sortPropertyString
Properties
columnLength
Unknown
Computed Property to determine the column length dependent upon columns.
Sub-properties:
-
columnsArray
columns
Array
This is typically setup on the controller and passed into the component, and is used to construct the table headers/filtering.
export default Ember.Controller.extend({
users: null,
columns: [
{
property: 'username',
label: 'Username',
defaultSort: 'username',
},
{
property: 'emailAddress',
label: 'Email',
},
{
property: 'firstName',
label: 'First Name',
sort: false,
},
{
property: 'isAdmin',
label: 'Is Admin',
list: [
{
label: 'Yes',
value: true,
},
{
label: 'No',
value: false,
}
],
},
{
property: 'updatedAt',
label: 'Last Updated',
type: 'date',
},
{
label: 'Actions',
},
],
});
columns.property- {String}- Required for column filtering/sorting
- Properties should be in camelCase format
columns.label- {String}- Required in all use-cases
columns.type- {String} - Default: text- Sets the filter
<input type="">
- Sets the filter
columns.sort- {Boolean} - Default:true- Required for column sorting
columns.list- {Array} - Default:null- Filtering the column based on a dropdown list.list.label- Displayed to the user for selection.list.value- Value that is sent in the request.
columns.defaultSort- {String}- Initial sort value for API request
- Will be overridden with any sorting changes
Default: null
isColumnFilters
Boolean
Used in templates to determine if table header will allow filtering.
Default: false
record
Object
This is typically bound to the controller and is used to iterate over the table's model data.
Default: null
staticParams
Object
Object to pass in static query-params that will not change based on any filter/sort criteria. Additional table-wide filters that need to be applied in all requests. Typically bound to the controller.
// app/controllers/location.js
export default Ember.Controller.extend({
staticParams: Ember.computed('model', function() {
return {
'filter[is-open]': '1',
include: 'hours',
};
}),
...
});
{{! app/templates/my-route.hbs }}
{{#ember-tabular columns=columns modelName="user" record=users staticParams=staticParams as |section|}}
...
{{/ember-tabular}}
Default: null
tableLoadedMessage
String
Once the isRecordLoaded is determined if true and no data exists then this is displayed.
Default: 'No Data.'