Ember Models Table with Semantic UI

components.expand-all-toggle.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    collapseAllRows() {
      Ember.get(this, 'collapseAllRows')();
    },
    expandAllRows() {
      Ember.get(this, 'expandAllRows')();
    }
  }
});

components.expand-toggle.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    collapseRow(index, record) {
      Ember.get(this, 'collapseRow')(index, record);
    },
    expandRow(index, record) {
      Ember.get(this, 'expandRow')(index, record);
    }
  }
});

components.models-table.select.js

import Ember from 'ember';

import Select from 'ember-models-table/components/models-table/select';

export default Select.extend({
  
  classNames: ['ui fluid dropdown']

});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.index.js

import Ember from 'ember';
import Semantic from 'app/themes/semantic';

export default Ember.Controller.extend({
  
  useNumericPagination: false,
  
  expandedRowComponent: 'expanded-row',
  
  columns: [
    {
      component: 'expand-toggle',
      componentForFilterCell: 'expand-all-toggle',
      mayBeHidden: false
    },
    {propertyName: 'id'},
    {propertyName: 'firstName'},
    {propertyName: 'lastName', filterWithSelect: true}
  ],
  
  columnSets: [
    {
      "label": "Only Name",
      "showColumns": [
        "firstName",
        "lastName"
      ]
    }
  ],
  
  themeInstance: Semantic
  
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  model() {
    return Promise.resolve([
      {id: '1', firstName: 'Jim', lastName: 'Raynor'},
      {id: '2', firstName: 'Sarah', lastName: 'Kerrigan'},
      {id: '3', firstName: 'Rory', lastName: 'Swann'},
      {id: '4', firstName: 'Tychus', lastName: 'Findlay'},
      {id: '5', firstName: 'Nova', lastName: 'Tera'},
      {id: '6', firstName: 'Gabriel', lastName: 'Tosh'},
      {id: '7', firstName: 'Egon', lastName: 'Stetmann'},
      {id: '8', firstName: 'Horace', lastName: 'Warfield'},
      {id: '9', firstName: 'Carolina', lastName: 'Davis'},
      {id: '10', firstName: 'Alexei', lastName: 'Stukov'},
      {id: '11', firstName: 'Valerian', lastName: 'Mengsk'},
      {id: '12', firstName: 'Ariel', lastName: 'Hanson'},
      {id: '13', firstName: 'Matt', lastName: 'Horner'},
      {id: '1', firstName: 'Jim', lastName: 'Raynor'},
      {id: '2', firstName: 'Sarah', lastName: 'Kerrigan'},
      {id: '3', firstName: 'Rory', lastName: 'Swann'},
      {id: '4', firstName: 'Tychus', lastName: 'Findlay'},
      {id: '5', firstName: 'Nova', lastName: 'Tera'},
      {id: '6', firstName: 'Gabriel', lastName: 'Tosh'},
      {id: '7', firstName: 'Egon', lastName: 'Stetmann'},
      {id: '8', firstName: 'Horace', lastName: 'Warfield'},
      {id: '9', firstName: 'Carolina', lastName: 'Davis'},
      {id: '10', firstName: 'Alexei', lastName: 'Stukov'},
      {id: '11', firstName: 'Valerian', lastName: 'Mengsk'},
      {id: '12', firstName: 'Ariel', lastName: 'Hanson'},
      {id: '13', firstName: 'Matt', lastName: 'Horner'},
      {id: '1', firstName: 'Jim', lastName: 'Raynor'},
      {id: '2', firstName: 'Sarah', lastName: 'Kerrigan'},
      {id: '3', firstName: 'Rory', lastName: 'Swann'},
      {id: '4', firstName: 'Tychus', lastName: 'Findlay'},
      {id: '5', firstName: 'Nova', lastName: 'Tera'},
      {id: '6', firstName: 'Gabriel', lastName: 'Tosh'},
      {id: '7', firstName: 'Egon', lastName: 'Stetmann'},
      {id: '8', firstName: 'Horace', lastName: 'Warfield'},
      {id: '9', firstName: 'Carolina', lastName: 'Davis'},
      {id: '10', firstName: 'Alexei', lastName: 'Stukov'},
      {id: '11', firstName: 'Valerian', lastName: 'Mengsk'},
      {id: '12', firstName: 'Ariel', lastName: 'Hanson'},
      {id: '13', firstName: 'Matt', lastName: 'Horner'},
      {id: '1', firstName: 'Jim', lastName: 'Raynor'},
      {id: '2', firstName: 'Sarah', lastName: 'Kerrigan'},
      {id: '3', firstName: 'Rory', lastName: 'Swann'},
      {id: '4', firstName: 'Tychus', lastName: 'Findlay'},
      {id: '5', firstName: 'Nova', lastName: 'Tera'},
      {id: '6', firstName: 'Gabriel', lastName: 'Tosh'},
      {id: '7', firstName: 'Egon', lastName: 'Stetmann'},
      {id: '8', firstName: 'Horace', lastName: 'Warfield'},
      {id: '9', firstName: 'Carolina', lastName: 'Davis'},
      {id: '10', firstName: 'Alexei', lastName: 'Stukov'},
      {id: '11', firstName: 'Valerian', lastName: 'Mengsk'},
      {id: '12', firstName: 'Ariel', lastName: 'Hanson'},
      {id: '13', firstName: 'Matt', lastName: 'Horner'},
      {id: '1', firstName: 'Jim', lastName: 'Raynor'},
      {id: '2', firstName: 'Sarah', lastName: 'Kerrigan'},
      {id: '3', firstName: 'Rory', lastName: 'Swann'},
      {id: '4', firstName: 'Tychus', lastName: 'Findlay'},
      {id: '5', firstName: 'Nova', lastName: 'Tera'},
      {id: '6', firstName: 'Gabriel', lastName: 'Tosh'},
      {id: '7', firstName: 'Egon', lastName: 'Stetmann'},
      {id: '8', firstName: 'Horace', lastName: 'Warfield'},
      {id: '9', firstName: 'Carolina', lastName: 'Davis'},
      {id: '10', firstName: 'Alexei', lastName: 'Stukov'},
      {id: '11', firstName: 'Valerian', lastName: 'Mengsk'},
      {id: '12', firstName: 'Ariel', lastName: 'Hanson'},
      {id: '13', firstName: 'Matt', lastName: 'Horner'},
      {id: '1', firstName: 'Jim', lastName: 'Raynor'},
      {id: '2', firstName: 'Sarah', lastName: 'Kerrigan'},
      {id: '3', firstName: 'Rory', lastName: 'Swann'},
      {id: '4', firstName: 'Tychus', lastName: 'Findlay'},
      {id: '5', firstName: 'Nova', lastName: 'Tera'},
      {id: '6', firstName: 'Gabriel', lastName: 'Tosh'},
      {id: '7', firstName: 'Egon', lastName: 'Stetmann'},
      {id: '8', firstName: 'Horace', lastName: 'Warfield'},
      {id: '9', firstName: 'Carolina', lastName: 'Davis'},
      {id: '10', firstName: 'Alexei', lastName: 'Stukov'},
      {id: '11', firstName: 'Valerian', lastName: 'Mengsk'},
      {id: '12', firstName: 'Ariel', lastName: 'Hanson'},
      {id: '13', firstName: 'Matt', lastName: 'Horner'},
    ]);
  }
  
});

