ember-models-table

by onechiporenko

onechiporenko / ember-models-table

Table with pagination, sorting, filtering and much more

206 Stars 114 Forks Last release: about 2 months ago (v3.4.0) MIT License 496 Commits 65 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.