abeadam/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 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
};

IMPORTANT Custom styles for ember-paper theme are not included to the ember-models-table by default. You can copy it from dummy app or create your own styles.

• Demo for plain-html - demo plain html. Theme plain-html 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:plain-html`);
  appInstance.inject('component:models-table-server-paginated', 'themeInstance', `theme:plain-html`);
}

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

IMPORTANT Custom styles for plain-html theme are not included to the ember-models-table by default. You can copy it from dummy app or create your own styles.

Custom themes

To use your custom theme based on DefaultTheme or its children you must do next steps:

• Register your theme in the application initializer:

// app/initializes/emt-my-super-theme.js
import MySuperTheme from 'your/custom/path';

export function initialize(application) {
  application.register('emt-theme:my-super-theme', MySuperTheme, {singleton: false});
}

export default {
  name: 'emt-my-custom-theme',
  after: 'emt-themes',
  initialize
};

• Inject your theme to the component in the application instance initializer:

// app/instance-initializers/emt-my-super-theme.js
export function initialize(appInstance) {
  appInstance.inject('component:models-table', 'themeInstance', 'theme:my-super-theme');
  appInstance.inject('component:models-table-server-paginated', 'themeInstance', 'theme:my-super-theme');
}

export default {
  name: 'emt-my-super-theme-inject',
  after: 'emt-inject',
  initialize
};

DefaultTheme uses owner.lookup internally. That is why themes based on it must be registered and injected and not just passed as arguments to the models-table component.

Old versions

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