Online mode

this.repository = entityManager.getRepository('users');
      columns="id,name as 'username', as 'User id'"

Offline mode = [{id: 1, name: 'Pipo'}, {id: 2, name: 'Mario'}];
      columns="id,name as 'username'"


Datatable supports a couple of attributes allowing you to customize behavior.


Comma-separated string representing the column names to display. Or Array of objects describing the columns.


<datatable resource="user" columns.bind="columns"></datatable>
export class List {
  columns = [{
    property: 'id'
  }, {
    property: 'name',
    label   : 'username',
    valueConverters: ['toLowerCase']
  }, {
    property       : '',
    label          : 'Group name',
    route          : {
      name  : 'groups',      // The name of your route in your application
      params: {group: 'id'}  // Optional. Paramaters required for the given route. ({name: 'value'})
      property: 'created_at',
      label:    'created_at',
      searchable: false

By default, searchable for each column will be set true. If you dont want to search on that column, let set searchable to false.

This is used for table content, but also the table headers. There's support for nested objects, as well as aliases. Example:


<datatable resource="product" columns="name,price"></datatable>


<datatable resource="product" columns="name as product,price as 'Market price'"></datatable>


<datatable resource="product" populate="group" columns="name,price as 'Market price', as 'Product group'"></datatable>


You can give every colum one or more valueConverters (| seperated). You need to define the converters in your main.js as a global resource. *More information()

Note: In the toView() of the valueConverter there is a 3rd parameter that includes the data of the row. This can be useful if you want to convert something based on a other column. For example price and currency.


export function configure(aurelia) {
  columns="name, price as 'Market price' | priceFormat, createdAt | dateFormat: 'yyyy-mm-dd'"

repository (Online mode only)

When given a repository, the datatable will use it to populate the table with.

This is as simple as EntityManager.getRepository('resource').

More information.

resource (Online mode only)

This tells the component which repository to get. This takes away the code you'd otherwise have to write with the repository attribute.

limit (Online mode only)

Number of rows to show per-page. Defaults to 30.

where (Online mode only)

A simple object containing a where clause to restrict the data returned from the API.

Note: Only useful when combined with resource or repository.


this.where = {group: 5, price: {'>': 10}};
<datatable resource="product" where.bind="where" columns="name,price"></datatable>

searchable (Online mode only)

Allow the user to search through the datatable. This will display a dropdown (<select />, for you to choose a column) and a simple input field. The value from the input field is used to search using contains.

Note: Only useful when combined with resource or repository.

search-column (Online mode only)

The initial search field, defaults to name. This value changes when another value has been selected from the dropdown.


  • Using this attribute will cause datatable to add a delete button on every row.
  • When given a callback, datatable will call it when the user clicks the destroy action in the datatable.
  • When provided without a function, datatable will call .destroy() on the entity (only useful when combined with resource or repository).


  • Using this attribute will cause datatable to add an edit button on every row.
  • You must provide a callback, which will be called when the user clicks the edit button. You'll be passed the row object.

sortable (Online mode only)

Allow rows to be sorted. When provided, this will cause datatable to add clickable table headers (to apply sorting for the selected header).

Note: Only useful when combined with resource or repository.

<datatable sortable></datatable>

populate (Online mode only)

Which associations to populate for columns and edit. Defaults to none.

Note: Only useful when combined with resource or repository.

<datatable populate="user,group"></datatable>


<datatable populate.bind="['user','group']"></datatable>

sortNested (Online mode only)

This allows you to sort on associations.

By default this is set to false because some back-ends don't support this.


Allow the user to add custom action buttons in case he needs more than just edit and/or destroy on the rows.


class ViewModel {
  actions = [{
    icon  : 'flag',     // font-awesome icon name
    title : 'My Title', // button title if `icon` is not set
    type  : 'danger',   // bootstrap button type
    action: (record) => {
    disabled: record => {
      // disable button where "id" is higher than 5
      return > 5;
    visible: record => {
      // display only the buttons where "id" is lower than 10
      return < 10;
<datatable actions.bind="actions" ></datatable>

It's possible to add an extra row to the bottom of your datatable. Footer also parses HTML.


When detail-view is given a ViewModel, it allows you to expand the row with additional information.


<!-- details.html -->
 Information about ${}
// details.js
export class Details {
  activate(row) {
    this.row = row; // row contains the data of the collapse row

criteria (Online mode only)

Full criteria object used to talk to the API. This object contains the where, skip, limit, sort and populate.

Note: Only use this option if you know what you're doing. Only useful when combined with resource or repository.

Changing framework

You can override the framework used for the datatable with any of the supported ones using the aurelia-view-manager.

results matching ""

    No results matching ""