Need help with ember-models-table?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

onechiporenko
215 Stars 123 Forks MIT License 516 Commits 5 Opened issues

Description

Table with pagination, sorting, filtering and much more

Services available

!
?

Need anything else?

Contributors list

Ember-models-table

Build Status Coverage Status Codacy Badge Ember Observer Score npm version License Downloads

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.