@navikt/ds-react 8.10.0 → 8.10.2

package/src/data/table/root/DataTableAuto.test.tsx

@@ -0,0 +1,118 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import { describe, expect, test } from "vitest";
+import { DataTableColumnHeader } from "../column-header/DataTableColumnHeader";
+import type { ColumnDefinitions } from "./DataTable.types";
+import { DataTableAuto } from "./DataTableAuto";
+import { DataTable } from "./DataTableRoot";
+
+type TestRow = {
+  id: string;
+  name: string;
+  subRows?: TestRow[];
+};
+
+const data: TestRow[] = [
+  {
+    id: "root",
+    name: "Root",
+    subRows: [{ id: "child", name: "Child" }],
+  },
+];
+
+const fallbackIdData: TestRow[] = [
+  {
+    id: "unused-root-1",
+    name: "Root",
+    subRows: [{ id: "unused-child", name: "Child" }],
+  },
+  {
+    id: "unused-root-2",
+    name: "Sibling",
+  },
+];
+
+const columns: ColumnDefinitions<TestRow> = [
+  {
+    id: "name",
+    label: "Name",
+    header: "Name",
+    cell: (row) => row.name,
+  },
+];
+
+describe("DataTableAuto", () => {
+  test("renders expanded child rows and includes them in select-all", () => {
+    render(
+      <DataTableAuto
+        columnDefinitions={columns}
+        data={data}
+        getRowId={(row) => row.id}
+        getSubRows={(row) => row.subRows ?? []}
+        selectionMode="multiple"
+      />,
+    );
+
+    expect(screen.queryByText("Child")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Vis under-rader" }));
+
+    expect(screen.getByText("Child")).toBeInTheDocument();
+    expect(screen.getAllByRole("checkbox")).toHaveLength(3);
+
+    fireEvent.click(
+      screen.getByRole("checkbox", { name: "Velg alle synlige rader" }),
+    );
+
+    expect(
+      screen
+        .getAllByRole("checkbox")
+        .every((checkbox) => (checkbox as HTMLInputElement).checked),
+    ).toBe(true);
+  });
+
+  test("select-all checks all visible rows when fallback ids are used", () => {
+    render(
+      <DataTableAuto
+        columnDefinitions={columns}
+        data={fallbackIdData}
+        getSubRows={(row) => row.subRows ?? []}
+        defaultExpandedSubRowIds={[0]}
+        selectionMode="multiple"
+      />,
+    );
+
+    fireEvent.click(
+      screen.getByRole("checkbox", { name: "Velg alle synlige rader" }),
+    );
+
+    const rowCheckboxes = screen
+      .getAllByRole("checkbox")
+      .slice(1) as HTMLInputElement[];
+
+    expect(rowCheckboxes).toHaveLength(3);
+    expect(rowCheckboxes.every((checkbox) => checkbox.checked)).toBe(true);
+  });
+
+  test("does not render expansion controls in the manual table variant", () => {
+    render(
+      <DataTable>
+        <DataTable.Thead>
+          <DataTable.Tr>
+            <DataTableColumnHeader>Name</DataTableColumnHeader>
+          </DataTable.Tr>
+        </DataTable.Thead>
+        <DataTable.Tbody>
+          <DataTable.Tr>
+            <DataTable.Td>Root</DataTable.Td>
+          </DataTable.Tr>
+        </DataTable.Tbody>
+      </DataTable>,
+    );
+
+    expect(screen.getByText("Root")).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: /vis detaljer|skjul detaljer/i }),
+    ).not.toBeInTheDocument();
+  });
+});

package/src/data/table/root/DataTableAuto.tsx

