in src/components/CompareResults/SubtestsResults/SubtestsResultsTable.tsx [173:240]
function SubtestsResultsTable({
filteringSearchTerm,
results,
}: ResultsTableProps) {
// This is our custom hook that manages table filters
// and provides methods for clearing and toggling them.
const { tableFilters, onClearFilter, onToggleFilter } =
useTableFilters(columnsConfiguration);
const { sortColumn, sortDirection, onToggleSort } =
useTableSort(columnsConfiguration);
const filteredResults = useMemo(() => {
return filterResults(
columnsConfiguration,
results,
filteringSearchTerm,
tableFilters,
resultMatchesSearchTerm,
);
}, [results, filteringSearchTerm, tableFilters]);
const filteredAndSortedResults = useMemo(() => {
return sortResults(
columnsConfiguration,
filteredResults,
sortColumn,
sortDirection,
defaultSortFunction,
);
}, [sortColumn, sortDirection, filteredResults]);
const processedResults = useMemo(() => {
return processResults(filteredAndSortedResults);
}, [filteredAndSortedResults]);
const rowGridTemplateColumns = columnsConfiguration
.map((config) => config.gridWidth)
.join(' ');
return (
<Box
data-testid='subtests-results-table'
role='table'
sx={{ marginTop: 3, paddingBottom: 3 }}
>
{/* Using the same TableHeader component as the CompareResults components but with different columnsConfiguration */}
<TableHeader
columnsConfiguration={columnsConfiguration}
filters={tableFilters}
onToggleFilter={onToggleFilter}
onClearFilter={onClearFilter}
sortColumn={sortColumn}
sortDirection={sortDirection}
onToggleSort={onToggleSort}
/>
{processedResults.map((res) => (
<SubtestsTableContent
key={res.key}
identifier={res.key}
results={res.value}
rowGridTemplateColumns={rowGridTemplateColumns}
/>
))}
{processedResults.length == 0 && <NoResultsFound />}
</Box>
);
}