From cc9f283b0a1edee0cd74bfec8c79f2ffc0758304 Mon Sep 17 00:00:00 2001 From: Edouard Misset Date: Tue, 5 May 2026 19:33:00 +0200 Subject: [PATCH 1/6] fix: fix sticky column class logic and ColumnDefinition type Co-authored-by: Copilot --- addon/components/hyper-table-v2/index.hbs | 5 +---- addon/components/hyper-table-v2/index.ts | 8 ++++++++ addon/core/interfaces/column.ts | 11 ++++++++--- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/addon/components/hyper-table-v2/index.hbs b/addon/components/hyper-table-v2/index.hbs index 8af58d38..930b5ed8 100644 --- a/addon/components/hyper-table-v2/index.hbs +++ b/addon/components/hyper-table-v2/index.hbs @@ -167,10 +167,7 @@ @handler={{@handler}} @column={{column}} @delegatedFiltering={{@options.delegatedFiltering}} - class={{if - column.definition.position.sticky - (concat "hypertable__column--sticky-" column.definition.position.side) - }} + class={{this.getStickyColumnClass column}} {{sortable-item groupName=this.hypertableInstanceID model=column diff --git a/addon/components/hyper-table-v2/index.ts b/addon/components/hyper-table-v2/index.ts index 058bfc59..827c2452 100644 --- a/addon/components/hyper-table-v2/index.ts +++ b/addon/components/hyper-table-v2/index.ts @@ -182,6 +182,14 @@ export default class HyperTableV2 extends Component { return htmlSafe(`--hypertable-responsive-columns-number: ${this.args.handler.columns.length - 1}`); } + getStickyColumnClass(column: Column): string | undefined { + const position = column.definition?.position; + + if (!position?.sticky) return; + + return `hypertable__column--sticky-${position.side ?? 'left'}`; + } + private _resetFilters(): void { this.loadingResetFilters = true; this.args.handler.resetColumns(this.args.handler.columns).finally(() => { diff --git a/addon/core/interfaces/column.ts b/addon/core/interfaces/column.ts index c1966a39..88d59eab 100644 --- a/addon/core/interfaces/column.ts +++ b/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 = { From f610a59fc60113260d44aa4afded301a098a4b79 Mon Sep 17 00:00:00 2001 From: Edouard Misset Date: Tue, 5 May 2026 19:50:00 +0200 Subject: [PATCH 2/6] fix: use fn helper --- addon/components/hyper-table-v2/index.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addon/components/hyper-table-v2/index.hbs b/addon/components/hyper-table-v2/index.hbs index 930b5ed8..9070e750 100644 --- a/addon/components/hyper-table-v2/index.hbs +++ b/addon/components/hyper-table-v2/index.hbs @@ -167,7 +167,7 @@ @handler={{@handler}} @column={{column}} @delegatedFiltering={{@options.delegatedFiltering}} - class={{this.getStickyColumnClass column}} + class={{fn this.getStickyColumnClass column}} {{sortable-item groupName=this.hypertableInstanceID model=column From 6663969648592529f03c0dadcc3a2591e603576c Mon Sep 17 00:00:00 2001 From: Edouard Misset Date: Tue, 5 May 2026 20:20:12 +0200 Subject: [PATCH 3/6] refactor: move sticky column logic to column component and add tests Co-authored-by: Copilot --- addon/components/hyper-table-v2/column.ts | 15 ++++++- addon/components/hyper-table-v2/index.hbs | 1 - addon/components/hyper-table-v2/index.ts | 8 ---- .../components/hyper-table-v2-test.ts | 39 +++++++++++++++++++ 4 files changed, 53 insertions(+), 10 deletions(-) diff --git a/addon/components/hyper-table-v2/column.ts b/addon/components/hyper-table-v2/column.ts index 660ffe1d..376d81e0 100644 --- a/addon/components/hyper-table-v2/column.ts +++ b/addon/components/hyper-table-v2/column.ts @@ -49,7 +49,7 @@ export default class HyperTableV2Column extends Component { return htmlSafe(`--hypertable-responsive-columns-number: ${this.args.handler.columns.length - 1}`); } - getStickyColumnClass(column: Column): string | undefined { - const position = column.definition?.position; - - if (!position?.sticky) return; - - return `hypertable__column--sticky-${position.side ?? 'left'}`; - } - private _resetFilters(): void { this.loadingResetFilters = true; this.args.handler.resetColumns(this.args.handler.columns).finally(() => { diff --git a/tests/integration/components/hyper-table-v2-test.ts b/tests/integration/components/hyper-table-v2-test.ts index fb0ccac5..d338b63a 100644 --- a/tests/integration/components/hyper-table-v2-test.ts +++ b/tests/integration/components/hyper-table-v2-test.ts @@ -641,4 +641,43 @@ module('Integration | Component | hyper-table-v2', function (hooks) { meta: { total: 12 } }); } + + module('sticky column class', function () { + test('no sticky - 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``); + + assert.dom('.hypertable__column--sticky-left').doesNotExist(); + assert.dom('.hypertable__column--sticky-right').doesNotExist(); + }); + + test('sticky 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``); + + assert.dom('.hypertable__column--sticky-left').exists(); + }); + + test('sticky 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``); + + assert.dom('.hypertable__column--sticky-right').exists(); + }); + }); }); From 3a5afba7447f536e939e3004c0ed29434e746643 Mon Sep 17 00:00:00 2001 From: Edouard Misset Date: Wed, 6 May 2026 10:55:40 +0200 Subject: [PATCH 4/6] fix: remove computed --- addon/components/hyper-table-v2/column.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/addon/components/hyper-table-v2/column.ts b/addon/components/hyper-table-v2/column.ts index 376d81e0..04de7ce3 100644 --- a/addon/components/hyper-table-v2/column.ts +++ b/addon/components/hyper-table-v2/column.ts @@ -49,7 +49,7 @@ export default class HyperTableV2Column extends Component Date: Wed, 6 May 2026 12:05:37 +0200 Subject: [PATCH 5/6] chore: update sticky column test descriptions for clarity --- tests/integration/components/hyper-table-v2-test.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/integration/components/hyper-table-v2-test.ts b/tests/integration/components/hyper-table-v2-test.ts index d338b63a..76011632 100644 --- a/tests/integration/components/hyper-table-v2-test.ts +++ b/tests/integration/components/hyper-table-v2-test.ts @@ -643,7 +643,7 @@ module('Integration | Component | hyper-table-v2', function (hooks) { } module('sticky column class', function () { - test('no sticky - column renders without sticky class', async function (this: TestContext, assert: Assert) { + 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 })] @@ -656,7 +656,7 @@ module('Integration | Component | hyper-table-v2', function (hooks) { assert.dom('.hypertable__column--sticky-right').doesNotExist(); }); - test('sticky with no side - column renders with sticky-left class', async function (this: TestContext, assert: Assert) { + 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 } })] @@ -668,7 +668,7 @@ module('Integration | Component | hyper-table-v2', function (hooks) { assert.dom('.hypertable__column--sticky-left').exists(); }); - test('sticky with right side - column renders with sticky-right class', async function (this: TestContext, assert: Assert) { + 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' } })] From f5cf2b03a572ad2dfbccdd193ab5b9267bd2e19b Mon Sep 17 00:00:00 2001 From: Edouard Misset Date: Wed, 6 May 2026 14:31:04 +0200 Subject: [PATCH 6/6] test: add sticky-left class rendering test for left-side sticky columns --- tests/integration/components/hyper-table-v2-test.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/tests/integration/components/hyper-table-v2-test.ts b/tests/integration/components/hyper-table-v2-test.ts index 76011632..f9a9d09f 100644 --- a/tests/integration/components/hyper-table-v2-test.ts +++ b/tests/integration/components/hyper-table-v2-test.ts @@ -679,5 +679,17 @@ module('Integration | Component | hyper-table-v2', function (hooks) { 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``); + + assert.dom('.hypertable__column--sticky-left').exists(); + }); }); });