Fix sticky column logic and ColumnDefinition type

addon/components/hyper-table-v2/column.ts

@@ -63,6 +63,10 @@ export default class HyperTableV2Column extends Component<HyperTableV2ColumnArgs
       classes.push('hypertable__column--filtered');
     }
 
+    if (this.stickyColumnClass) {
+      classes.push(this.stickyColumnClass);
+    }
+
     return classes.join(' ');
   }
 
@@ -81,6 +85,14 @@ export default class HyperTableV2Column extends Component<HyperTableV2ColumnArgs
     return this.args.column.definition.orderable && !this.args.column.order?.direction;
   }
 
+  get stickyColumnClass(): string | undefined {
+    const position = this.args.column.definition?.position;
+
+    if (!position?.sticky) return undefined;
+
+    return `hypertable__column--sticky-${position.side ?? 'left'}`;
+  }
+
   @action
   setDropdownHeight(): void {
     const dropdown = document.querySelector(`#${this.elementId} .available-filters`) as HTMLElement;

addon/components/hyper-table-v2/index.hbs

@@ -167,10 +167,6 @@
               @handler={{@handler}}
               @column={{column}}
               @delegatedFiltering={{@options.delegatedFiltering}}
-              class={{if
-                column.definition.position.sticky
-                (concat "hypertable__column--sticky-" column.definition.position.side)
-              }}
               {{sortable-item
                 groupName=this.hypertableInstanceID
                 model=column

addon/core/interfaces/column.ts

@@ -20,9 +20,14 @@ export type ColumnDefinition = {
   facetable: boolean;
   facetable_by: string[] | null;
   empty_state_message?: string;
-  position?: {
-    sticky: boolean;
-  };
+  position?:
+    | {
+        sticky: false;
+      }
+    | {
+        sticky: true;
+        side?: 'left' | 'right';
+      };
 };
 
 export type Filter = {

tests/integration/components/hyper-table-v2-test.ts

@@ -641,4 +641,55 @@ module('Integration | Component | hyper-table-v2', function (hooks) {
         meta: { total: 12 }
       });
   }
+
+  module('sticky column class', function () {
+    test('Sticky attribute not provided - column renders without sticky class', async function (this: TestContext, assert: Assert) {
+      sinon.stub(this.tableManager, 'fetchColumns').callsFake(() =>
+        Promise.resolve({
+          columns: [buildColumn('foo', { position: undefined }), buildColumn('bar', { position: undefined })]
+        })
+      );
+
+      await render(hbs`<HyperTableV2 @handler={{this.handler}} />`);
+
+      assert.dom('.hypertable__column--sticky-left').doesNotExist();
+      assert.dom('.hypertable__column--sticky-right').doesNotExist();
+    });
+
+    test('Sticky attribute provided with no side - column renders with sticky-left class', async function (this: TestContext, assert: Assert) {
+      sinon.stub(this.tableManager, 'fetchColumns').callsFake(() =>
+        Promise.resolve({
+          columns: [buildColumn('foo'), buildColumn('bar', { position: { sticky: true } })]
+        })
+      );
+
+      await render(hbs`<HyperTableV2 @handler={{this.handler}} />`);
+
+      assert.dom('.hypertable__column--sticky-left').exists();
+    });
+
+    test('Sticky attribute provided with right side - column renders with sticky-right class', async function (this: TestContext, assert: Assert) {
+      sinon.stub(this.tableManager, 'fetchColumns').callsFake(() => {
+        return Promise.resolve({
+          columns: [buildColumn('foo'), buildColumn('bar', { position: { sticky: true, side: 'right' } })]
+        });
+      });
+
+      await render(hbs`<HyperTableV2 @handler={{this.handler}} />`);
+
+      assert.dom('.hypertable__column--sticky-right').exists();
+    });
+
+    test('Sticky attribute provided with left side - column renders with sticky-left class', async function (this: TestContext, assert: Assert) {
+      sinon.stub(this.tableManager, 'fetchColumns').callsFake(() => {
+        return Promise.resolve({
+          columns: [buildColumn('foo'), buildColumn('bar', { position: { sticky: true, side: 'left' } })]
+        });
+      });
+
+      await render(hbs`<HyperTableV2 @handler={{this.handler}} />`);
+
+      assert.dom('.hypertable__column--sticky-left').exists();
+    });
+  });
 });