Declare @action methods as arrow functions

table/src/-private/column.ts

@@ -1,4 +1,4 @@
-import { action, get } from '@ember/object';
+import { get } from '@ember/object';
 import { isEmpty } from '@ember/utils';
 
 import type { CellComponent } from './cell-component.ts';
@@ -52,8 +52,7 @@ export class Column<
     public config: ColumnConfig<T, unknown, Meta>,
   ) {}
 
-  @action
-  getValueForRow(row: Row<T>): ContentValue {
+  getValueForRow = (row: Row<T>): ContentValue => {
     if (this.config.value) {
       return this.config.value(this.#contextFor(row));
     }
@@ -71,7 +70,7 @@ export class Column<
      *         properly constrained the type of value, (isEmpty doesn't narrow types either)
      */
     return value as ContentValue;
-  }
+  };
 
   private getDefaultValue(row: Row<T>) {
     return this.getOptionsForRow(row)[DEFAULT_VALUE_KEY];
@@ -84,10 +83,9 @@ export class Column<
    * The type also has the `@options` the table's Cells ask for.
    * The column's `options` must return them: this is not checked.
    */
-  @action
-  getOptionsForRow(
+  getOptionsForRow = (
     row: Row<T>,
-  ): { defaultValue: string } & CellOptionsOf<CellArgs> {
+  ): { defaultValue: string } & CellOptionsOf<CellArgs> => {
     const configuredDefault = this.table.config.defaultCellValue;
     const defaults = {
       [DEFAULT_VALUE_KEY]:
@@ -98,7 +96,7 @@ export class Column<
       ...defaults,
       ...this.config.options?.(this.#contextFor(row)),
     } as { defaultValue: string } & CellOptionsOf<CellArgs>;
-  }
+  };
 
   #contextFor(row: Row<T>): CellContext<T, unknown, Meta> {
     // The row is a row of this column's table, so its table has this table's types.

table/src/-private/row.ts

@@ -1,5 +1,4 @@
 import { assert } from '@ember/debug';
-import { action } from '@ember/object';
 
 import type { Table } from './table';
 
@@ -35,8 +34,7 @@ export class Row<DataType = Record<string, unknown>> {
     this.table = table;
   }
 
-  @action
-  handleClick(event: MouseEvent): void {
+  handleClick = (event: MouseEvent): void => {
     assert(
       `expected event.target to be an instance of HTMLElement`,
       event.target instanceof HTMLElement || event.target instanceof SVGElement,
@@ -62,5 +60,5 @@ export class Row<DataType = Record<string, unknown>> {
     if (inputParent) {
       return;
     }
-  }
+  };
 }

table/src/-private/table.ts

@@ -1,6 +1,5 @@
 import { cached, tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
-import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 
 import { isDevelopingApp, macroCondition } from '@embroider/macros';
@@ -357,15 +356,13 @@ export class Table<
   /**
    * @private
    */
-  @action
-  resetScrollContainer(): void {
+  resetScrollContainer = (): void => {
     if (!this.scrollContainerElement) return;
 
     this.scrollContainerElement.scrollTop = 0;
-  }
+  };
 
-  @action
-  resetToDefaults(): void {
+  resetToDefaults = (): void => {
     this.plugins.forEach((plugin) => plugin.reset?.());
-  }
+  };
 }

table/src/plugins/column-reordering/plugin.ts

@@ -1,6 +1,5 @@
 import { cached, tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
-import { action } from '@ember/object';
 
 import { TrackedMap } from 'tracked-built-ins';
 
@@ -122,28 +121,26 @@ export class TableMeta<DataType = unknown> {
   columnOrder: ColumnOrder<DataType> = new ColumnOrder<DataType>({
     columns: () => this.allColumns,
     visibleColumns: () => this.visibleColumns,
-    save: this.save,
+    save: (map) => this.save(map),
     read: () => this.read(),
   });
 
   /**
    * Get the curret order/position of a column
    */
-  @action
-  getPosition(column: Column<DataType>): number {
+  getPosition = (column: Column<DataType>): number => {
     return this.columnOrder.get(column.key);
-  }
+  };
 
   /**
    * Swap the column with the column at `newPosition`
    */
-  @action
-  setPosition(
+  setPosition = (
     column: Column<DataType>,
     newPosition: number,
-  ): false | undefined {
+  ): false | undefined => {
     return this.columnOrder.swapWith(column.key, newPosition);
-  }
+  };
 
   /**
    * Using a `ColumnOrder` instance, set the order of all columns
@@ -156,43 +153,40 @@ export class TableMeta<DataType = unknown> {
    * Revert to default config, delete preferences,
    * and clear the columnOrder
    */
-  @action
-  reset(): void {
+  reset = (): void => {
     preferences.forTable(this.table, ColumnReordering).delete('order');
     this.columnOrder = new ColumnOrder<DataType>({
       columns: () => this.allColumns,
       visibleColumns: () => this.visibleColumns,
       save: this.save,
     });
-  }
+  };
 
   /**
    * @private
    */
-  @action
-  save(map: Map<string, number>): void {
+  save = (map: Map<string, number>): void => {
     const order: Record<string, number> = {};
 
     for (const [key, position] of map.entries()) {
       order[key] = position;
     }
 
     preferences.forTable(this.table, ColumnReordering).set('order', order);
-  }
+  };
 
   /**
    * @private
    */
-  @action
-  private read() {
+  private read = () => {
     const order = preferences
       .forTable(this.table, ColumnReordering)
       .get('order');
 
     if (!order) return;
 
     return new Map<string, number>(Object.entries(order));
-  }
+  };
 
   get columns(): Column<DataType>[] {
     return this.columnOrder.orderedColumns.filter(
@@ -316,8 +310,7 @@ export class ColumnOrder<DataType = unknown> {
    * - skip over non-visible columns when determining the previous "index"
    * - set the position to whatever that is.
    */
-  @action
-  moveLeft(key: string): void {
+  moveLeft = (key: string): void => {
     const orderedColumns = this.orderedColumns;
     if (this.map.get(key) === 0) {
       return;
@@ -353,7 +346,7 @@ export class ColumnOrder<DataType = unknown> {
     }
 
     this.args.save?.(this.map);
-  }
+  };
 
   setAll = (map: Map<string, number>): void => {
     let allColumns = this.args.columns();
@@ -377,8 +370,7 @@ export class ColumnOrder<DataType = unknown> {
    * - skip over non-visible columns when determining the next "index"
    * - set the position to whatever that is.
    */
-  @action
-  moveRight(key: string): void {
+  moveRight = (key: string): void => {
     const orderedColumns = this.orderedColumns;
     let found = false;
 
@@ -410,13 +402,12 @@ export class ColumnOrder<DataType = unknown> {
     }
 
     this.args.save?.(this.map);
-  }
+  };
 
   /**
    * Performs a swap of the column's position with the column at position
    */
-  @action
-  swapWith(key: string, position: number): false | undefined {
+  swapWith = (key: string, position: number): false | undefined => {
     const validPositions = [...this.orderedMap.values()];
 
     /**
@@ -487,10 +478,9 @@ export class ColumnOrder<DataType = unknown> {
     }
 
     this.args.save?.(this.map);
-  }
+  };
 
-  @action
-  get(key: string): number {
+  get = (key: string): number => {
     const result = this.orderedMap.get(key);
 
     assert(
@@ -500,7 +490,7 @@ export class ColumnOrder<DataType = unknown> {
     );
 
     return result;
-  }
+  };
 
   /**
    * The same as this.map, but with all the columns' information.

table/src/plugins/column-resizing/plugin.ts

@@ -1,7 +1,6 @@
 import { cached, tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
 import { isDestroyed, isDestroying } from '@ember/destroyable';
-import { action } from '@ember/object';
 
 import { preferences } from '../../plugins/index.ts';
 
@@ -258,15 +257,13 @@ export class ColumnMeta {
     return styles;
   }
 
-  @action
-  resize(delta: number): void {
+  resize = (delta: number): void => {
     this.tableMeta.resizeColumn(this.column, delta);
-  }
+  };
 
-  @action
-  save(): void {
+  save = (): void => {
     this.tableMeta.saveColWidths(this.tableMeta.visibleColumnMetas);
-  }
+  };
 }
 
 /**
@@ -357,8 +354,7 @@ export class TableMeta {
     );
   }
 
-  @action
-  saveColWidths(visibleColumnMetas: ColumnMeta[]): void {
+  saveColWidths = (visibleColumnMetas: ColumnMeta[]): void => {
     const tablePrefs = this.table.preferences;
 
     for (const column of visibleColumnMetas) {
@@ -369,19 +365,17 @@ export class TableMeta {
     }
 
     tablePrefs.persist();
-  }
+  };
 
-  @action
-  reset(): void {
+  reset = (): void => {
     if (!this.scrollContainerWidth) return;
 
     for (const column of this.visibleColumnMetas) {
       column._width = undefined;
     }
-  }
+  };
 
-  @action
-  onTableResize(entry: ResizeObserverEntry): void {
+  onTableResize = (entry: ResizeObserverEntry): void => {
     assert(
       'scroll container element must be an HTMLElement',
       entry.target instanceof HTMLElement,
@@ -403,13 +397,12 @@ export class TableMeta {
       this.scrollContainerWidth - this.totalVisibleColumnsWidth - totalGap;
 
     distributeDelta(diff, this.#availableColumns);
-  }
+  };
 
-  @action
-  resizeColumn<DataType = unknown>(
+  resizeColumn = <DataType = unknown>(
     column: Column<DataType>,
     delta: number,
-  ): void {
+  ): void => {
     if (delta === 0) return;
 
     const tableLayout = this.options?.tableLayout ?? 'auto';
@@ -419,7 +412,7 @@ export class TableMeta {
     } else {
       this.#resizeColumnAuto(column, delta);
     }
-  }
+  };
 
   /**
    * Simple column resizing for table-layout: fixed

table/src/plugins/column-visibility/plugin.ts

@@ -1,5 +1,4 @@
 import { cached } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 import { BasePlugin, meta, options, preferences } from '../-private/base.ts';
 
@@ -149,10 +148,9 @@ export class TableMeta<Data = unknown> {
     });
   }
 
-  @action
-  toggleColumnVisibility(column: Column<Data>): void {
+  toggleColumnVisibility = (column: Column<Data>): void => {
     const columnMeta = meta.forColumn(column, ColumnVisibility);
 
     columnMeta.toggle();
-  }
+  };
 }