@@ -1,5 +1,7 @@
 /** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
 import React, { forwardRef, useMemo } from "react";
+import { ChevronDownIcon, ChevronRightIcon } from "@navikt/aksel-icons";
+import { Button } from "../../../button";
 import { Skeleton } from "../../../skeleton";
 import { useId } from "../../../utils-external";
 import { cl } from "../../../utils/helpers";
@@ -7,12 +9,18 @@ import { useMergeRefs } from "../../../utils/hooks";
 import { DataTableBaseCell } from "../base-cell/DataTableBaseCell";
 import { DataTableColumnHeader } from "../column-header/DataTableColumnHeader";
 import { DataTableEmptyState } from "../empty-state/DataTableEmptyState";
-import type { UseColumnOptionsResult } from "../hooks/useColumnOptions";
 import { useColumnOptions } from "../hooks/useColumnOptions";
 import {
   DataTableExpansionProvider,
+  getDataTableExpansionId,
   useDataTableExpansion,
 } from "../hooks/useTableExpansion";
+import {
+  type ItemDetail,
+  TableItemsProvider,
+  useTableItems,
+  useTableItemsContext,
+} from "../hooks/useTableItems";
 import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav";
 import {
   type SelectionProps,
@@ -157,6 +165,11 @@ interface DataTableProps<T>
    * When provided, an expand toggle column is added automatically.
    */
   getDetailsPanelContent?: (rowData: T) => React.ReactNode;
+  /**
+   * Determines whether a row can be expanded to show details panel content.
+   * @default () => true
+   */
+  isDetailsPanelExpandable?: (rowData: T) => boolean;
   /**
    * Controlled list of expanded row IDs.
    * Use with `onDetailsPanelChange` for controlled usage, or `defaultDetailsPanelRowIds` for uncontrolled.
@@ -169,6 +182,10 @@ interface DataTableProps<T>
   defaultDetailsPanelRowIds?: (string | number)[];
   /**
    * Called when the list of expanded row IDs changes.
+   *
+   *
+   * TODO:
+   * - Docs: This pattern is called "Master / Detail" in general terms
    */
   onDetailsPanelChange?: (ids: (string | number)[]) => void;
   /**
@@ -182,6 +199,15 @@ interface DataTableProps<T>
    * @default false
    */
   showExpandAll?: boolean;
