New Twiddle

components.fb-table-body.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.fb-table-cell.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.fb-table-filter-mixin.js

import Ember from 'ember';

export default Mixin.create({
  didInsertElement() {
  	this.get('registerFilter')(this.packFilter)
  },
  
  packFilter() {
		
	}
});

components.fb-table-filter.js

import Ember from 'ember';

export default Ember.Component.extend({
  filterFunctions: [],
  
  actions: {
		registerFilter(action) {
			this.get('filterFunctions').pushObject(action);
		},
    filterAction() {
      let filters = [];
      this.get('filterFunctions').forEach(f => {
      	filters.addObject(f());
      });
      
      this.get('updateState')({
      	filters: filters
      });
    }
	}
  
});

components.fb-table-footer.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.fb-table-header-select-cell.js

import Ember from 'ember';
import { computed } from '@ember/object';


export default Ember.Component.extend({
  value: computed('selected.[]', 'data.[]', function() {
    return this.get('selected').length === this.get('data').length;
  }),
  actions: {
  toggle() {
    if (event.target.checked) {
    	this.get('addAll')()
    } else {
    	this.get('removeAll')()
    }
  }
  }
});

components.fb-table-header.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.fb-table-range-filter.js

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement() {
  	this.get('registerFilter')(() => {
      return {
        type: 'range',
        from: this.get('from'),
        to: this.get('to'),
        property: this.get('property')
     };
    })
  }
});

components.fb-table-row.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.fb-table-search.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
  	searchAction() {
      this.get('updateState')({
      	search: {
        	text: this.get('text'),
        }
      });
    }
  }
});

components.fb-table-select-cell.js

import Ember from 'ember';
import { computed } from '@ember/object';


export default Ember.Component.extend({
  value: computed('selected.[]', function() {
    return this.get('selected').includes(this.get('row'));
  }),
  actions: {
  toggle(event) {
    if (event.target.checked) {
    	this.get('addSelected')(this.get('row'))
    } else {
    	this.get('removeSelected')(this.get('row'))
    }
  }
  }
});

components.fb-table-selection-filter.js

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement() {
  	this.get('registerFilter')(() => {
      return {
        type: 'selection',
        value: this.get('value'),
        property: this.get('property')
     };
    })
  }
});

components.fb-table-sort-key.js

import Ember from 'ember';
import { alias, equal } from '@ember/object/computed';

export default Ember.Component.extend({  
  actions: {
    sortAction() {      
    	// this.get('sortAction')();
      let direction = '';
      if (this.get('direction') === 'asc') {
      	direction = 'desc'
      }
      else if (this.get('direction') === 'desc') {
      	direction = ''
      }
      else if (this.get('direction') === undefined || this.get('direction') === '') {
      	direction = 'asc'
      }
      this.set('direction', direction);
      this.get('updateState')({
      	sort: {
        	property: this.get('key'),
          direction: direction
        }
      });
    }
	}
});

components.fb-table-value-filter.js

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement() {
  	this.get('registerFilter')(() => {
      return {
        type: 'value',
        value: this.get('value'),
        property: this.get('property')
     };
    })
  },
  
  actions: {
  	selectOption(value) {
    	this.set('value', value)
    }
  }
});

components.fb-table.js

import Ember from 'ember';

