Skip to content

CONSOLE-4982: add resizable column feature to workload table #16144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vikram-raj wants to merge 4 commits into
base: main
Choose a base branch
from
Open

CONSOLE-4982: add resizable column feature to workload table #16144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
acbc35d
add resizable column feature to workload table
vikram-raj Mar 13, 2026
48e133a
Fix label column width
vikram-raj Mar 18, 2026
b4d7294
Fix labels column width in Pod list page
vikram-raj Mar 18, 2026
4c51004
add shared function for labels column style prop
vikram-raj Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,3 +264,15 @@ export const actionsCellProps = {
hasLeftBorder: true,
isActionCell: true,
};

/**
* Returns the style prop for a Labels column so it can be shared across tables.
* @param width - Persisted or current width in pixels (e.g. from getWidth(columnId))
* @param defaultWidth - Default width when no width is provided (default 200)
* @returns Style object for the column's props.style
*/
export const getLabelsColumnWidthStyleProp = (width: number | undefined, defaultWidth = 200) => ({
style: {
width: `${width ?? defaultWidth}px`,
},
});
4 changes: 3 additions & 1 deletion frontend/public/components/daemon-set.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ const EnvironmentTab: FC<EnvironmentTabProps> = (props) => (
);

export const DaemonSetsList: FC<DaemonSetsListProps> = ({ data, loaded, ...props }) => {
const columns = useWorkloadColumns<DaemonSetKind>();
const { columns, resetAllColumnWidths } = useWorkloadColumns<DaemonSetKind>(DaemonSetModel);

return (
<Suspense fallback={<LoadingBox />}>
Expand All @@ -126,6 +126,8 @@ export const DaemonSetsList: FC<DaemonSetsListProps> = ({ data, loaded, ...props
columns={columns}
getDataViewRows={getDataViewRows}
hideColumnManagement={true}
isResizable
resetAllColumnWidths={resetAllColumnWidths}
/>
</Suspense>
);
Expand Down
6 changes: 5 additions & 1 deletion frontend/public/components/deployment-config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,7 +306,9 @@ export const DeploymentConfigsList: FC<DeploymentConfigsListProps> = ({
loaded,
...props
}) => {
const columns = useWorkloadColumns<DeploymentConfigKind>();
const { columns, resetAllColumnWidths } = useWorkloadColumns<DeploymentConfigKind>(
DeploymentConfigModel,
);

return (
<Suspense fallback={<LoadingBox />}>
Expand All @@ -318,6 +320,8 @@ export const DeploymentConfigsList: FC<DeploymentConfigsListProps> = ({
columns={columns}
getDataViewRows={getDataViewRows}
hideColumnManagement={true}
isResizable
resetAllColumnWidths={resetAllColumnWidths}
/>
</Suspense>
);
Expand Down
4 changes: 3 additions & 1 deletion frontend/public/components/deployment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ const getDataViewRows: GetDataViewRows<DeploymentKind> = (data, columns) => {
};

export const DeploymentsList: FC<DeploymentsListProps> = ({ data, loaded, ...props }) => {
const columns = useWorkloadColumns<DeploymentKind>();
const { columns, resetAllColumnWidths } = useWorkloadColumns<DeploymentKind>(DeploymentModel);

return (
<Suspense fallback={<LoadingBox />}>
Expand All @@ -237,6 +237,8 @@ export const DeploymentsList: FC<DeploymentsListProps> = ({ data, loaded, ...pro
loaded={loaded}
columns={columns}
getDataViewRows={getDataViewRows}
isResizable
resetAllColumnWidths={resetAllColumnWidths}
/>
</Suspense>
);
Expand Down
6 changes: 4 additions & 2 deletions frontend/public/components/pod-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
actionsCellProps,
ConsoleDataView,
getLabelsColumnWidthStyleProp,
getNameCellProps,
initialFiltersDefault,
nameCellProps,
Expand Down Expand Up @@ -118,7 +119,7 @@ const usePodsColumns = (
showNodes: boolean,
): { columns: TableColumn<PodKind>[]; resetAllColumnWidths: () => void } => {
const { t } = useTranslation();
const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(PodModel);
const { getResizableProps, getWidth, resetAllColumnWidths } = useColumnWidthSettings(PodModel);

const columns = useMemo(() => {
return [
Expand Down Expand Up @@ -224,6 +225,7 @@ const usePodsColumns = (
resizableProps: getResizableProps(tableColumnInfo[10].id),
props: {
modifier: 'nowrap',
...getLabelsColumnWidthStyleProp(getWidth(tableColumnInfo[3].id)),
},
additional: true,
},
Expand Down Expand Up @@ -254,7 +256,7 @@ const usePodsColumns = (
},
},
];
}, [t, showNodes, getResizableProps]);
}, [t, showNodes, getResizableProps, getWidth]);
return { columns, resetAllColumnWidths };
};

Expand Down
4 changes: 3 additions & 1 deletion frontend/public/components/stateful-set.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const EnvironmentTab: FC<EnvironmentTabProps> = (props) => (
);

const StatefulSetsList: FC<StatefulSetsListProps> = ({ data, loaded, ...props }) => {
const columns = useWorkloadColumns();
const { columns, resetAllColumnWidths } = useWorkloadColumns<K8sResourceKind>(StatefulSetModel);

return (
<Suspense fallback={<LoadingBox />}>
Expand All @@ -88,6 +88,8 @@ const StatefulSetsList: FC<StatefulSetsListProps> = ({ data, loaded, ...props })
getWorkloadDataViewRows(dvData, dvColumns, StatefulSetModel)
}
hideColumnManagement={true}
isResizable
resetAllColumnWidths={resetAllColumnWidths}
/>
</Suspense>
);
Expand Down
29 changes: 20 additions & 9 deletions frontend/public/components/workload-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import type { FC } from 'react';
import {
actionsCellProps,
cellIsStickyProps,
getLabelsColumnWidthStyleProp,
getNameCellProps,
nameCellProps,
} from '@console/app/src/components/data-view/ConsoleDataView';
import {
ConsoleDataViewColumn,
ConsoleDataViewRow,
} from '@console/app/src/components/data-view/types';
import { K8sModel } from '@console/dynamic-plugin-sdk/src/api/common-types';
import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps';
import type { K8sModel } from '@console/dynamic-plugin-sdk/src/api/common-types';
import { RowProps, TableColumn } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
import { getGroupVersionKindForModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-ref';
import LazyActionMenu, {
Expand Down Expand Up @@ -159,23 +161,29 @@ export const getWorkloadDataViewRows = <T extends K8sResourceKind>(
});
};

export const useWorkloadColumns = <T extends K8sResourceKind>(): TableColumn<T>[] => {
export const useWorkloadColumns = <T extends K8sResourceKind>(
model: K8sModel,
): { columns: TableColumn<T>[]; resetAllColumnWidths: () => void } => {
const { t } = useTranslation();
const { getResizableProps, getWidth, resetAllColumnWidths } = useColumnWidthSettings(model);

const columns = useMemo(() => {
return [
{
title: t('public~Name'),
id: tableColumnInfo[0].id,
sort: 'metadata.name',
resizableProps: getResizableProps(tableColumnInfo[0].id),
props: {
...cellIsStickyProps,
...nameCellProps,
modifier: 'nowrap',
},
},
{
title: t('public~Namespace'),
id: tableColumnInfo[1].id,
sort: 'metadata.namespace',
resizableProps: getResizableProps(tableColumnInfo[1].id),
props: {
modifier: 'nowrap',
},
Expand All @@ -184,6 +192,7 @@ export const useWorkloadColumns = <T extends K8sResourceKind>(): TableColumn<T>[
title: t('public~Status'),
id: tableColumnInfo[2].id,
sort: 'status.replicas',
resizableProps: getResizableProps(tableColumnInfo[2].id),
props: {
modifier: 'nowrap',
},
Expand All @@ -192,30 +201,32 @@ export const useWorkloadColumns = <T extends K8sResourceKind>(): TableColumn<T>[
title: t('public~Labels'),
id: tableColumnInfo[3].id,
sort: 'metadata.labels',
resizableProps: getResizableProps(tableColumnInfo[3].id),
props: {
modifier: 'nowrap',
width: 20,
Copy link
Member

@rhamilto rhamilto Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing this value means the labels take up as much space as possible (which is what the value was solving for) and resizing the labels column is nearly impossible.

Screen.Recording.2026-03-13.at.1.25.21.PM.mov

@nicolethoen, any ideas?

Copy link
Member

@nicolethoen nicolethoen Mar 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've been tinkering with this a bit.

I think you might have luck with the following:

{
        title: t('public~Labels'),
        id: tableColumnInfo[3].id,
        sort: 'metadata.labels',
        resizableProps: {...getResizableProps(tableColumnInfo[3].id), width: 200}, // set an initial minwidth on the label 's resizableProps 
        props: {
          modifier: 'nowrap',
          style: {width: '200px'} // this makes the starting width match the inital minwidth
        },
      },

Let me know if that helps

Copy link
Member Author

@vikram-raj vikram-raj Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

 {
        title: t('public~Labels'),
        id: tableColumnInfo[3].id,
        sort: 'metadata.labels',
        resizableProps: getResizableProps(tableColumnInfo[3].id),
        props: {
          modifier: 'nowrap',
          style: { width: `${getWidth(tableColumnInfo[3].id) ?? 200}px` },
        },
      },

Only adding style props with width works.

Copy link
Member

@rhamilto rhamilto Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With the fix, I still can't resize Labels.

Screen.Recording.2026-03-18.at.11.19.19.AM.mov

Copy link
Member Author

@vikram-raj vikram-raj Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are not able to decrease the width further because of the longest label.
Screenshot 2026-03-18 at 8 54 31 PM

...getLabelsColumnWidthStyleProp(getWidth(tableColumnInfo[3].id)),
},
},
{
title: t('public~Pod selector'),
id: tableColumnInfo[4].id,
sort: 'spec.selector',
resizableProps: getResizableProps(tableColumnInfo[4].id),
props: {
modifier: 'nowrap',
width: 20,
},
},
{
title: '',
id: tableColumnInfo[5].id,
props: {
...cellIsStickyProps,
...actionsCellProps,
},
},
];
}, [t]);
return columns;
}, [t, getResizableProps, getWidth]);

return { columns, resetAllColumnWidths };
};

type ReplicasCountProps = {
Expand Down