Simple column resizing setting with tableLayout: 'fixed'

docs-app/public/docs/2-plugins/column-resizing.md

@@ -151,6 +151,130 @@ table = headlessTable(this, {
 
 See the API Documentation [here][api-docs] for the full list of options and descriptions.
 
+#### Fixed table layout
+
+With fixed table layout you can set `tableLayout: fixed` for a simpler calculation of column widths where the resize handle only resizes the column that is being resized.
+
+```js
+table = headlessTable(this, {
+  columns: () => [
+    /* ... */
+  ],
+  plugins: [ColumnResizing.with(() => ({ tableLayout: "fixed" }))],
+});
+```
+
+<div class="featured-demo" data-demo-fit data-demo-tight>
+
+```gjs live preview no-shadow
+import Component from "@glimmer/component";
+import { htmlSafe } from "@ember/template";
+
+import { headlessTable } from "@universal-ember/table";
+import { meta } from "@universal-ember/table/plugins";
+import { ColumnVisibility } from "@universal-ember/table/plugins/column-visibility";
+import { ColumnReordering } from "@universal-ember/table/plugins/column-reordering";
+import {
+  ColumnResizing,
+  resizeHandle,
+  isResizing,
+} from "@universal-ember/table/plugins/column-resizing";
+
+import { DATA } from "#sample-data";
+
+export default class extends Component {
+  table = headlessTable(this, {
+    columns: () => [
+      {
+        name: "column A",
+        key: "A",
+        pluginOptions: [ColumnResizing.forColumn(() => ({ minWidth: 128 }))],
+      },
+      {
+        name: "column B",
+        key: "B",
+        pluginOptions: [ColumnResizing.forColumn(() => ({ minWidth: 128 }))],
+      },
+      {
+        name: "column C",
+        key: "C",
+        pluginOptions: [ColumnResizing.forColumn(() => ({ minWidth: 128 }))],
+      },
+      {
+        name: "column D",
+        key: "D",
+        pluginOptions: [ColumnResizing.forColumn(() => ({ minWidth: 128 }))],
+      },
+      {
+        name: "column E",
+        key: "E",
+        pluginOptions: [ColumnResizing.forColumn(() => ({ minWidth: 128 }))],
+      },
+      {
+        name: "column F",
+        key: "F",
+        pluginOptions: [ColumnResizing.forColumn(() => ({ minWidth: 128 }))],
+      },
+    ],
+    data: () => DATA,
+    plugins: [
+      ColumnResizing.with(() => ({
+        handlePosition: "right",
+        tableLayout: "fixed",
+      })),
+    ],
+  });
+
+  get resizeHeight() {
+    return htmlSafe(`${this.table.scrollContainerElement.clientHeight - 32}px`);
+  }
+
+  <template>
+    <div class="h-full overflow-auto" {{this.table.modifiers.container}}>
+      <table class="table-fixed">
+        <thead>
+          <tr>
+            {{#each this.table.columns as |column|}}
+              <th
+                {{this.table.modifiers.columnHeader column}}
+                class="relative group"
+              >
+                <span class="name">{{column.name}}</span><br />
+                <button
+                  {{resizeHandle column}}
+                  class="z-10 reset-styles absolute right-4 top-0 cursor-col-resize focusable group-first:hidden"
+                >
+                  ↔
+                </button>
+                {{#if (isResizing column)}}
+                  <div
+                    class="absolute right-3 top-0 bg-focus w-0.5 transition duration-150"
+                    style="height: {{this.resizeHeight}}"
+                  ></div>
+                {{/if}}
+              </th>
+            {{/each}}
+          </tr>
+        </thead>
+        <tbody>
+          {{#each this.table.rows as |row|}}
+            <tr>
+              {{#each this.table.columns as |column|}}
+                <td>
+                  {{column.getValueForRow row}}
+                </td>
+              {{/each}}
+            </tr>
+          {{/each}}
+        </tbody>
+      </table>
+    </div>
+  </template>
+}
+```
+
+</div>
+
 ### Preferences
 
 The width will be stored in preferences, per column.

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

@@ -67,6 +67,19 @@ export interface TableOptions {
    * Valid values are 'left' or 'right'
    */
   handlePosition?: string;
+
+  /**
+   * Specify the table layout strategy for column resizing.
+   *
+   * - 'auto': Uses complex redistribution logic where resizing one column
+   *   affects neighboring columns (default, preserves existing behavior)
+   * - 'fixed': Simple per-column resizing suitable for CSS table-layout: fixed
+   *
+   * Valid values are 'auto' or 'fixed'
+   *
+   * default: 'auto'
+   */
+  tableLayout?: string;
 }
 
 interface Signature {
@@ -378,6 +391,39 @@ export class TableMeta {
   resizeColumn<DataType = unknown>(column: Column<DataType>, delta: number) {
     if (delta === 0) return;
 
+    const tableLayout = this.options?.tableLayout ?? 'auto';
+
+    if (tableLayout === 'fixed') {
+      this.#resizeColumnFixed(column, delta);
+    } else {
+      this.#resizeColumnAuto(column, delta);
+    }
+  }
+
+  /**
+   * Simple column resizing for table-layout: fixed
+   * Only affects the target column and respects minimum width
+   */
+  #resizeColumnFixed<DataType = unknown>(
+    column: Column<DataType>,
+    delta: number,
+  ) {
+    const columnMeta = meta.forColumn(column, ColumnResizing);
+    const newWidth = columnMeta.width + delta;
+
+    if (newWidth >= columnMeta.minWidth) {
+      columnMeta.width = newWidth;
+    }
+  }
+
+  /**
+   * Complex column resizing with redistribution logic
+   * Preserves existing behavior for table-layout: auto
+   */
+  #resizeColumnAuto<DataType = unknown>(
+    column: Column<DataType>,
+    delta: number,
+  ) {
     /**
      * When the delta is negative, we are dragging to the next
      * when positive, we are dragging to the right

test-app/tests/plugins/column-resizing/fixed-layout-test.gts

@@ -0,0 +1,101 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { htmlSafe } from "@ember/template";
+import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+import { setOwner } from "@ember/owner";
+
+import { headlessTable, type ColumnConfig } from "@universal-ember/table";
+import {
+  ColumnResizing,
+  resizeHandle,
+} from "@universal-ember/table/plugins/column-resizing";
+import { createHelpers } from "@universal-ember/table/test-support";
+
+import { TestStyles, getColumns, assertChanges, width } from "./utils.gts";
+
+module("Plugins | resizing | fixed layout", function (hooks) {
+  setupRenderingTest(hooks);
+
+  let ctx: Context;
+  let { dragLeft, dragRight } = createHelpers({
+    resizeHandle: "[data-handle]",
+  });
+
+  hooks.beforeEach(function () {
+    ctx = new Context();
+    setOwner(ctx, this.owner);
+  });
+
+  class Context {
+    @tracked containerWidth = 1000;
+
+    columns: ColumnConfig[] = [
+      {
+        name: "A",
+        key: "A",
+        pluginOptions: [ColumnResizing.forColumn(() => ({ minWidth: 128 }))],
+      },
+      {
+        name: "B",
+        key: "B",
+        pluginOptions: [ColumnResizing.forColumn(() => ({ minWidth: 128 }))],
+      },
+      {
+        name: "C",
+        key: "C",
+        pluginOptions: [ColumnResizing.forColumn(() => ({ minWidth: 128 }))],
+      },
+      {
+        name: "D",
+        key: "D",
+        pluginOptions: [ColumnResizing.forColumn(() => ({ minWidth: 128 }))],
+      },
+    ];
+
+    table = headlessTable(this, {
+      columns: () => this.columns,
+      data: () => [] as unknown[],
+      plugins: [ColumnResizing.with(() => ({ tableLayout: "fixed" }))],
+    });
+  }
+
+  class FixedLayoutTestComponent extends Component<{ ctx: Context }> {
+    get table() {
+      return this.args.ctx.table;
+    }
+
+    get modifiers() {
+      return this.table.modifiers;
+    }
+
+    get testContainerStyle() {
+      return htmlSafe(`width: ${this.args.ctx.containerWidth}px`);
+    }
+
+    <template>
+      <TestStyles />
+      <div data-container style={{this.testContainerStyle}}>
+        <div data-scroll-container {{this.modifiers.container}}>
+          <table style="table-layout: fixed;">
+            <thead>
+              <tr>
+                {{#each this.table.columns as |column|}}
+                  <th {{this.modifiers.columnHeader column}}>
+                    <span>{{column.name}}</span>
+                    <div
+                      data-handle
+                      {{resizeHandle column}}
+                      type="button"
+                    >|</div>
+                  </th>
+                {{/each}}
+              </tr>
+            </thead>
+          </table>
+        </div>
+      </div>
+    </template>
+  }
+});