working on adding resizable columns when working with sticky columns

Author: zamoore

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

@@ -196,23 +196,6 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
       onColumnResize,
     });
 
-    const resizableColumns = columns.filter((column) => column.isResizable);
-    const resizableColumnLabels = resizableColumns.map(
-      (column) => column.label
-    );
-
-    if (resizableColumns.length > 0) {
-      assert(
-        'Cannot have a sticky first column if there are resizable columns.',
-        !hasStickyFirstColumn
-      );
-
-      assert(
-        `Cannot have resizable columns if there are nested rows. Resizable columns are ${resizableColumnLabels.toString()}`,
-        !this._tableModel.hasRowsWithChildren
-      );
-    }
-
     if (this._tableModel.hasRowsWithChildren) {
       const sortableColumns = columns.filter((column) => column.isSortable);
       const sortableColumnLabels = sortableColumns.map(
@@ -228,6 +211,16 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
         'Cannot have a sticky first column if there are nested rows.',
         !hasStickyFirstColumn
       );
+
+      const resizableColumns = columns.filter((column) => column.isResizable);
+      const resizableColumnLabels = resizableColumns.map(
+        (column) => column.label
+      );
+
+      assert(
+        `Cannot have resizable columns if there are nested rows. Resizable columns are ${resizableColumnLabels.toString()}`,
+        resizableColumns.length === 0
+      );
     }
   }
 

showcase/app/components/mock/app/main/generic-advanced-table.gts

@@ -33,19 +33,22 @@ const SAMPLE_COLUMNS = [
     label: 'Project name',
     key: 'project-name',
     isSortable: true,
-    width: 'max-content',
+    isResizable: true,
+    width: '300px',
   },
   {
     label: 'Current run ID',
     key: 'current-run-id',
     isSortable: true,
-    width: 'max-content',
+    isResizable: true,
+    width: '300px',
   },
   {
     label: 'Run status',
     key: 'run-status',
     isSortable: true,
-    width: 'max-content',
+    isResizable: true,
+    width: '200px',
   },
   {
     label: 'Current run applied',