diff --git a/addon/mixins/table-header.js b/addon/mixins/table-header.js index 450b1514..6c549685 100644 --- a/addon/mixins/table-header.js +++ b/addon/mixins/table-header.js @@ -106,6 +106,15 @@ export default Mixin.create({ */ iconDescending: '', + /** + * Custom sorting component name to use instead of the default `` template. + * See `iconSortable`, `iconAsending`, or `iconDescending`. + * @property iconComponent + * @type {String} + * @default false + */ + iconComponent: null, + /** * ID of main table component. Used to generate divs for ember-wormhole * @type {String} @@ -117,8 +126,8 @@ export default Mixin.create({ subColumns: computed.readOnly('table.visibleSubColumns'), columns: computed.readOnly('table.visibleColumns'), - sortIcons: computed('iconSortable', 'iconAscending', 'iconDescending', function() { - return this.getProperties(['iconSortable', 'iconAscending', 'iconDescending']); + sortIcons: computed('iconSortable', 'iconAscending', 'iconDescending', 'iconComponent', function() { + return this.getProperties(['iconSortable', 'iconAscending', 'iconDescending', 'iconComponent']); }).readOnly(), init() { diff --git a/addon/templates/components/columns/base.hbs b/addon/templates/components/columns/base.hbs index bfb7193d..81f8cca4 100644 --- a/addon/templates/components/columns/base.hbs +++ b/addon/templates/components/columns/base.hbs @@ -2,7 +2,9 @@ {{component column.component column=column table=table tableActions=tableActions extra=extra sortIcons=sortIcons}} {{else}} {{label}} - {{#if sortIconProperty}} + {{#if (and sortIcons.iconComponent sortIconProperty)}} + {{component sortIcons.iconComponent sortIcons=sortIcons sortIconProperty=sortIconProperty}} + {{else if sortIconProperty}} {{/if}} {{/if}} diff --git a/tests/dummy/app/components/cookbook/custom-sort-icon-table.js b/tests/dummy/app/components/cookbook/custom-sort-icon-table.js new file mode 100644 index 00000000..8579cfcb --- /dev/null +++ b/tests/dummy/app/components/cookbook/custom-sort-icon-table.js @@ -0,0 +1,34 @@ +// BEGIN-SNIPPET custom-sort-icon-table +import Component from '@ember/component'; +import TableCommon from '../../mixins/table-common'; +import { computed } from '@ember/object'; + +export default Component.extend(TableCommon, { + columns: computed(function() { + return [{ + label: 'Avatar', + valuePath: 'avatar', + width: '60px', + sortable: false, + cellComponent: 'user-avatar' + }, { + label: 'First Name', + valuePath: 'firstName', + width: '150px' + }, { + label: 'Last Name', + valuePath: 'lastName', + width: '150px' + }, { + label: 'Address', + valuePath: 'address' + }, { + label: 'State', + valuePath: 'state' + }, { + label: 'Country', + valuePath: 'country' + }]; + }) +}); +// END-SNIPPET diff --git a/tests/dummy/app/components/materialize-icon.js b/tests/dummy/app/components/materialize-icon.js new file mode 100644 index 00000000..d880d448 --- /dev/null +++ b/tests/dummy/app/components/materialize-icon.js @@ -0,0 +1,9 @@ +// BEGIN-SNIPPET materialize-icon +import Component from '@ember/component'; +import layout from '../templates/components/materialize-icon'; + +export default Component.extend({ + tagName: 'span', + layout +}); +// END-SNIPPET diff --git a/tests/dummy/app/index.html b/tests/dummy/app/index.html index 23ea3bf2..1b1c999b 100644 --- a/tests/dummy/app/index.html +++ b/tests/dummy/app/index.html @@ -13,6 +13,7 @@ + {{content-for "head-footer"}} diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index 93afae07..a620ebd6 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -28,6 +28,7 @@ Router.map(function() { this.route('custom-row'); this.route('table-actions'); this.route('horizontal-scrolling'); + this.route('custom-sort-icon'); }); }); diff --git a/tests/dummy/app/routes/cookbook/custom-sort-icon.js b/tests/dummy/app/routes/cookbook/custom-sort-icon.js new file mode 100644 index 00000000..0040140d --- /dev/null +++ b/tests/dummy/app/routes/cookbook/custom-sort-icon.js @@ -0,0 +1 @@ +export { default } from '../table-route'; diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index 4553c6e6..7bf2183b 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -71,6 +71,9 @@ {{#link-to 'cookbook.pagination' tagName="li"}} {{link-to 'Pagination' 'cookbook.pagination'}} {{/link-to}} + {{#link-to 'cookbook.custom-sort-icon' tagName="li"}} + {{link-to 'Custom Sort Icon' 'cookbook.custom-sort-icon'}} + {{/link-to}} {{/link-to}}