diff --git a/src/data-workspace/category-combo-table-body/category-combo-table-body.js b/src/data-workspace/category-combo-table-body/category-combo-table-body.js index 5901e69360..14c59f7c9a 100644 --- a/src/data-workspace/category-combo-table-body/category-combo-table-body.js +++ b/src/data-workspace/category-combo-table-body/category-combo-table-body.js @@ -1,4 +1,5 @@ import { TableBody, TableRow, TableCell } from '@dhis2/ui' +import cx from 'classnames' import PropTypes from 'prop-types' import React, { useCallback } from 'react' import { useMetadata, selectors } from '../../shared/index.js' @@ -43,16 +44,19 @@ export const CategoryComboTableBody = React.memo( ? new Array(maxColumnsInSection - sortedCOCs.length).fill(0) : [] - const filteredDataElements = dataElements.filter((de) => { + const filteredDeIds = new Set() + // filter out elements that do not match filterText + dataElements.forEach((de) => { const name = de.displayFormName.toLowerCase() - return ( - (!filterText || name.includes(filterText.toLowerCase())) && - (!globalFilterText || - name.includes(globalFilterText.toLowerCase())) - ) + if ( + (filterText && !name.includes(filterText.toLowerCase())) || + (globalFilterText && + !name.includes(globalFilterText.toLowerCase())) + ) { + filteredDeIds.add(de.id) + } }) - const hiddenItemsCount = - dataElements.length - filteredDataElements.length + const hiddenItemsCount = filteredDeIds.size return ( @@ -63,9 +67,14 @@ export const CategoryComboTableBody = React.memo( paddingCells={paddingCells} checkTableActive={checkTableActive} /> - {filteredDataElements.map((de, i) => { + {dataElements.map((de, i) => { return ( - + {sortedCOCs.map((coc) => ( diff --git a/src/data-workspace/table-body.module.css b/src/data-workspace/table-body.module.css index 40c5a0af30..c9d3486991 100644 --- a/src/data-workspace/table-body.module.css +++ b/src/data-workspace/table-body.module.css @@ -67,3 +67,7 @@ composes: totalCell; font-weight: initial; } + +.hidden { + display: none; +}