diff --git a/app/assets/javascripts/discourse/app/components/directory-table.gjs b/app/assets/javascripts/discourse/app/components/directory-table.gjs
new file mode 100644
index 00000000000..179e76f6e25
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/directory-table.gjs
@@ -0,0 +1,65 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import DirectoryItem from "discourse/components/directory-item";
+import ResponsiveTable from "discourse/components/responsive-table";
+import TableHeaderToggle from "discourse/components/table-header-toggle";
+import directoryColumnIsAutomatic from "discourse/helpers/directory-column-is-automatic";
+import { i18n } from "discourse-i18n";
+
+export default class DirectoryTable extends Component {
+  table;
+
+  @action
+  setupTable(element) {
+    this.table = element.querySelector(".directory-table");
+    const columnCount = this.args.showTimeRead
+      ? this.args.columns.length + 1
+      : this.args.columns.length;
+
+    this.table.style.gridTemplateColumns = `minmax(15em, 3fr) repeat(${columnCount}, minmax(max-content, 1fr))`;
+  }
+
+  @action
+  updateOrderAndAsc(field, asc) {
+    this.args.updateOrder(field);
+    this.args.updateAsc(asc);
+  }
+
+  <template>
+    <ResponsiveTable {{didInsert this.setupTable}}>
+      <:header>
+        <TableHeaderToggle @field="username" @order={{@order}} @asc={{@asc}} />
+        {{#each @columns as |column|}}
+          <TableHeaderToggle
+            @onToggle={{this.updateOrderAndAsc}}
+            @field={{column.name}}
+            @icon={{column.icon}}
+            @order={{@order}}
+            @asc={{@asc}}
+            @automatic={{directoryColumnIsAutomatic column=column}}
+            @translated={{column.user_field_id}}
+          />
+        {{/each}}
+
+        {{#if @showTimeRead}}
+          <div class="directory-table__column-header">
+            <div class="header-contents">
+              {{i18n "directory.time_read"}}
+            </div>
+          </div>
+        {{/if}}
+      </:header>
+
+      <:body>
+        {{#each @items as |item|}}
+          <DirectoryItem
+            @item={{item}}
+            @columns={{@columns}}
+            @showTimeRead={{@showTimeRead}}
+          />
+        {{/each}}
+      </:body>
+    </ResponsiveTable>
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/directory-table.hbs b/app/assets/javascripts/discourse/app/components/directory-table.hbs
deleted file mode 100644
index 4170777f2d8..00000000000
--- a/app/assets/javascripts/discourse/app/components/directory-table.hbs
+++ /dev/null
@@ -1,38 +0,0 @@
-<ResponsiveTable>
-  <:header>
-    <TableHeaderToggle
-      @field="username"
-      @order={{this.order}}
-      @asc={{this.asc}}
-    />
-    {{#each this.columns as |column|}}
-      <TableHeaderToggle
-        @onToggle={{this.updateOrder}}
-        @field={{column.name}}
-        @icon={{column.icon}}
-        @order={{this.order}}
-        @asc={{this.asc}}
-        @automatic={{directory-column-is-automatic column=column}}
-        @translated={{column.user_field_id}}
-        @onActiveRender={{this.setActiveHeader}}
-      />
-    {{/each}}
-
-    {{#if this.showTimeRead}}
-      <div class="directory-table__column-header">
-        <div class="header-contents">
-          {{i18n "directory.time_read"}}
-        </div>
-      </div>
-    {{/if}}
-  </:header>
-  <:body>
-    {{#each this.items as |item|}}
-      <DirectoryItem
-        @item={{item}}
-        @columns={{this.columns}}
-        @showTimeRead={{this.showTimeRead}}
-      />
-    {{/each}}
-  </:body>
-</ResponsiveTable>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/directory-table.js b/app/assets/javascripts/discourse/app/components/directory-table.js
deleted file mode 100644
index 698be89c45a..00000000000
--- a/app/assets/javascripts/discourse/app/components/directory-table.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Component from "@ember/component";
-import { action } from "@ember/object";
-
-export default class DirectoryTable extends Component {
-  _table = null;
-
-  didInsertElement() {
-    super.didInsertElement(...arguments);
-    this.setProperties({
-      _table: this.element.querySelector(".directory-table"),
-      _columnCount: this.showTimeRead
-        ? this.columns.length + 1
-        : this.columns.length,
-    });
-
-    this._table.style.gridTemplateColumns = `minmax(15em, 3fr) repeat(${this._columnCount}, minmax(max-content, 1fr))`;
-  }
-
-  @action
-  setActiveHeader(header) {
-    // After render, scroll table left to ensure the order by column is visible
-    if (!this._table) {
-      this.set("_table", document.querySelector(".directory-table"));
-    }
-    const scrollPixels =
-      header.offsetLeft + header.offsetWidth + 10 - this._table.offsetWidth;
-
-    if (scrollPixels > 0) {
-      this._table.scrollLeft = scrollPixels;
-    }
-  }
-
-  @action
-  updateOrder(field, asc) {
-    this.setProperties({
-      order: field,
-      asc,
-    });
-  }
-}
diff --git a/app/assets/javascripts/discourse/app/templates/users.hbs b/app/assets/javascripts/discourse/app/templates/users.hbs
index cd96a14b52b..f8e3f7e349a 100644
--- a/app/assets/javascripts/discourse/app/templates/users.hbs
+++ b/app/assets/javascripts/discourse/app/templates/users.hbs
@@ -73,7 +73,9 @@
               @columns={{this.columns}}
               @showTimeRead={{this.showTimeRead}}
               @order={{this.order}}
+              @updateOrder={{fn (mut this.order)}}
               @asc={{this.asc}}
+              @updateAsc={{fn (mut this.asc)}}
             />
             <ConditionalLoadingSpinner @condition={{this.model.loadingMore}} />
           {{else}}