ember install ember-models-tableJoin the official Ember Discord server.
Major version 3.x is latest version of ember-models-table.
- Demo for
ember-bootstrapwith Bootstrap v3 - demo bs3. Themeember-bootstrap-v3is used here. Add fileapp/instance-initializers/emt-inject.jsto 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-bootstrapwith Bootstrap v4 - demo bs4. Themeember-bootstrap-v4is used here. Add fileapp/instance-initializers/emt-inject.jsto 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. Themeember-paperis used here. Add fileapp/instance-initializers/emt-inject.jsto 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. Themeplain-htmlis used here. Add fileapp/instance-initializers/emt-inject.jsto 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.
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
};
DefaultThemeusesowner.lookupinternally. That is why themes based on it must be registered and injected and not just passed as arguments to themodels-tablecomponent.