export default Ember.Component.extend({
  init() {
    this._super(...arguments);
  	this.set('state', {})
    this.set('selected', [])
  },
  actions: {
  	updateState(state) {
    	Object.assign(this.get('state'), state); 
      this.get('reloadTable')(this.get('state'))
      console.log(this.get('state'))
    },
    addSelected(item) {
      this.get('selected').pushObject(item);
      this.set('selected', Object.assign([], this.get('selected')))
      // console.log(item, this.get('selected'));
    },
    removeSelected(item) {
      this.get('selected').removeObject(item);
      this.set('selected', Object.assign([], this.get('selected')))
      // console.log(item, this.get('selected'));
    },
    addAll() {
    	this.set('selected', Object.assign([], this.get('data')));
      console.log(this.get('selected'));
    },
    removeAll() {
    	this.set('selected', Object.assign([], []));
      console.log(this.get('selected'));
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  filterOptions: ['a', 'b', 'c'],
  data: [{
  	projectName: 2,
    clientName: 'b',
    members: ['1', '2']
	},{
  	projectName: 3,
    clientName: 'c',
    members: ['3', '4']
	},{
  	projectName: 4,
    clientName: 'c',
    members: []
	},{
  	projectName: 1,
    clientName: 'a',
    members: []
	}],
  originalData: [{
  	projectName: 2,
    clientName: 'b',
    members: ['1', '2']
	},{
  	projectName: 3,
    clientName: 'c',
    members: ['3', '4']
	},{
  	projectName: 4,
    clientName: 'c',
    members: []
	},{
  	projectName: 1,
    clientName: 'a',
    members: []
	}],
  sortDirection: '',
  sort(key, direction) {
      if (direction == 'asc') {
        this.set('data', (this.get('data').sortBy(key)))
      } else if (direction == 'desc') {
        this.set('data', (this.get('data').sortBy(key).reverse()))
      } else if (direction == '') {
        this.set('data', (this.get('data')))
      }
	},
      applyFilters(filters, data) {      
      let filteredData = this.get('data');
    	filters.forEach((f) => {
        
        if (f.type === 'range') {
          if (!f.from && !f.to) {
          	return; 
          }
        	filteredData = this.get('data').filter(function(item){
              return f.from <= item[f.property] && item[f.property] <= f.to;
          });
        }
        
        if (f.type === 'value') {
          if (f.value === undefined) {
          	return;
          }
          filteredData = filteredData.filter(function(item){
            return f.value === item[f.property]
          });
        }
        
        if (f.type === 'selection') {
          if(f.value) {
            filteredData = filteredData.filter(function(item){
            	return f.value === (item[f.property].length > 0)
            });
          }
        } 
      })
      this.set('data', filteredData)
      
    },
  search(text) {
      if (!text) {
        this.set('data', (this.get('data')))
      } else {
        this.set('data', (this.get('data').filterBy('clientName', text)))
      }
    },
  actions: {
    reloadTable({sort, search, filters}) {
      this.set('data', this.get('originalData'));
    	if (sort) {
      	this.sort(sort.property, sort.direction);
      }
      
      if (filters) {
      	this.applyFilters(filters);
      }
      
      if (search) {
      	this.search(search.text);
      }
    }
	}
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{#fb-table data=data reloadTable=(action 'reloadTable') as |table|}}
  {{#table.header as |header|}}
     {{header.search}}
     {{#header.filter as |filter|}}
     	{{#filter.range-filter title="Project" property='projectName' as |filter|}}
      	
      {{/filter.range-filter}}
      {{filter.value-filter title="Client" property='clientName' values=filterOptions}}
      {{filter.selection-filter title="Has Members" property='members'}}
     {{/header.filter}}
      {{#header.row as |visualRow|}}
       {{visualRow.header-select-cell}}
       {{#visualRow.cell}}
          {{#header.sort-key key='projectName'}}
              Project Name
          {{/header.sort-key}} / 
          {{#header.sort-key key='clientName'}}
              Client Name
          {{/header.sort-key}}
        {{/visualRow.cell}}
        {{#visualRow.cell}}
          Project Members / Owner
        {{/visualRow.cell}}
        {{#visualRow.cell}}
          Hours Logged
        {{/visualRow.cell}}
        {{#visualRow.cell}}
          End Date
        {{/visualRow.cell}}
     {{/header.row}}
  {{/table.header}}
  {{#table.body as |body|}}
    {{#each table.data as |row|}}
      {{#body.row as |visualRow|}}
        {{visualRow.select-cell row=row}}
        {{#visualRow.cell}}
          {{row.projectName}}
          <br>
          {{row.clientName}}
        {{/visualRow.cell}}
        {{#visualRow.cell}}
          {{#each row.members as |member|}}
          {{	member }}
          {{/each}}
        {{/visualRow.cell}}
        {{#visualRow.cell}}
          
        {{/visualRow.cell}}
        {{#visualRow.cell}}
          
        {{/visualRow.cell}}
            {{/body.row}}
        {{/each}}
    {{/table.body}}
  {{#table.footer as |footer|}}
    
  {{/table.footer}}
{{/fb-table}}
<br>
<br>

templates.components.fb-table-body.hbs

{{yield
        (hash
          row=(component
            'fb-table-row'
             addSelected=addSelected
             removeSelected=removeSelected
             selected=selected
          )
        )
 }}

templates.components.fb-table-cell.hbs

<div style="display: flex; padding:10px">
{{yield}}
</div>

templates.components.fb-table-filter.hbs

{{yield
        (hash
          range-filter=(component
            'fb-table-range-filter'
            registerFilter=(action 'registerFilter')
          )
          value-filter=(component
            'fb-table-value-filter'
            registerFilter=(action 'registerFilter')
          )
          selection-filter=(component
            'fb-table-selection-filter'
            registerFilter=(action 'registerFilter')
          )
        )
 }}
 <button {{action 'filterAction'}}>Filter</button>

templates.components.fb-table-footer.hbs

{{yield}}

templates.components.fb-table-header-select-cell.hbs

{{yield}}

{{input type='checkbox' selected=value change=(action 'toggle')}}

templates.components.fb-table-header.hbs

{{yield
        (hash
        	search=(component
            'fb-table-search'
            updateState=updateState
          )
          filter=(component
            'fb-table-filter'
            updateState=updateState
          )
          row=(component
            'fb-table-row'
            addAll=addAll
            removeAll=removeAll
            data=data
            selected=selected
          )
          sort-key=(component
            'fb-table-sort-key'
            updateState=updateState
          )
        )
 }}

templates.components.fb-table-range-filter.hbs

{{yield}}
{{title}}
{{input value=from}}
{{input value=to}} 

templates.components.fb-table-row.hbs

<div style="display: flex">
{{yield
        (hash
          cell=(component
            'fb-table-cell'
          )
          select-cell=(component
            'fb-table-select-cell'
             addSelected=addSelected
             removeSelected=removeSelected
             selected=selected
          )
          header-select-cell=(component
            'fb-table-header-select-cell'
            updateState=updateState
            addAll=addAll
            removeAll=removeAll
            selected=selected
            data=data
          )
        )
 }}
</div>

templates.components.fb-table-search.hbs

{{yield}}
{{input value=text}}
<button {{action 'searchAction'}} />

templates.components.fb-table-select-cell.hbs

{{yield}}

{{input type='checkbox' selected=value checked=value change=(action 'toggle')}}

templates.components.fb-table-selection-filter.hbs

{{yield}}

{{input type="checkbox" checked=value}} {{title}}

templates.components.fb-table-sort-key.hbs

<div {{action 'sortAction'}}>
{{yield}} {{direction}}
</div>

templates.components.fb-table-value-filter.hbs

{{yield}}

<select onchange={{action "selectOption" value="target.value"}}>
2  {{#each values as |optionValue|}}
3    <option value={{optionValue}}>{{optionValue}}</option>
4  {{/each}}
5</select>

templates.components.fb-table.hbs

{{yield
        (hash
          header=(component
            'fb-table-header'
            updateState=(action 'updateState')
            addAll=(action 'addAll')
            removeAll=(action 'removeAll')
            data=data
            selected=selected
          )
          body=(component
            'fb-table-body'
             addSelected=(action 'addSelected')
             removeSelected=(action 'removeSelected')
             selected=selected
          )
          footer=(component
            'fb-table-footer'
          )
          data=data
        )
 }}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}