From d23536e512d72a8593a439b4c7f5d6ff58340ab7 Mon Sep 17 00:00:00 2001
From: Vikram Raj <vikrmrj@gmail.com>
Date: Thu, 19 Mar 2026 16:41:24 +0530
Subject: [PATCH 1/9] add resizable column feature to Nodes list

---
 .../src/components/nodes/NodesPage.tsx        | 40 +++++++++++++++----
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/frontend/packages/console-app/src/components/nodes/NodesPage.tsx b/frontend/packages/console-app/src/components/nodes/NodesPage.tsx
index 2a2aefc2bfb..2dc558b26ca 100644
--- a/frontend/packages/console-app/src/components/nodes/NodesPage.tsx
+++ b/frontend/packages/console-app/src/components/nodes/NodesPage.tsx
@@ -6,16 +6,17 @@ import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import {
   actionsCellProps,
-  cellIsStickyProps,
   getNameCellProps,
   initialFiltersDefault,
   ConsoleDataView,
+  nameCellProps,
 } from '@console/app/src/components/data-view/ConsoleDataView';
 import type {
   ConsoleDataViewColumn,
   ConsoleDataViewRow,
   ResourceFilters,
 } from '@console/app/src/components/data-view/types';
+import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps';
 import {
   filterVirtualMachineInstancesByNode,
   useIsKubevirtPluginActive,
@@ -159,16 +160,21 @@ const nodeColumnInfo = Object.freeze({
 
 const kind = 'Node';
 
-const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
+const useNodesColumns = (
+  vmsEnabled: boolean,
+): { columns: TableColumn<NodeRowItem>[]; resetAllColumnWidths: () => void } => {
   const { t } = useTranslation();
+  const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(NodeModel);
+
   const columns = useMemo(() => {
     return [
       {
         title: t('console-app~Name'),
         id: nodeColumnInfo.name.id,
         sort: 'metadata.name',
+        resizableProps: getResizableProps(nodeColumnInfo.name.id),
         props: {
-          ...cellIsStickyProps,
+          ...nameCellProps,
           modifier: 'nowrap',
         },
       },
@@ -176,6 +182,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
         title: t('console-app~Status'),
         id: nodeColumnInfo.status.id,
         sort: sortWithCSRResource(nodeReadiness, 'False'),
+        resizableProps: getResizableProps(nodeColumnInfo.status.id),
         props: {
           modifier: 'nowrap',
         },
@@ -184,6 +191,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
         title: t('console-app~Machine set'),
         id: nodeColumnInfo.machineOwner.id,
         sort: 'machineOwner.name',
+        resizableProps: getResizableProps(nodeColumnInfo.machineOwner.id),
         props: {
           modifier: 'nowrap',
         },
@@ -194,6 +202,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
               title: t('console-app~Virtual machines'),
               id: nodeColumnInfo.vms.id,
               sort: 'virtualMachines',
+              resizableProps: getResizableProps(nodeColumnInfo.vms.id),
               props: {
                 modifier: 'nowrap',
                 info: {
@@ -212,6 +221,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
         title: t('console-app~Pods'),
         id: nodeColumnInfo.pods.id,
         sort: sortWithCSRResource(nodePods, 0),
+        resizableProps: getResizableProps(nodeColumnInfo.pods.id),
         props: {
           modifier: 'nowrap',
         },
@@ -220,6 +230,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
         title: t('console-app~Memory'),
         id: nodeColumnInfo.memory.id,
         sort: sortWithCSRResource(nodeMemory, 0),
+        resizableProps: getResizableProps(nodeColumnInfo.memory.id),
         props: {
           modifier: 'nowrap',
         },
@@ -228,6 +239,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
         title: t('console-app~CPU'),
         id: nodeColumnInfo.cpu.id,
         sort: sortWithCSRResource(nodeCPU, 0),
+        resizableProps: getResizableProps(nodeColumnInfo.cpu.id),
         props: {
           modifier: 'nowrap',
         },
@@ -236,6 +248,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
         title: t('console-app~Roles'),
         id: nodeColumnInfo.role.id,
         sort: sortWithCSRResource(nodeRolesSort, ''),
+        resizableProps: getResizableProps(nodeColumnInfo.role.id),
         props: {
           modifier: 'nowrap',
         },
@@ -245,6 +258,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
         title: t('console-app~Architecture'),
         id: nodeColumnInfo.architecture.id,
         sort: sortWithCSRResource(nodeArch, ''),
+        resizableProps: getResizableProps(nodeColumnInfo.architecture.id),
         props: {
           modifier: 'nowrap',
         },
@@ -254,6 +268,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
         title: t('console-app~Filesystem'),
         id: nodeColumnInfo.filesystem.id,
         sort: sortWithCSRResource(nodeFS, 0),
+        resizableProps: getResizableProps(nodeColumnInfo.filesystem.id),
         props: {
           modifier: 'nowrap',
         },
@@ -263,6 +278,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
         title: t('console-app~Created'),
         id: nodeColumnInfo.created.id,
         sort: 'metadata.creationTimestamp',
+        resizableProps: getResizableProps(nodeColumnInfo.created.id),
         props: {
           modifier: 'nowrap',
         },
@@ -272,6 +288,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
         title: t('console-app~Instance type'),
         id: nodeColumnInfo.instanceType.id,
         sort: sortWithCSRResource(nodeInstanceType, ''),
+        resizableProps: getResizableProps(nodeColumnInfo.instanceType.id),
         props: {
           modifier: 'nowrap',
         },
@@ -281,6 +298,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
         title: t('console-app~Machine'),
         id: nodeColumnInfo.machine.id,
         sort: sortWithCSRResource(nodeMachine, ''),
+        resizableProps: getResizableProps(nodeColumnInfo.machine.id),
         props: {
           modifier: 'nowrap',
         },
@@ -290,6 +308,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
         title: t('console-app~MachineConfigPool'),
         id: nodeColumnInfo.machineConfigPool.id,
         sort: 'machineConfigPool.metadata.name',
+        resizableProps: getResizableProps(nodeColumnInfo.machineConfigPool.id),
         props: {
           modifier: 'nowrap',
         },
@@ -299,9 +318,9 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
         title: t('console-app~Labels'),
         id: nodeColumnInfo.labels.id,
         sort: 'metadata.labels',
+        resizableProps: getResizableProps(nodeColumnInfo.labels.id),
         props: {
           modifier: 'nowrap',
-          width: 15,
         },
         additional: true,
       },
@@ -309,6 +328,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
         title: t('console-app~Zone'),
         id: nodeColumnInfo.zone.id,
         sort: sortWithCSRResource(nodeZone, ''),
+        resizableProps: getResizableProps(nodeColumnInfo.zone.id),
         props: {
           modifier: 'nowrap',
         },
@@ -318,6 +338,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
         title: t('console-app~Uptime'),
         id: nodeColumnInfo.uptime.id,
         sort: sortWithCSRResource(nodeUptime, ''),
+        resizableProps: getResizableProps(nodeColumnInfo.uptime.id),
         props: {
           modifier: 'nowrap',
         },
@@ -327,12 +348,13 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
         title: '',
         id: nodeColumnInfo.actions.id,
         props: {
-          ...cellIsStickyProps,
+          ...actionsCellProps,
         },
       },
     ];
-  }, [t, vmsEnabled]);
-  return columns;
+  }, [t, vmsEnabled, getResizableProps]);
+
+  return { columns, resetAllColumnWidths };
 };
 
 const CPUCell: FC<{ cores: number; totalCores: number }> = ({ cores, totalCores }) => {
@@ -584,7 +606,7 @@ const NodeList: FC<NodeListProps> = ({
   selectedColumns,
 }) => {
   const { t } = useTranslation();
-  const columns = useNodesColumns(vmsEnabled);
+  const { columns, resetAllColumnWidths } = useNodesColumns(vmsEnabled);
   const nodeMetrics = useConsoleSelector<NodeMetrics>(({ UI }) => {
     return UI.getIn(['metrics', 'node']);
   });
@@ -812,6 +834,8 @@ const NodeList: FC<NodeListProps> = ({
         hideNameLabelFilters={hideNameLabelFilters}
         hideLabelFilter={hideLabelFilter}
         hideColumnManagement={hideColumnManagement}
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );

From 57e78e3ce6c3e00e76443cf3d2e222acfc709394 Mon Sep 17 00:00:00 2001
From: Vikram Raj <vikrmrj@gmail.com>
Date: Thu, 19 Mar 2026 16:43:36 +0530
Subject: [PATCH 2/9] add resizable column feature to Machines list

---
 frontend/public/components/machine.tsx | 29 +++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/frontend/public/components/machine.tsx b/frontend/public/components/machine.tsx
index 080acc61152..e6b066724e2 100644
--- a/frontend/public/components/machine.tsx
+++ b/frontend/public/components/machine.tsx
@@ -32,10 +32,11 @@ import { useK8sWatchResource } from './utils/k8s-watch-hook';
 import { sortResourceByValue } from './factory/Table/sort';
 import {
   actionsCellProps,
-  cellIsStickyProps,
   getNameCellProps,
   ConsoleDataView,
+  nameCellProps,
 } from '@console/app/src/components/data-view/ConsoleDataView';
+import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps';
 import {
   DescriptionList,
   DescriptionListDescription,
@@ -197,8 +198,12 @@ type MachineListProps = {
   hideColumnManagement?: boolean;
 };
 
-const useMachineColumns = (): TableColumn<MachineKind>[] => {
+const useMachineColumns = (): {
+  columns: TableColumn<MachineKind>[];
+  resetAllColumnWidths: () => void;
+} => {
   const { t } = useTranslation();
+  const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(MachineModel);
 
   const columns: TableColumn<MachineKind>[] = useMemo(() => {
     return [
@@ -206,8 +211,9 @@ const useMachineColumns = (): TableColumn<MachineKind>[] => {
         title: t('public~Name'),
         id: tableColumnInfo[0].id,
         sort: 'metadata.name',
+        resizableProps: getResizableProps(tableColumnInfo[0].id),
         props: {
-          ...cellIsStickyProps,
+          ...nameCellProps,
           modifier: 'nowrap',
         },
       },
@@ -215,6 +221,7 @@ const useMachineColumns = (): TableColumn<MachineKind>[] => {
         title: t('public~Namespace'),
         id: tableColumnInfo[1].id,
         sort: 'metadata.namespace',
+        resizableProps: getResizableProps(tableColumnInfo[1].id),
         props: {
           modifier: 'nowrap',
         },
@@ -223,6 +230,7 @@ const useMachineColumns = (): TableColumn<MachineKind>[] => {
         title: t('public~Node'),
         id: tableColumnInfo[2].id,
         sort: 'status.nodeRef.name',
+        resizableProps: getResizableProps(tableColumnInfo[2].id),
         props: {
           modifier: 'nowrap',
         },
@@ -231,6 +239,7 @@ const useMachineColumns = (): TableColumn<MachineKind>[] => {
         title: t('public~Phase'),
         id: tableColumnInfo[3].id,
         sort: (data, direction) => data.sort(sortResourceByValue(direction, getMachinePhase)),
+        resizableProps: getResizableProps(tableColumnInfo[3].id),
         props: {
           modifier: 'nowrap',
         },
@@ -239,6 +248,7 @@ const useMachineColumns = (): TableColumn<MachineKind>[] => {
         title: t('public~Provider state'),
         id: tableColumnInfo[4].id,
         sort: 'status.providerStatus.instanceState',
+        resizableProps: getResizableProps(tableColumnInfo[4].id),
         props: {
           modifier: 'nowrap',
         },
@@ -247,6 +257,7 @@ const useMachineColumns = (): TableColumn<MachineKind>[] => {
         title: t('public~Region'),
         id: tableColumnInfo[5].id,
         sort: "metadata.labels['machine.openshift.io/region']",
+        resizableProps: getResizableProps(tableColumnInfo[5].id),
         props: {
           modifier: 'nowrap',
         },
@@ -255,6 +266,7 @@ const useMachineColumns = (): TableColumn<MachineKind>[] => {
         title: t('public~Availability zone'),
         id: tableColumnInfo[6].id,
         sort: "metadata.labels['machine.openshift.io/zone']",
+        resizableProps: getResizableProps(tableColumnInfo[6].id),
         props: {
           modifier: 'nowrap',
         },
@@ -263,16 +275,17 @@ const useMachineColumns = (): TableColumn<MachineKind>[] => {
         title: '',
         id: tableColumnInfo[7].id,
         props: {
-          ...cellIsStickyProps,
+          ...actionsCellProps,
         },
       },
     ];
-  }, [t]);
-  return columns;
+  }, [t, getResizableProps]);
+
+  return { columns, resetAllColumnWidths };
 };
 
 export const MachineList: FC<MachineListProps> = ({ data, loaded, loadError, ...props }) => {
-  const columns = useMachineColumns();
+  const { columns, resetAllColumnWidths } = useMachineColumns();
 
   return (
     <Suspense fallback={<LoadingBox />}>
@@ -285,6 +298,8 @@ export const MachineList: FC<MachineListProps> = ({ data, loaded, loadError, ...
         columns={columns}
         getDataViewRows={getDataViewRows}
         hideColumnManagement={true}
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );

From 37a6bb6f84b7c2f1503c0b1b89f8eccc82c64952 Mon Sep 17 00:00:00 2001
From: Vikram Raj <vikrmrj@gmail.com>
Date: Thu, 19 Mar 2026 16:45:28 +0530
Subject: [PATCH 3/9] add resizable column feature to MachineAutoscalers list

---
 .../public/components/machine-autoscaler.tsx  | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/frontend/public/components/machine-autoscaler.tsx b/frontend/public/components/machine-autoscaler.tsx
index 8dca6c2c0bd..6ef7935d0d7 100644
--- a/frontend/public/components/machine-autoscaler.tsx
+++ b/frontend/public/components/machine-autoscaler.tsx
@@ -8,11 +8,12 @@ import { DASH } from '@console/shared/src/constants';
 import { TableColumn } from '@console/dynamic-plugin-sdk';
 import {
   actionsCellProps,
-  cellIsStickyProps,
   getNameCellProps,
   ConsoleDataView,
+  nameCellProps,
 } from '@console/app/src/components/data-view/ConsoleDataView';
 import { GetDataViewRows } from '@console/app/src/components/data-view/types';
+import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps';
 import { MachineAutoscalerModel } from '../models';
 import {
   groupVersionFor,
@@ -100,16 +101,24 @@ const getDataViewRows: GetDataViewRows<K8sResourceKind> = (data, columns) => {
   });
 };
 
-const useMachineAutoscalerColumns = (): TableColumn<K8sResourceKind>[] => {
+const useMachineAutoscalerColumns = (): {
+  columns: TableColumn<K8sResourceKind>[];
+  resetAllColumnWidths: () => void;
+} => {
   const { t } = useTranslation();
+  const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(
+    MachineAutoscalerModel,
+  );
+
   const columns: TableColumn<K8sResourceKind>[] = useMemo(() => {
     return [
       {
         title: t('public~Name'),
         id: tableColumnInfo[0].id,
         sort: 'metadata.name',
+        resizableProps: getResizableProps(tableColumnInfo[0].id),
         props: {
-          ...cellIsStickyProps,
+          ...nameCellProps,
           modifier: 'nowrap',
         },
       },
@@ -117,6 +126,7 @@ const useMachineAutoscalerColumns = (): TableColumn<K8sResourceKind>[] => {
         title: t('public~Namespace'),
         id: tableColumnInfo[1].id,
         sort: 'metadata.namespace',
+        resizableProps: getResizableProps(tableColumnInfo[1].id),
         props: {
           modifier: 'nowrap',
         },
@@ -125,6 +135,7 @@ const useMachineAutoscalerColumns = (): TableColumn<K8sResourceKind>[] => {
         title: t('public~Scale target'),
         id: tableColumnInfo[2].id,
         sort: 'spec.scaleTargetRef.name',
+        resizableProps: getResizableProps(tableColumnInfo[2].id),
         props: {
           modifier: 'nowrap',
         },
@@ -133,6 +144,7 @@ const useMachineAutoscalerColumns = (): TableColumn<K8sResourceKind>[] => {
         title: t('public~Min'),
         id: tableColumnInfo[3].id,
         sort: 'spec.minReplicas',
+        resizableProps: getResizableProps(tableColumnInfo[3].id),
         props: {
           modifier: 'nowrap',
         },
@@ -141,6 +153,7 @@ const useMachineAutoscalerColumns = (): TableColumn<K8sResourceKind>[] => {
         title: t('public~Max'),
         id: tableColumnInfo[4].id,
         sort: 'spec.maxReplicas',
+        resizableProps: getResizableProps(tableColumnInfo[4].id),
         props: {
           modifier: 'nowrap',
         },
@@ -149,12 +162,13 @@ const useMachineAutoscalerColumns = (): TableColumn<K8sResourceKind>[] => {
         title: '',
         id: tableColumnInfo[5].id,
         props: {
-          ...cellIsStickyProps,
+          ...actionsCellProps,
         },
       },
     ];
-  }, [t]);
-  return columns;
+  }, [t, getResizableProps]);
+
+  return { columns, resetAllColumnWidths };
 };
 
 const MachineAutoscalerList: FC<MachineAutoscalerListProps> = ({
@@ -163,7 +177,7 @@ const MachineAutoscalerList: FC<MachineAutoscalerListProps> = ({
   loadError,
   ...props
 }) => {
-  const columns = useMachineAutoscalerColumns();
+  const { columns, resetAllColumnWidths } = useMachineAutoscalerColumns();
 
   return (
     <Suspense fallback={<LoadingBox />}>
@@ -176,6 +190,8 @@ const MachineAutoscalerList: FC<MachineAutoscalerListProps> = ({
         columns={columns}
         getDataViewRows={getDataViewRows}
         hideColumnManagement={true}
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );

From ee9eb4e7fa1962b27153f573ba40556902a7f7ee Mon Sep 17 00:00:00 2001
From: Vikram Raj <vikrmrj@gmail.com>
Date: Thu, 19 Mar 2026 16:46:23 +0530
Subject: [PATCH 4/9] add resizable column feature to MachineHealthChecks list

---
 .../components/machine-health-check.tsx       | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/frontend/public/components/machine-health-check.tsx b/frontend/public/components/machine-health-check.tsx
index d61d8550fd4..d46907c31da 100644
--- a/frontend/public/components/machine-health-check.tsx
+++ b/frontend/public/components/machine-health-check.tsx
@@ -23,11 +23,12 @@ import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
 import { TableColumn } from '@console/dynamic-plugin-sdk';
 import {
   actionsCellProps,
-  cellIsStickyProps,
   getNameCellProps,
   ConsoleDataView,
+  nameCellProps,
 } from '@console/app/src/components/data-view/ConsoleDataView';
 import { GetDataViewRows } from '@console/app/src/components/data-view/types';
+import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps';
 import LazyActionMenu from '@console/shared/src/components/actions/LazyActionMenu';
 
 const machineHealthCheckReference = referenceForModel(MachineHealthCheckModel);
@@ -66,16 +67,24 @@ const getDataViewRows: GetDataViewRows<MachineHealthCheckKind> = (data, columns)
   });
 };
 
-const useMachineHealthCheckColumns = (): TableColumn<MachineHealthCheckKind>[] => {
+const useMachineHealthCheckColumns = (): {
+  columns: TableColumn<MachineHealthCheckKind>[];
+  resetAllColumnWidths: () => void;
+} => {
   const { t } = useTranslation();
+  const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(
+    MachineHealthCheckModel,
+  );
+
   const columns: TableColumn<MachineHealthCheckKind>[] = useMemo(() => {
     return [
       {
         title: t('public~Name'),
         id: tableColumnInfo[0].id,
         sort: 'metadata.name',
+        resizableProps: getResizableProps(tableColumnInfo[0].id),
         props: {
-          ...cellIsStickyProps,
+          ...nameCellProps,
           modifier: 'nowrap',
         },
       },
@@ -83,6 +92,7 @@ const useMachineHealthCheckColumns = (): TableColumn<MachineHealthCheckKind>[] =
         title: t('public~Namespace'),
         id: tableColumnInfo[1].id,
         sort: 'metadata.namespace',
+        resizableProps: getResizableProps(tableColumnInfo[1].id),
         props: {
           modifier: 'nowrap',
         },
@@ -91,6 +101,7 @@ const useMachineHealthCheckColumns = (): TableColumn<MachineHealthCheckKind>[] =
         title: t('public~Created'),
         id: tableColumnInfo[2].id,
         sort: 'metadata.creationTimestamp',
+        resizableProps: getResizableProps(tableColumnInfo[2].id),
         props: {
           modifier: 'nowrap',
         },
@@ -99,12 +110,13 @@ const useMachineHealthCheckColumns = (): TableColumn<MachineHealthCheckKind>[] =
         title: '',
         id: tableColumnInfo[3].id,
         props: {
-          ...cellIsStickyProps,
+          ...actionsCellProps,
         },
       },
     ];
-  }, [t]);
-  return columns;
+  }, [t, getResizableProps]);
+
+  return { columns, resetAllColumnWidths };
 };
 
 const MachineHealthCheckList: FC<MachineHealthCheckListProps> = ({
@@ -113,7 +125,7 @@ const MachineHealthCheckList: FC<MachineHealthCheckListProps> = ({
   loadError,
   ...props
 }) => {
-  const columns = useMachineHealthCheckColumns();
+  const { columns, resetAllColumnWidths } = useMachineHealthCheckColumns();
 
   return (
     <Suspense fallback={<LoadingBox />}>
@@ -126,6 +138,8 @@ const MachineHealthCheckList: FC<MachineHealthCheckListProps> = ({
         columns={columns}
         getDataViewRows={getDataViewRows}
         hideColumnManagement={true}
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );

From 58fbc0d05bb1d5b3144719264d5d7e50ce6d5fa1 Mon Sep 17 00:00:00 2001
From: Vikram Raj <vikrmrj@gmail.com>
Date: Thu, 19 Mar 2026 16:47:43 +0530
Subject: [PATCH 5/9] add resizable column feature to ControlPlaneMachineSets
 list

---
 .../components/control-plane-machine-set.tsx  | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/frontend/public/components/control-plane-machine-set.tsx b/frontend/public/components/control-plane-machine-set.tsx
index cda6a32f342..d3a32844e59 100644
--- a/frontend/public/components/control-plane-machine-set.tsx
+++ b/frontend/public/components/control-plane-machine-set.tsx
@@ -19,11 +19,12 @@ import { DASH } from '@console/shared/src/constants';
 import { TableColumn } from '@console/dynamic-plugin-sdk';
 import {
   actionsCellProps,
-  cellIsStickyProps,
   getNameCellProps,
   ConsoleDataView,
+  nameCellProps,
 } from '@console/app/src/components/data-view/ConsoleDataView';
 import { GetDataViewRows } from '@console/app/src/components/data-view/types';
+import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps';
 import { Conditions } from './conditions';
 import { ControlPlaneMachineSetModel } from '../models';
 import { ControlPlaneMachineSetKind, referenceForModel } from '../module/k8s';
@@ -202,16 +203,24 @@ const tableColumnInfo = [
   { id: '' },
 ];
 
-const useControlPlaneMachineSetColumns = (): TableColumn<ControlPlaneMachineSetKind>[] => {
+const useControlPlaneMachineSetColumns = (): {
+  columns: TableColumn<ControlPlaneMachineSetKind>[];
+  resetAllColumnWidths: () => void;
+} => {
   const { t } = useTranslation();
+  const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(
+    ControlPlaneMachineSetModel,
+  );
+
   const columns: TableColumn<ControlPlaneMachineSetKind>[] = useMemo(() => {
     return [
       {
         title: t('public~Name'),
         id: tableColumnInfo[0].id,
         sort: 'metadata.name',
+        resizableProps: getResizableProps(tableColumnInfo[0].id),
         props: {
-          ...cellIsStickyProps,
+          ...nameCellProps,
           modifier: 'nowrap',
         },
       },
@@ -219,6 +228,7 @@ const useControlPlaneMachineSetColumns = (): TableColumn<ControlPlaneMachineSetK
         title: t('public~Namespace'),
         id: tableColumnInfo[1].id,
         sort: 'metadata.namespace',
+        resizableProps: getResizableProps(tableColumnInfo[1].id),
         props: {
           modifier: 'nowrap',
         },
@@ -227,6 +237,7 @@ const useControlPlaneMachineSetColumns = (): TableColumn<ControlPlaneMachineSetK
         title: t('public~Machines'),
         id: tableColumnInfo[2].id,
         sort: 'status.readyReplicas',
+        resizableProps: getResizableProps(tableColumnInfo[2].id),
         props: {
           modifier: 'nowrap',
         },
@@ -235,6 +246,7 @@ const useControlPlaneMachineSetColumns = (): TableColumn<ControlPlaneMachineSetK
         title: t('public~Strategy'),
         id: tableColumnInfo[3].id,
         sort: 'spec.strategy.type',
+        resizableProps: getResizableProps(tableColumnInfo[3].id),
         props: {
           modifier: 'nowrap',
         },
@@ -243,6 +255,7 @@ const useControlPlaneMachineSetColumns = (): TableColumn<ControlPlaneMachineSetK
         title: t('public~State'),
         id: tableColumnInfo[4].id,
         sort: 'spec.state',
+        resizableProps: getResizableProps(tableColumnInfo[4].id),
         props: {
           modifier: 'nowrap',
         },
@@ -251,12 +264,13 @@ const useControlPlaneMachineSetColumns = (): TableColumn<ControlPlaneMachineSetK
         title: '',
         id: tableColumnInfo[5].id,
         props: {
-          ...cellIsStickyProps,
+          ...actionsCellProps,
         },
       },
     ];
-  }, [t]);
-  return columns;
+  }, [t, getResizableProps]);
+
+  return { columns, resetAllColumnWidths };
 };
 
 export const MachinesCell: FC<MachinesCellProps> = ({ desiredReplicas, readyReplicas, path }) => {
@@ -325,7 +339,7 @@ const ControlPlaneMachineSetList: FC<ControlPlaneMachineSetListProps> = ({
   loadError,
   ...props
 }) => {
-  const columns = useControlPlaneMachineSetColumns();
+  const { columns, resetAllColumnWidths } = useControlPlaneMachineSetColumns();
 
   return (
     <Suspense fallback={<LoadingBox />}>
@@ -338,6 +352,8 @@ const ControlPlaneMachineSetList: FC<ControlPlaneMachineSetListProps> = ({
         columns={columns}
         getDataViewRows={getDataViewRows}
         hideColumnManagement={true}
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );

From 250a33a53298d282fd4d1c83a3bc47f94abd9c8a Mon Sep 17 00:00:00 2001
From: Vikram Raj <vikrmrj@gmail.com>
Date: Thu, 19 Mar 2026 16:48:43 +0530
Subject: [PATCH 6/9] add resizable column feature to MachineSets list

---
 frontend/public/components/machine-set.tsx | 28 ++++++++++++++++------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/frontend/public/components/machine-set.tsx b/frontend/public/components/machine-set.tsx
index 9898b6f5c99..8e244318c05 100644
--- a/frontend/public/components/machine-set.tsx
+++ b/frontend/public/components/machine-set.tsx
@@ -7,10 +7,11 @@ import { ListPageBody, TableColumn } from '@console/dynamic-plugin-sdk';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import {
   actionsCellProps,
-  cellIsStickyProps,
   getNameCellProps,
+  nameCellProps,
   ConsoleDataView,
 } from '@console/app/src/components/data-view/ConsoleDataView';
+import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps';
 import {
   Tooltip,
   Button,
@@ -276,9 +277,13 @@ const MachineSetDetails: FC<MachineSetDetailsProps> = ({ obj }) => {
   );
 };
 
-const useMachineSetColumns = (): TableColumn<MachineSetKind>[] => {
+const useMachineSetColumns = (): {
+  columns: TableColumn<MachineSetKind>[];
+  resetAllColumnWidths: () => void;
+} => {
   const { t } = useTranslation();
   const context = useContext(CapacityResolverContext);
+  const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(MachineSetModel);
 
   const columns: TableColumn<MachineSetKind>[] = useMemo(() => {
     return [
@@ -286,8 +291,9 @@ const useMachineSetColumns = (): TableColumn<MachineSetKind>[] => {
         title: t('public~Name'),
         id: tableColumnInfo[0].id,
         sort: 'metadata.name',
+        resizableProps: getResizableProps(tableColumnInfo[0].id),
         props: {
-          ...cellIsStickyProps,
+          ...nameCellProps,
           modifier: 'nowrap',
         },
       },
@@ -295,6 +301,7 @@ const useMachineSetColumns = (): TableColumn<MachineSetKind>[] => {
         title: t('public~Namespace'),
         id: tableColumnInfo[1].id,
         sort: 'metadata.namespace',
+        resizableProps: getResizableProps(tableColumnInfo[1].id),
         props: {
           modifier: 'nowrap',
         },
@@ -303,6 +310,7 @@ const useMachineSetColumns = (): TableColumn<MachineSetKind>[] => {
         title: t('public~Machines'),
         id: tableColumnInfo[2].id,
         sort: 'status.readyReplicas',
+        resizableProps: getResizableProps(tableColumnInfo[2].id),
         props: {
           modifier: 'nowrap',
         },
@@ -312,6 +320,7 @@ const useMachineSetColumns = (): TableColumn<MachineSetKind>[] => {
         id: tableColumnInfo[3].id,
         sort: (data, direction) =>
           data.sort(sortResourceByValue(direction, getMachineSetInstanceType)),
+        resizableProps: getResizableProps(tableColumnInfo[3].id),
         props: {
           modifier: 'nowrap',
         },
@@ -323,6 +332,7 @@ const useMachineSetColumns = (): TableColumn<MachineSetKind>[] => {
           ? (data, direction) =>
               data.sort(sortResourceByValue(direction, (obj) => context.capacityResolver(obj).cpu))
           : undefined,
+        resizableProps: getResizableProps(tableColumnInfo[4].id),
         props: {
           modifier: 'nowrap',
         },
@@ -336,6 +346,7 @@ const useMachineSetColumns = (): TableColumn<MachineSetKind>[] => {
                 sortResourceByValue(direction, (obj) => context.capacityResolver(obj).memory),
               )
           : undefined,
+        resizableProps: getResizableProps(tableColumnInfo[5].id),
         props: {
           modifier: 'nowrap',
         },
@@ -344,12 +355,13 @@ const useMachineSetColumns = (): TableColumn<MachineSetKind>[] => {
         title: '',
         id: tableColumnInfo[6].id,
         props: {
-          ...cellIsStickyProps,
+          ...actionsCellProps,
         },
       },
     ];
-  }, [t, context]);
-  return columns;
+  }, [t, context, getResizableProps]);
+
+  return { columns, resetAllColumnWidths };
 };
 
 const getDataViewRows = (
@@ -406,7 +418,7 @@ const getDataViewRows = (
 };
 
 const MachineSetListContent: FC<MachineSetListProps> = ({ data, loaded, loadError, ...props }) => {
-  const columns = useMachineSetColumns();
+  const { columns, resetAllColumnWidths } = useMachineSetColumns();
 
   return (
     <Suspense fallback={<LoadingBox />}>
@@ -419,6 +431,8 @@ const MachineSetListContent: FC<MachineSetListProps> = ({ data, loaded, loadErro
         columns={columns}
         getDataViewRows={getDataViewRows}
         hideColumnManagement={true}
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );

From 4fc624a9b71c688310449821cc67ffbb944d8f6c Mon Sep 17 00:00:00 2001
From: Vikram Raj <vikrmrj@gmail.com>
Date: Thu, 19 Mar 2026 16:49:14 +0530
Subject: [PATCH 7/9] add resizable column feature to MachineConfigs list

---
 frontend/public/components/machine-config.tsx | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/frontend/public/components/machine-config.tsx b/frontend/public/components/machine-config.tsx
index 21c9f892440..c671f772814 100644
--- a/frontend/public/components/machine-config.tsx
+++ b/frontend/public/components/machine-config.tsx
@@ -21,11 +21,12 @@ import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { DASH } from '@console/shared/src/constants';
 import {
   actionsCellProps,
-  cellIsStickyProps,
   getNameCellProps,
   ConsoleDataView,
+  nameCellProps,
 } from '@console/app/src/components/data-view/ConsoleDataView';
 import { GetDataViewRows } from '@console/app/src/components/data-view/types';
+import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps';
 
 import { MachineConfigKind, referenceForModel } from '../module/k8s';
 import { MachineConfigModel } from '../models';
@@ -192,16 +193,22 @@ const getDataViewRows: GetDataViewRows<MachineConfigKind> = (data, columns) => {
   });
 };
 
-const useMachineConfigColumns = (): TableColumn<MachineConfigKind>[] => {
+const useMachineConfigColumns = (): {
+  columns: TableColumn<MachineConfigKind>[];
+  resetAllColumnWidths: () => void;
+} => {
   const { t } = useTranslation();
+  const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(MachineConfigModel);
+
   const columns: TableColumn<MachineConfigKind>[] = useMemo(() => {
     return [
       {
         title: t('public~Name'),
         id: tableColumnInfo[0].id,
         sort: 'metadata.name',
+        resizableProps: getResizableProps(tableColumnInfo[0].id),
         props: {
-          ...cellIsStickyProps,
+          ...nameCellProps,
           modifier: 'nowrap',
         },
       },
@@ -210,15 +217,16 @@ const useMachineConfigColumns = (): TableColumn<MachineConfigKind>[] => {
         id: tableColumnInfo[1].id,
         sort:
           "metadata.annotations['machineconfiguration.openshift.io/generated-by-controller-version']",
+        resizableProps: getResizableProps(tableColumnInfo[1].id),
         props: {
           modifier: 'nowrap',
-          width: 20,
         },
       },
       {
         title: t('public~Ignition version'),
         id: tableColumnInfo[2].id,
         sort: 'spec.config.ignition.version',
+        resizableProps: getResizableProps(tableColumnInfo[2].id),
         props: {
           modifier: 'nowrap',
         },
@@ -227,15 +235,16 @@ const useMachineConfigColumns = (): TableColumn<MachineConfigKind>[] => {
         title: t('public~OS image URL'),
         id: tableColumnInfo[3].id,
         sort: 'spec.osImageURL',
+        resizableProps: getResizableProps(tableColumnInfo[3].id),
         props: {
           modifier: 'nowrap',
-          width: 20,
         },
       },
       {
         title: t('public~Created'),
         id: tableColumnInfo[4].id,
         sort: 'metadata.creationTimestamp',
+        resizableProps: getResizableProps(tableColumnInfo[4].id),
         props: {
           modifier: 'nowrap',
         },
@@ -244,16 +253,17 @@ const useMachineConfigColumns = (): TableColumn<MachineConfigKind>[] => {
         title: '',
         id: tableColumnInfo[5].id,
         props: {
-          ...cellIsStickyProps,
+          ...actionsCellProps,
         },
       },
     ];
-  }, [t]);
-  return columns;
+  }, [t, getResizableProps]);
+
+  return { columns, resetAllColumnWidths };
 };
 
 const MachineConfigList: FC<MachineConfigListProps> = ({ data, loaded, loadError, ...props }) => {
-  const columns = useMachineConfigColumns();
+  const { columns, resetAllColumnWidths } = useMachineConfigColumns();
 
   return (
     <Suspense fallback={<LoadingBox />}>
@@ -266,6 +276,8 @@ const MachineConfigList: FC<MachineConfigListProps> = ({ data, loaded, loadError
         columns={columns}
         getDataViewRows={getDataViewRows}
         hideColumnManagement={true}
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );

From c4bd5960b28ea243a4fcec91d933e7b7e5ecfb31 Mon Sep 17 00:00:00 2001
From: Vikram Raj <vikrmrj@gmail.com>
Date: Thu, 19 Mar 2026 16:49:41 +0530
Subject: [PATCH 8/9] add resizable column feature to MachineConfigPools list

---
 .../public/components/machine-config-pool.tsx | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/frontend/public/components/machine-config-pool.tsx b/frontend/public/components/machine-config-pool.tsx
index b04374a982e..5eda68570e6 100644
--- a/frontend/public/components/machine-config-pool.tsx
+++ b/frontend/public/components/machine-config-pool.tsx
@@ -20,11 +20,12 @@ import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import PaneBodyGroup from '@console/shared/src/components/layout/PaneBodyGroup';
 import {
   actionsCellProps,
-  cellIsStickyProps,
   getNameCellProps,
   ConsoleDataView,
+  nameCellProps,
 } from '@console/app/src/components/data-view/ConsoleDataView';
 import { GetDataViewRows } from '@console/app/src/components/data-view/types';
+import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps';
 import { Conditions } from './conditions';
 import { MachineConfigPoolModel } from '../models';
 import { machineConfigReference, MachineConfigPage } from './machine-config';
@@ -303,16 +304,24 @@ const tableColumnInfo = [
   { id: '' },
 ];
 
-const useMachineConfigPoolColumns = (): TableColumn<MachineConfigPoolKind>[] => {
+const useMachineConfigPoolColumns = (): {
+  columns: TableColumn<MachineConfigPoolKind>[];
+  resetAllColumnWidths: () => void;
+} => {
   const { t } = useTranslation();
+  const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(
+    MachineConfigPoolModel,
+  );
+
   const columns: TableColumn<MachineConfigPoolKind>[] = useMemo(() => {
     return [
       {
         title: t('public~Name'),
         id: tableColumnInfo[0].id,
         sort: 'metadata.name',
+        resizableProps: getResizableProps(tableColumnInfo[0].id),
         props: {
-          ...cellIsStickyProps,
+          ...nameCellProps,
           modifier: 'nowrap',
         },
       },
@@ -320,6 +329,7 @@ const useMachineConfigPoolColumns = (): TableColumn<MachineConfigPoolKind>[] =>
         title: t('public~Configuration'),
         id: tableColumnInfo[1].id,
         sort: 'status.configuration.name',
+        resizableProps: getResizableProps(tableColumnInfo[1].id),
         props: {
           modifier: 'nowrap',
         },
@@ -327,6 +337,7 @@ const useMachineConfigPoolColumns = (): TableColumn<MachineConfigPoolKind>[] =>
       {
         title: t('public~Degraded'),
         id: tableColumnInfo[2].id,
+        resizableProps: getResizableProps(tableColumnInfo[2].id),
         props: {
           modifier: 'nowrap',
         },
@@ -334,6 +345,7 @@ const useMachineConfigPoolColumns = (): TableColumn<MachineConfigPoolKind>[] =>
       {
         title: t('public~Update status'),
         id: tableColumnInfo[3].id,
+        resizableProps: getResizableProps(tableColumnInfo[3].id),
         props: {
           modifier: 'nowrap',
         },
@@ -342,12 +354,13 @@ const useMachineConfigPoolColumns = (): TableColumn<MachineConfigPoolKind>[] =>
         title: '',
         id: tableColumnInfo[4].id,
         props: {
-          ...cellIsStickyProps,
+          ...actionsCellProps,
         },
       },
     ];
-  }, [t]);
-  return columns;
+  }, [t, getResizableProps]);
+
+  return { columns, resetAllColumnWidths };
 };
 
 const getDataViewRows: GetDataViewRows<MachineConfigPoolKind, Action[]> = (data, columns) => {
@@ -399,7 +412,7 @@ const MachineConfigPoolList: FC<MachineConfigPoolListProps> = ({
   loadError,
   ...props
 }) => {
-  const columns = useMachineConfigPoolColumns();
+  const { columns, resetAllColumnWidths } = useMachineConfigPoolColumns();
 
   return (
     <>
@@ -414,6 +427,8 @@ const MachineConfigPoolList: FC<MachineConfigPoolListProps> = ({
           columns={columns}
           getDataViewRows={getDataViewRows}
           hideColumnManagement={true}
+          isResizable
+          resetAllColumnWidths={resetAllColumnWidths}
         />
       </Suspense>
     </>

From d71de57b198cd9e6a57efbab97747dd6c88f147d Mon Sep 17 00:00:00 2001
From: Vikram Raj <vikrmrj@gmail.com>
Date: Mon, 23 Mar 2026 15:07:10 +0530
Subject: [PATCH 9/9] Add labels column width

---
 .../packages/console-app/src/components/nodes/NodesPage.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/packages/console-app/src/components/nodes/NodesPage.tsx b/frontend/packages/console-app/src/components/nodes/NodesPage.tsx
index 2dc558b26ca..7f747817b7e 100644
--- a/frontend/packages/console-app/src/components/nodes/NodesPage.tsx
+++ b/frontend/packages/console-app/src/components/nodes/NodesPage.tsx
@@ -10,6 +10,7 @@ import {
   initialFiltersDefault,
   ConsoleDataView,
   nameCellProps,
+  getLabelsColumnWidthStyleProp,
 } from '@console/app/src/components/data-view/ConsoleDataView';
 import type {
   ConsoleDataViewColumn,
@@ -164,7 +165,7 @@ const useNodesColumns = (
   vmsEnabled: boolean,
 ): { columns: TableColumn<NodeRowItem>[]; resetAllColumnWidths: () => void } => {
   const { t } = useTranslation();
-  const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(NodeModel);
+  const { getResizableProps, getWidth, resetAllColumnWidths } = useColumnWidthSettings(NodeModel);
 
   const columns = useMemo(() => {
     return [
@@ -321,6 +322,7 @@ const useNodesColumns = (
         resizableProps: getResizableProps(nodeColumnInfo.labels.id),
         props: {
           modifier: 'nowrap',
+          ...getLabelsColumnWidthStyleProp(getWidth(nodeColumnInfo.labels.id)),
         },
         additional: true,
       },
@@ -352,7 +354,7 @@ const useNodesColumns = (
         },
       },
     ];
-  }, [t, vmsEnabled, getResizableProps]);
+  }, [t, vmsEnabled, getWidth, getResizableProps]);
 
   return { columns, resetAllColumnWidths };
 };