From c06194798cbbe0b3ac065c4702dbfeff9a374559 Mon Sep 17 00:00:00 2001
From: johanrd <johanroed@gmail.com>
Date: Fri, 3 Oct 2025 14:00:57 +0200
Subject: [PATCH 1/9] Add generic type parameters for improved type safety

Introduces OptionsType and CellArgs as generic parameters across the table
system to enable type-safe Cell component signatures and custom options in Glint.

- Add OptionsType and CellArgs generics to Table, Column, and related classes
- Split CellContext into CellConfigContext (optional fields) and CellContext (required fields)
- Export CellContext as part of the public API
- Update all internal usages to support the new generic parameters
---
 .../1-get-started/typescript-and-glint.md     | 78 +++++++++++++++++++
 table/src/-private/column.ts                  | 13 ++--
 table/src/-private/interfaces/column.ts       | 21 +++--
 table/src/-private/interfaces/table.ts        |  6 +-
 table/src/-private/js-helper.ts               | 22 +++---
 table/src/-private/table.ts                   | 19 ++---
 table/src/index.ts                            |  1 +
 table/src/plugins/-private/base.ts            | 36 ++++-----
 8 files changed, 143 insertions(+), 53 deletions(-)

diff --git a/docs-app/public/docs/1-get-started/typescript-and-glint.md b/docs-app/public/docs/1-get-started/typescript-and-glint.md
index 667c4045..75e19129 100644
--- a/docs-app/public/docs/1-get-started/typescript-and-glint.md
+++ b/docs-app/public/docs/1-get-started/typescript-and-glint.md
@@ -71,6 +71,84 @@ class Demo {
 }
 ```
 
+## Type-Safe Cell Components and Options
+
+The table library supports generic type parameters for strongly-typed Cell components and custom options. This enables full type inference in Glint templates and prevents common errors.
+
+### Basic Usage
+
+By default, all generic parameters are set to `any` for backward compatibility:
+
+```ts
+const table = headlessTable<MyDataType>(this, {
+  columns: () => [...],
+  data: () => myData
+});
+```
+
+### Advanced: Type-Safe Options
+
+To get type safety for custom options passed to cells:
+
+```ts
+import { headlessTable, type ColumnConfig, type CellContext } from '@universal-ember/table';
+
+interface MyData {
+  id: string;
+  name: string;
+}
+
+interface MyOptions {
+  highlightColor?: string;
+  showBadge?: boolean;
+}
+
+interface MyCellArgs extends CellContext<MyData, MyOptions> {
+  // Cell components receive data, column, row, and options
+}
+
+const table = headlessTable<MyData, MyOptions, MyCellArgs>(this, {
+  columns: () => [
+    {
+      key: 'name',
+      name: 'Name',
+      Cell: MyCustomCell, // fully typed!
+      options: ({ row }) => ({
+        highlightColor: row.data.id === 'special' ? 'blue' : 'gray',
+        showBadge: true,
+      }),
+    },
+  ],
+  data: () => myData,
+});
+```
+
+Your Cell component will now have full type inference:
+
+```ts
+import Component from '@glimmer/component';
+
+class MyCustomCell extends Component<MyCellArgs> {
+  get color() {
+    return this.args.options?.highlightColor ?? 'gray';
+  }
+
+  <template>
+    <span style="color: {{this.color}}">
+      {{@row.data.name}}
+      {{#if @options.showBadge}}<span class="badge">!</span>{{/if}}
+    </span>
+  </template>
+}
+```
+
+### CellContext Types
+
+The library provides two context types:
+
+- **`CellConfigContext<T, OptionsType>`**: Used when defining column configurations. Has optional fields (`column?`, `row?`, `options?`) for user convenience.
+- **`CellContext<T, OptionsType>`**: Used for Cell component signatures. Has required fields since they're always provided at runtime.
+
 ## In Templates
 
 [Glint][docs-glint] can be a great choice to help ensure that your code is as bug-free as possible.
diff --git a/table/src/-private/column.ts b/table/src/-private/column.ts
index 0025cfad..30c10294 100644
--- a/table/src/-private/column.ts
+++ b/table/src/-private/column.ts
@@ -4,7 +4,7 @@ import { isEmpty } from '@ember/utils';
 import type { Row } from './row';
 import type { Table } from './table';
 import type { ContentValue } from '@glint/template';
-import type { ColumnConfig } from './interfaces';
+import type { ColumnConfig, CellOptions, CellConfigContext } from './interfaces';
 
 const DEFAULT_VALUE = '--';
 const DEFAULT_VALUE_KEY = 'defaultValue';
@@ -12,7 +12,7 @@ const DEFAULT_OPTIONS = {
   [DEFAULT_VALUE_KEY]: DEFAULT_VALUE,
 };
 
-export class Column<T = unknown> {
+export class Column<T = unknown, OptionsType = any, CellArgs = any> {
   get Cell() {
     return this.config.Cell;
   }
@@ -27,7 +27,7 @@ export class Column<T = unknown> {
 
   constructor(
     public table: Table<T>,
-    public config: ColumnConfig<T>,
+    public config: ColumnConfig<T, OptionsType, CellArgs>,
   ) {}
 
   @action
@@ -52,16 +52,17 @@ export class Column<T = unknown> {
   }
 
   private getDefaultValue(row: Row<T>) {
-    return this.getOptionsForRow(row)[DEFAULT_VALUE_KEY];
+    const options = this.getOptionsForRow(row) as any;
+    return options[DEFAULT_VALUE_KEY];
   }
 
   @action
-  getOptionsForRow(row: Row<T>) {
+  getOptionsForRow(row?: Row<T>): OptionsType & CellOptions {
     const defaults = DEFAULT_OPTIONS;
 
     return {
       ...defaults,
       ...this.config.options?.({ column: this, row }),
-    };
+    } as OptionsType & CellOptions;
   }
 }
diff --git a/table/src/-private/interfaces/column.ts b/table/src/-private/interfaces/column.ts
index 7b893d0a..e863d9f3 100644
--- a/table/src/-private/interfaces/column.ts
+++ b/table/src/-private/interfaces/column.ts
@@ -5,9 +5,18 @@ import type { ColumnOptionsFor, SignatureFrom } from './plugins';
 import type { Constructor } from '../private-types';
 import type { ComponentLike, ContentValue } from '@glint/template';
 
-export interface CellContext<T> {
-  column: Column<T>;
+// Configuration context (for defining column options) - optional fields for user convenience
+export interface CellConfigContext<T, OptionsType = any> {
+  column?: Column<T, OptionsType>;
+  row?: Row<T>;
+  options?: OptionsType & CellOptions;
+}
+
+// Runtime context (for Cell components) - required fields since they're always provided
+export interface CellContext<T, OptionsType = any> {
+  column: Column<T, OptionsType>;
   row: Row<T>;
+  options?: OptionsType & CellOptions;
 }
 
 type ColumnPluginOption<P = Plugin> = P extends BasePlugin
@@ -21,7 +30,7 @@ export type CellOptions = {
   defaultValue?: string;
 } & Record<string, unknown>;
 
-export interface ColumnConfig<T = unknown> {
+export interface ColumnConfig<T = unknown, OptionsType = any, CellArgs = any> {
   /**
    * the `key` is required for preferences storage, as well as
    * managing uniqueness of the columns in an easy-to-understand way.
@@ -37,14 +46,14 @@ export interface ColumnConfig<T = unknown> {
   /**
    * Optionally provide a function to determine the value of a row at this column
    */
-  value?: (context: CellContext<T>) => ContentValue;
+  value?: (context: CellConfigContext<T>) => ContentValue;
 
   /**
    * Recommended property to use for custom components for each cell per column.
    * Out-of-the-box, this property isn't used, but the provided type may be
    * a convenience for consumers of the headless table
    */
-  Cell?: ComponentLike<CellContext<T>>;
+  Cell?: ComponentLike<CellArgs>;
 
   /**
    * The name or title of the column, shown in the column heading / th
@@ -54,7 +63,7 @@ export interface ColumnConfig<T = unknown> {
   /**
    * Bag of extra properties to pass to Cell via `@options`, if desired
    */
-  options?: (context: CellContext<T>) => CellOptions;
+  options?: (context: CellConfigContext<T>) => OptionsType;
 
   /**
    * Each plugin may provide column options, and provides similar syntax to how
diff --git a/table/src/-private/interfaces/table.ts b/table/src/-private/interfaces/table.ts
index 5e64859c..3c94b5f4 100644
--- a/table/src/-private/interfaces/table.ts
+++ b/table/src/-private/interfaces/table.ts
@@ -1,5 +1,5 @@
 import type { Plugins } from '../../plugins/-private/utils';
-import type { ColumnConfig } from './column';
+import type { ColumnConfig, CellOptions, CellContext } from './column';
 import type { Pagination } from './pagination';
 import type { PreferencesAdapter } from './preferences';
 import type { Selection } from './selection';
@@ -9,13 +9,13 @@ export interface TableMeta {
   totalRowsSelectedCount?: number;
 }
 
-export interface TableConfig<DataType> {
+export interface TableConfig<DataType, OptionsType = any, CellArgs = any> {
   /**
    * Configuration describing how the table will crawl through `data`
    * and render it. Within this `columns` config, there will also be opportunities
    * to set the behavior of columns when rendered
    */
-  columns: () => ColumnConfig<DataType>[];
+  columns: () => ColumnConfig<DataType, OptionsType, CellArgs>[];
   /**
    * The data to render, as described via the `columns` option.
    *
diff --git a/table/src/-private/js-helper.ts b/table/src/-private/js-helper.ts
index ebc3de96..421d2cc7 100644
--- a/table/src/-private/js-helper.ts
+++ b/table/src/-private/js-helper.ts
@@ -1,10 +1,10 @@
 import { Table } from './table.ts';
 
-import type { TableConfig } from './interfaces';
+import type { TableConfig, CellContext } from './interfaces';
 
-type Args<T> =
-  | [destroyable: object, options: TableConfig<T>]
-  | [options: TableConfig<T>];
+type Args<T, OptionsType = any, CellArgs = any> =
+  | [destroyable: object, options: TableConfig<T, OptionsType, CellArgs>]
+  | [options: TableConfig<T, OptionsType, CellArgs>];
 
 /**
  * Represents a UI-less version of a table
@@ -23,7 +23,7 @@ type Args<T> =
  * }
  * ```
  */
-export function headlessTable<T = unknown>(options: TableConfig<T>): Table<T>;
+export function headlessTable<T = unknown, OptionsType = any, CellArgs = any>(options: TableConfig<T, OptionsType, CellArgs>): Table<T, OptionsType, CellArgs>;
 
 /**
  * Represents a UI-less version of a table
@@ -42,12 +42,12 @@ export function headlessTable<T = unknown>(options: TableConfig<T>): Table<T>;
  * ```
  *
  */
-export function headlessTable<T = unknown>(
+export function headlessTable<T = unknown, OptionsType = any, CellArgs = any>(
   destroyable: object,
-  options: TableConfig<T>,
-): Table<T>;
+  options: TableConfig<T, OptionsType, CellArgs>,
+): Table<T, OptionsType, CellArgs>;
 
-export function headlessTable<T = unknown>(...args: Args<T>): Table<T> {
+export function headlessTable<T = unknown, OptionsType = any, CellArgs = any>(...args: Args<T, OptionsType, CellArgs>): Table<T, OptionsType, CellArgs> {
   if (args.length === 2) {
     const [destroyable, options] = args;
 
@@ -56,10 +56,10 @@ export function headlessTable<T = unknown>(...args: Args<T>): Table<T> {
      * otherwise individual-property reactivity can be managed on a per-property
      * "thunk"-basis
      */
-    return Table.from<Table<T>>(destroyable, () => options);
+    return Table.from<Table<T, OptionsType, CellArgs>>(destroyable, () => options);
   }
 
   const [options] = args;
 
-  return Table.from<Table<T>>(() => options);
+  return Table.from<Table<T, OptionsType, CellArgs>>(() => options);
 }
diff --git a/table/src/-private/table.ts b/table/src/-private/table.ts
index 34e6205d..e59afdd2 100644
--- a/table/src/-private/table.ts
+++ b/table/src/-private/table.ts
@@ -20,6 +20,7 @@ import { composeFunctionModifiers } from './utils.ts';
 import type { BasePlugin, Plugin } from '../plugins/index.ts';
 import type { Class } from './private-types.ts';
 import type { Destructor, TableConfig } from './interfaces';
+import type { CellOptions, CellContext } from './interfaces/column.ts';
 import { compatOwner } from './ember-compat.ts';
 
 const getOwner = compatOwner.getOwner;
@@ -30,8 +31,8 @@ const DEFAULT_COLUMN_CONFIG = {
   minWidth: 128,
 };
 
-interface Signature<DataType> {
-  Named: TableConfig<DataType>;
+interface Signature<DataType, OptionsType = any, CellArgs = any> {
+  Named: TableConfig<DataType, OptionsType>;
 }
 
 /**
@@ -54,7 +55,7 @@ const attachContainer = (element: Element, table: Table) => {
   table.scrollContainerElement = element;
 };
 
-export class Table<DataType = unknown> extends Resource<Signature<DataType>> {
+export class Table<DataType = unknown, OptionsType = any, CellArgs = any> extends Resource<Signature<DataType, OptionsType, CellArgs>> {
   /**
    * @private
    */
@@ -66,11 +67,11 @@ export class Table<DataType = unknown> extends Resource<Signature<DataType>> {
   /**
    * @private
    */
-  [COLUMN_META_KEY] = new WeakMap<Column, Map<Class<unknown>, any>>();
+  [COLUMN_META_KEY] = new WeakMap<Column<DataType, OptionsType, CellArgs>, Map<Class<unknown>, any>>();
   /**
    * @private
    */
-  [ROW_META_KEY] = new WeakMap<Row, Map<Class<unknown>, any>>();
+  [ROW_META_KEY] = new WeakMap<Row<DataType>, Map<Class<unknown>, any>>();
 
   /**
    * @private
@@ -110,7 +111,7 @@ export class Table<DataType = unknown> extends Resource<Signature<DataType>> {
   /**
    * @private
    */
-  modify(_: [] | undefined, named: Signature<DataType>['Named']) {
+  modify(_: [] | undefined, named: Signature<DataType, OptionsType, CellArgs>['Named']) {
     this.args = { named };
 
     // only set the preferences once
@@ -157,7 +158,7 @@ export class Table<DataType = unknown> extends Resource<Signature<DataType>> {
     //       With curried+composed modifiers, only the plugin's headerModifier
     //       that has tracked changes would run, leaving the other modifiers alone
     columnHeader: modifier(
-      (element: HTMLElement, [column]: [Column<DataType>]): Destructor => {
+      (element: HTMLElement, [column]: [Column<DataType, OptionsType, CellArgs>]): Destructor => {
         const modifiers = this.plugins.map(
           (plugin) => plugin.headerCellModifier,
         );
@@ -251,7 +252,7 @@ export class Table<DataType = unknown> extends Resource<Signature<DataType>> {
 
       return dataFn() ?? [];
     },
-    map: (datum) => new Row(this, datum),
+    map: (datum) => new Row<DataType>(this, datum),
   });
 
   columns = map(this, {
@@ -286,7 +287,7 @@ export class Table<DataType = unknown> extends Resource<Signature<DataType>> {
       return result;
     },
     map: (config) => {
-      return new Column<DataType>(this, {
+      return new Column<DataType, OptionsType, CellArgs>(this, {
         ...DEFAULT_COLUMN_CONFIG,
         ...config,
       });
diff --git a/table/src/index.ts b/table/src/index.ts
index e4182017..7c5ba470 100644
--- a/table/src/index.ts
+++ b/table/src/index.ts
@@ -12,6 +12,7 @@ export { deserializeSorts, serializeSorts } from './utils.ts';
  *******************************/
 export type { Column } from './-private/column.ts';
 export type {
+  CellContext,
   ColumnConfig,
   ColumnKey,
   Pagination,
diff --git a/table/src/plugins/-private/base.ts b/table/src/plugins/-private/base.ts
index 8d673a63..1765c787 100644
--- a/table/src/plugins/-private/base.ts
+++ b/table/src/plugins/-private/base.ts
@@ -296,10 +296,10 @@ export const preferences = {
  * This works recursively up the plugin tree up until a plugin has no requirements, and then
  * all columns from the table are returned.
  */
-function columnsFor<DataType = any>(
-  table: Table<DataType>,
+function columnsFor<DataType = any, OptionsType = any, CellArgs = any>(
+  table: Table<DataType, OptionsType, CellArgs>,
   requester?: Plugin<any>,
-): Column<DataType>[] {
+): Column<DataType, OptionsType, CellArgs>[] {
   assert(
     `First argument passed to columns.for must be an instance of Table`,
     table[TABLE_KEY],
@@ -417,10 +417,10 @@ export const columns = {
    * If a plugin class is provided, the hierarchy of column list modifications
    * will be respected.
    */
-  next: <Data = unknown>(
-    current: Column<Data>,
+  next: <Data = unknown, OptionsType = any>(
+    current: Column<Data, OptionsType>,
     requester?: Plugin<any>,
-  ): Column<Data> | undefined => {
+  ): Column<Data, OptionsType> | undefined => {
     const columns = requester
       ? columnsFor(current.table, requester)
       : columnsFor(current.table);
@@ -449,10 +449,10 @@ export const columns = {
    * If a plugin class is provided, the hierarchy of column list modifications
    * will be respected.
    */
-  previous: <Data = unknown>(
-    current: Column<Data>,
+  previous: <Data = unknown, OptionsType = any>(
+    current: Column<Data, OptionsType>,
     requester?: Plugin<any>,
-  ): Column<Data> | undefined => {
+  ): Column<Data, OptionsType> | undefined => {
     const columns = requester
       ? columnsFor(current.table, requester)
       : columnsFor(current.table);
@@ -479,10 +479,10 @@ export const columns = {
    * if a plugin class is provided, the hierarchy of column list modifications
    * will be respected.
    */
-  before: <Data = unknown>(
-    current: Column<Data>,
+  before: <Data = unknown, OptionsType = any>(
+    current: Column<Data, OptionsType>,
     requester?: Plugin<any>,
-  ): Column<Data>[] => {
+  ): Column<Data, OptionsType>[] => {
     const columns = requester
       ? columnsFor(current.table, requester)
       : columnsFor(current.table);
@@ -498,10 +498,10 @@ export const columns = {
    * if a plugin class is provided, the hierarchy of column list modifications
    * will be respected.
    */
-  after: <Data = unknown>(
-    current: Column<Data>,
+  after: <Data = unknown, OptionsType = any>(
+    current: Column<Data, OptionsType>,
     requester?: Plugin<any>,
-  ): Column<Data>[] => {
+  ): Column<Data, OptionsType>[] => {
     const columns = requester
       ? columnsFor(current.table, requester)
       : columnsFor(current.table);
@@ -767,7 +767,7 @@ function getPluginInstance<Instance>(
   factory: () => Instance,
 ): Instance;
 function getPluginInstance<RootKey extends Column<any> | Row<any>, Instance>(
-  map: WeakMap<Column | Row, Map<Class<Instance>, Instance>>,
+  map: WeakMap<Column<any> | Row<any>, Map<Class<Instance>, Instance>>,
   rootKey: RootKey,
   mapKey: Class<Instance>,
   factory: () => Instance,
@@ -776,13 +776,13 @@ function getPluginInstance<RootKey extends Column<any> | Row<any>, Instance>(
   ...args:
     | [FactoryMap<Instance>, Class<Instance>, () => Instance]
     | [
-        WeakMap<Column | Row, FactoryMap<Instance>>,
+        WeakMap<Column<any> | Row<any>, FactoryMap<Instance>>,
         RootKey,
         Class<Instance>,
         () => Instance,
       ]
 ): Instance {
-  let map: WeakMap<Column | Row, FactoryMap<Instance>> | FactoryMap<Instance>;
+  let map: WeakMap<Column<any> | Row<any>, FactoryMap<Instance>> | FactoryMap<Instance>;
   let mapKey: Class<Instance>;
   let rootKey: RootKey | undefined;
   let factory: () => Instance;

From cd4816bcda9633e9c15659759b67f882c4a16723 Mon Sep 17 00:00:00 2001
From: johanrd <johanroed@gmail.com>
Date: Thu, 6 Nov 2025 13:35:05 +0100
Subject: [PATCH 2/9] Add Generic DataType arg to columnOrder

---
 table/src/-private/column.ts                  |  6 +++++-
 table/src/-private/js-helper.ts               | 13 +++++++++---
 table/src/-private/table.ts                   | 21 +++++++++++++++----
 table/src/plugins/-private/base.ts            |  4 +++-
 .../src/plugins/column-reordering/helpers.ts  |  2 +-
 table/src/plugins/column-reordering/plugin.ts | 12 ++++++-----
 6 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/table/src/-private/column.ts b/table/src/-private/column.ts
index 10f89c4a..7b5cefc6 100644
--- a/table/src/-private/column.ts
+++ b/table/src/-private/column.ts
@@ -4,7 +4,11 @@ import { isEmpty } from '@ember/utils';
 import type { Row } from './row';
 import type { Table } from './table';
 import type { ContentValue } from '@glint/template';
-import type { ColumnConfig, CellOptions, CellConfigContext } from './interfaces';
+import type {
+  ColumnConfig,
+  CellOptions,
+  CellConfigContext,
+} from './interfaces';
 
 const DEFAULT_VALUE = '--';
 const DEFAULT_VALUE_KEY = 'defaultValue';
diff --git a/table/src/-private/js-helper.ts b/table/src/-private/js-helper.ts
index 421d2cc7..5a2de28c 100644
--- a/table/src/-private/js-helper.ts
+++ b/table/src/-private/js-helper.ts
@@ -23,7 +23,9 @@ type Args<T, OptionsType = any, CellArgs = any> =
  * }
  * ```
  */
-export function headlessTable<T = unknown, OptionsType = any, CellArgs = any>(options: TableConfig<T, OptionsType, CellArgs>): Table<T, OptionsType, CellArgs>;
+export function headlessTable<T = unknown, OptionsType = any, CellArgs = any>(
+  options: TableConfig<T, OptionsType, CellArgs>,
+): Table<T, OptionsType, CellArgs>;
 
 /**
  * Represents a UI-less version of a table
@@ -47,7 +49,9 @@ export function headlessTable<T = unknown, OptionsType = any, CellArgs = any>(
   options: TableConfig<T, OptionsType, CellArgs>,
 ): Table<T, OptionsType, CellArgs>;
 
-export function headlessTable<T = unknown, OptionsType = any, CellArgs = any>(...args: Args<T, OptionsType, CellArgs>): Table<T, OptionsType, CellArgs> {
+export function headlessTable<T = unknown, OptionsType = any, CellArgs = any>(
+  ...args: Args<T, OptionsType, CellArgs>
+): Table<T, OptionsType, CellArgs> {
   if (args.length === 2) {
     const [destroyable, options] = args;
 
@@ -56,7 +60,10 @@ export function headlessTable<T = unknown, OptionsType = any, CellArgs = any>(..
      * otherwise individual-property reactivity can be managed on a per-property
      * "thunk"-basis
      */
-    return Table.from<Table<T, OptionsType, CellArgs>>(destroyable, () => options);
+    return Table.from<Table<T, OptionsType, CellArgs>>(
+      destroyable,
+      () => options,
+    );
   }
 
   const [options] = args;
diff --git a/table/src/-private/table.ts b/table/src/-private/table.ts
index e59afdd2..d0f9215b 100644
--- a/table/src/-private/table.ts
+++ b/table/src/-private/table.ts
@@ -55,7 +55,11 @@ const attachContainer = (element: Element, table: Table) => {
   table.scrollContainerElement = element;
 };
 
-export class Table<DataType = unknown, OptionsType = any, CellArgs = any> extends Resource<Signature<DataType, OptionsType, CellArgs>> {
+export class Table<
+  DataType = unknown,
+  OptionsType = any,
+  CellArgs = any,
+> extends Resource<Signature<DataType, OptionsType, CellArgs>> {
   /**
    * @private
    */
@@ -67,7 +71,10 @@ export class Table<DataType = unknown, OptionsType = any, CellArgs = any> extend
   /**
    * @private
    */
-  [COLUMN_META_KEY] = new WeakMap<Column<DataType, OptionsType, CellArgs>, Map<Class<unknown>, any>>();
+  [COLUMN_META_KEY] = new WeakMap<
+    Column<DataType, OptionsType, CellArgs>,
+    Map<Class<unknown>, any>
+  >();
   /**
    * @private
    */
@@ -111,7 +118,10 @@ export class Table<DataType = unknown, OptionsType = any, CellArgs = any> extend
   /**
    * @private
    */
-  modify(_: [] | undefined, named: Signature<DataType, OptionsType, CellArgs>['Named']) {
+  modify(
+    _: [] | undefined,
+    named: Signature<DataType, OptionsType, CellArgs>['Named'],
+  ) {
     this.args = { named };
 
     // only set the preferences once
@@ -158,7 +168,10 @@ export class Table<DataType = unknown, OptionsType = any, CellArgs = any> extend
     //       With curried+composed modifiers, only the plugin's headerModifier
     //       that has tracked changes would run, leaving the other modifiers alone
     columnHeader: modifier(
-      (element: HTMLElement, [column]: [Column<DataType, OptionsType, CellArgs>]): Destructor => {
+      (
+        element: HTMLElement,
+        [column]: [Column<DataType, OptionsType, CellArgs>],
+      ): Destructor => {
         const modifiers = this.plugins.map(
           (plugin) => plugin.headerCellModifier,
         );
diff --git a/table/src/plugins/-private/base.ts b/table/src/plugins/-private/base.ts
index 1765c787..73e6f258 100644
--- a/table/src/plugins/-private/base.ts
+++ b/table/src/plugins/-private/base.ts
@@ -782,7 +782,9 @@ function getPluginInstance<RootKey extends Column<any> | Row<any>, Instance>(
         () => Instance,
       ]
 ): Instance {
-  let map: WeakMap<Column<any> | Row<any>, FactoryMap<Instance>> | FactoryMap<Instance>;
+  let map:
+    | WeakMap<Column<any> | Row<any>, FactoryMap<Instance>>
+    | FactoryMap<Instance>;
   let mapKey: Class<Instance>;
   let rootKey: RootKey | undefined;
   let factory: () => Instance;
diff --git a/table/src/plugins/column-reordering/helpers.ts b/table/src/plugins/column-reordering/helpers.ts
index 1d5990c7..5673f3c0 100644
--- a/table/src/plugins/column-reordering/helpers.ts
+++ b/table/src/plugins/column-reordering/helpers.ts
@@ -23,7 +23,7 @@ export const moveRight = <DataType = unknown>(column: Column<DataType>) =>
  */
 export const setColumnOrder = <DataType = unknown>(
   table: Table<DataType>,
-  order: ColumnOrder,
+  order: ColumnOrder<DataType>,
 ) => meta.forTable(table, ColumnReordering).setOrder(order);
 
 /**
diff --git a/table/src/plugins/column-reordering/plugin.ts b/table/src/plugins/column-reordering/plugin.ts
index 7a72fcba..3462eda6 100644
--- a/table/src/plugins/column-reordering/plugin.ts
+++ b/table/src/plugins/column-reordering/plugin.ts
@@ -217,7 +217,7 @@ export class TableMeta {
  * @private
  * Used for keeping track of and updating column order
  */
-export class ColumnOrder {
+export class ColumnOrder<DataType = unknown> {
   /**
    * This map will be empty until we re-order something.
    */
@@ -237,7 +237,7 @@ export class ColumnOrder {
        * - Provide `visibleColumns` to indicate which are visible
        * - Hidden columns maintain their position when toggled
        */
-      columns: () => Column[];
+      columns: () => Column<DataType>[];
       /**
        * Optional: Record of which columns are currently visible.
        * When provided, moveLeft/moveRight will skip over hidden columns.
@@ -496,18 +496,20 @@ export class ColumnOrder {
   }
 
   @cached
-  get orderedColumns(): Column[] {
+  get orderedColumns(): Column<DataType>[] {
     const allColumns = this.args.columns();
     const columnsByKey = allColumns.reduce(
       (keyMap, column) => {
         keyMap[column.key] = column;
         return keyMap;
       },
-      {} as Record<string, Column>,
+      {} as Record<string, Column<DataType>>,
     );
     const mergedOrder = orderOf(allColumns, this.map);
 
-    const result: Column[] = Array.from({ length: allColumns.length });
+    const result: Column<DataType>[] = Array.from({
+      length: allColumns.length,
+    });
 
     for (const [key, position] of mergedOrder.entries()) {
       const column = columnsByKey[key];

From 46a70c74bc417b7a30487313cd6e5443f4f73ea4 Mon Sep 17 00:00:00 2001
From: johanrd <johanroed@gmail.com>
Date: Thu, 6 Nov 2025 13:41:21 +0100
Subject: [PATCH 3/9] lint

---
 .../docs/1-get-started/typescript-and-glint.md       | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/docs-app/public/docs/1-get-started/typescript-and-glint.md b/docs-app/public/docs/1-get-started/typescript-and-glint.md
index 75e19129..98272e19 100644
--- a/docs-app/public/docs/1-get-started/typescript-and-glint.md
+++ b/docs-app/public/docs/1-get-started/typescript-and-glint.md
@@ -91,7 +91,11 @@ const table = headlessTable<MyDataType>(this, {
 To get type safety for custom options passed to cells:
 
 ```ts
-import { headlessTable, type ColumnConfig, type CellContext } from '@universal-ember/table';
+import {
+  headlessTable,
+  type ColumnConfig,
+  type CellContext,
+} from "@universal-ember/table";
 
 interface MyData {
   id: string;
@@ -110,11 +114,11 @@ interface MyCellArgs extends CellContext<MyData, MyOptions> {
 const table = headlessTable<MyData, MyOptions, MyCellArgs>(this, {
   columns: () => [
     {
-      key: 'name',
-      name: 'Name',
+      key: "name",
+      name: "Name",
       Cell: MyCustomCell, // fully typed!
       options: ({ row }) => ({
-        highlightColor: row.data.id === 'special' ? 'blue' : 'gray',
+        highlightColor: row.data.id === "special" ? "blue" : "gray",
         showBadge: true,
       }),
     },

From dbea52c848bb6bf1dd4ac726a2a0b3a7780f2509 Mon Sep 17 00:00:00 2001
From: johanrd <johanroed@gmail.com>
Date: Thu, 6 Nov 2025 14:11:01 +0100
Subject: [PATCH 4/9] correctly pass through in column-resizing and have =
 unknown as fallback in CellConfigContext

---
 table/src/-private/interfaces/column.ts          | 6 +++---
 test-app/tests/plugins/column-resizing/utils.gts | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/table/src/-private/interfaces/column.ts b/table/src/-private/interfaces/column.ts
index e863d9f3..0b79f205 100644
--- a/table/src/-private/interfaces/column.ts
+++ b/table/src/-private/interfaces/column.ts
@@ -6,7 +6,7 @@ import type { Constructor } from '../private-types';
 import type { ComponentLike, ContentValue } from '@glint/template';
 
 // Configuration context (for defining column options) - optional fields for user convenience
-export interface CellConfigContext<T, OptionsType = any> {
+export interface CellConfigContext<T = unknown, OptionsType = any> {
   column?: Column<T, OptionsType>;
   row?: Row<T>;
   options?: OptionsType & CellOptions;
@@ -46,7 +46,7 @@ export interface ColumnConfig<T = unknown, OptionsType = any, CellArgs = any> {
   /**
    * Optionally provide a function to determine the value of a row at this column
    */
-  value?: (context: CellConfigContext<T>) => ContentValue;
+  value?(context: CellConfigContext<T>): ContentValue;
 
   /**
    * Recommended property to use for custom components for each cell per column.
@@ -63,7 +63,7 @@ export interface ColumnConfig<T = unknown, OptionsType = any, CellArgs = any> {
   /**
    * Bag of extra properties to pass to Cell via `@options`, if desired
    */
-  options?: (context: CellConfigContext<T>) => OptionsType;
+  options?(context: CellConfigContext<T>): OptionsType;
 
   /**
    * Each plugin may provide column options, and provides similar syntax to how
diff --git a/test-app/tests/plugins/column-resizing/utils.gts b/test-app/tests/plugins/column-resizing/utils.gts
index ab743863..f682e837 100644
--- a/test-app/tests/plugins/column-resizing/utils.gts
+++ b/test-app/tests/plugins/column-resizing/utils.gts
@@ -51,10 +51,10 @@ export const getColumns = () => {
   return ths;
 };
 
-export class Context {
+export class Context<DataType = unknown> {
   @tracked containerWidth = 1000;
 
-  columns: ColumnConfig[] = [
+  columns: ColumnConfig<DataType>[] = [
     { name: "A", key: "A" },
     { name: "B", key: "B" },
     { name: "C", key: "C" },
@@ -66,9 +66,9 @@ export class Context {
     await new Promise((resolve) => requestAnimationFrame(resolve));
   };
 
-  table = headlessTable(this, {
+  table = headlessTable<DataType>(this, {
     columns: () => this.columns,
-    data: () => [] as unknown[],
+    data: () => [] as DataType[],
     plugins: [ColumnResizing],
   });
 }

From 623933b541b3e3e853fa3014fde1eb53ba985387 Mon Sep 17 00:00:00 2001
From: johanrd <johanroed@gmail.com>
Date: Thu, 6 Nov 2025 15:26:25 +0100
Subject: [PATCH 5/9] revert test

---
 test-app/tests/plugins/column-resizing/utils.gts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/test-app/tests/plugins/column-resizing/utils.gts b/test-app/tests/plugins/column-resizing/utils.gts
index f682e837..ab743863 100644
--- a/test-app/tests/plugins/column-resizing/utils.gts
+++ b/test-app/tests/plugins/column-resizing/utils.gts
@@ -51,10 +51,10 @@ export const getColumns = () => {
   return ths;
 };
 
-export class Context<DataType = unknown> {
+export class Context {
   @tracked containerWidth = 1000;
 
-  columns: ColumnConfig<DataType>[] = [
+  columns: ColumnConfig[] = [
     { name: "A", key: "A" },
     { name: "B", key: "B" },
     { name: "C", key: "C" },
@@ -66,9 +66,9 @@ export class Context<DataType = unknown> {
     await new Promise((resolve) => requestAnimationFrame(resolve));
   };
 
-  table = headlessTable<DataType>(this, {
+  table = headlessTable(this, {
     columns: () => this.columns,
-    data: () => [] as DataType[],
+    data: () => [] as unknown[],
     plugins: [ColumnResizing],
   });
 }

From f0cffc7978f59d131ec40ce781f08dd5dc426e15 Mon Sep 17 00:00:00 2001
From: johanrd <johanroed@gmail.com>
Date: Thu, 6 Nov 2025 15:44:22 +0100
Subject: [PATCH 6/9] simplify

---
 table/src/plugins/column-reordering/helpers.ts |  2 +-
 table/src/plugins/column-reordering/plugin.ts  | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/table/src/plugins/column-reordering/helpers.ts b/table/src/plugins/column-reordering/helpers.ts
index 5673f3c0..1d5990c7 100644
--- a/table/src/plugins/column-reordering/helpers.ts
+++ b/table/src/plugins/column-reordering/helpers.ts
@@ -23,7 +23,7 @@ export const moveRight = <DataType = unknown>(column: Column<DataType>) =>
  */
 export const setColumnOrder = <DataType = unknown>(
   table: Table<DataType>,
-  order: ColumnOrder<DataType>,
+  order: ColumnOrder,
 ) => meta.forTable(table, ColumnReordering).setOrder(order);
 
 /**
diff --git a/table/src/plugins/column-reordering/plugin.ts b/table/src/plugins/column-reordering/plugin.ts
index 3462eda6..9933e660 100644
--- a/table/src/plugins/column-reordering/plugin.ts
+++ b/table/src/plugins/column-reordering/plugin.ts
@@ -124,7 +124,7 @@ export class TableMeta {
    * Get the curret order/position of a column
    */
   @action
-  getPosition<DataType = unknown>(column: Column<DataType>) {
+  getPosition<DataType = unknown>(column: Column) {
     return this.columnOrder.get(column.key);
   }
 
@@ -133,7 +133,7 @@ export class TableMeta {
    */
   @action
   setPosition<DataType = unknown>(
-    column: Column<DataType>,
+    column: Column,
     newPosition: number,
   ) {
     return this.columnOrder.swapWith(column.key, newPosition);
@@ -217,7 +217,7 @@ export class TableMeta {
  * @private
  * Used for keeping track of and updating column order
  */
-export class ColumnOrder<DataType = unknown> {
+export class ColumnOrder {
   /**
    * This map will be empty until we re-order something.
    */
@@ -237,7 +237,7 @@ export class ColumnOrder<DataType = unknown> {
        * - Provide `visibleColumns` to indicate which are visible
        * - Hidden columns maintain their position when toggled
        */
-      columns: () => Column<DataType>[];
+      columns: () => Column[];
       /**
        * Optional: Record of which columns are currently visible.
        * When provided, moveLeft/moveRight will skip over hidden columns.
@@ -496,18 +496,18 @@ export class ColumnOrder<DataType = unknown> {
   }
 
   @cached
-  get orderedColumns(): Column<DataType>[] {
+  get orderedColumns(): Column[] {
     const allColumns = this.args.columns();
     const columnsByKey = allColumns.reduce(
       (keyMap, column) => {
         keyMap[column.key] = column;
         return keyMap;
       },
-      {} as Record<string, Column<DataType>>,
+      {} as Record<string, Column>,
     );
     const mergedOrder = orderOf(allColumns, this.map);
 
-    const result: Column<DataType>[] = Array.from({
+    const result: Column[] = Array.from({
       length: allColumns.length,
     });
 

From 31a9c299da39f322cb011e05d0710e79dc53acfe Mon Sep 17 00:00:00 2001
From: johanrd <johanroed@gmail.com>
Date: Thu, 6 Nov 2025 15:52:58 +0100
Subject: [PATCH 7/9] lint

---
 table/src/plugins/column-reordering/plugin.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/table/src/plugins/column-reordering/plugin.ts b/table/src/plugins/column-reordering/plugin.ts
index 9933e660..7fb7ebdd 100644
--- a/table/src/plugins/column-reordering/plugin.ts
+++ b/table/src/plugins/column-reordering/plugin.ts
@@ -132,10 +132,7 @@ export class TableMeta {
    * Swap the column with the column at `newPosition`
    */
   @action
-  setPosition<DataType = unknown>(
-    column: Column,
-    newPosition: number,
-  ) {
+  setPosition<DataType = unknown>(column: Column, newPosition: number) {
     return this.columnOrder.swapWith(column.key, newPosition);
   }
 

From 513040f9394037eaeb3561d57a592321c9464af6 Mon Sep 17 00:00:00 2001
From: johanrd <johanroed@gmail.com>
Date: Thu, 6 Nov 2025 16:06:56 +0100
Subject: [PATCH 8/9] d

---
 table/src/-private/js-helper.ts | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/table/src/-private/js-helper.ts b/table/src/-private/js-helper.ts
index 5a2de28c..03f9db67 100644
--- a/table/src/-private/js-helper.ts
+++ b/table/src/-private/js-helper.ts
@@ -2,9 +2,9 @@ import { Table } from './table.ts';
 
 import type { TableConfig, CellContext } from './interfaces';
 
-type Args<T, OptionsType = any, CellArgs = any> =
-  | [destroyable: object, options: TableConfig<T, OptionsType, CellArgs>]
-  | [options: TableConfig<T, OptionsType, CellArgs>];
+type Args<DataType, OptionsType = any, CellArgs = any> =
+  | [destroyable: object, options: TableConfig<DataType, OptionsType, CellArgs>]
+  | [options: TableConfig<DataType, OptionsType, CellArgs>];
 
 /**
  * Represents a UI-less version of a table
@@ -23,9 +23,9 @@ type Args<T, OptionsType = any, CellArgs = any> =
  * }
  * ```
  */
-export function headlessTable<T = unknown, OptionsType = any, CellArgs = any>(
-  options: TableConfig<T, OptionsType, CellArgs>,
-): Table<T, OptionsType, CellArgs>;
+export function headlessTable<DataType = unknown, OptionsType = any, CellArgs = any>(
+  options: TableConfig<DataType, OptionsType, CellArgs>,
+): Table<DataType, OptionsType, CellArgs>;
 
 /**
  * Represents a UI-less version of a table
@@ -44,14 +44,14 @@ export function headlessTable<T = unknown, OptionsType = any, CellArgs = any>(
  * ```
  *
  */
-export function headlessTable<T = unknown, OptionsType = any, CellArgs = any>(
+export function headlessTable<DataType = unknown, OptionsType = any, CellArgs = any>(
   destroyable: object,
-  options: TableConfig<T, OptionsType, CellArgs>,
-): Table<T, OptionsType, CellArgs>;
+  options: TableConfig<DataType, OptionsType, CellArgs>,
+): Table<DataType, OptionsType, CellArgs>;
 
-export function headlessTable<T = unknown, OptionsType = any, CellArgs = any>(
-  ...args: Args<T, OptionsType, CellArgs>
-): Table<T, OptionsType, CellArgs> {
+export function headlessTable<DataType = unknown, OptionsType = any, CellArgs = any>(
+  ...args: Args<DataType, OptionsType, CellArgs>
+): Table<DataType, OptionsType, CellArgs> {
   if (args.length === 2) {
     const [destroyable, options] = args;
 
@@ -60,7 +60,7 @@ export function headlessTable<T = unknown, OptionsType = any, CellArgs = any>(
      * otherwise individual-property reactivity can be managed on a per-property
      * "thunk"-basis
      */
-    return Table.from<Table<T, OptionsType, CellArgs>>(
+    return Table.from<Table<DataType, OptionsType, CellArgs>>(
       destroyable,
       () => options,
     );
@@ -68,5 +68,5 @@ export function headlessTable<T = unknown, OptionsType = any, CellArgs = any>(
 
   const [options] = args;
 
-  return Table.from<Table<T, OptionsType, CellArgs>>(() => options);
+  return Table.from<Table<DataType, OptionsType, CellArgs>>(() => options);
 }

From f40ba751bb1a15870b1e91dae2170a461d699521 Mon Sep 17 00:00:00 2001
From: johanrd <johanroed@gmail.com>
Date: Thu, 6 Nov 2025 18:02:27 +0100
Subject: [PATCH 9/9] consistent naming

---
 table/src/-private/interfaces/column.ts       | 24 +++++++++++--------
 table/src/plugins/column-visibility/plugin.ts | 12 +++++-----
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/table/src/-private/interfaces/column.ts b/table/src/-private/interfaces/column.ts
index 0b79f205..6da940ae 100644
--- a/table/src/-private/interfaces/column.ts
+++ b/table/src/-private/interfaces/column.ts
@@ -6,16 +6,16 @@ import type { Constructor } from '../private-types';
 import type { ComponentLike, ContentValue } from '@glint/template';
 
 // Configuration context (for defining column options) - optional fields for user convenience
-export interface CellConfigContext<T = unknown, OptionsType = any> {
-  column?: Column<T, OptionsType>;
-  row?: Row<T>;
+export interface CellConfigContext<DataType = unknown, OptionsType = unknown> {
+  column?: Column<DataType, OptionsType>;
+  row?: Row<DataType>;
   options?: OptionsType & CellOptions;
 }
 
 // Runtime context (for Cell components) - required fields since they're always provided
-export interface CellContext<T, OptionsType = any> {
-  column: Column<T, OptionsType>;
-  row: Row<T>;
+export interface CellContext<DataType, OptionsType = unknown> {
+  column: Column<DataType, OptionsType>;
+  row: Row<DataType>;
   options?: OptionsType & CellOptions;
 }
 
@@ -30,7 +30,11 @@ export type CellOptions = {
   defaultValue?: string;
 } & Record<string, unknown>;
 
-export interface ColumnConfig<T = unknown, OptionsType = any, CellArgs = any> {
+export interface ColumnConfig<
+  DataType = unknown,
+  OptionsType = unknown,
+  CellArgs = unknown,
+> {
   /**
    * the `key` is required for preferences storage, as well as
    * managing uniqueness of the columns in an easy-to-understand way.
@@ -46,7 +50,7 @@ export interface ColumnConfig<T = unknown, OptionsType = any, CellArgs = any> {
   /**
    * Optionally provide a function to determine the value of a row at this column
    */
-  value?(context: CellConfigContext<T>): ContentValue;
+  value?(context: CellConfigContext<DataType>): ContentValue;
 
   /**
    * Recommended property to use for custom components for each cell per column.
@@ -63,7 +67,7 @@ export interface ColumnConfig<T = unknown, OptionsType = any, CellArgs = any> {
   /**
    * Bag of extra properties to pass to Cell via `@options`, if desired
    */
-  options?(context: CellConfigContext<T>): OptionsType;
+  options?(context: CellConfigContext<DataType>): OptionsType;
 
   /**
    * Each plugin may provide column options, and provides similar syntax to how
@@ -79,4 +83,4 @@ export interface ColumnConfig<T = unknown, OptionsType = any, CellArgs = any> {
   pluginOptions?: ColumnPluginOption[];
 }
 
-export type ColumnKey<T> = NonNullable<ColumnConfig<T>['key']>;
+export type ColumnKey<DataType> = NonNullable<ColumnConfig<DataType>['key']>;
diff --git a/table/src/plugins/column-visibility/plugin.ts b/table/src/plugins/column-visibility/plugin.ts
index b8f3c37a..531effae 100644
--- a/table/src/plugins/column-visibility/plugin.ts
+++ b/table/src/plugins/column-visibility/plugin.ts
@@ -64,8 +64,8 @@ export class ColumnVisibility
   }
 }
 
-export class ColumnMeta<Data = unknown> {
-  constructor(private column: Column<Data>) {}
+export class ColumnMeta<DataType = unknown> {
+  constructor(private column: Column<DataType>) {}
 
   get isVisible(): boolean {
     const columnPreferences = preferences.forColumn(
@@ -132,11 +132,11 @@ export class ColumnMeta<Data = unknown> {
   };
 }
 
-export class TableMeta<Data = unknown> {
-  constructor(private table: Table<Data>) {}
+export class TableMeta<DataType = unknown> {
+  constructor(private table: Table<DataType>) {}
 
   @cached
-  get visibleColumns(): Column<Data>[] {
+  get visibleColumns(): Column<DataType>[] {
     const allColumns = this.table.columns.values();
 
     return allColumns.filter((column) => {
@@ -147,7 +147,7 @@ export class TableMeta<Data = unknown> {
   }
 
   @action
-  toggleColumnVisibility(column: Column<Data>) {
+  toggleColumnVisibility(column: Column<DataType>) {
     const columnMeta = meta.forColumn(column, ColumnVisibility);
 
     columnMeta.toggle();