+  /**
+   * Function to get sub-rows for a given row, used for nested rows.
+   * When provided, an expand toggle column is added automatically.
+   */
+  getSubRows?: (rowData: T) => T[];
+  expandedSubRowIds?: (string | number)[];
+  defaultExpandedSubRowIds?: (string | number)[];
+  isSubRowExpandable?: (rowData: T) => boolean;
+  onExpandedSubRowIdsChange?: (ids: (string | number)[]) => void;
 }
 
 function DataTableAutoInner<T>(
@@ -215,11 +241,17 @@ function DataTableAutoInner<T>(
     loadingLabel = "Laster innhold",
     disableRowSelectionOnClick = false,
     getDetailsPanelContent,
+    isDetailsPanelExpandable,
     getDetailsPanelHeight,
     showExpandAll = false,
     detailsPanelRowIds,
     defaultDetailsPanelRowIds,
     onDetailsPanelChange,
+    getSubRows,
+    expandedSubRowIds,
+    defaultExpandedSubRowIds,
+    isSubRowExpandable,
+    onExpandedSubRowIdsChange,
     ...rest
   }: DataTableProps<T>,
   forwardedRef: React.ForwardedRef<HTMLTableElement>,
@@ -237,12 +269,25 @@ function DataTableAutoInner<T>(
 
   const mergedRef = useMergeRefs(forwardedRef, setTableRef);
 
+  const tableItems = useTableItems({
+    items: data,
+    getRowId,
+    getSubRows,
+    expandedSubRowIds,
+    defaultExpandedSubRowIds,
+    isSubRowExpandable,
+    onExpandedSubRowIdsChange,
+  });
+
   const allRowKeys = useMemo(() => {
-    const resolvedGetRowId = (item: T, index: number): string | number =>
-      getRowId?.(item, index) ?? index;
+    const rowKeys: (string | number)[] = [];
+
+    for (const details of tableItems.itemDetails.values()) {
+      rowKeys.push(details.id);
+    }
 
-    return data.map((item, index) => resolvedGetRowId(item, index));
-  }, [data, getRowId]);
+    return rowKeys;
+  }, [tableItems.itemDetails]);
 
   const tableSelectionState = useTableSelection({
     selectionMode: selectionModeProp,
@@ -258,6 +303,12 @@ function DataTableAutoInner<T>(
     selectionMode: tableSelectionState.selection.selectionMode,
   });
 
+  const fullWidthColSpan =
+    columns.length +
+    (layout === "fixed" ? 1 : 0) +
+    (tableSelectionState.selection.selectionMode !== "none" ? 1 : 0) +
+    (getDetailsPanelContent ? 1 : 0);
+
   const tableId = useId(id);
 
   return (
@@ -273,13 +324,15 @@ function DataTableAutoInner<T>(
       disableRowSelectionOnClick={disableRowSelectionOnClick}
       isLoading={isLoading}
       showLoadingOverlay={isLoading && !loadingState && !loadingRows}
+      columns={columns}
     >
       <DataTableExpansionProvider
         detailsPanelRowIds={detailsPanelRowIds}
         defaultDetailsPanelRowIds={defaultDetailsPanelRowIds}
         onDetailsPanelChange={onDetailsPanelChange}
-        allRowKeys={allRowKeys}
+        itemDetails={tableItems.itemDetails}
         getDetailsPanelContent={getDetailsPanelContent}
+        isDetailsPanelExpandable={isDetailsPanelExpandable}
         getDetailsPanelHeight={getDetailsPanelHeight}
         showExpandAll={showExpandAll}
       >
@@ -323,17 +376,22 @@ function DataTableAutoInner<T>(
                   })}
                 </DataTableTr>
               </DataTableThead>
-              <DataTableTbody>
-                <DataTableAutoTBodyContent
-                  columns={columns}
-                  data={data}
-                  allRowKeys={allRowKeys}
-                  loadingState={loadingState}
-                  loadingRows={loadingRows}
-                  loadingLabel={loadingLabel}
-                  emptyState={emptyState}
-                />
-              </DataTableTbody>
+              <TableItemsProvider
+                itemDetails={tableItems.itemDetails}
+                items={tableItems.items}
+                onExpandedSubRowIdsChange={tableItems.onExpandedSubRowIdsChange}
+                isSubRowExpanded={tableItems.isSubRowExpanded}
+              >
+                <DataTableTbody>
+                  <DataTableAutoTBodyContent
+                    loadingState={loadingState}
+                    loadingRows={loadingRows}
+                    loadingLabel={loadingLabel}
+                    emptyState={emptyState}
+                    fullWidthColSpan={fullWidthColSpan}
+                  />
+                </DataTableTbody>
+              </TableItemsProvider>
             </table>
           </div>
         </div>
@@ -342,30 +400,27 @@ function DataTableAutoInner<T>(
   );
 }
 
