From e245ee1c65d4f4eeabf027228cd74c80c3ca8bbe Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Tue, 17 Mar 2026 14:34:08 +0530 Subject: [PATCH 1/8] add resizable column feature to PersistentVolumes list --- .../public/components/persistent-volume.tsx | 27 ++++++++++++++----- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/frontend/public/components/persistent-volume.tsx b/frontend/public/components/persistent-volume.tsx index 2ce509075b6..4b1df1e8811 100644 --- a/frontend/public/components/persistent-volume.tsx +++ b/frontend/public/components/persistent-volume.tsx @@ -13,11 +13,12 @@ import { } from '@patternfly/react-core'; 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 { TableColumn } from '@console/dynamic-plugin-sdk/src/lib-core'; import { Timestamp } from '@console/shared/src/components/datetime/Timestamp'; import PaneBody from '@console/shared/src/components/layout/PaneBody'; @@ -111,8 +112,12 @@ const getDataViewRowsCreator: (t: TFunction) => GetDataViewRows[] => { +const usePersistentVolumeColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(PersistentVolumeModel); const columns: TableColumn[] = useMemo( () => [ @@ -120,48 +125,54 @@ const usePersistentVolumeColumns = (): TableColumn[] => { title: t('public~Name'), sort: 'metadata.name', id: tableColumnInfo[0].id, - props: { ...cellIsStickyProps, modifier: 'nowrap' }, + resizableProps: getResizableProps(tableColumnInfo[0].id), + props: { ...nameCellProps, modifier: 'nowrap' }, }, { title: t('public~Status'), sort: 'status.phase', id: tableColumnInfo[1].id, + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap' }, }, { title: t('public~Claim'), sort: 'spec.claimRef.name', id: tableColumnInfo[2].id, + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap' }, }, { title: t('public~Capacity'), sort: 'pvStorage', id: tableColumnInfo[3].id, + resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap' }, }, { title: t('public~Labels'), sort: 'metadata.labels', id: tableColumnInfo[4].id, + resizableProps: getResizableProps(tableColumnInfo[4].id), props: { modifier: 'nowrap' }, }, { title: t('public~Created'), sort: 'metadata.creationTimestamp', id: tableColumnInfo[5].id, + resizableProps: getResizableProps(tableColumnInfo[5].id), props: { modifier: 'nowrap' }, }, { title: '', id: tableColumnInfo[6].id, - props: { ...cellIsStickyProps }, + props: { ...actionsCellProps }, }, ], - [t], + [t, getResizableProps], ); - return columns; + return { columns, resetAllColumnWidths }; }; const PVDetails = ({ obj: pv }: { obj: PersistentVolumeKind }) => { @@ -246,7 +257,7 @@ const PVDetails = ({ obj: pv }: { obj: PersistentVolumeKind }) => { export const PersistentVolumeList: FC = ({ data, loaded, ...props }) => { const { t } = useTranslation(); - const columns = usePersistentVolumeColumns(); + const { columns, resetAllColumnWidths } = usePersistentVolumeColumns(); const getDataViewRows = useMemo(() => getDataViewRowsCreator(t), [t]); return ( @@ -259,6 +270,8 @@ export const PersistentVolumeList: FC = ({ data, load columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 45898188f0065852e4f69c0808e6a7196714ebdf Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Tue, 17 Mar 2026 15:45:50 +0530 Subject: [PATCH 2/8] add resizable column feature to PersistentVolumeClaims list --- .../components/persistent-volume-claim.tsx | 30 ++++++++++++++----- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/frontend/public/components/persistent-volume-claim.tsx b/frontend/public/components/persistent-volume-claim.tsx index 94debf19be8..525077d7a4a 100644 --- a/frontend/public/components/persistent-volume-claim.tsx +++ b/frontend/public/components/persistent-volume-claim.tsx @@ -20,12 +20,13 @@ import { DataViewFilterOption } from '@patternfly/react-data-view/dist/cjs/DataV import { ChartDonut } from '@patternfly/react-charts/victory'; import { actionsCellProps, - cellIsStickyProps, getNameCellProps, initialFiltersDefault, ConsoleDataView, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; import { ResourceFilters, GetDataViewRows } from '@console/app/src/components/data-view/types'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import { TableColumn } from '@console/dynamic-plugin-sdk/src/lib-core'; import { useExtensions } from '@console/plugin-sdk/src/api/useExtensions'; import { @@ -198,8 +199,14 @@ const getDataViewRowsCreator: ( }); }; -const usePersistentVolumeClaimColumns = (): TableColumn[] => { +const usePersistentVolumeClaimColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings( + PersistentVolumeClaimModel, + ); const columns: TableColumn[] = useMemo( () => [ @@ -207,54 +214,61 @@ const usePersistentVolumeClaimColumns = (): TableColumn = ({ obj: pvc }) => { @@ -515,7 +529,7 @@ export const PersistentVolumeClaimList: FC = ({ ...props }) => { const { t } = useTranslation(); - const columns = usePersistentVolumeClaimColumns(); + const { columns, resetAllColumnWidths } = usePersistentVolumeClaimColumns(); const pvcMetrics = useConsoleSelector(({ UI }) => UI.getIn(['metrics', 'pvc'])); const getDataViewRows = useMemo(() => getDataViewRowsCreator(t, pvcMetrics), [t, pvcMetrics]); @@ -584,6 +598,8 @@ export const PersistentVolumeClaimList: FC = ({ additionalFilterNodes={additionalFilterNodes} matchesAdditionalFilters={matchesAdditionalFilters} hideColumnManagement + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 376780c340402ade64343764a86a52251ecaea84 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Tue, 17 Mar 2026 15:52:04 +0530 Subject: [PATCH 3/8] add resizable column feature to StorageClasses list --- frontend/public/components/storage-class.tsx | 24 ++++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/frontend/public/components/storage-class.tsx b/frontend/public/components/storage-class.tsx index b4fc2f6c701..b43c45b7551 100644 --- a/frontend/public/components/storage-class.tsx +++ b/frontend/public/components/storage-class.tsx @@ -12,11 +12,12 @@ import { } from '@patternfly/react-core'; 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 { TableColumn } from '@console/dynamic-plugin-sdk/src/lib-core'; import { useTranslation } from 'react-i18next'; import { StorageClassModel } from '@console/internal/models'; @@ -122,8 +123,12 @@ const getDataViewRowsCreator: (t: TFunction) => GetDataViewRows[] => { +const useStorageClassColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(StorageClassModel); const columns: TableColumn[] = useMemo( () => [ @@ -131,35 +136,38 @@ const useStorageClassColumns = (): TableColumn[] => { title: t('public~Name'), sort: 'metadata.name', id: tableColumnInfo[0].id, - props: { ...cellIsStickyProps, modifier: 'nowrap' }, + resizableProps: getResizableProps(tableColumnInfo[0].id), + props: { ...nameCellProps, modifier: 'nowrap' }, }, { title: t('public~Provisioner'), sort: 'provisioner', id: tableColumnInfo[1].id, + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap' }, }, { title: t('public~Reclaim policy'), sort: 'reclaimPolicy', id: tableColumnInfo[2].id, + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap' }, }, { title: '', id: tableColumnInfo[3].id, - props: { ...cellIsStickyProps }, + props: { ...actionsCellProps }, }, ], - [t], + [t, getResizableProps], ); - return columns; + return { columns, resetAllColumnWidths }; }; export const StorageClassList: FC = ({ data, loaded, ...props }) => { const { t } = useTranslation(); - const columns = useStorageClassColumns(); + const { columns, resetAllColumnWidths } = useStorageClassColumns(); const getDataViewRows = useMemo(() => getDataViewRowsCreator(t), [t]); return ( @@ -172,6 +180,8 @@ export const StorageClassList: FC = ({ data, loaded, ...p columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 408040758eca8218354f96658a4d4f0d2350693b Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Tue, 17 Mar 2026 16:09:24 +0530 Subject: [PATCH 4/8] add resizable column feature to VolumeAttributesClasses list --- .../components/volume-attributes-class.tsx | 28 ++++++++++++++----- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/frontend/public/components/volume-attributes-class.tsx b/frontend/public/components/volume-attributes-class.tsx index 2f49d369bd2..5ebe41452a2 100644 --- a/frontend/public/components/volume-attributes-class.tsx +++ b/frontend/public/components/volume-attributes-class.tsx @@ -28,12 +28,13 @@ import { VolumeAttributesClassModel } from '../models'; import { DASH } from '@console/shared'; import { actionsCellProps, - cellIsStickyProps, getNameCellProps, initialFiltersDefault, 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'; const [group, version] = VolumeAttributesClassModel.apiVersion.split('/'); @@ -45,16 +46,24 @@ export const VolumeAttributesClassGVK: K8sGroupVersionKind = { const tableColumnInfo = [{ id: 'name' }, { id: 'driverName' }, { id: 'parameters' }, { id: '' }]; -const useVolumeAttributesClassColumns = () => { +const useVolumeAttributesClassColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings( + VolumeAttributesClassModel, + ); + const columns: TableColumn[] = useMemo(() => { return [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -62,6 +71,7 @@ const useVolumeAttributesClassColumns = () => { title: t('public~Driver name'), id: tableColumnInfo[1].id, sort: 'driverName', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -69,6 +79,7 @@ const useVolumeAttributesClassColumns = () => { { title: t('public~Parameters'), id: tableColumnInfo[2].id, + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -77,12 +88,13 @@ const useVolumeAttributesClassColumns = () => { title: '', id: tableColumnInfo[3].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ]; - }, [t]); - return columns; + }, [t, getResizableProps]); + + return { columns, resetAllColumnWidths }; }; const getDataViewRows: GetDataViewRows = (data, columns) => { @@ -134,7 +146,7 @@ export const VolumeAttributesClassList: FC = ({ loadError, ...restProps }) => { - const columns = useVolumeAttributesClassColumns(); + const { columns, resetAllColumnWidths } = useVolumeAttributesClassColumns(); const isLoaded = loaded !== undefined ? loaded : true; return ( @@ -149,6 +161,8 @@ export const VolumeAttributesClassList: FC = ({ initialFilters={initialFiltersDefault} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From be49bc1859866043ab7b0e1de8eae9708e06190c Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Tue, 17 Mar 2026 18:50:15 +0530 Subject: [PATCH 5/8] add resizable column feature to VolumeSnapshots list --- .../volume-snapshot/volume-snapshot.tsx | 26 ++++++++++++++----- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot.tsx b/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot.tsx index 9ef7ea84725..793bc1c3c82 100644 --- a/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot.tsx +++ b/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot.tsx @@ -6,12 +6,13 @@ import { useTranslation } from 'react-i18next'; import { useParams } from 'react-router'; import { actionsCellProps, - cellIsStickyProps, getNameCellProps, initialFiltersDefault, ConsoleDataView, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; import type { ResourceFilters, GetDataViewRows } from '@console/app/src/components/data-view/types'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import type { TableColumn } from '@console/dynamic-plugin-sdk/src/lib-core'; import { ListPageBody, @@ -145,8 +146,9 @@ const getDataViewRows: GetDataViewRows[] => { +): { columns: TableColumn[]; resetAllColumnWidths: () => void } => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(VolumeSnapshotModel); const columns: TableColumn[] = useMemo( () => @@ -155,36 +157,42 @@ const useVolumeSnapshotColumns = ( title: t('console-app~Name'), sort: 'metadata.name', id: tableColumnInfo[0].id, - props: { ...cellIsStickyProps, modifier: 'nowrap' }, + resizableProps: getResizableProps(tableColumnInfo[0].id), + props: { ...nameCellProps, modifier: 'nowrap' }, }, { title: t('console-app~Namespace'), sort: 'metadata.namespace', id: tableColumnInfo[1].id, + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap' }, }, { title: t('console-app~Status'), sort: 'snapshotStatus', id: tableColumnInfo[2].id, + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap' }, }, { title: t('console-app~Size'), sort: 'volumeSnapshotSize', id: tableColumnInfo[3].id, + resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap' }, }, { title: t('console-app~Source'), sort: 'volumeSnapshotSource', id: tableColumnInfo[4].id, + resizableProps: getResizableProps(tableColumnInfo[4].id), props: { modifier: 'nowrap' }, }, { title: t('console-app~Snapshot content'), sort: 'status.boundVolumeSnapshotContentName', id: tableColumnInfo[5].id, + resizableProps: getResizableProps(tableColumnInfo[5].id), props: { modifier: 'nowrap' }, disabled: rowData.hideSnapshotContentColumn, }, @@ -192,24 +200,26 @@ const useVolumeSnapshotColumns = ( title: t('console-app~VolumeSnapshotClass'), sort: 'spec.volumeSnapshotClassName', id: tableColumnInfo[6].id, + resizableProps: getResizableProps(tableColumnInfo[6].id), props: { modifier: 'nowrap' }, }, { title: t('console-app~Created at'), sort: 'metadata.creationTimestamp', id: tableColumnInfo[7].id, + resizableProps: getResizableProps(tableColumnInfo[7].id), props: { modifier: 'nowrap' }, }, { title: '', id: tableColumnInfo[8].id, - props: { ...cellIsStickyProps }, + props: { ...actionsCellProps }, }, ].filter((c) => !c.disabled), - [t, rowData.hideSnapshotContentColumn], + [t, rowData.hideSnapshotContentColumn, getResizableProps], ); - return columns; + return { columns, resetAllColumnWidths }; }; const VolumeSnapshotTable: FC = ({ data, loaded, ...props }) => { @@ -220,7 +230,7 @@ const VolumeSnapshotTable: FC = ({ data, loaded, ...pr hideSnapshotContentColumn: !canListVSC, }; - const columns = useVolumeSnapshotColumns(customRowData); + const { columns, resetAllColumnWidths } = useVolumeSnapshotColumns(customRowData); const volumeSnapshotStatusFilterOptions = useMemo( () => [ @@ -287,6 +297,8 @@ const VolumeSnapshotTable: FC = ({ data, loaded, ...pr additionalFilterNodes={additionalFilterNodes} matchesAdditionalFilters={matchesAdditionalFilters} hideColumnManagement + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 0588d9719c60e9d503b399097c70815dca03a4f1 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Tue, 17 Mar 2026 18:50:42 +0530 Subject: [PATCH 6/8] add resizable column feature to VolumeSnapshotClasses list --- .../volume-snapshot/volume-snapshot-class.tsx | 26 ++++++++++++++----- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-class.tsx b/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-class.tsx index 705eda944f9..c9f38758ebc 100644 --- a/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-class.tsx +++ b/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-class.tsx @@ -4,11 +4,12 @@ import type { TFunction } from 'i18next'; import { useTranslation } from 'react-i18next'; import { actionsCellProps, - cellIsStickyProps, getNameCellProps, ConsoleDataView, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; import type { GetDataViewRows } from '@console/app/src/components/data-view/types'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import type { TableColumn } from '@console/dynamic-plugin-sdk/src/lib-core'; import { ListPageBody, @@ -82,8 +83,14 @@ const getDataViewRowsCreator: (t: TFunction) => GetDataViewRows[] => { +const useVolumeSnapshotClassColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings( + VolumeSnapshotClassModel, + ); const columns: TableColumn[] = useMemo( () => [ @@ -91,30 +98,33 @@ const useVolumeSnapshotClassColumns = (): TableColumn[] title: t('console-app~Name'), sort: 'metadata.name', id: tableColumnInfo[0].id, - props: { ...cellIsStickyProps, modifier: 'nowrap' }, + resizableProps: getResizableProps(tableColumnInfo[0].id), + props: { ...nameCellProps, modifier: 'nowrap' }, }, { title: t('console-app~Driver'), sort: 'driver', id: tableColumnInfo[1].id, + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap' }, }, { title: t('console-app~Deletion policy'), sort: 'deletionPolicy', id: tableColumnInfo[2].id, + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap' }, }, { title: '', id: tableColumnInfo[3].id, - props: { ...cellIsStickyProps }, + props: { ...actionsCellProps }, }, ], - [t], + [t, getResizableProps], ); - return columns; + return { columns, resetAllColumnWidths }; }; const VolumeSnapshotClassTable: FC = ({ @@ -123,7 +133,7 @@ const VolumeSnapshotClassTable: FC = ({ ...props }) => { const { t } = useTranslation(); - const columns = useVolumeSnapshotClassColumns(); + const { columns, resetAllColumnWidths } = useVolumeSnapshotClassColumns(); const getDataViewRows = useMemo(() => getDataViewRowsCreator(t), [t]); return ( @@ -136,6 +146,8 @@ const VolumeSnapshotClassTable: FC = ({ columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 3ff6133355788adbdb1888ef55ecf9092e2a7e1d Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Tue, 17 Mar 2026 18:51:09 +0530 Subject: [PATCH 7/8] add resizable column feature to VolumeSnapshotContents list --- .../volume-snapshot-content.tsx | 29 ++++++++++++++----- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-content.tsx b/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-content.tsx index 714392b7363..82e79f28f21 100644 --- a/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-content.tsx +++ b/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-content.tsx @@ -3,11 +3,12 @@ import { useMemo, Suspense } from 'react'; import { useTranslation } from 'react-i18next'; import { actionsCellProps, - cellIsStickyProps, getNameCellProps, ConsoleDataView, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; import type { GetDataViewRows } from '@console/app/src/components/data-view/types'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import type { TableColumn } from '@console/dynamic-plugin-sdk/src/lib-core'; import { ListPageBody, @@ -102,8 +103,14 @@ const getDataViewRows: GetDataViewRows = (data, colum }); }; -const useVolumeSnapshotContentColumns = (): TableColumn[] => { +const useVolumeSnapshotContentColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings( + VolumeSnapshotContentModel, + ); const columns: TableColumn[] = useMemo( () => [ @@ -111,48 +118,54 @@ const useVolumeSnapshotContentColumns = (): TableColumn = ({ @@ -160,7 +173,7 @@ const VolumeSnapshotContentTable: FC = ({ loaded, ...props }) => { - const columns = useVolumeSnapshotContentColumns(); + const { columns, resetAllColumnWidths } = useVolumeSnapshotContentColumns(); return ( }> @@ -172,6 +185,8 @@ const VolumeSnapshotContentTable: FC = ({ columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From dca7b29bdf8e48463532d0e9b58f08467e410d1f Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Wed, 18 Mar 2026 20:25:43 +0530 Subject: [PATCH 8/8] Fix labels column width --- frontend/public/components/persistent-volume.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/frontend/public/components/persistent-volume.tsx b/frontend/public/components/persistent-volume.tsx index 4b1df1e8811..8ae3343e995 100644 --- a/frontend/public/components/persistent-volume.tsx +++ b/frontend/public/components/persistent-volume.tsx @@ -117,7 +117,9 @@ const usePersistentVolumeColumns = (): { resetAllColumnWidths: () => void; } => { const { t } = useTranslation(); - const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(PersistentVolumeModel); + const { getResizableProps, getWidth, resetAllColumnWidths } = useColumnWidthSettings( + PersistentVolumeModel, + ); const columns: TableColumn[] = useMemo( () => [ @@ -154,7 +156,10 @@ const usePersistentVolumeColumns = (): { sort: 'metadata.labels', id: tableColumnInfo[4].id, resizableProps: getResizableProps(tableColumnInfo[4].id), - props: { modifier: 'nowrap' }, + props: { + modifier: 'nowrap', + style: { width: `${getWidth(tableColumnInfo[4].id) ?? 200}px` }, + }, }, { title: t('public~Created'), @@ -169,7 +174,7 @@ const usePersistentVolumeColumns = (): { props: { ...actionsCellProps }, }, ], - [t, getResizableProps], + [t, getResizableProps, getWidth], ); return { columns, resetAllColumnWidths };