Theming ember-models-table 2.x

Theming for version 1.x allows only to set some custom classes and icons. Theming for version 2.x has much more options.

First of all, the idea itself was changed. New type called Theme was added (check themes dir). Four themes are available initially – Bootstrap3, Bootstrap4, SemanticUI and Default. First three of them are usage for project with appropriated library. Theme Default is a parent for them and doesn’t contain any stylish options.

You can create your theme based on any of the predefined:

// app/themes/my-cool-theme.js
import DefaultTheme from './default';
export default DefaultTheme.extend({
  // ...
// app/themes/another-theme.js
import Bootstrap3Theme from './bootstrap3';
export default Bootstrap3Theme.extend({
  // ...

You may store your themes not only in the themes-folder.

You have to create a theme instance to pass it to the models-table:

// app/controllers/some-page.js
import Controller from '@ember/controller';
import MyCoolTheme from '../themes/my-cool-theme';
import AnotherTheme from '../themes/another-theme';
export default Controller.extend({
  themeOne: MyCoolTheme.create(),
  themeTwo: AnotherTheme.create(),
  columns: [/* ... */]

Attribute called themeInstance is used for this:

{{! app/templates/some-page.hbs }}
{{models-table themeInstance=themeOne data=model columns=columns}}
{{models-table themeInstance=themeTwo data=model columns=columns}}

Let’s see what is it inside theme. Theme consists of three parts:

  • Components
  • Classes
  • Icons

Last two are the same as attributes customClasses and customIcons in the 1.x. Icons are used for navigation buttons, columns dropdown, filters and sorting. Classes are used for different elements inside models-table. Section “Components” is the map for components used internally in the models-table (there are almost 20 of them). Let’s call them “internal Components”. By default all of them are in the components/models-table/*-folder. You may set your own component instead of the predefined one in your theme:

// app/themes/my-theme.js
import DefaultTheme from './default';
export default DefaultTheme.extend({
  components: {
    'columns-dropdown': 'models-table/themes/my-theme/columns-dropdown'

Keep in mind, components doesn’t contain all fields from the DefaultTheme.components. It’s possible because components is declared as a mergedProperty in the DefaultTheme.

Just be sure that declared components exist. Most often you will need to change only how the component looks like and not its internal logic. SO, you may define you component as:

// app/components/models-table/themes/my-theme/columns-dropdown.js
import DefaultDropdown from '../../columns-dropdown';
import layout from '../../../../templates/components/models-table/themes/my-theme/columns-dropdown';
export default DefaultDropdown.extend({

We set here that new Component is based on standard models-table/columns-dropdown but has another template.

By default Components for themes are placed in the components/models-table/themes/THEME_NAME.

For now we have a lot of ways to customize models-table:

  • Create new Theme (based on default)
  • Redeclare or extend existing theme
  • Create and use your own internal Components
  • Redeclare standard internal Components
  • Use a block content for standard Components with a custom markup

We will analyze each of them. It’s useful to create your own theme when your project doesn’t contain Bootstrap or SemanticUI. You need to declare almost every class and create a few own components in this case. New theme from scratch is good for this.

You may extend existing theme when Bootstrap or SemanticUI are used in your project. Most likely, some of the classes declared in themes will suit you and you will not have to redefine a lot.

Creating your internal Components is smart in cases where you create your new theme from scratch.

You can override standard internal Сomponents in cases where an existing theme is good for you, but you need to make some corrections to its layout. E.g., you uses SemanticUI and want to add some item to the columns dropdown. You should create a template templates/components/models-table/themes/semanticui/columns-dropdown.hbs with a custom layout in your project. It’s useful because you don’t have to extend a theme.

All Components in the models-table may be used with a block content. So, you may write something like this:

{{#models-table data=data columns=columns action=action as |c|}}
  {{#c.table as |table|}}
    {{#table.header as |h|}}
      {{#h.row-filtering as |rf|}}
        {{#each rf.processedColumns as |column|}}
          {{#rf.row-filtering-cell column=column as |rfc|}}
    {{#table.body as |body|}}
      {{#if body.allColumnsAreHidden}}
        {{#if body.visibleContent.length}}
          {{#each body.visibleContent as |record index|}}
            {{body.row record=record index=index}}
            {{#if (exists-in body.expandedItems record)}}
              {{body.row-expand record=record index=index}}
    {{#table.footer as |footer|}}
      {{#if useNumericPagination}}

You can set any layout you need with custom classes. You may go such way if you have only one table in the project, but themes are preferable.

Each of the options considered will work and you will get the table in the form in which it was described. It’s up to you which of the options to choose. One can start from a simple thesis – “if the code is less in method N, then we use it”.

I recommend to take a look on code for predefined themes.

, , ,

Tips and tricks for working with ember-models-table 

Оставить комментарий

Top ↑ | Main page | Back