Mark rows as even or odd for styling purposes (#1190)

Author: kpfefferle

addon/components/ember-tr/component.js

@@ -48,7 +48,7 @@ export default Component.extend({
   layout,
   tagName: 'tr',
   classNames: ['et-tr'],
-  classNameBindings: ['isSelected', 'isGroupSelected', 'isSelectable'],
+  classNameBindings: ['isEven:is-even:is-odd', 'isGroupSelected', 'isSelectable', 'isSelected'],
 
   /**
     The API object passed in by the table body, header, or footer
@@ -88,6 +88,11 @@ export default Component.extend({
 
   isGroupSelected: readOnly('rowMeta.isGroupSelected'),
 
+  isEven: computed('rowMeta.index', function() {
+    let index = this.rowMeta?.index ?? 0;
+    return index % 2 === 0;
+  }),
+
   isSelectable: computed('rowSelectionMode', function() {
     let rowSelectionMode = this.get('rowSelectionMode');
 

tests/integration/components/row-test.js

@@ -14,6 +14,8 @@ let table = new TablePage({
   body: {
     rows: collection({
       isCustomRow: hasClass('custom-row'),
+      isEven: hasClass('is-even'),
+      isOdd: hasClass('is-odd'),
     }),
   },
 });
@@ -34,6 +36,17 @@ const USE_EMBER_ARRAY_PARAMETERS = {
 
 module('Integration | row', function() {
   parameterizedComponentModule('basic', USE_EMBER_ARRAY_PARAMETERS, function() {
+    test('marks rows as even or odd', async function(assert) {
+      await generateTable(this);
+
+      assert.true(table.rows.objectAt(0).isEven, 'First row is even');
+      assert.true(table.rows.objectAt(1).isOdd, 'Second row is odd');
+      assert.true(table.rows.objectAt(2).isEven, 'Third row is even');
+      assert.true(table.rows.objectAt(3).isOdd, 'Fourth row is odd');
+      assert.true(table.rows.objectAt(4).isEven, 'Fifth row is even');
+      assert.true(table.rows.objectAt(5).isOdd, 'Sixth row is odd');
+    });
+
     test('can use a custom row component', async function(assert) {
       await generateTable(this, {
         rowComponent: 'custom-row',