templates.application.hbs

<div class="ui container">
	<h1>Ember Models Table with Semantic UI</h1>
	{{outlet}}
</div>

templates.components.expand-all-toggle.hbs

<a href="#" {{action "expandAllRows" bubbles=false}}><i class="plus icon"></i></a><br />
<a href="#" {{action "collapseAllRows" bubbles=false}} ><i class="icon minus"></i></a>

templates.components.expand-toggle.hbs

{{#if isExpanded}}
  <a href="#" {{action "collapseRow" index record bubbles=false}}><i class="minus icon"></i></a>
{{else}}
  <a href="#" {{action "expandRow" index record bubbles=false}}><i class="plus icon"></i></a>
{{/if}}

templates.components.expanded-row.hbs

<p>Detailed info about {{record.firstName}} {{record.lastName}} #{{record.id}}.</p>

templates.components.models-table.columns-dropdown.hbs

<div class="{{themeInstance.columnsDropdownWrapper}}">
  <div class="ui compact menu right floated">
    <div class="ui simple dropdown item">
      {{messages.columns-title}} <i class="dropdown icon"></i>
      <div class="menu">
        {{#if columnDropdownOptions.showAll}}
          <div class="item" {{action "showAllColumns" bubbles=false}}>{{messages.columns-showAll}}</div>
        {{/if}}
        {{#if columnDropdownOptions.hideAll}}
          <div class="item" {{action "hideAllColumns" bubbles=false}}>{{messages.columns-hideAll}}</div>
        {{/if}}
        {{#if columnDropdownOptions.restoreDefaults}}
          <div class="item" {{action "restoreDefaultVisibility" bubbles=false}}>{{messages.columns-restoreDefaults}}</div>
        {{/if}}
        <div class="divider"></div>
        {{#each columnDropdownOptions.columnSets as |columnSet|}}
          <div class="item" {{action "toggleColumnSet" columnSet bubbles=false}}>{{columnSet.label}}</div>
        {{/each}}
        <div class="divider"></div>
        {{#each processedColumns as |column|}}
          {{#if column.mayBeHidden}}
            <div class="item" {{action "toggleHidden" column bubbles=false}}>
              <i class="{{if column.isVisible themeInstance.column-visible themeInstance.column-hidden}}"></i> {{column.title}}
            </div>
          {{/if}}
        {{/each}}
      </div>
    </div>
  </div>
</div>

templates.components.models-table.global-filter.hbs

    <div class="ui labeled icon input">
      <div class="ui label">
        {{messages.searchLabel}}
      </div>
      {{input type="text" 
      	value=value 
        enter=""
        placeholder=messages.searchPlaceholder}}
      {{#if globalFilterUsed}}
        <i class="remove circle link icon" onclick={{action (mut value) ""}}></i>
      {{/if}}
    </div>

templates.components.models-table.pagination-numeric.hbs

    <div class="ui icon buttons right floated">
      {{#each visiblePageNumbers as |page|}}
        {{#if page.isLink}}
          <button class="ui button {{if page.isActive "active"}}" {{action "gotoCustomPage" page.label}}>{{page.label}}</button>
        {{else}}
          <button disabled="disabled" class="ui button" {{action "gotoCustomPage" page.label}}>{{page.label}}</button>
        {{/if}}
      {{/each}}
    </div>

templates.components.models-table.pagination-simple.hbs

<div class="ui icon buttons right floated">
  <button {{action "gotoFirst"}} class="ui button {{if gotoBackEnabled "enabled" "disabled"}}"><i class="angle double left icon"></i></button>
  <button {{action "gotoPrev"}} class="ui button {{if gotoBackEnabled "enabled" "disabled"}}"><i class="angle left icon"></i></button>
  <button  {{action "gotoNext"}} class="ui button {{if gotoForwardEnabled "enabled" "disabled"}}"><i class="angle right icon"></i></button>
  <button {{action "gotoLast"}} class="ui button {{if gotoForwardEnabled "enabled" "disabled"}}"><i class="angle double right icon"></i></button>
</div>

templates.components.models-table.row-filtering.hbs

{{#each processedColumns as |column|}}
  {{#if column.isVisible}}
    <th class="{{themeInstance.theadCell}} {{unless column.useFilter
                                                    themeInstance.theadCellNoFiltering}} {{column.className}}">
      {{#if column.componentForFilterCell}}
        {{component
          column.componentForFilterCell
          column=column
          data=data
          selectedItems=selectedItems
          expandedItems=expandedItems
          sendAction=sendAction
          themeInstance=themeInstance
          expandAllRows=expandAllRows
          collapseAllRows=collapseAllRows
          toggleAllSelection=toggleAllSelection
        }}
      {{else}}
        {{#if column.useFilter}}
          {{#if column.filterWithSelect}}
            <div class="select ui icon">
            {{models-table/select
              options=column.filterOptions
              cssPropertyName=column.cssPropertyName
              value=column.filterString
              themeInstance=themeInstance
              sendAction=sendAction
              themeInstance=themeInstance
              class=(concat themeInstance.input " changeFilterForColumn")
              expandAllRows=expandAllRows
              collapseAllRows=collapseAllRows
            }}
              {{#if column.filterUsed}}
                <i class="clearFilterIcon remove circle link icon" onclick={{action (mut column.filterString) ""}}></i>
              {{/if}}
            </div>
          {{else}}
            <div class="ui icon input">
              {{input type="text" value=column.filterString class=themeInstance.input enter=""
                      placeholder=column.filterPlaceholder}}
              {{#if column.filterUsed}}
                <i class="clearFilterIcon remove circle link icon" onclick={{action (mut column.filterString) ""}}></i>
              {{/if}}
            </div>
          {{/if}}
        {{/if}}
      {{/if}}
    </th>
  {{/if}}
{{/each}}

templates.index.hbs

<p>{{input type="checkbox" name="useNumericPagination" checked=useNumericPagination}} Use numeric pagination
</p>
{{models-table data=model columns=columns
multipleExpand=true
themeInstance=themeInstance columnSets=columnSets useNumericPagination=useNumericPagination
expandedRowComponent=expandedRowComponent}}

themes.semantic.js

import Default from './default';
import Ember from 'ember';

const {computed: {alias}} = Ember;

export default Default.extend({
  table: 'ui selectable striped celled sortable table',
  'column-visible': 'toggle on icon',
  'column-hidden': 'toggle off icon',
  'sort-asc': 'sort ascending icon',
  'sort-desc': 'sort descending icon',
  clearAllFiltersIcon: 'remove circle icon',
  footerSummaryNumericPagination: 'nine wide column',
  footerSummaryDefaultPagination: alias('footerSummaryNumericPagination'),
  pageSizeWrapper: 'two wide column',
  paginationWrapperNumeric: 'five wide column',
  paginationWrapperDefault: alias('paginationWrapperNumeric'),
  tfooterInternalWrapper: 'ui grid',
}).create();

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-models-table": "2.0.0-beta.3",
    "semantic-ui-ember": "2.0.1"
  }
}