Table component: adding click event on expandable table rows

.changeset/heavy-pandas-marry.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-css": minor
+"@navikt/ds-react": minor
+---
+
+Adding click event on table row

@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--open):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,7 +31,7 @@ export interface ExpandableRowProps extends Omit<RowProps, "content"> {
    */
   onOpenChange?: (open: boolean) => void;
   /**
-   * Disable expansio
+   * Disable expansion. shadeOnHover will not be visible.
    * @default false
    */
   expansionDisabled?: boolean;
@@ -68,14 +68,25 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
 
     const isOpen = open ?? internalOpen;
 
+    const clickHandler = (e) => {
+      onOpenChange?.(!isOpen);
+      if (open === undefined) {
+        setInternalOpen((open) => !open);
+      }
+      e.stopPropagation();
+    };
+
     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={!expansionDisabled ? clickHandler : undefined}
         >
           {togglePlacement === "right" && children}
           <DataCell
@@ -89,12 +100,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={clickHandler}
               >
                 <ChevronDownIcon
                   className="navds-table__expandable-icon"