fix(Table): add support for clickable rows (and clickable cards)

apps/www/app/content/components/table/en/code.mdx

@@ -49,6 +49,11 @@ This is especially useful in tables with pagination or other dynamically updated
 
 <Story story='FixedTable' />
 
+### Clickable rows
+By adding `data-clickdelegate` on a `<tr>` and `data-clicktarget` on a `<Button>`, `<Link>` or `<Input type="checkout">`, you can "forward" clicks on the row down to the chosen interactive element.
+
+<Story story='Clickable' />
+
 ## HTML
 It is recommended to read about [`<table>` on MDN (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table) for a thorough review of HTML tables and their semantics.
 
@@ -80,6 +85,21 @@ Note that we apply `type="button"` to avoid the button behaving like a submit bu
 </table>
 ```
 
+### Clickable rows
+By adding `data-clickdelegate` on a `<tr>` and `data-clicktarget` on a `<Button>`, `<Link>` or `<Input type="checkout">`, you can "forward" clicks on the row down to the chosen interactive element.
+
+```html
+<table class="ds-table">
+  <tbody>
+    <tr data-clickdelegate>
+      <td>
+        <button type="button" data-clicktarget>Header 1</button>
+      </td>
+    </tr>
+  </tbody>
+</table>
+```
+
 ## CSS variables and data attributes
 
 <CssVariables />

apps/www/app/content/components/table/en/overview.mdx

@@ -45,6 +45,11 @@ When numbers appear in a table and are meant to be compared, align them to the r
 
 <Story story='NumbersEn' />
 
+### Clickable rows
+A clickable row requires an interactive element that can be the "target" of the click. This can be a button, a link, or a form element like a checkbox.
+
+<Story story='Clickable' />
+
 ## Guidelines
 Use the `Table` to structure and present data clearly in rows and columns.
 - Content in tables should be left-aligned, except for numbers, which should be right-aligned to make comparison easier.

apps/www/app/content/components/table/no/code.mdx

@@ -49,6 +49,11 @@ Det er spesielt nyttig i tabeller med paginering eller annen dynamisk oppdaterin
 
 <Story story='FixedTable' />
 
+### Klikkbare rader
+Ved å legge `data-clickdelegate` på en `<tr>` og `data-clicktarget` på `<Button>`, `<Link>` eller `<Input type="checkout">`, kan du "videresende" klikk på rad til det valgte interaktive elementet.
+
+<Story story='Clickable' />
+
 ## HTML
 Det anbefales å lese om [`<table>` på MDN (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table) for en grundig gjennomgang av HTML-tabeller og deres semantikk.
 
@@ -79,6 +84,21 @@ Merk at vi legger på `type="button"` for å unngå at knappen oppfører seg som
 </table>
 ```
 
+### Klikkbare rader
+Ved å legge `data-clickdelegate` på en `<tr>` og `data-clicktarget` på `<button>`, `<a>` eller `<input type="checkout">`, kan du "videresende" klikk på rad til det valgte interaktive elementet.
+
+```html
+<table class="ds-table">
+  <tbody>
+    <tr data-clickdelegate>
+      <td>
+        <button type="button" data-clicktarget>Header 1</button>
+      </td>
+    </tr>
+  </tbody>
+</table>
+```
+
 ## CSS variabler og data-attributter
 
 <CssVariables />

apps/www/app/content/components/table/no/overview.mdx

@@ -45,6 +45,11 @@ Når det er tall i en tabell som skal sammenlignes, plasser tallene til høyre i
 
 <Story story='Numbers' />
 
+### Klikkbare rader
+En klikkbar rad, krever et interaktivt element som kan være "målet" for klikket. Dette kan være en knapp, en lenke eller et skjemaelement som en avkrysningsboks.
+
+<Story story='Clickable' />
+
 ## Retningslinjer
 Bruk `Table` når du skal organisere og vise data strukturert i rader og kolonner.
 - Innhold i tabeller bør være venstrejustert, med unntak av tall, som bør høyrejusteres for å gjøre det lettere å sammenligne tallverdier.

apps/www/app/content/components/table/table.stories.tsx

@@ -1,4 +1,9 @@
-import { Table, type TableHeaderCellProps } from '@digdir/designsystemet-react';
+import {
+  Button,
+  Input,
+  Table,
+  type TableHeaderCellProps,
+} from '@digdir/designsystemet-react';
 import { useState } from 'react';
 
 export const Preview = () => {
@@ -424,3 +429,28 @@ export const NumbersEn = () => (
     </Table.Body>
   </Table>
 );
+
+export const Clickable = () => (
+  <Table>
+    <caption>Table caption</caption>
+    <Table.Body>
+      <Table.Row data-clickdelegate>
+        <Table.Cell>
+          <Button data-clicktarget onClick={() => alert('clicked cell 1')}>
+            Cell 1
+          </Button>
+        </Table.Cell>
+        <Table.Cell>Cell 2</Table.Cell>
+        <Table.Cell>Cell 3</Table.Cell>
+      </Table.Row>
+      <Table.Row data-clickdelegate>
+        <Table.Cell>
+          <Input type='checkbox' aria-label='check me' data-clicktarget /> Cell
+          4
+        </Table.Cell>
+        <Table.Cell>Cell 5</Table.Cell>
+        <Table.Cell>Cell 6</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+);

packages/css/src/table.css

@@ -1,5 +1,6 @@
 .ds-table {
   --dsc-table-background--hover: var(--ds-color-surface-hover);
+  --dsc-table-background--active: var(--ds-color-surface-active);
   --dsc-table-background--zebra: var(--ds-color-surface-tinted);
   --dsc-table-background: transparent;
   --dsc-table-border-color: var(--ds-color-border-subtle);
@@ -192,13 +193,23 @@
   }
 
   /**
-   * States
+   * Clickable
+   */
+  & > tbody > tr[data-clickdelegate] {
+    cursor: pointer;
+  }
+
+  /**
+   * States and Clickable
    */
   @media (hover: hover) and (pointer: fine) {
+    & > tbody > tr:has(.\:click-delegate-hover),
     &[data-hover] > tbody > tr:hover > :is(th, td) {
       background: var(--dsc-table-background--hover);
     }
-
+    & > tbody > tr:has(.\:click-delegate-active) {
+      background: var(--dsc-table-background--active);
+    }
     & > thead > tr > [aria-sort]:hover button {
       background: var(--dsc-table-header-background--hover);
     }

packages/react/src/components/table/table.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 
 import type { TableHeaderCellProps } from '../../';
 
-import { Checkbox, Table, Textfield } from '../../';
+import { Button, Checkbox, Link, Table, Textfield } from '../../';
 import { useCheckboxGroup } from '../../utilities';
 
 type Story = StoryFn<typeof Table>;
@@ -405,3 +405,61 @@ WithBorder.args = {
 WithBorder.parameters = {
   customStyles: { display: 'grid', gap: '1rem' },
 };
+
+export const WithClickableRows: Story = (args) => {
+  return (
+    <Table {...args}>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell aria-label='Valg' />
+          <Table.HeaderCell>Navn</Table.HeaderCell>
+          <Table.HeaderCell>Stilling</Table.HeaderCell>
+          <Table.HeaderCell>Kommentar</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row data-clickdelegate>
+          <Table.Cell>
+            <Checkbox aria-label='Velg Kari Nordmann' data-clicktarget />
+          </Table.Cell>
+          <Table.Cell>Kari Nordmann</Table.Cell>
+          <Table.Cell>Rådgiver</Table.Cell>
+          <Table.Cell>
+            <Textfield data-size='sm' aria-label='Textfield 1' />
+          </Table.Cell>
+        </Table.Row>
+        <Table.Row data-clickdelegate>
+          <Table.Cell>
+            <Button data-clicktarget onClick={() => alert('Knappeklikk')}>
+              Knapp
+            </Button>
+          </Table.Cell>
+          <Table.Cell>Ola Nordmann</Table.Cell>
+          <Table.Cell>Rådgiver</Table.Cell>
+          <Table.Cell>
+            <Textfield data-size='sm' aria-label='Textfield 2' />
+          </Table.Cell>
+        </Table.Row>
+        <Table.Row data-clickdelegate>
+          <Table.Cell>
+            <Link href='https://designsystemet.no' data-clicktarget>
+              Lenke
+            </Link>
+          </Table.Cell>
+          <Table.Cell>Jens Nordmann</Table.Cell>
+          <Table.Cell>Rådgiver</Table.Cell>
+          <Table.Cell>
+            <Textfield data-size='sm' aria-label='Textfield 3' />
+          </Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  );
+};
+WithClickableRows.parameters = {
+  docs: {
+    source: {
+      type: 'code',
+    },
+  },
+};

packages/react/src/components/table/table.tsx

@@ -2,6 +2,7 @@ import cl from 'clsx/lite';
 import type { TableHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import type { DefaultProps } from '../../types';
+import { useClickDelegate } from '../../utilities'; // TMP workaround to avoid tree-shaking
 
 export type TableProps = {
   /**
@@ -64,6 +65,8 @@ export const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
   },
   ref,
 ) {
+  useClickDelegate(); // TMP workaround to avoid tree-shaking
+
   return (
     <table
       className={cl('ds-table', className)}

packages/react/src/index.ts

@@ -17,10 +17,11 @@ export {
   RovingFocusRoot,
   useCheckboxGroup,
   /** @deprecated This export is deprecated. Use utility libraries or create your own utility function. */
+  useClickDelegate,
+  /** @deprecated This export is deprecated. Use utility libraries or create your own utility function. */
   useDebounceCallback,
   /** @deprecated This export is deprecated. Use utility libraries or create your own utility function. */
   useIsomorphicLayoutEffect,
-  /** @deprecated This export is deprecated. Use utility libraries or create your own utility function. */
   useMediaQuery,
   usePagination,
   useRadioGroup,