From 940f7495e2278f2b9cdb8921482bdff5e276bbd5 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Thu, 19 Mar 2026 18:41:15 +0530 Subject: [PATCH 1/5] add resizable column feature to Users list --- frontend/public/components/user.tsx | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/frontend/public/components/user.tsx b/frontend/public/components/user.tsx index 94fe80bb2e6..d165314e1a2 100644 --- a/frontend/public/components/user.tsx +++ b/frontend/public/components/user.tsx @@ -25,12 +25,13 @@ import { ConsoleDataView, getNameCellProps, actionsCellProps, - cellIsStickyProps, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; import type { ConsoleDataViewColumn, GetDataViewRows, } from '@console/app/src/components/data-view/types'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import { useCanEditIdentityProviders, useOAuthData } from '@console/shared/src/hooks/oauth'; import { DASH } from '@console/shared/src/constants/ui'; import { useTranslation } from 'react-i18next'; @@ -125,16 +126,22 @@ const NoDataEmptyMsg = () => { ); }; -const useUsersColumns = (): ConsoleDataViewColumn[] => { +const useUsersColumns = (): { + columns: ConsoleDataViewColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); - return useMemo( + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(UserModel); + + const columns: ConsoleDataViewColumn[] = useMemo( () => [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -142,6 +149,7 @@ const useUsersColumns = (): ConsoleDataViewColumn[] => { title: t('public~Full name'), id: tableColumnInfo[1].id, sort: 'fullName', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -150,6 +158,7 @@ const useUsersColumns = (): ConsoleDataViewColumn[] => { title: t('public~Identities'), id: tableColumnInfo[2].id, sort: 'identities[0]', + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -157,15 +166,20 @@ const useUsersColumns = (): ConsoleDataViewColumn[] => { { title: '', id: tableColumnInfo[3].id, + props: { + ...actionsCellProps, + }, }, ], - [t], + [t, getResizableProps], ); + + return { columns, resetAllColumnWidths }; }; export const UserList: FC = (props) => { const { t } = useTranslation(); - const columns = useUsersColumns(); + const { columns, resetAllColumnWidths } = useUsersColumns(); const { data, loaded } = props; // Show custom empty state when no users exist @@ -183,6 +197,8 @@ export const UserList: FC = (props) => { columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 299265aa69fb3099c6b5e71aac1a514613ae4159 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Thu, 19 Mar 2026 18:41:41 +0530 Subject: [PATCH 2/5] add resizable column feature to Groups list --- frontend/public/components/group.tsx | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/frontend/public/components/group.tsx b/frontend/public/components/group.tsx index b1619072db9..0d8d976ae69 100644 --- a/frontend/public/components/group.tsx +++ b/frontend/public/components/group.tsx @@ -26,10 +26,11 @@ import { ConsoleDataView, getNameCellProps, actionsCellProps, - cellIsStickyProps, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; import { TableColumn, K8sResourceKind } 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'; const tableColumnInfo = [{ id: 'name' }, { id: 'users' }, { id: 'created' }, { id: 'actions' }]; @@ -75,16 +76,22 @@ const getDataViewRows: GetDataViewRows = (data, columns) => { }); }; -const useGroupColumns = (): TableColumn[] => { +const useGroupColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); - return useMemo( + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(GroupModel); + + const columns: TableColumn[] = useMemo( () => [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -92,6 +99,7 @@ const useGroupColumns = (): TableColumn[] => { title: t('public~Users'), id: tableColumnInfo[1].id, sort: 'users.length', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -100,6 +108,7 @@ const useGroupColumns = (): TableColumn[] => { title: t('public~Created'), id: tableColumnInfo[2].id, sort: 'metadata.creationTimestamp', + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -108,18 +117,20 @@ const useGroupColumns = (): TableColumn[] => { title: '', id: tableColumnInfo[3].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ], - [t], + [t, getResizableProps], ); + + return { columns, resetAllColumnWidths }; }; export const GroupList: FC<{ data: GroupKind[]; loaded: boolean }> = (props) => { const { data, loaded } = props; const { t } = useTranslation(); - const columns = useGroupColumns(); + const { columns, resetAllColumnWidths } = useGroupColumns(); return ( }> @@ -131,6 +142,8 @@ export const GroupList: FC<{ data: GroupKind[]; loaded: boolean }> = (props) => columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From e2d36e51a532a2391d2e0d8a917e626d0f45215e Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Thu, 19 Mar 2026 18:42:03 +0530 Subject: [PATCH 3/5] add resizable column feature to ServiceAccounts list --- .../public/components/service-account.jsx | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/frontend/public/components/service-account.jsx b/frontend/public/components/service-account.jsx index 6feae021614..a530554420b 100644 --- a/frontend/public/components/service-account.jsx +++ b/frontend/public/components/service-account.jsx @@ -13,8 +13,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'; import { DASH } from '@console/shared/src/constants/ui'; import { referenceForModel } from '../module/k8s'; @@ -95,14 +96,17 @@ const ServiceAccountsDetailsPage = (props) => ( const useServiceAccountColumns = () => { const { t } = useTranslation(); - return useMemo( + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(ServiceAccountModel); + + const columns = useMemo( () => [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -110,6 +114,7 @@ const useServiceAccountColumns = () => { title: t('public~Namespace'), id: tableColumnInfo[1].id, sort: 'metadata.namespace', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -118,6 +123,7 @@ const useServiceAccountColumns = () => { title: t('public~Secrets'), id: tableColumnInfo[2].id, sort: 'secrets.length', + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -126,6 +132,7 @@ const useServiceAccountColumns = () => { title: t('public~Created'), id: tableColumnInfo[3].id, sort: 'metadata.creationTimestamp', + resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap', }, @@ -134,18 +141,20 @@ const useServiceAccountColumns = () => { title: '', id: tableColumnInfo[4].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ], - [t], + [t, getResizableProps], ); + + return { columns, resetAllColumnWidths }; }; const ServiceAccountsList = (props) => { const { data, loaded } = props; const { t } = useTranslation(); - const columns = useServiceAccountColumns(); + const { columns, resetAllColumnWidths } = useServiceAccountColumns(); return ( }> @@ -157,6 +166,8 @@ const ServiceAccountsList = (props) => { columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 613094c0c3f4ff3bc446418f503cdd1f87533102 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Thu, 19 Mar 2026 18:42:27 +0530 Subject: [PATCH 4/5] add resizable column feature to Roles list --- frontend/public/components/RBAC/role.jsx | 64 ++++++++++++++---------- 1 file changed, 38 insertions(+), 26 deletions(-) diff --git a/frontend/public/components/RBAC/role.jsx b/frontend/public/components/RBAC/role.jsx index cbb8ea1a257..788ed2e895b 100644 --- a/frontend/public/components/RBAC/role.jsx +++ b/frontend/public/components/RBAC/role.jsx @@ -15,9 +15,10 @@ import { ConsoleDataView, getNameCellProps, actionsCellProps, - cellIsStickyProps, + nameCellProps, initialFiltersDefault, } 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 { tableFilters } from '../factory/table-filters'; import { SectionHeading } from '../utils/headings'; @@ -210,7 +211,7 @@ const useBindingsColumns = () => { id: bindingsTableColumnInfo[0].id, sort: 'metadata.name', props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -392,32 +393,41 @@ export const ClusterRoleBindingsDetailsPage = (props) => { const useRolesColumns = () => { const { t } = useTranslation(); - return [ - { - title: t('public~Name'), - id: tableColumnInfo[0].id, - sort: 'metadata.name', - props: { - ...cellIsStickyProps, - modifier: 'nowrap', + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(RoleModel); + + const columns = useMemo( + () => [ + { + title: t('public~Name'), + id: tableColumnInfo[0].id, + sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), + props: { + ...nameCellProps, + modifier: 'nowrap', + }, }, - }, - { - title: t('public~Namespace'), - id: tableColumnInfo[1].id, - sort: 'metadata.namespace', - props: { - modifier: 'nowrap', + { + title: t('public~Namespace'), + id: tableColumnInfo[1].id, + sort: 'metadata.namespace', + resizableProps: getResizableProps(tableColumnInfo[1].id), + props: { + modifier: 'nowrap', + }, }, - }, - { - title: '', - id: tableColumnInfo[2].id, - props: { - ...cellIsStickyProps, + { + title: '', + id: tableColumnInfo[2].id, + props: { + ...actionsCellProps, + }, }, - }, - ]; + ], + [t, getResizableProps], + ); + + return { columns, resetAllColumnWidths }; }; const useRoleFilterOptions = () => { @@ -443,7 +453,7 @@ const useRoleFilterOptions = () => { const RolesList = (props) => { const { t } = useTranslation(); const { data, loaded } = props; - const columns = useRolesColumns(); + const { columns, resetAllColumnWidths } = useRolesColumns(); const roleFilterOptions = useRoleFilterOptions(); const initialFilters = useMemo(() => ({ ...initialFiltersDefault, 'role-kind': [] }), []); @@ -480,6 +490,8 @@ const RolesList = (props) => { additionalFilterNodes={additionalFilterNodes} matchesAdditionalFilters={matchesAdditionalFilters} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 6f04c25b726fe1737e0194f23a1e5b47a047257b Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Thu, 19 Mar 2026 18:42:48 +0530 Subject: [PATCH 5/5] add resizable column feature to RoleBindings list --- frontend/public/components/RBAC/bindings.tsx | 31 +++++++++++++++----- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/frontend/public/components/RBAC/bindings.tsx b/frontend/public/components/RBAC/bindings.tsx index 2d2a894828f..dd60b329c44 100644 --- a/frontend/public/components/RBAC/bindings.tsx +++ b/frontend/public/components/RBAC/bindings.tsx @@ -22,7 +22,7 @@ import { PageHeading } from '@console/shared/src/components/heading/PageHeading' import LazyActionMenu from '@console/shared/src/components/actions/LazyActionMenu'; import { useFlag } from '@console/shared/src/hooks/useFlag'; import { DASH } from '@console/shared/src/constants/ui'; -import { ClusterRoleBindingModel } from '../../models'; +import { ClusterRoleBindingModel, RoleBindingModel } from '../../models'; import { ClusterRoleBindingKind, getQN, @@ -40,11 +40,12 @@ import { initialFiltersDefault, getNameCellProps, actionsCellProps, - cellIsStickyProps, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; import { DataViewCheckboxFilter } from '@patternfly/react-data-view'; import { TableColumn } from '@console/internal/module/k8s'; import { GetDataViewRows, ResourceFilters } from '@console/app/src/components/data-view/types'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import { tableFilters } from '../factory/table-filters'; import { ButtonBar } from '../utils/button-bar'; import { Firehose } from '../utils/firehose'; @@ -97,16 +98,22 @@ const tableColumnInfo = [ { id: 'actions' }, ]; -const useRoleBindingsColumns = (): TableColumn[] => { +const useRoleBindingsColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); - return useMemo( + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(RoleBindingModel); + + const columns: TableColumn[] = useMemo( () => [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -114,6 +121,7 @@ const useRoleBindingsColumns = (): TableColumn[] => { title: t('public~Role ref'), id: tableColumnInfo[1].id, sort: 'roleRef.name', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -122,6 +130,7 @@ const useRoleBindingsColumns = (): TableColumn[] => { title: t('public~Subject kind'), id: tableColumnInfo[2].id, sort: 'subject.kind', + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -130,6 +139,7 @@ const useRoleBindingsColumns = (): TableColumn[] => { title: t('public~Subject name'), id: tableColumnInfo[3].id, sort: 'subject.name', + resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap', }, @@ -138,6 +148,7 @@ const useRoleBindingsColumns = (): TableColumn[] => { title: t('public~Namespace'), id: tableColumnInfo[4].id, sort: 'metadata.namespace', + resizableProps: getResizableProps(tableColumnInfo[4].id), props: { modifier: 'nowrap', }, @@ -146,12 +157,14 @@ const useRoleBindingsColumns = (): TableColumn[] => { title: '', id: tableColumnInfo[5].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ], - [t], + [t, getResizableProps], ); + + return { columns, resetAllColumnWidths }; }; export const BindingName: FC = ({ binding }) => ( @@ -234,7 +247,7 @@ const getDataViewRows: GetDataViewRows = (data, columns) => { export const BindingsList: FC = (props) => { const { t } = useTranslation(); - const columns = useRoleBindingsColumns(); + const { columns, resetAllColumnWidths } = useRoleBindingsColumns(); const hasCRBindings = props.data.some((binding) => !binding.metadata.namespace); @@ -329,6 +342,8 @@ export const BindingsList: FC = (props) => { matchesAdditionalFilters={matchesAdditionalFilters} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> );