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')