diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 763a1a99..921baa00 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -1,6 +1,6 @@ import styles from './table.module.scss' -import { useEffect, useState } from 'react' +import React, { useEffect, useState } from 'react' import { useMediaQuery } from 'react-responsive' import { Title, Dropdown, Input, Text } from '@statisticsnorway/ssb-component-library' import { ArrowUp, ArrowDown } from 'react-feather' @@ -33,6 +33,25 @@ const conditionalStyling = (index: number) => { const NoResultText = () =>

Fant ingen resultater

+// eslint-disable-next-line @typescript-eslint/no-explicit-any +type MixedElement = string | number | React.ReactElement + +const extractStringValue = (child: MixedElement): string | number => { + if (typeof child === 'string') { + return child + } else if (typeof child === 'number') { + return child + } else if (React.isValidElement(child)) { + const props = child.props as { children?: MixedElement; linkText?: MixedElement } + if (props.children) { + return extractStringValue(props.children) + } else if (props.linkText) { + return extractStringValue(props.linkText) + } + } + return '' +} + const TableMobileView = ({ columns, data }: TableData) => (
{data.length ? ( @@ -71,8 +90,8 @@ const TableDesktopView = ({ columns, data, activeTab }: TableDesktopViewProps) = const sortTableData = (id: string) => { data.sort((a, b) => { // Sort by id for the first column; - const valueA = typeof a[id] === 'object' ? a['id'] : a[id] - const valueB = typeof b[id] === 'object' ? b['id'] : b[id] + const valueA = extractStringValue(a[id] as MixedElement) + const valueB = extractStringValue(b[id] as MixedElement) // Sort by number if (typeof valueA === 'number' && typeof valueB === 'number')