Table component: adding click event on expandable table rows (#2127)

Co-authored-by: Vegard Haugstvedt <[email protected]>
Co-authored-by: Ken <[email protected]>

.changeset/heavy-pandas-marry.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-css": minor
+"@navikt/ds-react": minor
+---
+
+Table: ExpandableRow kan nå åpnes med 'expandOnRowClick'-prop 

@navikt/core/css/table.css

@@ -16,7 +16,7 @@
   display: table-row;
 }
 
-.navds-table__body .navds-table__row--shade-on-hover:hover {
+.navds-table__body .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
   background-color: var(--ac-table-row-hover, var(--a-bg-subtle));
 }
 
@@ -154,6 +154,10 @@
   transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
 }
 
+.navds-table__expandable-row:not(.navds-table__expandable-row--expansion-disabled):hover {
+  cursor: pointer;
+}
+
 .navds-table__expandable-row--open .navds-table__data-cell {
   border-bottom-color: transparent;
 }

@navikt/core/react/src/table/ExpandableRow.tsx

@@ -31,10 +31,15 @@ export interface ExpandableRowProps extends Omit<RowProps, "content"> {
    */
   onOpenChange?: (open: boolean) => void;
   /**
-   * Disable expansio
+   * Disable expansion. shadeOnHover will not be visible.
    * @default false
    */
   expansionDisabled?: boolean;
+  /**
+   * Makes the whole row clickable
+   * @default false
+   */
+  expandOnRowClick?: boolean;
   /**
    * The width of the expanded row's internal cell
    * @default 999
@@ -58,24 +63,44 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
       open,
       onOpenChange,
       expansionDisabled = false,
+      expandOnRowClick = false,
       colSpan = 999,
       ...rest
     },
     ref
   ) => {
     const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
     const id = useId();
-
     const isOpen = open ?? internalOpen;
 
+    const expansionHandler = (e) => {
+      onOpenChange?.(!isOpen);
+      if (open === undefined) {
+        setInternalOpen((open) => !open);
+      }
+      e.stopPropagation();
+    };
+
+    const onRowClick = (e) => {
+      if (e.target.nodeName === "TD" || e.target.nodeName === "TH") {
+        expansionHandler(e);
+      }
+    };
+
     return (
       <>
         <Row
           {...rest}
           ref={ref}
           className={cl("navds-table__expandable-row", className, {
             "navds-table__expandable-row--open": isOpen,
+            "navds-table__expandable-row--expansion-disabled":
+              expansionDisabled,
           })}
+          onClick={(e) => {
+            !expansionDisabled && expandOnRowClick && onRowClick(e);
+            rest?.onClick?.(e);
+          }}
         >
           {togglePlacement === "right" && children}
           <DataCell
@@ -89,12 +114,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
                 className="navds-table__toggle-expand-button"
                 aria-controls={id}
                 aria-expanded={isOpen}
-                onClick={() => {
-                  onOpenChange?.(!isOpen);
-                  if (open === undefined) {
-                    setInternalOpen((open) => !open);
-                  }
-                }}
+                onClick={expansionHandler}
               >
                 <ChevronDownIcon
                   className="navds-table__expandable-icon"

@navikt/core/react/src/table/stories/table-expandable.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Table } from "..";
-import { Link } from "../..";
+import { Button, Checkbox, Link } from "../..";
 
 export default {
   title: "ds-react/Table",
@@ -37,6 +37,7 @@ export const Expandable = () => {
 };
 
 export const ExpandableSmall = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [open, setOpen] = useState(false);
   return (
     <Table size="small">
@@ -227,3 +228,63 @@ export const ExpandableOpen = () => {
     </Table>
   );
 };
+
+export const ClickableRow = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isRowOpen1, setIsRowOpen1] = useState(false);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isRowOpen2, setIsRowOpen2] = useState(false);
+
+    return (
+      <>
+        <Table zebraStripes>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>Navn</Table.HeaderCell>
+              <Table.HeaderCell>Info</Table.HeaderCell>
+              <Table.HeaderCell aria-hidden />
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            <Table.ExpandableRow
+              content={<div>placeholder row 1</div>}
+              togglePlacement="right"
+              onOpenChange={setIsRowOpen1}
+              data-testid="row1"
+              open={isRowOpen1}
+              expandOnRowClick
+            >
+              <Table.DataCell>Ola</Table.DataCell>
+              <Table.DataCell>
+                <Button
+                  size="xsmall"
+                  onClick={(e) => {
+                    alert("Mer info");
+                  }}
+                >
+                  Mer info
+                </Button>
+              </Table.DataCell>
+            </Table.ExpandableRow>
+            <Table.ExpandableRow
+              content={<div>placeholder row 2</div>}
+              togglePlacement="right"
+              onOpenChange={setIsRowOpen2}
+              data-testid="row2"
+              open={isRowOpen2}
+              expandOnRowClick
+            >
+              <Table.DataCell>Hans</Table.DataCell>
+              <Table.DataCell>
+                <Checkbox hideLabel size="small">
+                  Sett
+                </Checkbox>
+              </Table.DataCell>
+            </Table.ExpandableRow>
+          </Table.Body>
+        </Table>
+      </>
+    );
+  },
+};