@navikt/ds-react 8.9.0 → 8.10.0

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

@@ -1,23 +1,39 @@
 /** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
-import React, { forwardRef, useState } from "react";
-import { Checkbox } from "../../../form/checkbox";
+import React, { forwardRef, useMemo } from "react";
+import { Skeleton } from "../../../skeleton";
+import { useId } from "../../../utils-external";
 import { cl } from "../../../utils/helpers";
 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,
+  useDataTableExpansion,
+} from "../hooks/useTableExpansion";
 import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav";
 import {
   type SelectionProps,
   useTableSelection,
 } from "../hooks/useTableSelection";
+import { type TableSortOptions, useTableSort } from "../hooks/useTableSort";
+import { DataTableLoadingState } from "../loading-state/DataTableLoadingState";
 import { DataTableTbody } from "../tbody/DataTableTbody";
-import { DataTableTd } from "../td/DataTableTd";
-import { DataTableTh } from "../th/DataTableTh";
 import { DataTableThead } from "../thead/DataTableThead";
 import { DataTableTr } from "../tr/DataTableTr";
 import type { ColumnDefinitions } from "./DataTable.types";
-import { DataTableContextProvider } from "./DataTableRoot.context";
+import {
+  DataTableContextProvider,
+  useDataTableContext,
+} from "./DataTableRoot.context";
 
 interface DataTableProps<T>
-  extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
+  extends
+    React.HTMLAttributes<HTMLTableElement>,
+    SelectionProps,
+    TableSortOptions {
   children?: never;
   /**
    * Controls vertical cell padding.
@@ -63,16 +79,115 @@ interface DataTableProps<T>
    */
   layout?: "fixed" | "auto";
   /**
+   * Defines the columns of the table and how to render them.
+   *
    *
+   * Each column definition should have a unique `id` (or use the column index as fallback) and a `cell`-renderer function that takes the row data as argument and returns a React node.
    */
   columnDefinitions: ColumnDefinitions<T>;
+  /**
+   * The data to display in the table.
+   *
+   *
+   * Each object in the array represents a row, and the properties of the object are used to render the cells based on the `columnDefinitions`.
+   */
   data: T[];
+  /**
+   * Function to get unique row id from row data.
+   *
+   *
+   * If not provided, the row index will be used as id. This can cause issues if your data changes dynamically, so it's recommended to provide a stable id if possible.
+   */
   getRowId?: (rowData: T, index: number) => string | number;
