diff --git a/docs-app/public/docs/2-plugins/column-resizing.md b/docs-app/public/docs/2-plugins/column-resizing.md
index c3d5f724..976d6469 100644
--- a/docs-app/public/docs/2-plugins/column-resizing.md
+++ b/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" }))],
+});
+```
+
+
+
+```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`);
+ }
+
+
+
+
+
+
+ {{#each this.table.columns as |column|}}
+
+ {{column.name}}
+
+ ↔
+
+ {{#if (isResizing column)}}
+
+ {{/if}}
+
+ {{/each}}
+
+
+
+ {{#each this.table.rows as |row|}}
+
+ {{#each this.table.columns as |column|}}
+
+ {{column.getValueForRow row}}
+
+ {{/each}}
+
+ {{/each}}
+
+
+
+
+}
+```
+
+
+
### Preferences
The width will be stored in preferences, per column.
diff --git a/table/src/plugins/column-resizing/plugin.ts b/table/src/plugins/column-resizing/plugin.ts
index 847e22fd..45b7e791 100644
--- a/table/src/plugins/column-resizing/plugin.ts
+++ b/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