@navikt/ds-react 8.10.1 → 8.10.3

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 React, { forwardRef } 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,
@@ -30,10 +38,7 @@ import {
 } from "./DataTableRoot.context";
 
 interface DataTableProps<T>
-  extends
-    React.HTMLAttributes<HTMLTableElement>,
-    SelectionProps,
-    TableSortOptions {
+  extends React.HTMLAttributes<HTMLTableElement>, TableSortOptions {
   children?: never;
   /**
    * Controls vertical cell padding.
@@ -157,6 +162,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 +179,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 +196,23 @@ 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.
+   *
+   *
+   * TODO:
+   * - Table might need to be implemented with role="treegrid" for a11y when having nested rows.
+   */
+  getSubRows?: (rowData: T) => T[];
+  expandedSubRowIds?: (string | number)[];
+  defaultExpandedSubRowIds?: (string | number)[];
+  isSubRowExpandable?: (rowData: T) => boolean;
+  onExpandedSubRowIdsChange?: (ids: (string | number)[]) => void;
+  /**
+   * Props for row selection functionality.
+   */
+  selection?: SelectionProps;
 }
 
 function DataTableAutoInner<T>(
@@ -194,11 +225,7 @@ function DataTableAutoInner<T>(
     truncateContent = true,
     shouldBlockNavigation,
     layout = "fixed",
-    selectionMode: selectionModeProp = "none",
-    selectedKeys,
-    defaultSelectedKeys,
-    onSelectionChange,
-    disabledSelectionKeys = [],
+    selection,
     data,
     columnDefinitions,
     getRowId,
@@ -213,13 +240,18 @@ function DataTableAutoInner<T>(
     loadingState,
     loadingRows,
     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,24 @@ function DataTableAutoInner<T>(
 
   const mergedRef = useMergeRefs(forwardedRef, setTableRef);
 
-  const allRowKeys = useMemo(() => {
-    const resolvedGetRowId = (item: T, index: number): string | number =>
-      getRowId?.(item, index) ?? index;
+  const tableItems = useTableItems({
+    items: data,
+    getRowId,
+    getSubRows,
+    expandedSubRowIds,
+    defaultExpandedSubRowIds,
+    isSubRowExpandable,
+    onExpandedSubRowIdsChange,
+  });
 
-    return data.map((item, index) => resolvedGetRowId(item, index));
-  }, [data, getRowId]);
+  const {
+    selectionMode: selectionModeProp = "none",
+    selectedKeys,
+    defaultSelectedKeys,
+    onSelectionChange,
+    disabledSelectionKeys = [],
+    disableRowSelectionOnClick = false,
+  } = selection || {};
 
   const tableSelectionState = useTableSelection({
     selectionMode: selectionModeProp,
@@ -250,7 +294,8 @@ function DataTableAutoInner<T>(
     defaultSelectedKeys,
     onSelectionChange,
     disabledSelectionKeys,
-    allRowKeys,
+    visibleRowIds: tableItems.visibleRowIds,
+    childRowIdsById: tableItems.childRowIdsById,
   });
 
   const { columns, stickySelection } = useColumnOptions<T>(columnDefinitions, {
@@ -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,99 +324,103 @@ function DataTableAutoInner<T>(
       disableRowSelectionOnClick={disableRowSelectionOnClick}
       isLoading={isLoading}
       showLoadingOverlay={isLoading && !loadingState && !loadingRows}
+      columns={columns}
     >
-      <DataTableExpansionProvider
-        detailsPanelRowIds={detailsPanelRowIds}
-        defaultDetailsPanelRowIds={defaultDetailsPanelRowIds}
-        onDetailsPanelChange={onDetailsPanelChange}
-        allRowKeys={allRowKeys}
-        getDetailsPanelContent={getDetailsPanelContent}
-        getDetailsPanelHeight={getDetailsPanelHeight}
-        showExpandAll={showExpandAll}
+      <TableItemsProvider
+        itemDetails={tableItems.itemDetails}
+        items={tableItems.items}
+        onExpandedSubRowIdsChange={tableItems.onExpandedSubRowIdsChange}
+        isSubRowExpanded={tableItems.isSubRowExpanded}
       >
-        <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}
-              data-loading={isLoading || undefined}
-              tabIndex={tabIndex}
-              aria-busy={isLoading || undefined}
-            >
-              <DataTableThead>
-                <DataTableTr>
-                  {columns.map(({ isSticky, colDef }) => {
-                    const sortEntry = sortState.find(
-                      (s) => s.columnId === colDef.id,
-                    );
-                    const sortDirection = sortEntry?.direction ?? "none";
-                    return (
-                      <DataTableColumnHeader
-                        maxWidth={colDef.maxWidth}
-                        minWidth={colDef.minWidth}
-                        width={colDef.width}
-                        defaultWidth={colDef.defaultWidth ?? "100%"}
-                        textAlign={colDef.type === "number" ? "right" : "left"}
-                        key={colDef.id}
-                        isSticky={isSticky}
-                        sortable={colDef.sortable}
-                        sortDirection={sortDirection}
-                        onSortClick={(event) => onSortClick(colDef.id, event)}
-                      >
-                        {colDef.header}
-                      </DataTableColumnHeader>
-                    );
-                  })}
-                </DataTableTr>
-              </DataTableThead>
-              <DataTableTbody>
-                <DataTableAutoTBodyContent
-                  columns={columns}
-                  data={data}
-                  allRowKeys={allRowKeys}
-                  loadingState={loadingState}
-                  loadingRows={loadingRows}
-                  loadingLabel={loadingLabel}
-                  emptyState={emptyState}
-                />
-              </DataTableTbody>
-            </table>
+        <DataTableExpansionProvider
+          detailsPanelRowIds={detailsPanelRowIds}
+          defaultDetailsPanelRowIds={defaultDetailsPanelRowIds}
+          onDetailsPanelChange={onDetailsPanelChange}
+          getDetailsPanelContent={getDetailsPanelContent}
+          isDetailsPanelExpandable={isDetailsPanelExpandable}
+          getDetailsPanelHeight={getDetailsPanelHeight}
+          showExpandAll={showExpandAll}
+        >
+          <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}
+                data-loading={isLoading || undefined}
+                tabIndex={tabIndex}
+                aria-busy={isLoading || undefined}
+              >
+                <DataTableThead>
+                  <DataTableTr>
+                    {columns.map(({ isSticky, colDef }) => {
+                      const sortEntry = sortState.find(
+                        (s) => s.columnId === colDef.id,
+                      );
+                      const sortDirection = sortEntry?.direction ?? "none";
+                      return (
+                        <DataTableColumnHeader
+                          maxWidth={colDef.maxWidth}
+                          minWidth={colDef.minWidth}
+                          width={colDef.width}
+                          defaultWidth={colDef.defaultWidth ?? "100%"}
+                          textAlign={colDef.align ?? "left"}
+                          key={colDef.id}
+                          isSticky={isSticky}
+                          sortable={colDef.sortable}
+                          sortDirection={sortDirection}
+                          onSortClick={(event) => onSortClick(colDef.id, event)}
+                        >
+                          {colDef.header}
+                        </DataTableColumnHeader>
+                      );
+                    })}
+                  </DataTableTr>
+                </DataTableThead>
+
+                <DataTableTbody>
+                  <DataTableAutoTBodyContent
+                    loadingState={loadingState}
+                    loadingRows={loadingRows}
+                    loadingLabel={loadingLabel}
+                    emptyState={emptyState}
+                    fullWidthColSpan={fullWidthColSpan}
+                  />
+                </DataTableTbody>
+              </table>
+            </div>
           </div>
-        </div>
-      </DataTableExpansionProvider>
+        </DataTableExpansionProvider>
+      </TableItemsProvider>
     </DataTableContextProvider>
   );
 }
 
-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>
@@ -383,7 +438,7 @@ function DataTableAutoTBodyContent<T>({
           <DataTableTr key={`skeleton-row-${rowIndex}`} aria-hidden>
             {columns.map(({ isSticky, colDef }, colDefIndex) => (
               <DataTableBaseCell
-                textAlign={colDef.type === "number" ? "right" : "left"}
+                textAlign={colDef.align ?? "left"}
                 key={colDef.id || colDefIndex}
                 as={colDef.isRowHeader ? "th" : "td"}
                 isSticky={isSticky}
@@ -397,88 +452,152 @@ 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 data.map((rowData, rowIndex) => {
-    const rowId = allRowKeys[rowIndex];
-    return (
-      <React.Fragment key={rowId}>
-        {renderLoadingAnnoucement && (
-          <tr>
-            <td colSpan={columns.length} className="aksel-sr-only">
-              {loadingLabel}
-            </td>
-          </tr>
-        )}
-        <DataTableTr rowId={rowId}>
-          {columns.map(({ isSticky, colDef }, colDefIndex) => {
-            return (
-              <DataTableBaseCell
-                /* TODO: Make this configurable */
-                textAlign={colDef.type === "number" ? "right" : "left"}
-                key={colDef.id || colDefIndex}
-                as={colDef.isRowHeader ? "th" : "td"}
-                isSticky={isSticky}
-              >
-                {colDef.cell(rowData)}
-              </DataTableBaseCell>
-            );
-          })}
-        </DataTableTr>
-        <DataTableExpandedRow
-          rowId={rowId}
-          rowData={rowData}
-          columnCount={columns.length}
+  return (
+    <>
+      {renderLoadingAnnouncement && (
+        <tr>
+          <td colSpan={fullWidthColSpan} className="aksel-sr-only">
+            {loadingLabel}
+          </td>
+        </tr>
+      )}
+      {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 (
+          <React.Fragment key={details.id}>
+            <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
+                    textAlign={colDef.align ?? "left"}
+                    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={details.id}
+              rowData={rowData}
+              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 />
+            )
+          }
         />
-      </React.Fragment>
-    );
-  });
+      )}
+    </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;
   }
 
+  const panelHeight = getDetailsPanelHeight?.(rowData);
+
+  const style: React.CSSProperties = panelHeight
+    ? { height: panelHeight, overflow: "auto" }
+    : { height: "auto" };
+
   return (
     <tr>
-      <td id={`${tableId}-expansion-${rowId}`} colSpan={columnCount}>
-        <div style={{ height: getDetailsPanelHeight?.(rowData) }}>
-          {content}
-        </div>
+      <td id={expansionId} colSpan={fullWidthColSpan}>
+        <div style={style}>{content}</div>
       </td>
     </tr>
   );

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,9 +10,12 @@ import {
   DataTableEmptyState,
   type DataTableEmptyStateProps,
 } from "../empty-state/DataTableEmptyState";
+import { DataTableExpansionProvider } from "../hooks/useTableExpansion";
 import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav";
-import { type SelectionProps } from "../hooks/useTableSelection";
-import { noSelectionState } from "../hooks/useTableSelection";
+import {
+  type SelectionProps,
+  noSelectionState,
+} from "../hooks/useTableSelection";
 import {
   DataTableLoadingState,
   type DataTableLoadingStateProps,
@@ -228,27 +231,30 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
         withKeyboardNav={withKeyboardNav}
         selectionState={noSelectionState}
         stickySelection={false}
-        stickyHeader={false}
+        stickyHeader={true}
         tableId={useId()}
         showLoadingSkeletons={false}
         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>
+          <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>
     );
   },