AdvancedTable - Dynamic columns fix (#3266)

Author: zamoore

packages/components/src/components/hds/advanced-table/index.ts

@@ -231,6 +231,7 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
       columns,
       columnOrder,
       childrenKey,
+      hasReorderableColumns,
       hasResizableColumns,
       sortBy,
       sortOrder,
@@ -243,6 +244,7 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
       columns,
       columnOrder,
       childrenKey,
+      hasReorderableColumns,
       hasResizableColumns,
       sortBy,
       sortOrder,

packages/components/src/components/hds/advanced-table/models/row.ts

@@ -8,13 +8,14 @@ import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 
 import type { HdsAdvancedTableColumn, HdsAdvancedTableCell } from '../types';
+import type HdsAdvancedTableTableModel from './table';
 
 interface HdsAdvancedTableRowArgs {
   [key: string]: unknown;
   columns: HdsAdvancedTableColumn[];
+  table: HdsAdvancedTableTableModel;
   id?: string;
   childrenKey?: string;
-  columnOrder?: string[];
 }
 
 export default class HdsAdvancedTableRow {
@@ -25,10 +26,10 @@ export default class HdsAdvancedTableRow {
 
   @tracked isOpen: boolean = false;
   @tracked cells: HdsAdvancedTableCell[] = [];
-  @tracked columnOrder: string[] = [];
 
   children: HdsAdvancedTableRow[] = [];
   childrenKey: string;
+  table: HdsAdvancedTableTableModel;
 
   get hasChildren(): boolean {
     return this.children.length > 0;
@@ -39,21 +40,27 @@ export default class HdsAdvancedTableRow {
   }
 
   get orderedCells(): HdsAdvancedTableCell[] {
-    return this.columnOrder.map((key) => {
-      const cell = this.cells.find((cell) => cell.columnKey === key);
+    const { columnOrder, hasReorderableColumns } = this.table;
 
-      if (cell === undefined) {
-        throw new Error(
-          `Cell in the column with key ${key} not found for the row.`
-        );
-      }
+    if (hasReorderableColumns) {
+      return columnOrder.reduce<HdsAdvancedTableCell[]>((acc, key) => {
+        const cell = this.cells.find((cell) => cell.columnKey === key);
 
-      return cell;
-    });
+        if (cell !== undefined) {
+          acc.push(cell);
+        }
+
+        return acc;
+      }, []);
+    } else {
+      return this.cells;
+    }
   }
 
   constructor(args: HdsAdvancedTableRowArgs) {
-    const { columns } = args;
+    const { columns, table } = args;
+
+    this.table = table;
 
     this.cells = columns.map((column) => {
       const cell = args[column.key ?? ''];
@@ -64,9 +71,6 @@ export default class HdsAdvancedTableRow {
       };
     });
 
-    this.columnOrder =
-      args.columnOrder ?? this.cells.map((cell) => cell.columnKey);
-
     // set row data
     Object.assign(this, args);
 

packages/components/src/components/hds/advanced-table/models/table.ts

@@ -28,6 +28,7 @@ type HdsAdvancedTableTableArgs = Pick<
   | 'columns'
   | 'columnOrder'
   | 'childrenKey'
+  | 'hasReorderableColumns'
   | 'hasResizableColumns'
   | 'sortBy'
   | 'sortOrder'
@@ -67,6 +68,7 @@ export default class HdsAdvancedTableTableModel {
   @tracked gridElement?: HTMLDivElement = undefined;
 
   childrenKey?: HdsAdvancedTableTableArgs['childrenKey'];
+  hasReorderableColumns?: HdsAdvancedTableTableArgs['hasReorderableColumns'];
   hasResizableColumns?: HdsAdvancedTableTableArgs['hasResizableColumns'];
   onColumnReorder?: HdsAdvancedTableColumnReorderCallback;
   onSort?: HdsAdvancedTableSignature['Args']['onSort'];
@@ -77,6 +79,7 @@ export default class HdsAdvancedTableTableModel {
       columns,
       columnOrder,
       childrenKey,
+      hasReorderableColumns,
       hasResizableColumns,
       sortBy,
       sortOrder,
@@ -85,17 +88,20 @@ export default class HdsAdvancedTableTableModel {
     } = args;
 
     this.childrenKey = childrenKey;
+    this.hasReorderableColumns = hasReorderableColumns;
     this.hasResizableColumns = hasResizableColumns;
     this.onSort = onSort;
 
     this.setupData({ model, columns, sortBy, sortOrder });
 
     // set initial column order
-    this.columnOrder = isEmpty(columnOrder)
-      ? this.columns.map((column) => column.key)
-      : columnOrder!; // ensured non-empty
+    if (this.hasReorderableColumns) {
+      this.columnOrder = isEmpty(columnOrder)
+        ? this.columns.map((column) => column.key)
+        : columnOrder!; // ensured non-empty
 
-    this.onColumnReorder = onColumnReorder;
+      this.onColumnReorder = onColumnReorder;
+    }
   }
 
   get hasColumnBeingDragged(): boolean {
@@ -117,15 +123,19 @@ export default class HdsAdvancedTableTableModel {
   }
 
   get orderedColumns(): HdsAdvancedTableColumn[] {
-    return this.columnOrder.map((key) => {
-      const column = this.columns.find((column) => column.key === key);
+    if (this.hasReorderableColumns) {
+      return this.columnOrder.reduce<HdsAdvancedTableColumn[]>((acc, key) => {
+        const column = this.columns.find((column) => column.key === key);
 
-      if (!column) {
-        throw new Error(`Column with key ${key} not found`);
-      }
+        if (column !== undefined) {
+          acc.push(column);
+        }
 
-      return column;
-    });
+        return acc;
+      }, []);
+    } else {
+      return this.columns;
+    }
   }
 
   get sortCriteria(): string | HdsAdvancedTableSortingFunction<unknown> {
@@ -254,6 +264,7 @@ export default class HdsAdvancedTableTableModel {
         ...row,
         childrenKey: this.childrenKey,
         columns,
+        table: this,
       });
     });
   }
@@ -367,8 +378,11 @@ export default class HdsAdvancedTableTableModel {
     targetColumn: HdsAdvancedTableColumn,
     side: HdsAdvancedTableColumnReorderSide
   ): void {
-    const oldIndex = this.orderedColumns.indexOf(sourceColumn);
-    const newIndex = this.orderedColumns.indexOf(targetColumn);
+    const sourceKey = sourceColumn.key;
+    const targetKey = targetColumn.key;
+
+    const oldIndex = this.columnOrder.indexOf(sourceKey);
+    const newIndex = this.columnOrder.indexOf(targetKey);
 
     if (oldIndex !== -1 && newIndex !== -1) {
       const updated = [...this.columnOrder];
@@ -392,10 +406,6 @@ export default class HdsAdvancedTableTableModel {
 
       this.columnOrder = updated;
 
-      for (const row of this.rows) {
-        row.columnOrder = updated;
-      }
-
       // we need to wait until the reposition has finished
       requestAnimationFrame(() => {
         sourceColumn.thElement?.scrollIntoView({

showcase/app/components/page-components/advanced-table/code-fragments/with-simple-data.gts

@@ -4,15 +4,25 @@
  */
 
 import Component from '@glimmer/component';
+import { get } from '@ember/helper';
 
 import USERS from 'showcase/mocks/user-data';
 
 import { HdsAdvancedTable } from '@hashicorp/design-system-components/components';
+
 import type { HdsAdvancedTableSignature } from '@hashicorp/design-system-components/components/hds/advanced-table/index';
 
+export const DEFAULT_COLUMNS = [
+  { key: 'id', label: 'ID' },
+  { key: 'name', label: 'Name' },
+  { key: 'email', label: 'Email' },
+  { key: 'role', label: 'Role' },
+];
+
 export interface CodeFragmentWithSimpleDataSignature {
   Args: {
     isSelectable?: HdsAdvancedTableSignature['Args']['isSelectable'];
+    columns?: HdsAdvancedTableSignature['Args']['columns'];
     density?: HdsAdvancedTableSignature['Args']['density'];
     isStriped?: HdsAdvancedTableSignature['Args']['isStriped'];
     hasTooltips?: boolean;
@@ -21,14 +31,11 @@ export interface CodeFragmentWithSimpleDataSignature {
 }
 
 export default class CodeFragmentWithSimpleData extends Component<CodeFragmentWithSimpleDataSignature> {
-  model = USERS.slice(0, 4);
+  get columns(): HdsAdvancedTableSignature['Args']['columns'] {
+    return this.args.columns ?? DEFAULT_COLUMNS;
+  }
 
-  columns = [
-    { key: 'id', label: 'ID' },
-    { key: 'name', label: 'Name' },
-    { key: 'email', label: 'Email' },
-    { key: 'role', label: 'Role' },
-  ];
+  model = USERS.slice(0, 4);
 
   columnsWithTooltips = [
     {
@@ -54,14 +61,10 @@ export default class CodeFragmentWithSimpleData extends Component<CodeFragmentWi
       <:body as |B|>
         {{! @glint-expect-error - will be fixed by https://hashicorp.atlassian.net/browse/HDS-5090}}
         <B.Tr @selectionKey="{{B.data.id}}">
-          {{! @glint-expect-error - will be fixed by https://hashicorp.atlassian.net/browse/HDS-5090}}
-          <B.Td>{{B.data.id}}</B.Td>
-          {{! @glint-expect-error - will be fixed by https://hashicorp.atlassian.net/browse/HDS-5090}}
-          <B.Td>{{B.data.name}}</B.Td>
-          {{! @glint-expect-error - will be fixed by https://hashicorp.atlassian.net/browse/HDS-5090}}
-          <B.Td>{{B.data.email}}</B.Td>
-          {{! @glint-expect-error - will be fixed by https://hashicorp.atlassian.net/browse/HDS-5090}}
-          <B.Td>{{B.data.role}}</B.Td>
+          {{#each this.columns as |column|}}
+            {{! @glint-expect-error - will be fixed by https://hashicorp.atlassian.net/browse/HDS-5090}}
+            <B.Td>{{get B.data column.key}}</B.Td>
+          {{/each}}
         </B.Tr>
       </:body>
     </HdsAdvancedTable>