function SubtestsResultsTable()

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>
  );
}