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 = ( {columns.map(column => ( onChange(column)} /> ))} ); + const counterText = `(${columns.filter(isColumnShown).length}/${columns.length})`; + return ( - ); });