Reordering hidden columns

docs-app/public/docs/1-get-started/index.md

@@ -61,6 +61,11 @@ export default class extends Component {
         key: "C",
         pluginOptions: [ColumnResizing.forColumn(() => ({ minWidth: 200 }))],
       },
+      {
+        name: "column D",
+        key: "D",
+        pluginOptions: [ColumnResizing.forColumn(() => ({ minWidth: 200 }))],
+      },
     ],
     data: () => this.data,
     plugins: [

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

@@ -127,3 +127,92 @@ but the important things to make sure exist are:
 - buttons are focusable
 - buttons can be navigated to and pressed via keyboard
 - buttons can be navigated to and pressed via screen reader tool
+
+## Combining with Column Reordering
+
+When using both `ColumnVisibility` and `ColumnReordering` together, the reordering automatically skips over hidden columns when moving left/right.
+
+<div class="featured-demo" data-demo-fit data-demo-tight>
+
+```gjs live preview no-shadow
+import Component from "@glimmer/component";
+import { on } from "@ember/modifier";
+import { fn } from "@ember/helper";
+
+import { headlessTable } from "@universal-ember/table";
+import { meta, columns } from "@universal-ember/table/plugins";
+import {
+  ColumnVisibility,
+  hide,
+  show,
+} from "@universal-ember/table/plugins/column-visibility";
+import { ColumnReordering } from "@universal-ember/table/plugins/column-reordering";
+
+import { DATA } from "docs-app/sample-data";
+
+export default class extends Component {
+  table = headlessTable(this, {
+    columns: () => [
+      { name: "column A", key: "A" },
+      { name: "column B", key: "B" },
+      { name: "column C", key: "C" },
+      { name: "column D", key: "D" },
+    ],
+    data: () => DATA,
+    plugins: [ColumnVisibility, ColumnReordering],
+  });
+
+  get columns() {
+    return columns.for(this.table);
+  }
+
+  <template>
+    <div class="flex flex-wrap gap-x-4 gap-y-2 mb-4">
+      {{#each this.table.columns as |column|}}
+        {{#let (meta column) as |m|}}
+          <div class="flex gap-2 items-center">
+            <span>{{column.name}}:</span>
+            <button {{on "click" (fn hide column)}}>Hide</button>
+            <button {{on "click" (fn show column)}}>Show</button>
+            <button {{on "click" m.ColumnReordering.moveLeft}}>⇦</button>
+            <button {{on "click" m.ColumnReordering.moveRight}}>⇨</button>
+          </div>
+        {{/let}}
+      {{/each}}
+    </div>
+    <div class="h-full overflow-auto" {{this.table.modifiers.container}}>
+      <table>
+        <thead>
+          <tr>
+            {{#each this.columns as |column|}}
+              <th
+                {{this.table.modifiers.columnHeader column}}
+                class="relative group"
+              >
+                {{column.name}}
+              </th>
+            {{else}}
+              <th>
+                No columns are visible
+              </th>
+            {{/each}}
+          </tr>
+        </thead>
+        <tbody>
+          {{#each this.table.rows as |row|}}
+            <tr>
+              {{#each this.columns as |column|}}
+                <td>
+                  {{column.getValueForRow row}}
+                </td>
+              {{/each}}
+            </tr>
+          {{/each}}
+        </tbody>
+      </table>
+    </div>
+  </template>
+}
+```
+
+</div>

docs-app/public/docs/3-demos/external-column-ordering.md

@@ -26,9 +26,21 @@ export default class extends Component {
   @tracked pendingColumnOrder;
 
   changeColumnOrder = () => {
+    // Basic usage (backwards compatible):
+    // Pass your columns and they're all treated as visible
     this.pendingColumnOrder = new ColumnOrder({
       columns: () => this.columns,
     });
+
+    // Advanced usage (with ColumnVisibility plugin):
+    // Pass ALL columns and provide a visibleColumns map
+    // this.pendingColumnOrder = new ColumnOrder({
+    //   columns: () => this.table.columns.values(),  // All columns (including hidden)
+    //   visibleColumns: () => this.columns.reduce((acc, col) => {
+    //     acc[col.key] = meta(col).ColumnVisibility?.isVisible !== false;
+    //     return acc;
+    //   }, {}),
+    // });
   }
 
   handleReconfigure = () => {