Scope the css var for # of columns to the table (#225)

* scope the css var for # of columns to the table * ts typing fix
upfluence · Jan 16, 2025 · 8b15f3d · 8b15f3d
1 parent 50065eb
commit 8b15f3d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/addon/components/hyper-table-v2/index.hbs b/addon/components/hyper-table-v2/index.hbs
@@ -80,6 +80,7 @@
 
       <div
         class="hypertable"
+        style={{this.columnsCountStyle}}
         {{sortable-group direction="x" onChange=this.reorderColumns groupName=this.hypertableInstanceID}}
       >
         {{#each @handler.columns as |column index|}}

diff --git a/addon/components/hyper-table-v2/index.ts b/addon/components/hyper-table-v2/index.ts
@@ -3,6 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { action, set } from '@ember/object';
 import { debounce, scheduleOnce } from '@ember/runloop';
 import { isEmpty } from '@ember/utils';
+import { htmlSafe } from '@ember/template';
 
 import TableHandler from '@upfluence/hypertable/core/handler';
 import { Column, Row } from '@upfluence/hypertable/core/interfaces';
@@ -153,6 +154,10 @@ export default class HyperTableV2 extends Component<HyperTableV2Args> {
     window.location.reload();
   }
 
+  get columnsCountStyle(): ReturnType<typeof htmlSafe> {
+    return htmlSafe(`--hypertable-responsive-columns-number: ${this.args.handler.columns.length - 1}`);
+  }
+
   private _resetFilters(): void {
     this.loadingResetFilters = true;
     this.args.handler.resetColumns(this.args.handler.columns).finally(() => {