-interface DataTableAutoTBodyContentProps<T> {
-  columns: UseColumnOptionsResult<T>["columns"];
-  data: T[];
-  allRowKeys: (string | number)[];
+interface DataTableAutoTBodyContentProps {
   loadingState: React.ReactNode;
   loadingLabel: string;
   loadingRows?: number;
   emptyState: React.ReactNode;
+  fullWidthColSpan: number;
 }
 
-function DataTableAutoTBodyContent<T>({
-  columns,
-  data,
-  allRowKeys,
+function DataTableAutoTBodyContent({
   loadingState,
   loadingRows,
   loadingLabel,
   emptyState,
-}: DataTableAutoTBodyContentProps<T>) {
-  const { isLoading } = useDataTableContext();
+  fullWidthColSpan,
+}: DataTableAutoTBodyContentProps) {
+  const { items, itemDetails } = useTableItemsContext();
+  const { columns, isLoading } = useDataTableContext();
 
   if (isLoading && loadingState != null) {
     return (
-      <DataTableLoadingState colSpan={columns.length}>
+      <DataTableLoadingState colSpan={fullWidthColSpan}>
         {loadingState}
       </DataTableLoadingState>
     );
@@ -375,7 +430,7 @@ function DataTableAutoTBodyContent<T>({
     return (
       <>
         <tr>
-          <td colSpan={columns.length} className="aksel-sr-only">
+          <td colSpan={fullWidthColSpan} className="aksel-sr-only">
             {loadingLabel}
           </td>
         </tr>
@@ -397,29 +452,45 @@ function DataTableAutoTBodyContent<T>({
     );
   }
 
-  if (data.length === 0 && emptyState !== undefined) {
+  if (items.length === 0 && emptyState !== undefined) {
     return (
-      <DataTableEmptyState colSpan={columns.length}>
+      <DataTableEmptyState colSpan={fullWidthColSpan}>
         {emptyState}
       </DataTableEmptyState>
     );
   }
 
-  const renderLoadingAnnoucement = isLoading && !loadingState && !loadingRows;
+  const renderLoadingAnnouncement = isLoading && !loadingState && !loadingRows;
+
+  return items.map((rowData) => {
+    const details = itemDetails.get(rowData);
+
+    /* Should in theory be impossible. Look about typing this? */
+    if (!details) {
+      return null;
+    }
+
+    const hasSubRows = details.children.length > 0;
 
-  return data.map((rowData, rowIndex) => {
-    const rowId = allRowKeys[rowIndex];
     return (
-      <React.Fragment key={rowId}>
-        {renderLoadingAnnoucement && (
+      <React.Fragment key={details.id}>
+        {renderLoadingAnnouncement && (
           <tr>
-            <td colSpan={columns.length} className="aksel-sr-only">
+            <td colSpan={fullWidthColSpan} className="aksel-sr-only">
               {loadingLabel}
             </td>
           </tr>
         )}
-        <DataTableTr rowId={rowId}>
+        <DataTableTr rowId={details.id}>
           {columns.map(({ isSticky, colDef }, colDefIndex) => {
+            const renderNestedToggle = colDefIndex === 0 && hasSubRows;
+            const renderNestedIndent =
+              colDefIndex === 0 && (details.level > 0 || hasSubRows);
+
+            const style: React.CSSProperties = {
+              "--__axc-data-table-nested-depth": details.level,
+            };
+
             return (
               <DataTableBaseCell
                 /* TODO: Make this configurable */
@@ -427,47 +498,86 @@ function DataTableAutoTBodyContent<T>({
                 key={colDef.id || colDefIndex}
                 as={colDef.isRowHeader ? "th" : "td"}
                 isSticky={isSticky}
+                data-nested={renderNestedIndent || undefined}
+                style={style}
               >
+                {renderNestedToggle && <NestedRowToggle details={details} />}
                 {colDef.cell(rowData)}
               </DataTableBaseCell>
             );
           })}
         </DataTableTr>
         <DataTableExpandedRow
-          rowId={rowId}
+          rowId={details.id}
           rowData={rowData}
-          columnCount={columns.length}
+          fullWidthColSpan={fullWidthColSpan}
         />
       </React.Fragment>
     );
   });
 }
 
+function NestedRowToggle({ details }: { details: ItemDetail<any> }) {
+  const { isSubRowExpanded, onExpandedSubRowIdsChange } =
+    useTableItemsContext();
+
+  const subRows = details.children;
+  const hasSubRows = subRows && subRows.length > 0;
+  const isRowExpanded = isSubRowExpanded(details.id);
+
+  return (
+    <div className="aksel-data-table__nested-toggle">
+      {hasSubRows && (
+        <Button
+          variant="tertiary"
+          data-color="neutral"
+          size="small"
+          onClick={(e) => {
+            e.stopPropagation();
+            onExpandedSubRowIdsChange(details.id);
+          }}
+          aria-expanded={isRowExpanded}
+          aria-label={isRowExpanded ? "Skjul under-rader" : "Vis under-rader"}
+          icon={
+            isRowExpanded ? (
+              <ChevronDownIcon aria-hidden />
+            ) : (
+              <ChevronRightIcon aria-hidden />
+            )
+          }
+        />
+      )}
+    </div>
+  );
+}
+
 function DataTableExpandedRow<T>({
   rowId,
   rowData,
-  columnCount,
+  fullWidthColSpan,
 }: {
   rowId: string | number;
   rowData: T;
-  columnCount: number;
+  fullWidthColSpan: number;
 }) {
   const { tableId } = useDataTableContext();
-  const expansionContext = useDataTableExpansion(false);
+  const {
+    enableDetailsPanel,
+    isExpanded,
+    getDetailsPanelContent,
+    getDetailsPanelHeight,
+  } = useDataTableExpansion();
 
-  /* TODO: Is this the way we want to opt out? Might just be temp until auto and root is merged so they use same context */
-  if (!expansionContext) {
+  if (!enableDetailsPanel) {
     return null;
   }
 
-  const { isExpanded, getDetailsPanelContent, getDetailsPanelHeight } =
-    expansionContext;
-
   if (!isExpanded(rowId)) {
     return null;
   }
 
   const content = getDetailsPanelContent?.(rowData);
+  const expansionId = getDataTableExpansionId(tableId, rowId);
 
   if (!content) {
     return null;
@@ -475,7 +585,7 @@ function DataTableExpandedRow<T>({
 
   return (
     <tr>
-      <td id={`${tableId}-expansion-${rowId}`} colSpan={columnCount}>
+      <td id={expansionId} colSpan={fullWidthColSpan}>
         <div style={{ height: getDetailsPanelHeight?.(rowData) }}>
           {content}
         </div>

package/src/data/table/root/DataTableRoot.context.ts

@@ -1,7 +1,8 @@
 import { createStrictContext } from "../../../utils/helpers";
+import type { UseColumnOptionsResult } from "../hooks/useColumnOptions";
 import type { UseTableSelectionReturn } from "../hooks/useTableSelection";
 
-type DataTableContextProps = {
+type DataTableContextProps<T> = {
   layout: "fixed" | "auto";
   withKeyboardNav: boolean;
   selectionState: UseTableSelectionReturn;
@@ -16,10 +17,11 @@ type DataTableContextProps = {
   disableRowSelectionOnClick: boolean;
   isLoading?: boolean;
   showLoadingOverlay: boolean;
+  columns: UseColumnOptionsResult<T>["columns"];
 };
 
 const { Provider: DataTableContextProvider, useContext: useDataTableContext } =
-  createStrictContext<DataTableContextProps>({
+  createStrictContext<DataTableContextProps<any>>({
     name: "DataTableContext",
     errorMessage: "useDataTableContext must be used within DataTable",
   });

package/src/data/table/root/DataTableRoot.tsx

@@ -10,6 +10,8 @@ import {
   DataTableEmptyState,
   type DataTableEmptyStateProps,
 } from "../empty-state/DataTableEmptyState";
+import { DataTableExpansionProvider } from "../hooks/useTableExpansion";
+import type { ItemDetail } from "../hooks/useTableItems";
 import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav";
 import { type SelectionProps } from "../hooks/useTableSelection";
 import { noSelectionState } from "../hooks/useTableSelection";
@@ -34,6 +36,8 @@ import {
 import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr";
 import { DataTableContextProvider } from "./DataTableRoot.context";
 
+const EMPTY_ITEM_DETAILS = new Map<never, ItemDetail<never>>();
+
 interface DataTableProps
   extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
   children: React.ReactNode;
@@ -234,21 +238,24 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
         onRowClick={undefined}
         disableRowSelectionOnClick={false}
         showLoadingOverlay={false}
+        columns={[]}
       >
-        <div className="aksel-data-table__border-wrapper">
-          <div className="aksel-data-table__scroll-wrapper">
-            <table
-              {...rest}
-              ref={mergedRef}
-              className={cl("aksel-data-table", className)}
-              data-zebra-stripes={zebraStripes}
-              data-truncate-content={truncateContent}
-              data-density={rowDensity}
-              data-layout={layout}
-              tabIndex={tabIndex}
-            />
+        <DataTableExpansionProvider itemDetails={EMPTY_ITEM_DETAILS}>
+          <div className="aksel-data-table__border-wrapper">
+            <div className="aksel-data-table__scroll-wrapper">
+              <table
+                {...rest}
+                ref={mergedRef}
+                className={cl("aksel-data-table", className)}
+                data-zebra-stripes={zebraStripes}
+                data-truncate-content={truncateContent}
+                data-density={rowDensity}
+                data-layout={layout}
+                tabIndex={tabIndex}
+              />
+            </div>
           </div>
-        </div>
+        </DataTableExpansionProvider>
       </DataTableContextProvider>
     );
   },