diff --git a/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap b/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
index a88ebd5750c..60d731bf7a7 100644
--- a/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
+++ b/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
@@ -14,7 +14,12 @@ exports[`table column matches snapshot 1`] = `
- Columns
+ Columns
+
+ (2/3)
+
{
{}}
- tableColumnsHidden={['a', 'b', 'c']}
+ tableColumnsHidden={['b']}
/>
);
const { container } = render(tableColumn);
diff --git a/web-console/src/components/table-column-selector/table-column-selector.tsx b/web-console/src/components/table-column-selector/table-column-selector.tsx
index 1602afa9538..fc5359e3e70 100644
--- a/web-console/src/components/table-column-selector/table-column-selector.tsx
+++ b/web-console/src/components/table-column-selector/table-column-selector.tsx
@@ -34,26 +34,33 @@ export const TableColumnSelector = React.memo(function TableColumnSelector(
props: TableColumnSelectorProps,
) {
const { columns, onChange, tableColumnsHidden } = props;
+
+ const isColumnShown = (column: string) => !tableColumnsHidden.includes(column);
+
const checkboxes = (
);
+ const counterText = `(${columns.filter(isColumnShown).length}/${columns.length})`;
+
return (
-
+
);
});