diff --git a/addon/components/columns/base.js b/addon/components/columns/base.js
index 1e29adea..3da1d327 100644
--- a/addon/components/columns/base.js
+++ b/addon/components/columns/base.js
@@ -72,6 +72,23 @@ const Column = Component.extend(DraggableColumnMixin, {
*/
sortIcons: null,
+ /**
+ * @property sortIconProperty
+ * @type {String|null}
+ * @private
+ */
+ sortIconProperty: computed('column.{sortable,sorted,ascending}', function() {
+ let sorted = this.get('column.sorted');
+
+ if (sorted) {
+ let ascending = this.get('column.ascending');
+ return ascending ? 'iconAscending' : 'iconDescending';
+ }
+
+ let sortable = this.get('column.sortable');
+ return sortable ? 'iconSortable' : null;
+ }),
+
/**
* @property colspan
* @type {Number}
diff --git a/addon/mixins/table-header.js b/addon/mixins/table-header.js
index ed52cb88..0ea9f309 100644
--- a/addon/mixins/table-header.js
+++ b/addon/mixins/table-header.js
@@ -69,13 +69,24 @@ export default Mixin.create({
resizeOnDrag: false,
/**
- * CSS classes to be applied to an `` tag that is
+ * inserted into the column's `
` element when the column is sortable but
+ * not yet sorted.
*
* For instance, if you have installed `ember-font-awesome` or include the
* `font-awesome` assets manually (e.g. via a CDN), you can set
- * `iconAscending` to `'fa fa-sort-asc'`, which would yield this markup:
- * ``
+ * `iconSortable` to `'fa fa-sort'`, which would yield this markup:
+ * ``
+ *
+ * @property iconSortable
+ * @type {String}
+ * @default ''
+ */
+ iconSortable: '',
+
+ /**
+ * See `iconSortable`. CSS classes to apply to ``
+ * when the column is sorted ascending.
*
* @property iconAscending
* @type {String}
@@ -84,7 +95,8 @@ export default Mixin.create({
iconAscending: '',
/**
- * See `iconAscending`.
+ * See `iconSortable`. CSS classes to apply to ``
+ * when the column is sorted descending.
*
* @property iconDescending
* @type {String}
@@ -103,8 +115,8 @@ export default Mixin.create({
subColumns: computed.readOnly('table.visibleSubColumns'),
columns: computed.readOnly('table.visibleColumns'),
- sortIcons: computed('iconAscending', 'iconDescending', function() {
- return this.getProperties(['iconAscending', 'iconDescending']);
+ sortIcons: computed('iconSortable', 'iconAscending', 'iconDescending', function() {
+ return this.getProperties(['iconSortable', 'iconAscending', 'iconDescending']);
}).readOnly(),
init() {
diff --git a/addon/templates/components/columns/base.hbs b/addon/templates/components/columns/base.hbs
index 00c1cce6..ddfa73d6 100644
--- a/addon/templates/components/columns/base.hbs
+++ b/addon/templates/components/columns/base.hbs
@@ -2,8 +2,8 @@
{{component column.component column=column table=table tableActions=tableActions sortIcons=sortIcons}}
{{else}}
{{label}}
- {{#if column.sorted}}
-
+ {{#if sortIconProperty}}
+
{{/if}}
{{/if}}
diff --git a/tests/dummy/app/templates/components/columns/draggable-table.hbs b/tests/dummy/app/templates/components/columns/draggable-table.hbs
index 1b343efe..e340ca47 100644
--- a/tests/dummy/app/templates/components/columns/draggable-table.hbs
+++ b/tests/dummy/app/templates/components/columns/draggable-table.hbs
@@ -2,6 +2,7 @@
{{#light-table table height='65vh' as |t|}}
{{t.head
onColumnClick=(action 'onColumnClick')
+ iconSortable='fa fa-sort'
iconAscending='fa fa-sort-asc'
iconDescending='fa fa-sort-desc'
fixed=true
diff --git a/tests/dummy/app/templates/components/columns/grouped-table.hbs b/tests/dummy/app/templates/components/columns/grouped-table.hbs
index 327852d7..ba218156 100644
--- a/tests/dummy/app/templates/components/columns/grouped-table.hbs
+++ b/tests/dummy/app/templates/components/columns/grouped-table.hbs
@@ -2,6 +2,7 @@
{{#light-table table height='65vh' as |t|}}
{{t.head
onColumnClick=(action 'onColumnClick')
+ iconSortable='fa fa-sort'
iconAscending='fa fa-sort-asc'
iconDescending='fa fa-sort-desc'
fixed=true
diff --git a/tests/dummy/app/templates/components/columns/resizable-table.hbs b/tests/dummy/app/templates/components/columns/resizable-table.hbs
index 493bb381..f2fed617 100644
--- a/tests/dummy/app/templates/components/columns/resizable-table.hbs
+++ b/tests/dummy/app/templates/components/columns/resizable-table.hbs
@@ -3,6 +3,7 @@
{{t.head
onColumnClick=(action 'onColumnClick')
+ iconSortable='fa fa-sort'
iconAscending='fa fa-sort-asc'
iconDescending='fa fa-sort-desc'
resizeOnDrag=true
diff --git a/tests/dummy/app/templates/components/cookbook/client-side-table.hbs b/tests/dummy/app/templates/components/cookbook/client-side-table.hbs
index a5a3cf0c..1f274048 100644
--- a/tests/dummy/app/templates/components/cookbook/client-side-table.hbs
+++ b/tests/dummy/app/templates/components/cookbook/client-side-table.hbs
@@ -9,6 +9,7 @@
{{t.head
onColumnClick=(action 'onColumnClick')
+ iconSortable='fa fa-sort'
iconAscending='fa fa-sort-asc'
iconDescending='fa fa-sort-desc'
fixed=true
diff --git a/tests/dummy/app/templates/components/cookbook/custom-row-table.hbs b/tests/dummy/app/templates/components/cookbook/custom-row-table.hbs
index 64930a85..ef628c61 100644
--- a/tests/dummy/app/templates/components/cookbook/custom-row-table.hbs
+++ b/tests/dummy/app/templates/components/cookbook/custom-row-table.hbs
@@ -9,6 +9,7 @@
{{t.head
onColumnClick=(action 'onColumnClick')
+ iconSortable='fa fa-sort'
iconAscending='fa fa-sort-asc'
iconDescending='fa fa-sort-desc'
fixed=true
diff --git a/tests/dummy/app/templates/components/cookbook/horizontal-scrolling-table.hbs b/tests/dummy/app/templates/components/cookbook/horizontal-scrolling-table.hbs
index a78c2641..2300bdd1 100644
--- a/tests/dummy/app/templates/components/cookbook/horizontal-scrolling-table.hbs
+++ b/tests/dummy/app/templates/components/cookbook/horizontal-scrolling-table.hbs
@@ -9,6 +9,7 @@
{{t.head
onColumnClick=(action 'onColumnClick')
+ iconSortable='fa fa-sort'
iconAscending='fa fa-sort-asc'
iconDescending='fa fa-sort-desc'
fixed=true
diff --git a/tests/dummy/app/templates/components/cookbook/paginated-table.hbs b/tests/dummy/app/templates/components/cookbook/paginated-table.hbs
index 286cdce3..c125cf01 100644
--- a/tests/dummy/app/templates/components/cookbook/paginated-table.hbs
+++ b/tests/dummy/app/templates/components/cookbook/paginated-table.hbs
@@ -9,6 +9,7 @@
{{t.head
onColumnClick=(pipe (action 'onColumnClick') (action 'setPage' 1))
+ iconSortable='fa fa-sort'
iconAscending='fa fa-sort-asc'
iconDescending='fa fa-sort-desc'
fixed=true
diff --git a/tests/dummy/app/templates/components/cookbook/table-actions-table.hbs b/tests/dummy/app/templates/components/cookbook/table-actions-table.hbs
index c5686cdb..70c7b405 100644
--- a/tests/dummy/app/templates/components/cookbook/table-actions-table.hbs
+++ b/tests/dummy/app/templates/components/cookbook/table-actions-table.hbs
@@ -12,6 +12,7 @@
{{t.head
onColumnClick=(action 'onColumnClick')
+ iconSortable='fa fa-sort'
iconAscending='fa fa-sort-asc'
iconDescending='fa fa-sort-desc'
fixed=true
diff --git a/tests/dummy/app/templates/components/responsive-table.hbs b/tests/dummy/app/templates/components/responsive-table.hbs
index 40d34cc6..7c06b225 100644
--- a/tests/dummy/app/templates/components/responsive-table.hbs
+++ b/tests/dummy/app/templates/components/responsive-table.hbs
@@ -14,6 +14,7 @@
{{t.head
onColumnClick=(action 'onColumnClick')
+ iconSortable='fa fa-sort'
iconAscending='fa fa-sort-asc'
iconDescending='fa fa-sort-desc'
fixed=true
diff --git a/tests/dummy/app/templates/components/rows/expandable-table.hbs b/tests/dummy/app/templates/components/rows/expandable-table.hbs
index e66ac87d..6dcc4223 100644
--- a/tests/dummy/app/templates/components/rows/expandable-table.hbs
+++ b/tests/dummy/app/templates/components/rows/expandable-table.hbs
@@ -2,6 +2,7 @@
{{#light-table table height='65vh' as |t|}}
{{t.head
onColumnClick=(action 'onColumnClick')
+ iconSortable='fa fa-sort'
iconAscending='fa fa-sort-asc'
iconDescending='fa fa-sort-desc'
fixed=true
diff --git a/tests/dummy/app/templates/components/rows/selectable-table.hbs b/tests/dummy/app/templates/components/rows/selectable-table.hbs
index 05216f11..1bd951c9 100644
--- a/tests/dummy/app/templates/components/rows/selectable-table.hbs
+++ b/tests/dummy/app/templates/components/rows/selectable-table.hbs
@@ -11,6 +11,7 @@
{{#light-table table height='65vh' as |t|}}
{{t.head
onColumnClick=(action 'onColumnClick')
+ iconSortable='fa fa-sort'
iconAscending='fa fa-sort-asc'
iconDescending='fa fa-sort-desc'
fixed=true
diff --git a/tests/dummy/app/templates/components/scrolling-table.hbs b/tests/dummy/app/templates/components/scrolling-table.hbs
index 4e1e5bcd..07e94ca5 100644
--- a/tests/dummy/app/templates/components/scrolling-table.hbs
+++ b/tests/dummy/app/templates/components/scrolling-table.hbs
@@ -9,6 +9,7 @@
{{t.head
onColumnClick=(action 'onColumnClick')
+ iconSortable='fa fa-sort'
iconAscending='fa fa-sort-asc'
iconDescending='fa fa-sort-desc'
fixed=true
diff --git a/tests/dummy/app/templates/components/simple-table.hbs b/tests/dummy/app/templates/components/simple-table.hbs
index 99ca7e2e..51243a67 100644
--- a/tests/dummy/app/templates/components/simple-table.hbs
+++ b/tests/dummy/app/templates/components/simple-table.hbs
@@ -9,6 +9,7 @@
{{t.head
onColumnClick=(action 'onColumnClick')
+ iconSortable='fa fa-sort'
iconAscending='fa fa-sort-asc'
iconDescending='fa fa-sort-desc'
fixed=true
diff --git a/tests/integration/components/lt-head-test.js b/tests/integration/components/lt-head-test.js
index b9abdcbb..45c1699f 100644
--- a/tests/integration/components/lt-head-test.js
+++ b/tests/integration/components/lt-head-test.js
@@ -3,6 +3,7 @@ import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import Table from 'ember-light-table';
import Columns, { GroupedColumns } from '../../helpers/table-columns';
+import hasClass from '../../helpers/has-class';
moduleForComponent('lt-head', 'Integration | Component | lt head', {
integration: true
@@ -62,6 +63,35 @@ test('click - sortable column', function(assert) {
click(sortableHeader);
});
+test('render sort icons', function(assert) {
+ this.set('table', new Table(Columns));
+
+ this.render(hbs`{{lt-head table=table renderInPlace=true iconSortable='fa-sort' iconAscending='fa-sort-asc' iconDescending='fa-sort-desc'}}`);
+
+ let allHeaders = findAll('tr > th ');
+ let sortableHeader = allHeaders[allHeaders.length - 1];
+ let sortIcon = find('.lt-sort-icon', sortableHeader);
+
+ // Sortable case
+ assert.ok(hasClass(sortIcon, 'fa-sort'), 'Sortable icon renders');
+ assert.notOk(hasClass(sortIcon, 'fa-sort-asc'));
+ assert.notOk(hasClass(sortIcon, 'fa-sort-desc'));
+
+ click(sortableHeader);
+
+ // Ascending case
+ assert.ok(hasClass(sortIcon, 'fa-sort-asc'), 'Ascending icon renders');
+ assert.notOk(hasClass(sortIcon, 'fa-sort'));
+ assert.notOk(hasClass(sortIcon, 'fa-sort-desc'));
+
+ click(sortableHeader);
+
+ // Descending case
+ assert.ok(hasClass(sortIcon, 'fa-sort-desc'), 'Descending icon renders');
+ assert.notOk(hasClass(sortIcon, 'fa-sort'));
+ assert.notOk(hasClass(sortIcon, 'fa-sort-asc'));
+});
+
test('double click', function(assert) {
this.set('table', new Table(Columns));
this.on('onColumnDoubleClick', (column) => {
|