From e65459231768148d2634aa09fe7bf8ab5d93adf1 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Fri, 20 Mar 2026 12:45:33 +0530 Subject: [PATCH 1/5] add resizable column feature to CustomResourceDefinitions list --- .../components/custom-resource-definition.tsx | 37 ++++++++++++++----- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/frontend/public/components/custom-resource-definition.tsx b/frontend/public/components/custom-resource-definition.tsx index 5a64f71da7b..ba0c4267641 100644 --- a/frontend/public/components/custom-resource-definition.tsx +++ b/frontend/public/components/custom-resource-definition.tsx @@ -57,11 +57,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 LazyActionMenu from '@console/shared/src/components/actions/LazyActionMenu'; import { ActionMenuVariant } from '@console/shared/src/components/actions/types'; @@ -215,16 +216,24 @@ const tableColumnInfo = [ { id: '' }, ]; -const useCustomResourceDefinitionsColumns = (): TableColumn[] => { +const useCustomResourceDefinitionsColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); - const columns: TableColumn[] = useMemo(() => { - return [ + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings( + CustomResourceDefinitionModel, + ); + + const columns: TableColumn[] = useMemo( + () => [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'spec.names.kind', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -232,6 +241,7 @@ const useCustomResourceDefinitionsColumns = (): TableColumn(direction, getLatestVersionForCRD), ), + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -251,6 +262,7 @@ const useCustomResourceDefinitionsColumns = (): TableColumn = ({ obj }) => { @@ -334,7 +349,7 @@ export const CustomResourceDefinitionsList: FC { - const columns = useCustomResourceDefinitionsColumns(); + const { columns, resetAllColumnWidths } = useCustomResourceDefinitionsColumns(); return ( }> @@ -346,6 +361,8 @@ export const CustomResourceDefinitionsList: FC ); From 2a0c72e2fa32eb01485163b49020af4f08bafa38 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Fri, 20 Mar 2026 12:46:10 +0530 Subject: [PATCH 2/5] add resizable column feature to Namespaces and Project list --- frontend/public/components/namespace.jsx | 72 +++++++++++++++++------- 1 file changed, 51 insertions(+), 21 deletions(-) diff --git a/frontend/public/components/namespace.jsx b/frontend/public/components/namespace.jsx index 162741a58b9..568ecc606b4 100644 --- a/frontend/public/components/namespace.jsx +++ b/frontend/public/components/namespace.jsx @@ -95,11 +95,12 @@ import { useCreateNamespaceModal } from '@console/shared/src/hooks/useCreateName import { useCreateProjectModal } from '@console/shared/src/hooks/useCreateProjectModal'; import { actionsCellProps, - cellIsStickyProps, + nameCellProps, getNameCellProps, initialFiltersDefault, ConsoleDataView, } from '@console/app/src/components/data-view/ConsoleDataView'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import { DataViewCheckboxFilter } from '@patternfly/react-data-view'; import { getGroupVersionKindForModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-ref'; import LazyActionMenu from '@console/shared/src/components/actions/LazyActionMenu'; @@ -177,14 +178,17 @@ const namespaceColumnInfo = [ const useNamespacesColumns = () => { const { t } = useTranslation(); - return useMemo(() => { - return [ + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(NamespaceModel); + + const columns = useMemo( + () => [ { title: t('public~Name'), id: namespaceColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(namespaceColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -192,6 +196,7 @@ const useNamespacesColumns = () => { title: t('public~Display name'), id: namespaceColumnInfo[1].id, sort: 'metadata.annotations["openshift.io/display-name"]', + resizableProps: getResizableProps(namespaceColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -200,6 +205,7 @@ const useNamespacesColumns = () => { title: t('public~Status'), id: namespaceColumnInfo[2].id, sort: 'status.phase', + resizableProps: getResizableProps(namespaceColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -208,6 +214,7 @@ const useNamespacesColumns = () => { title: t('public~Requester'), id: namespaceColumnInfo[3].id, sort: "metadata.annotations.['openshift.io/requester']", + resizableProps: getResizableProps(namespaceColumnInfo[3].id), props: { modifier: 'nowrap', }, @@ -216,6 +223,7 @@ const useNamespacesColumns = () => { title: t('public~Memory'), id: namespaceColumnInfo[4].id, sort: (data, direction) => data.sort(sortResourceByValue(direction, sorts.namespaceMemory)), + resizableProps: getResizableProps(namespaceColumnInfo[4].id), props: { modifier: 'nowrap', }, @@ -224,6 +232,7 @@ const useNamespacesColumns = () => { title: t('public~CPU'), id: namespaceColumnInfo[5].id, sort: (data, direction) => data.sort(sortResourceByValue(direction, sorts.namespaceCPU)), + resizableProps: getResizableProps(namespaceColumnInfo[5].id), props: { modifier: 'nowrap', }, @@ -232,6 +241,7 @@ const useNamespacesColumns = () => { title: t('public~Created'), id: namespaceColumnInfo[6].id, sort: 'metadata.creationTimestamp', + resizableProps: getResizableProps(namespaceColumnInfo[6].id), props: { modifier: 'nowrap', }, @@ -240,6 +250,7 @@ const useNamespacesColumns = () => { title: t('public~Description'), id: namespaceColumnInfo[7].id, sort: "metadata.annotations.['openshift.io/description']", + resizableProps: getResizableProps(namespaceColumnInfo[7].id), props: { modifier: 'nowrap', }, @@ -249,9 +260,9 @@ const useNamespacesColumns = () => { title: t('public~Labels'), id: namespaceColumnInfo[8].id, sort: 'metadata.labels', + resizableProps: getResizableProps(namespaceColumnInfo[8].id), props: { modifier: 'nowrap', - width: 10, }, additional: true, }, @@ -259,11 +270,14 @@ const useNamespacesColumns = () => { title: '', id: namespaceColumnInfo[9].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, - ]; - }, [t]); + ], + [t, getResizableProps], + ); + + return { columns, resetAllColumnWidths }; }; const NamespacesColumnManagementID = referenceForModel(NamespaceModel); @@ -346,7 +360,7 @@ const getNamespaceDataViewRows = (rowData, tableColumns, namespaceMetrics, t) => export const NamespacesList = (props) => { const { t } = useTranslation(); const dispatch = useConsoleDispatch(); - const columns = useNamespacesColumns(); + const { columns, resetAllColumnWidths } = useNamespacesColumns(); const [selectedColumns, , columnPreferenceLoaded] = useUserPreference( COLUMN_MANAGEMENT_USER_PREFERENCE_KEY, undefined, @@ -439,6 +453,8 @@ export const NamespacesList = (props) => { getDataViewRows={(rowData, tableColumns) => getNamespaceDataViewRows(rowData, tableColumns, namespaceMetrics, t) } + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); @@ -465,14 +481,17 @@ const projectColumnInfo = namespaceColumnInfo; const useProjectsColumns = ({ showMetrics, showActions }) => { const { t } = useTranslation(); - return useMemo(() => { - const columns = [ + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(ProjectModel); + + const columns = useMemo(() => { + const cols = [ { title: t('public~Name'), id: projectColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(projectColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -480,6 +499,7 @@ const useProjectsColumns = ({ showMetrics, showActions }) => { title: t('public~Display name'), id: projectColumnInfo[1].id, sort: 'metadata.annotations["openshift.io/display-name"]', + resizableProps: getResizableProps(projectColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -488,6 +508,7 @@ const useProjectsColumns = ({ showMetrics, showActions }) => { title: t('public~Status'), id: projectColumnInfo[2].id, sort: 'status.phase', + resizableProps: getResizableProps(projectColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -496,6 +517,7 @@ const useProjectsColumns = ({ showMetrics, showActions }) => { title: t('public~Requester'), id: projectColumnInfo[3].id, sort: "metadata.annotations.['openshift.io/requester']", + resizableProps: getResizableProps(projectColumnInfo[3].id), props: { modifier: 'nowrap', }, @@ -503,12 +525,13 @@ const useProjectsColumns = ({ showMetrics, showActions }) => { ]; if (showMetrics) { - columns.push( + cols.push( { title: t('public~Memory'), id: projectColumnInfo[4].id, sort: (data, direction) => data.sort(sortResourceByValue(direction, sorts.namespaceMemory)), + resizableProps: getResizableProps(projectColumnInfo[4].id), props: { modifier: 'nowrap', }, @@ -517,6 +540,7 @@ const useProjectsColumns = ({ showMetrics, showActions }) => { title: t('public~CPU'), id: projectColumnInfo[5].id, sort: (data, direction) => data.sort(sortResourceByValue(direction, sorts.namespaceCPU)), + resizableProps: getResizableProps(projectColumnInfo[5].id), props: { modifier: 'nowrap', }, @@ -524,11 +548,12 @@ const useProjectsColumns = ({ showMetrics, showActions }) => { ); } - columns.push( + cols.push( { title: t('public~Created'), id: projectColumnInfo[6].id, sort: 'metadata.creationTimestamp', + resizableProps: getResizableProps(projectColumnInfo[6].id), props: { modifier: 'nowrap', }, @@ -537,6 +562,7 @@ const useProjectsColumns = ({ showMetrics, showActions }) => { title: t('public~Description'), id: projectColumnInfo[7].id, sort: "metadata.annotations.['openshift.io/description']", + resizableProps: getResizableProps(projectColumnInfo[7].id), props: { modifier: 'nowrap', }, @@ -546,26 +572,28 @@ const useProjectsColumns = ({ showMetrics, showActions }) => { title: t('public~Labels'), id: projectColumnInfo[8].id, sort: 'metadata.labels', + resizableProps: getResizableProps(projectColumnInfo[8].id), props: { modifier: 'nowrap', - width: 10, }, additional: true, }, ); if (showActions) { - columns.push({ + cols.push({ title: '', id: projectColumnInfo[9].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }); } - return columns; - }, [t, showMetrics, showActions]); + return cols; + }, [t, showMetrics, showActions, getResizableProps]); + + return { columns, resetAllColumnWidths }; }; const getProjectDataViewRows = ( @@ -696,7 +724,7 @@ const ProjectLink = ({ project }) => { export const ProjectsTable = (props) => { const { t } = useTranslation(); - const columns = useProjectsColumns({ showMetrics: false, showActions: false }); + const { columns } = useProjectsColumns({ showMetrics: false, showActions: false }); return ( }> @@ -725,7 +753,7 @@ export const ProjectList = (props) => { const isPrometheusAvailable = usePrometheusGate(); const showMetrics = isPrometheusAvailable && canGetNS; const showActions = true; - const columns = useProjectsColumns({ showMetrics, showActions }); + const { columns, resetAllColumnWidths } = useProjectsColumns({ showMetrics, showActions }); const namespaceMetrics = useConsoleSelector(({ UI }) => UI.getIn(['metrics', 'namespace'])); // TODO Utilize usePoll hook @@ -818,6 +846,8 @@ export const ProjectList = (props) => { getProjectDataViewRows(rowData, tableColumns, namespaceMetrics, showMetrics, undefined, t) } NoDataEmptyMsg={OpenShiftGettingStarted} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 0d09a3357168c4bb9fd4d1377bfc54cc697c5b2e Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Fri, 20 Mar 2026 19:55:15 +0530 Subject: [PATCH 3/5] add resizable column feature to LimitRange list --- frontend/public/components/limit-range.tsx | 27 ++++++++++++++++------ 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/frontend/public/components/limit-range.tsx b/frontend/public/components/limit-range.tsx index 0a90f923a87..b62e257da9e 100644 --- a/frontend/public/components/limit-range.tsx +++ b/frontend/public/components/limit-range.tsx @@ -19,10 +19,11 @@ import { ConsoleDataView, getNameCellProps, actionsCellProps, - cellIsStickyProps, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; import { TableColumn } from '@console/internal/module/k8s'; import { GetDataViewRows } from '@console/app/src/components/data-view/types'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import { DASH } from '@console/shared/src/constants/ui'; import LazyActionMenu from '@console/shared/src/components/actions/LazyActionMenu'; @@ -63,16 +64,22 @@ const getDataViewRows: GetDataViewRows = (data, columns) => { }); }; -const useLimitRangeColumns = (): TableColumn[] => { +const useLimitRangeColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); - return useMemo( + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(LimitRangeModel); + + const columns = useMemo( () => [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -80,6 +87,7 @@ const useLimitRangeColumns = (): TableColumn[] => { title: t('public~Namespace'), id: tableColumnInfo[1].id, sort: 'metadata.namespace', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -88,6 +96,7 @@ const useLimitRangeColumns = (): TableColumn[] => { title: t('public~Created'), id: tableColumnInfo[2].id, sort: 'metadata.creationTimestamp', + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -96,17 +105,19 @@ const useLimitRangeColumns = (): TableColumn[] => { title: '', id: tableColumnInfo[3].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ], - [t], + [t, getResizableProps], ); + + return { columns, resetAllColumnWidths }; }; export const LimitRangeList: FC<{ data: K8sResourceKind[]; loaded: boolean }> = (props) => { const { data, loaded } = props; - const columns = useLimitRangeColumns(); + const { columns, resetAllColumnWidths } = useLimitRangeColumns(); return ( }> @@ -117,6 +128,8 @@ export const LimitRangeList: FC<{ data: K8sResourceKind[]; loaded: boolean }> = columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From b252788d655949faeee93afa7f8f4fa993f99ac4 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Fri, 20 Mar 2026 19:56:05 +0530 Subject: [PATCH 4/5] add resizable column feature to ResourceQuotas list --- frontend/public/components/resource-quota.jsx | 50 +++++++++++++------ 1 file changed, 36 insertions(+), 14 deletions(-) diff --git a/frontend/public/components/resource-quota.jsx b/frontend/public/components/resource-quota.jsx index 57383b694eb..1014d73f70b 100644 --- a/frontend/public/components/resource-quota.jsx +++ b/frontend/public/components/resource-quota.jsx @@ -51,8 +51,9 @@ import { ConsoleDataView, getNameCellProps, actionsCellProps, - cellIsStickyProps, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import LazyActionMenu from '@console/shared/src/components/actions/LazyActionMenu'; const isClusterQuota = (quota) => !quota.metadata.namespace; @@ -527,14 +528,17 @@ const getAppliedClusterResourceQuotaDataViewRows = (data, columns, namespace) => const useResourceQuotaColumns = () => { const { t } = useTranslation(); - return useMemo( + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(ResourceQuotaModel); + + const columns = useMemo( () => [ { title: t('public~Name'), id: resourceQuotaTableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(resourceQuotaTableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -542,6 +546,7 @@ const useResourceQuotaColumns = () => { title: t('public~Namespace'), id: resourceQuotaTableColumnInfo[1].id, sort: 'metadata.namespace', + resizableProps: getResizableProps(resourceQuotaTableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -550,23 +555,24 @@ const useResourceQuotaColumns = () => { title: t('public~Label selector'), id: resourceQuotaTableColumnInfo[2].id, sort: 'spec.selector.labels.matchLabels', + resizableProps: getResizableProps(resourceQuotaTableColumnInfo[2].id), props: { modifier: 'nowrap', - width: 20, }, }, { title: t('public~Project annotations'), id: resourceQuotaTableColumnInfo[3].id, sort: 'spec.selector.annotations', + resizableProps: getResizableProps(resourceQuotaTableColumnInfo[3].id), props: { modifier: 'nowrap', - width: 20, }, }, { title: t('public~Status'), id: resourceQuotaTableColumnInfo[4].id, + resizableProps: getResizableProps(resourceQuotaTableColumnInfo[4].id), props: { modifier: 'nowrap', }, @@ -575,6 +581,7 @@ const useResourceQuotaColumns = () => { title: t('public~Created'), id: resourceQuotaTableColumnInfo[5].id, sort: 'metadata.creationTimestamp', + resizableProps: getResizableProps(resourceQuotaTableColumnInfo[5].id), props: { modifier: 'nowrap', }, @@ -583,17 +590,19 @@ const useResourceQuotaColumns = () => { title: '', id: resourceQuotaTableColumnInfo[6].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ], - [t], + [t, getResizableProps], ); + + return { columns, resetAllColumnWidths }; }; export const ResourceQuotasList = (props) => { const { data, loaded, namespace } = props; - const columns = useResourceQuotaColumns(); + const { columns, resetAllColumnWidths } = useResourceQuotaColumns(); return ( }> @@ -606,6 +615,8 @@ export const ResourceQuotasList = (props) => { getResourceQuotaDataViewRows(dvData, dvColumns, namespace) } hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); @@ -613,14 +624,19 @@ export const ResourceQuotasList = (props) => { const useAppliedClusterResourceQuotaColumns = () => { const { t } = useTranslation(); - return useMemo( + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings( + AppliedClusterResourceQuotaModel, + ); + + const columns = useMemo( () => [ { title: t('public~Name'), id: appliedClusterResourceQuotaTableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(appliedClusterResourceQuotaTableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -628,23 +644,24 @@ const useAppliedClusterResourceQuotaColumns = () => { title: t('public~Label selector'), id: appliedClusterResourceQuotaTableColumnInfo[1].id, sort: 'spec.selector.labels.matchLabels', + resizableProps: getResizableProps(appliedClusterResourceQuotaTableColumnInfo[1].id), props: { modifier: 'nowrap', - width: 20, }, }, { title: t('public~Project annotations'), id: appliedClusterResourceQuotaTableColumnInfo[2].id, sort: 'spec.selector.annotations', + resizableProps: getResizableProps(appliedClusterResourceQuotaTableColumnInfo[2].id), props: { modifier: 'nowrap', - width: 20, }, }, { title: t('public~Status'), id: appliedClusterResourceQuotaTableColumnInfo[3].id, + resizableProps: getResizableProps(appliedClusterResourceQuotaTableColumnInfo[3].id), props: { modifier: 'nowrap', }, @@ -653,18 +670,21 @@ const useAppliedClusterResourceQuotaColumns = () => { title: t('public~Created'), id: appliedClusterResourceQuotaTableColumnInfo[4].id, sort: 'metadata.creationTimestamp', + resizableProps: getResizableProps(appliedClusterResourceQuotaTableColumnInfo[4].id), props: { modifier: 'nowrap', }, }, ], - [t], + [t, getResizableProps], ); + + return { columns, resetAllColumnWidths }; }; export const AppliedClusterResourceQuotasList = (props) => { const { data, loaded, namespace } = props; - const columns = useAppliedClusterResourceQuotaColumns(); + const { columns, resetAllColumnWidths } = useAppliedClusterResourceQuotaColumns(); return ( }> @@ -678,6 +698,8 @@ export const AppliedClusterResourceQuotasList = (props) => { getAppliedClusterResourceQuotaDataViewRows(dvData, dvColumns, namespace) } hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 03d35c9732028359ec12e9f325232ac6ed2a0b8b Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Mon, 23 Mar 2026 17:37:44 +0530 Subject: [PATCH 5/5] Add labels column width in Namespace table --- frontend/public/components/namespace.jsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/frontend/public/components/namespace.jsx b/frontend/public/components/namespace.jsx index 568ecc606b4..084848222a2 100644 --- a/frontend/public/components/namespace.jsx +++ b/frontend/public/components/namespace.jsx @@ -99,6 +99,7 @@ import { getNameCellProps, initialFiltersDefault, ConsoleDataView, + getLabelsColumnWidthStyleProp, } from '@console/app/src/components/data-view/ConsoleDataView'; import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import { DataViewCheckboxFilter } from '@patternfly/react-data-view'; @@ -178,7 +179,9 @@ const namespaceColumnInfo = [ const useNamespacesColumns = () => { const { t } = useTranslation(); - const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(NamespaceModel); + const { getResizableProps, getWidth, resetAllColumnWidths } = useColumnWidthSettings( + NamespaceModel, + ); const columns = useMemo( () => [ @@ -263,6 +266,7 @@ const useNamespacesColumns = () => { resizableProps: getResizableProps(namespaceColumnInfo[8].id), props: { modifier: 'nowrap', + ...getLabelsColumnWidthStyleProp(getWidth(namespaceColumnInfo[8].id)), }, additional: true, }, @@ -274,7 +278,7 @@ const useNamespacesColumns = () => { }, }, ], - [t, getResizableProps], + [t, getResizableProps, getWidth], ); return { columns, resetAllColumnWidths }; @@ -481,7 +485,9 @@ const projectColumnInfo = namespaceColumnInfo; const useProjectsColumns = ({ showMetrics, showActions }) => { const { t } = useTranslation(); - const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(ProjectModel); + const { getResizableProps, getWidth, resetAllColumnWidths } = useColumnWidthSettings( + ProjectModel, + ); const columns = useMemo(() => { const cols = [ @@ -575,6 +581,7 @@ const useProjectsColumns = ({ showMetrics, showActions }) => { resizableProps: getResizableProps(projectColumnInfo[8].id), props: { modifier: 'nowrap', + ...getLabelsColumnWidthStyleProp(getWidth(projectColumnInfo[8].id)), }, additional: true, }, @@ -591,7 +598,7 @@ const useProjectsColumns = ({ showMetrics, showActions }) => { } return cols; - }, [t, showMetrics, showActions, getResizableProps]); + }, [t, showMetrics, showActions, getResizableProps, getWidth]); return { columns, resetAllColumnWidths }; };