+  /**
+   * Sticky columns that remain visible when horizontally scrolling the table.
+   *
+   * You can specify 1 sticky column on the left and 1 on the right.
+   */
+  stickyColumns?: {
+    first?: "1";
+    last?: "1";
+  };
+  /**
+   * @default false
+   */
+  stickyHeader?: boolean;
+  /**
+   * Callback invoked when a data row is clicked.
+   * Not called when clicking header, loading, or empty-state rows.
+   */
+  onRowClick?: (
+    rowId: string | number,
+    event: React.MouseEvent<HTMLTableRowElement>,
+  ) => void;
+  /**
+   * Content to render when `data` is empty.
+   * Rendered inside a `DataTable.EmptyState` row spanning all columns.
+   */
+  emptyState?: React.ReactNode;
+  /**
+   * Shows the table in a loading state.
+   *
+   * - When `loadingState` is provided, it is rendered inside a `DataTable.LoadingState` row.
+   * - When `loadingState` is **not** provided, skeleton placeholder rows are rendered instead.
+   * @default false
+   */
+  isLoading?: boolean;
+  /**
+   * Custom content to render when `isLoading` is `true`.
+   * Rendered inside a `DataTable.LoadingState` row spanning all columns.
+   * When omitted, skeleton rows are rendered based on `loadingRows`.
+   */
+  loadingState?: React.ReactNode;
+  /**
+   * Number of skeleton rows to render when `isLoading` is `true` and no `loadingState` is provided.
+   *
+   *
+   * If not provided, the rendered content will get a temporarily overlay while loading
+   */
+  loadingRows?: number;
+  /**
+   * Visually hidden label announced to screen readers when skeleton rows are shown.
+   * Only used when `isLoading` is `true` and no `loadingState` is provided.
+   * @default "Laster innhold"
+   */
+  loadingLabel?: string;
+  /**
+   * Renders a details panel below the row when expanded.
+   * When provided, an expand toggle column is added automatically.
+   */
+  getDetailsPanelContent?: (rowData: T) => React.ReactNode;
+  /**
+   * Controlled list of expanded row IDs.
+   * Use with `onDetailsPanelChange` for controlled usage, or `defaultDetailsPanelRowIds` for uncontrolled.
+   */
+  detailsPanelRowIds?: (string | number)[];
+  /**
+   * Initial list of expanded row IDs for uncontrolled usage.
+   * @default []
+   */
+  defaultDetailsPanelRowIds?: (string | number)[];
+  /**
+   * Called when the list of expanded row IDs changes.
+   */
+  onDetailsPanelChange?: (ids: (string | number)[]) => void;
+  /**
+   * Returns the height (in px) or `"auto"` for a row's details panel.
+   * When a number is returned, the panel scrolls within that fixed height.
+   * @default "auto"
+   */
+  getDetailsPanelHeight?: (rowData: T) => number | "auto";
+  /**
+   * Shows an expand-all toggle button in the expand column header.
+   * @default false
+   */
+  showExpandAll?: boolean;
 }
 
 function DataTableAutoInner<T>(
   {
     className,
+    id,
     rowDensity = "normal",
     withKeyboardNav = false,
     zebraStripes = false,
@@ -83,119 +198,292 @@ function DataTableAutoInner<T>(
     selectedKeys,
     defaultSelectedKeys,
     onSelectionChange,
-    disabledKeys = [],
+    disabledSelectionKeys = [],
     data,
     columnDefinitions,
     getRowId,
+    stickyColumns,
+    stickyHeader = false,
+    sort: sortProp,
+    defaultSort = [],
+    onSortChange,
+    onRowClick,
+    emptyState,
+    isLoading = false,
+    loadingState,
+    loadingRows,
+    loadingLabel = "Laster innhold",
+    disableRowSelectionOnClick = false,
+    getDetailsPanelContent,
+    getDetailsPanelHeight,
+    showExpandAll = false,
+    detailsPanelRowIds,
+    defaultDetailsPanelRowIds,
+    onDetailsPanelChange,
     ...rest
   }: DataTableProps<T>,
   forwardedRef: React.ForwardedRef<HTMLTableElement>,
 ) {
-  const [tableRef, setTableRef] = useState<HTMLTableElement | null>(null);
-  const mergedRef = useMergeRefs(forwardedRef, setTableRef);
-
-  const { tabIndex } = useTableKeyboardNav(tableRef, {
+  const { tabIndex, setTableRef } = useTableKeyboardNav({
     enabled: withKeyboardNav,
     shouldBlockNavigation,
   });
 
-  const resolvedGetRowId =
-    getRowId ??
-    (((_row: T, index: number) => index) as (rowData: T) => string | number);
+  const { sortState, onSortClick } = useTableSort({
+    defaultSort,
+    onSortChange,
+    sort: sortProp,
+  });
+
+  const mergedRef = useMergeRefs(forwardedRef, setTableRef);
+
+  const allRowKeys = useMemo(() => {
+    const resolvedGetRowId = (item: T, index: number): string | number =>
+      getRowId?.(item, index) ?? index;
+
+    return data.map((item, index) => resolvedGetRowId(item, index));
+  }, [data, getRowId]);
 
-  const selection = useTableSelection({
+  const tableSelectionState = useTableSelection({
     selectionMode: selectionModeProp,
     selectedKeys,
     defaultSelectedKeys,
     onSelectionChange,
-    disabledKeys,
-    data,
-    getRowId: resolvedGetRowId,
+    disabledSelectionKeys,
+    allRowKeys,
+  });
+
+  const { columns, stickySelection } = useColumnOptions<T>(columnDefinitions, {
+    stickyColumns,
+    selectionMode: tableSelectionState.selection.selectionMode,
   });
 
+  const tableId = useId(id);
+
   return (
-    <DataTableContextProvider layout={layout} withKeyboardNav={withKeyboardNav}>
-      <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}
-          >
-            <DataTableThead>
-              <DataTableTr>
-                {selection.selectionMode === "multiple" && (
-                  /* TODO: Overflow/focus is clipped. Alignment is off */
-                  /* TODO: Should not be resizable */
-                  <DataTableTh textAlign="center" width="60px">
-                    <Checkbox {...selection.getTheadCheckboxProps()} />
-                  </DataTableTh>
-                )}
-                {selection.selectionMode === "single" && (
-                  <DataTableTd align="center" width="60px" />
-                )}
-                {columnDefinitions.map((colDef, colDefIndex) => {
-                  return (
-                    <DataTableTh
-                      /* TODO: Make these user-changable */
-                      maxWidth="400px"
-                      minWidth="100px"
-                      defaultWidth="100%"
-                      textAlign="left"
-                      key={colDef.id || colDefIndex}
-                    >
-                      {colDef.header}
-                    </DataTableTh>
-                  );
-                })}
-              </DataTableTr>
-            </DataTableThead>
-            <DataTableTbody>
-              {data.map((rowData, rowIndex) => {
-                const rowId = selection.allKeys[rowIndex];
-                return (
-                  <DataTableTr key={rowId}>
-                    {selection.selectionMode === "multiple" && (
-                      <DataTableTd align="center" width="60px">
-                        <Checkbox {...selection.getRowCheckboxProps(rowId)} />
-                      </DataTableTd>
-                    )}
-                    {selection.selectionMode === "single" && (
-                      <DataTableTd align="center" width="60px">
-                        {/**
-                         * TODO: This should be a radio, but our current Radio implementation has some issues:
-                         * - Checked cant be controlled outside of radiogroup
-                         * - Cant hide label
-                         * */}
-                        <Checkbox {...selection.getRowRadioProps(rowId)} />
-                      </DataTableTd>
-                    )}
-                    {columnDefinitions.map((colDef, colDefIndex) => {
-                      return (
-                        <DataTableTd
-                          textAlign="left"
-                          key={colDef.id || colDefIndex}
-                        >
-                          {colDef.cell(rowData)}
-                        </DataTableTd>
-                      );
-                    })}
-                  </DataTableTr>
-                );
-              })}
-            </DataTableTbody>
-          </table>
+    <DataTableContextProvider
+      layout={layout}
+      withKeyboardNav={withKeyboardNav}
+      selectionState={tableSelectionState}
+      stickySelection={stickySelection}
+      stickyHeader={stickyHeader}
+      tableId={tableId}
+      showLoadingSkeletons={isLoading && loadingState == null}
+      onRowClick={onRowClick}
+      disableRowSelectionOnClick={disableRowSelectionOnClick}
+      isLoading={isLoading}
+      showLoadingOverlay={isLoading && !loadingState && !loadingRows}
+    >
+      <DataTableExpansionProvider
+        detailsPanelRowIds={detailsPanelRowIds}
+        defaultDetailsPanelRowIds={defaultDetailsPanelRowIds}
+        onDetailsPanelChange={onDetailsPanelChange}
+        allRowKeys={allRowKeys}
+        getDetailsPanelContent={getDetailsPanelContent}
+        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.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>
+          </div>
         </div>
-      </div>
+      </DataTableExpansionProvider>
     </DataTableContextProvider>
   );
 }
 
+interface DataTableAutoTBodyContentProps<T> {
+  columns: UseColumnOptionsResult<T>["columns"];
+  data: T[];
+  allRowKeys: (string | number)[];
+  loadingState: React.ReactNode;
+  loadingLabel: string;
+  loadingRows?: number;
+  emptyState: React.ReactNode;
+}
+
+function DataTableAutoTBodyContent<T>({
+  columns,
+  data,
+  allRowKeys,
+  loadingState,
+  loadingRows,
+  loadingLabel,
+  emptyState,
+}: DataTableAutoTBodyContentProps<T>) {
+  const { isLoading } = useDataTableContext();
+
+  if (isLoading && loadingState != null) {
+    return (
+      <DataTableLoadingState colSpan={columns.length}>
+        {loadingState}
+      </DataTableLoadingState>
+    );
+  }
+
+  if (isLoading && loadingRows) {
+    return (
+      <>
+        <tr>
+          <td colSpan={columns.length} className="aksel-sr-only">
+            {loadingLabel}
+          </td>
+        </tr>
+        {Array.from({ length: loadingRows }, (_, rowIndex) => (
+          <DataTableTr key={`skeleton-row-${rowIndex}`} aria-hidden>
+            {columns.map(({ isSticky, colDef }, colDefIndex) => (
+              <DataTableBaseCell
+                textAlign={colDef.type === "number" ? "right" : "left"}
+                key={colDef.id || colDefIndex}
+                as={colDef.isRowHeader ? "th" : "td"}
+                isSticky={isSticky}
+              >
+                <Skeleton variant="text" />
+              </DataTableBaseCell>
+            ))}
+          </DataTableTr>
+        ))}
+      </>
+    );
+  }
+
+  if (data.length === 0 && emptyState !== undefined) {
+    return (
+      <DataTableEmptyState colSpan={columns.length}>
+        {emptyState}
+      </DataTableEmptyState>
+    );
+  }
+
+  const renderLoadingAnnoucement = 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}
+        />
+      </React.Fragment>
+    );
+  });
+}
+
+function DataTableExpandedRow<T>({
+  rowId,
+  rowData,
+  columnCount,
+}: {
+  rowId: string | number;
+  rowData: T;
+  columnCount: number;
+}) {
+  const { tableId } = useDataTableContext();
+  const expansionContext = useDataTableExpansion(false);
+
+  /* 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) {
+    return null;
+  }
+
+  const { isExpanded, getDetailsPanelContent, getDetailsPanelHeight } =
+    expansionContext;
+
+  if (!isExpanded(rowId)) {
+    return null;
+  }
+
+  const content = getDetailsPanelContent?.(rowData);
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <tr>
+      <td id={`${tableId}-expansion-${rowId}`} colSpan={columnCount}>
+        <div style={{ height: getDetailsPanelHeight?.(rowData) }}>
+          {content}
+        </div>
+      </td>
+    </tr>
+  );
+}
+
 const DataTableAuto = forwardRef(DataTableAutoInner) as <T>(
   props: DataTableProps<T> & React.RefAttributes<HTMLTableElement>,
 ) => React.ReactElement | null;

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

@@ -1,8 +1,21 @@
 import { createStrictContext } from "../../../utils/helpers";
+import type { UseTableSelectionReturn } from "../hooks/useTableSelection";
 
 type DataTableContextProps = {
   layout: "fixed" | "auto";
   withKeyboardNav: boolean;
+  selectionState: UseTableSelectionReturn;
+  stickySelection: boolean;
+  stickyHeader: boolean;
+  tableId: string;
+  showLoadingSkeletons: boolean;
+  onRowClick?: (
+    rowId: string | number,
+    event: React.MouseEvent<HTMLTableRowElement>,
+  ) => void;
+  disableRowSelectionOnClick: boolean;
+  isLoading?: boolean;
+  showLoadingOverlay: boolean;
 };
 
 const { Provider: DataTableContextProvider, useContext: useDataTableContext } =
@@ -11,4 +24,20 @@ const { Provider: DataTableContextProvider, useContext: useDataTableContext } =
     errorMessage: "useDataTableContext must be used within DataTable",
   });
 
-export { DataTableContextProvider, useDataTableContext };
+type DataTableLocation = "thead" | "tbody" | "tfoot";
+
+const {
+  Provider: DataTableLocationProvider,
+  useContext: useDataTableLocation,
+} = createStrictContext<{ location: DataTableLocation }>({
+  name: "DataTableLocation",
+  errorMessage:
+    "Some component is using table context outside of Thead, Tbody or Tfoot. Please make sure to wrap it in the appropriate component.",
+});
+
+export {
+  DataTableContextProvider,
+  DataTableLocationProvider,
+  useDataTableContext,
+  useDataTableLocation,
+};

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

@@ -1,4 +1,5 @@
-import React, { forwardRef, useState } from "react";
+import React, { forwardRef } from "react";
+import { useId } from "../../../utils-external";
 import { cl } from "../../../utils/helpers";
 import { useMergeRefs } from "../../../utils/hooks";
 import {
@@ -11,6 +12,7 @@ import {
 } from "../empty-state/DataTableEmptyState";
 import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav";
 import { type SelectionProps } from "../hooks/useTableSelection";
+import { noSelectionState } from "../hooks/useTableSelection";
 import {
   DataTableLoadingState,
   type DataTableLoadingStateProps,
@@ -135,12 +137,6 @@ interface DataTableRootComponent extends React.ForwardRefExoticComponent<
    * @see 🏷️ {@link DataTableThProps}
    * @example
    * ```jsx
-   * <DataTable>
-   *   <DataTable.Thead>
-   *     <DataTable.Th>Header 1</DataTable.Th>
-   *     <DataTable.Th>Header 2</DataTable.Th>
-   *   </DataTable.Thead>
-   * </DataTable>
    * ```
    */
   Th: typeof DataTableTh;
@@ -219,18 +215,25 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
     },
     forwardedRef,
   ) => {
-    const [tableRef, setTableRef] = useState<HTMLTableElement | null>(null);
-    const mergedRef = useMergeRefs(forwardedRef, setTableRef);
-
-    const { tabIndex } = useTableKeyboardNav(tableRef, {
+    const { tabIndex, setTableRef } = useTableKeyboardNav({
       enabled: withKeyboardNav,
       shouldBlockNavigation,
     });
 
+    const mergedRef = useMergeRefs(forwardedRef, setTableRef);
+
     return (
       <DataTableContextProvider
         layout={layout}
         withKeyboardNav={withKeyboardNav}
+        selectionState={noSelectionState}
+        stickySelection={false}
+        stickyHeader={false}
+        tableId={useId()}
+        showLoadingSkeletons={false}
+        onRowClick={undefined}
+        disableRowSelectionOnClick={false}
+        showLoadingOverlay={false}
       >
         <div className="aksel-data-table__border-wrapper">
           <div className="aksel-data-table__scroll-wrapper">

package/src/data/table/tbody/DataTableTbody.tsx

@@ -1,16 +1,27 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, version } from "react";
 import { cl } from "../../../utils/helpers";
+import {
+  DataTableLocationProvider,
+  useDataTableContext,
+} from "../root/DataTableRoot.context";
 
 type DataTableTbodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
+const inertValue = parseInt(version.split(".")[0], 10) > 18 ? true : ""; // Support for inert was added in React 19
+
 const DataTableTbody = forwardRef<HTMLTableSectionElement, DataTableTbodyProps>(
   ({ className, ...rest }, forwardedRef) => {
+    const { showLoadingOverlay } = useDataTableContext();
     return (
-      <tbody
-        {...rest}
-        ref={forwardedRef}
-        className={cl("aksel-data-table__tbody", className)}
-      />
+      <DataTableLocationProvider location="tbody">
+        <tbody
+          {...rest}
+          ref={forwardedRef}
+          className={cl("aksel-data-table__tbody", className)}
+          // @ts-expect-error - inert is not yet recognized by React's type definitions, but we want to use it for better accessibility when showing the loading overlay.
+          inert={showLoadingOverlay ? inertValue : false}
+        />
+      </DataTableLocationProvider>
     );
   },
 );