Leeft/ember-models-table

Table with pagination, sorting, filtering and much more

Ember-models-table

Install

ember install ember-models-table

Discussion

Join the official Ember Discord server.

Usage

Major version 3.x is latest version of ember-models-table.

• Demo for ember-bootstrap with Bootstrap v3 - demo bs3. Theme ember-bootstrap-v3 is used here. Add file app/instance-initializers/emt-inject.js to your project and table components will use this theme automatically:

export function initialize(appInstance) {
  appInstance.inject('component:models-table', 'themeInstance', `theme:ember-bootstrap-v3`);
  appInstance.inject('component:models-table-server-paginated', 'themeInstance', `theme:ember-bootstrap-v3`);
}

export default {
  name: 'emt-inject',
  initialize
};

• Demo for ember-bootstrap with Bootstrap v4 - demo bs4. Theme ember-bootstrap-v4 is used here. Add file app/instance-initializers/emt-inject.js to your project and table components will use this theme automatically:

export function initialize(appInstance) {
  appInstance.inject('component:models-table', 'themeInstance', `theme:ember-bootstrap-v4`);
  appInstance.inject('component:models-table-server-paginated', 'themeInstance', `theme:ember-bootstrap-v4`);
}

export default {
  name: 'emt-inject',
  initialize
};

• Demo for semantic-ui-ember - demo semantic. Theme ember-semanticui is used here. Add file app/instance-initializers/emt-inject.js to your project and table components will use this theme automatically:

export function initialize(appInstance) {
  appInstance.inject('component:models-table', 'themeInstance', `theme:ember-semanticui`);
  appInstance.inject('component:models-table-server-paginated', 'themeInstance', `theme:ember-semanticui`);
}

export default {
  name: 'emt-inject',
  initialize
};

• Demo for ember-paper - demo paper. Theme ember-paper is used here. Add file app/instance-initializers/emt-inject.js to your project and table components will use this theme automatically:

export function initialize(appInstance) {
  appInstance.inject('component:models-table', 'themeInstance', `theme:ember-paper`);
  appInstance.inject('component:models-table-server-paginated', 'themeInstance', `theme:ember-paper`);
}

export default {
  name: 'emt-inject',
  initialize
};

Old versions

• Demo for v.1
• Demo for v.2

More complex usage-examples:

• Nested tables
• Server paginated table
• Table settings from query params
• Rows Grouping
• Inline edit and columns summary
• Colspan and custom filter
• Keyboard navigation demo
• Filters with server-side data loading

Requirements

• Twitter Bootstrap should be installed for Bootstrap Themes
• SemanticUI should be installed for SemanticUI Theme