@navikt/ds-react 8.10.6 → 8.11.1

package/src/data/table/base-cell/DataTableBaseCell.tsx

@@ -7,12 +7,12 @@ interface DataTableBaseCellProps extends Omit<
   "width"
 > {
   /**
-   * Content alignment inside cell.
+   * Text alignment inside cell.
    *
    * Quantitative figures like amounts and percentages should be right‑aligned (but not phone numbers, postal codes etc.)
    * @default "left"
    */
-  textAlign?: "left" | "center" | "right";
+  align?: "left" | "center" | "right";
   /**
    * Internal cell type that controls padding, alignment, row-click prevention, and resize behavior.
    * - `"action"`: Centers content, removes cell padding, prevents row click, and disables column resize.
@@ -20,7 +20,7 @@ interface DataTableBaseCellProps extends Omit<
    */
   cellType?: "action";
   /**
-   * When true, clicking this cell will not trigger `onRowClick` on the row.
+   * When true, clicking this cell will not trigger `onRowAction` on the row.
    * Useful for cells that contain their own interactive content or actions
    * that should be independent of row-level click handling.
    */
@@ -28,7 +28,7 @@ interface DataTableBaseCellProps extends Omit<
   /**
    * Sets a max-width on the content wrapper div inside the cell.
    * This is only needed when using `layout="auto"` together with
-   * `truncateContent` on `<DataTable>` and you want the cell to be truncated.
+   * `truncateContent` on `<DataGrid.Table>` and you want the cell to be truncated.
    */
   contentMaxWidth?: number | string;
   /**
@@ -58,7 +58,7 @@ const DataTableBaseCell = forwardRef<
       children,
       as: Component,
       beforeContent,
-      textAlign = "left",
+      align = "left",
       cellType,
       preventRowClick,
       contentMaxWidth,
@@ -77,7 +77,7 @@ const DataTableBaseCell = forwardRef<
         ref={forwardedRef}
         className={cl("aksel-data-table__cell", className)}
         tabIndex={withKeyboardNav ? -1 : undefined}
-        data-align={textAlign}
+        data-align={align}
         data-cell-type={cellType || undefined}
         data-prevent-row-click={
           preventRowClick || cellType === "action" || undefined

package/src/data/table/column-header/DataTableColumnHeader.tsx

@@ -6,21 +6,21 @@ import {
   SortDownIcon,
   SortUpIcon,
 } from "@navikt/aksel-icons";
+import { useDataGridContext } from "../../../data-grid/root/DataGridRoot.context";
 import { cl } from "../../../utils/helpers";
 import { useMergeRefs } from "../../../utils/hooks";
 import {
   DataTableBaseCell,
   type DataTableBaseCellProps,
 } from "../base-cell/DataTableBaseCell";
-import type { SortDirection } from "../root/DataTable.types";
 import { useDataTableContext } from "../root/DataTableRoot.context";
 import { type ResizeProps, useTableColumnResize } from "./useTableColumnResize";
 
 interface DataTableColumnHeaderProps extends DataTableBaseCellProps {
   /**
-   * Unique identifier for the column. Required for sortable columns to identify which column is being sorted.
+   * Unique identifier for the column. Used when sorting to identify which column is being sorted.
    */
-  id?: string;
+  id: string;
   /**
    * Accessible name of the column.
    */
@@ -29,18 +29,7 @@ interface DataTableColumnHeaderProps extends DataTableBaseCellProps {
    * Makes the column sortable by clicking on the header.
    * The entire header cell content becomes a clickable button when true.
    */
-  sortable?: boolean; // TODO: Consider merging sortable, sortDirection and onSortClick into a single "sort" object prop
-  /**
-   * Current sort direction. Only relevant when `sortable` is true.
-   * Uses values matching the `aria-sort` attribute directly. // TODO: What does this mean? (Can we just remove it?)
-   * @default "none"
-   */
-  sortDirection?: SortDirection; // TODO Not in use???
-  /**
-   * Called when the user clicks the header. Only relevant when `sortable` is true.
-   * The consumer is responsible for determining and setting the next sort state. // TODO: We don't use the term "consumer" in JSDoc anywhere else
-   */
-  onSortClick?: (event: React.MouseEvent<HTMLElement>) => void; // TODO Not in use???
+  sortable?: boolean;
   /**
    * Object with props related to column width and resizing. Summary:
    *
@@ -49,7 +38,7 @@ interface DataTableColumnHeaderProps extends DataTableBaseCellProps {
    * - `resizeMin?: number` - Minimum width of the column when resizing.
    * - `resizeMax?: number` - Maximum width of the column when resizing.
    * - `value?: number | string` - Controlled width of the column.
-   * - `default?: number | string` - Initial width of the column.
+   * - `defaultValue?: number | string` - Initial width of the column.
    * - `onChange?: (width: number) => void` - Called when the column width changes.
    *
    * See individual props for details and defaults.
@@ -57,7 +46,7 @@ interface DataTableColumnHeaderProps extends DataTableBaseCellProps {
   width?: ResizeProps;
 }
 
-const SORT_ICON: Record<SortDirection, React.ElementType> = {
+const SORT_ICON: Record<"asc" | "desc" | "none", React.ElementType> = {
   asc: SortUpIcon,
   desc: SortDownIcon,
   none: ArrowsUpDownIcon,
@@ -86,6 +75,7 @@ const DataTableColumnHeader = forwardRef<
     },
     forwardedRef,
   ) => {
+    const { isLoading } = useDataGridContext();
     const thRef = useRef<HTMLTableCellElement>(null);
     const mergedRef = useMergeRefs(forwardedRef, thRef);
     const { sortingState } = useDataTableContext();
@@ -106,6 +96,8 @@ const DataTableColumnHeader = forwardRef<
 
     const SortIcon = canSort ? SORT_ICON[sortDirection] : null;
 
+    const contentId = `th-content-${id.replace(/\s/g, "-")}`;
+
     return (
       <DataTableBaseCell
         as="th"
@@ -116,14 +108,18 @@ const DataTableColumnHeader = forwardRef<
         style={{ ...style, width: resizeResult.width }}
         aria-sort={canSort ? getAriaSort(sortDirection) : undefined}
         cellType={cellType}
+        aria-labelledby={contentId} // Avoids VO announcing "Endre bredde" when navigating horizontally in tbody
       >
         {canSort ? (
           <button
             type="button"
             className="aksel-data-table__th-sort-button"
             onClick={(event) => onSortClick(id, event)}
+            disabled={isLoading}
           >
-            <div className="aksel-data-table__th-content">{children}</div>
+            <div id={contentId} className="aksel-data-table__th-content">
+              {children}
+            </div>
             {SortIcon && (
               <SortIcon
                 aria-hidden
@@ -135,6 +131,7 @@ const DataTableColumnHeader = forwardRef<
           </button>
         ) : (
           <div
+            id={contentId}
             className={cl({
               "aksel-data-table__th-content": cellType !== "action",
             })}
@@ -164,7 +161,7 @@ const DataTableColumnHeader = forwardRef<
               typeof resizeResult.width === "number" &&
               resizeResult.isResizingWithKeyboard
                 ? resizeResult.width.toString()
-                : "" // Needs to be blank when not in keyboard resizing mode to avoid NVDA announcing the value as part of the column heading
+                : " " // Needs to be blank when not in keyboard resizing mode to avoid NVDA announcing the value as part of the column heading
             } // Need either this or aria-valuemax to get SR (at least NVDA) to announce the value
           >
             {resizeResult.isResizingWithKeyboard && (
@@ -185,7 +182,7 @@ const DataTableColumnHeader = forwardRef<
 );
 
 function getAriaSort(
-  sortDirection: SortDirection | undefined,
+  sortDirection: "asc" | "desc" | "none" | undefined,
 ): "ascending" | "descending" | "none" | undefined {
   if (sortDirection === "asc") return "ascending";
   if (sortDirection === "desc") return "descending";

package/src/data/table/column-header/useTableColumnResize.ts

@@ -26,8 +26,6 @@ type ResizeProps = {
    * consider using `layout="auto"` on the root instead for better performance.
    *
    * **NB:** This can cause a layout shift. Set a good initial width with `width` or `defaultWidth` to mitigate this.
-   *
-   * **NB:** Does not work with block content.
    */
   autoResizeOnce?: boolean;
   /**
@@ -55,7 +53,7 @@ type ResizeProps = {
    * **NB:** Percentage as initial width does not work well with resizing.
    * @default 140px
    */
-  default?: number | string;
+  defaultValue?: number | string;
   /**
    * Called when the column width changes.
    * @param width New width in pixels.
@@ -98,7 +96,7 @@ function useTableColumnResize({
   resizeMin = 40,
   resizeMax = Infinity,
   value,
-  default: defaultProp,
+  defaultValue,
   onChange,
   thRef,
   colSpan,
@@ -110,7 +108,7 @@ function useTableColumnResize({
 
   const [width, setWidth] = useControllableState({
     value,
-    defaultValue: defaultProp ?? (colSpan ?? 1) * 140,
+    defaultValue: defaultValue ?? (colSpan ?? 1) * 140,
     /**
      * TODO:
      * - Potential optimization: Only call when width as "stopped" changing, e.g. on mouse up or after a debounce when resizing with keyboard.
@@ -292,7 +290,6 @@ function useTableColumnResize({
 
 /**
  * Figures out how wide the column needs to be to fit all the content without truncation.
- * NB: Does not work with block content!
  */
 function getAutoColumnWidth(
   thRef: React.RefObject<HTMLTableCellElement | null>,
@@ -344,18 +341,24 @@ function getAutoColumnWidth(
     // Find needed width
     const cellContent = cell.querySelector(
       ".aksel-data-table__cell-content",
-    ) as HTMLElement;
-    range.selectNodeContents(cellContent);
-    const cellContentWidth = range.getBoundingClientRect().width;
-    const contentElStyle = window.getComputedStyle(cellContent);
-    const inlinePadding =
-      parseInt(contentElStyle.paddingLeft, 10) +
-      parseInt(contentElStyle.paddingRight, 10);
-    const marginLeft = parseInt(contentElStyle.marginLeft, 10); // We don't have right margin for now
+    ) as HTMLElement | null;
+
+    if (!cellContent) {
+      continue;
+    }
+
+    cellContent.style.width = "fit-content";
+    const cellContentWidth = cellContent.scrollWidth;
+    cellContent.style.removeProperty("width");
+    let marginLeft = 0;
+    if (cell.dataset.nested === "true") {
+      const contentElStyle = window.getComputedStyle(cellContent);
+      marginLeft = parseInt(contentElStyle.marginLeft, 10);
+    }
     const widthNeededForThisCell =
-      (cellContentWidth + inlinePadding + marginLeft) / cell.colSpan;
+      (cellContentWidth + marginLeft + 1) / cell.colSpan;
     if (widthNeededForThisCell > newColumnWidth) {
-      newColumnWidth = widthNeededForThisCell;
+      newColumnWidth = Math.ceil(widthNeededForThisCell);
     }
   }
 

package/src/data/table/helpers/collectTableRowEntries.ts

@@ -1,4 +1,4 @@
-import type { TableRowEntryId } from "../root/DataTable.types";
+import type { TableRowEntryId } from "../root/DataGridTable.types";
 
 type CollectTableRowEntriesArgs<T> = {
   items: T[];

package/src/data/table/helpers/selection/getMultipleSelectProps.ts

@@ -2,15 +2,16 @@ import type { ChangeEventHandler, SetStateAction } from "react";
 import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput";
 import { consoleWarning } from "../../../../utils/helpers/consoleWarning";
 import type { UseTableItemsReturn } from "../../hooks/useTableItems";
-import type { TableRowEntryId } from "../../root/DataTable.types";
-import type { SelectedKeysT, SelectionProps } from "./selection.types";
+import type { TableRowEntryId } from "../../root/DataGridTable.types";
+import type { SelectionProps } from "./selection.types";
 import { canSelectTableRow, mutateRowSelection } from "./selection.utils";
 
 type GetMultipleSelectPropsArgs<T> = {
   selectedKeysSet: Set<TableRowEntryId>;
-  selectedKeys: SelectedKeysT;
-  setSelectedKeys: (next: SetStateAction<SelectedKeysT>) => void;
+  selectedKeys: string[];
+  setSelectedKeys: (next: SetStateAction<string[]>) => void;
   tableItems: UseTableItemsReturn<T>;
+  isLoading?: boolean;
 } & Pick<SelectionProps<T>, "enableRowSelection">;
 
 function getMultipleSelectProps<T>({
@@ -19,6 +20,7 @@ function getMultipleSelectProps<T>({
   setSelectedKeys,
   enableRowSelection,
   tableItems,
+  isLoading,
 }: GetMultipleSelectPropsArgs<T>) {
   const selectableIdsSet: Set<TableRowEntryId> = new Set();
 
@@ -40,7 +42,7 @@ function getMultipleSelectProps<T>({
   const handleToggleRow = (key: TableRowEntryId, row: T) => {
     if (!row) {
       consoleWarning(
-        `Row data is undefined for key ${key}. This may cause issues with selection if enableRowSelection is used.`,
+        `DataGrid.Table: Row data is undefined for key ${key}. This may cause issues with selection if enableRowSelection is used.`,
       );
     }
 
@@ -62,6 +64,9 @@ function getMultipleSelectProps<T>({
   const toggleAllRowSelected: ChangeEventHandler<HTMLInputElement> = (
     event,
   ) => {
+    if (isLoading) {
+      return;
+    }
     if (event.target.checked) {
       const preserved = selectedKeys.filter((k) => !selectableIdsSet.has(k));
       setSelectedKeys([...preserved, ...selectableIdsSet]);
@@ -75,6 +80,7 @@ function getMultipleSelectProps<T>({
       checked: isAllSelected,
       indeterminate: !isAllSelected && someSelected,
       onChange: toggleAllRowSelected,
+      disabled: selectableIdsSet.size === 0 || isLoading,
     }),
     getRowCheckboxProps: (key: TableRowEntryId, row: T): CheckboxInputProps => {
       return {

package/src/data/table/helpers/selection/getSingleSelectProps.ts

@@ -1,12 +1,12 @@
 import type { RadioInputProps } from "../../../../form/radio/radio-input/RadioInput";
 import { consoleWarning } from "../../../../utils/helpers/consoleWarning";
-import type { TableRowEntryId } from "../../root/DataTable.types";
-import type { SelectedKeysT, SelectionProps } from "./selection.types";
+import type { TableRowEntryId } from "../../root/DataGridTable.types";
+import type { SelectionProps } from "./selection.types";
 import { canSelectTableRow } from "./selection.utils";
 
 type GetSingleSelectPropsArgs<T> = {
   selectedKeysSet: Set<TableRowEntryId>;
-  setSelectedKeys: (keys: SelectedKeysT) => void;
+  setSelectedKeys: (keys: string[]) => void;
   name: string;
 } & Pick<SelectionProps<T>, "enableRowSelection">;
 
@@ -19,7 +19,7 @@ function getSingleSelectProps<T>({
   const handleSelectionChange = (key: TableRowEntryId, row: T) => {
     if (!row) {
       consoleWarning(
-        `Row data is undefined for key ${key}. This may cause issues with selection if enableRowSelection is used.`,
+        `DataGrid.Table: Row data is undefined for key ${key}. This may cause issues with selection if enableRowSelection is used.`,
       );
     }
     if (!canSelectTableRow(enableRowSelection, { row, id: key })) {

package/src/data/table/helpers/selection/selection.types.ts

@@ -1,11 +1,7 @@
 import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput";
 import type { RadioInputProps } from "../../../../form/radio/radio-input/RadioInput";
-import type { TableRowEntryId } from "../../root/DataTable.types";
 
-type SelectedKeysT = TableRowEntryId[];
-
-// TODO: Remove `any` if possible
-type SelectionProps<T = any> = {
+type SelectionProps<T = unknown> = {
   /**
    * Enables selection of rows.
    *
@@ -16,57 +12,51 @@ type SelectionProps<T = any> = {
    *
    * @default "none"
    */
-  selectionMode: "none" | "single" | "multiple";
+  mode: "none" | "single" | "multiple";
   /**
-   * Controlled selected keys. Should be used in conjunction with `onSelectionChange`.
+   * Controlled selected keys. Should be used in conjunction with `onSelectedRowIdsChange`.
    */
-  selectedKeys?: SelectedKeysT;
+  selectedRowIds?: string[];
   /**
    * Default selected keys when using uncontrolled selection. Should not be used together with `selectedKeys`.
    */
-  defaultSelectedKeys?: SelectedKeysT;
+  defaultSelectedRowIds?: string[];
   /**
    * Callback with array of selected keys.
    */
-  onSelectionChange?: (keys: SelectedKeysT) => void;
+  onSelectedRowIdsChange?: (ids: string[]) => void;
   /**
    * Callback to determine if a row should be enabled for selection.
    *
-   *
    * If set to a boolean, it will enable selection for all rows when true, and disable selection for all rows when false.
    */
   enableRowSelection?:
-    | (({ row, id }: { row: T; id: TableRowEntryId }) => boolean)
+    | (({ row, id }: { row: T; id: string }) => boolean)
     | boolean;
-  /**
-   * Determines if selection is triggered by clicking the row or the selection control (checkbox/radio).
-   * @default "row"
-   */
-  selectionTrigger?: "row" | "control";
 };
 
 type NoneSelection = {
-  selectionMode: "none";
-  selectedKeys: SelectedKeysT;
+  mode: "none";
+  selectedKeys: string[];
 };
 
 type SingleSelection = {
-  selectionMode: "single";
-  selectedKeys: SelectedKeysT;
-  getRowRadioProps: (key: TableRowEntryId, row: any) => RadioInputProps;
-  toggleSelection: (key: TableRowEntryId, row: any) => void;
+  mode: "single";
+  selectedKeys: string[];
+  getRowRadioProps: (key: string, row: any) => RadioInputProps;
+  toggleSelection: (key: string, row: any) => void;
 };
 
 type MultipleSelection = {
-  selectionMode: "multiple";
-  selectedKeys: SelectedKeysT;
+  mode: "multiple";
+  selectedKeys: string[];
   getTheadCheckboxProps: () => CheckboxInputProps;
-  getRowCheckboxProps: (key: TableRowEntryId, row: any) => CheckboxInputProps;
-  toggleSelection: (key: TableRowEntryId, row: any) => void;
+  getRowCheckboxProps: (key: string, row: any) => CheckboxInputProps;
+  toggleSelection: (key: string, row: any) => void;
 };
 
 type TableSelectionBase = {
-  isRowSelected: (rowId: TableRowEntryId) => boolean;
+  isRowSelected: (rowId: string) => boolean;
 };
 
 type TableSelection = TableSelectionBase &
@@ -75,7 +65,6 @@ type TableSelection = TableSelectionBase &
 export type {
   MultipleSelection,
   NoneSelection,
-  SelectedKeysT,
   SelectionProps,
   SingleSelection,
   TableSelection,

package/src/data/table/helpers/selection/selection.utils.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "vitest";
-import type { TableRowEntryId } from "../../root/DataTable.types";
+import type { TableRowEntryId } from "../../root/DataGridTable.types";
 import type { ItemDetail } from "../collectTableRowEntries";
 import { mutateRowSelection } from "./selection.utils";
 

package/src/data/table/helpers/selection/selection.utils.ts

@@ -1,4 +1,4 @@
-import type { TableRowEntryId } from "../../root/DataTable.types";
+import type { TableRowEntryId } from "../../root/DataGridTable.types";
 import type { ItemDetail } from "../collectTableRowEntries";
 import type { SelectionProps } from "./selection.types";
 

package/src/data/table/helpers/table-focus.ts

@@ -137,7 +137,7 @@ function getStickyOffsets(element: HTMLElement): {
   }
 
   const stickyHeader = table.querySelector<HTMLElement>(
-    `.aksel-data-table__tr[data-sticky="true"]`,
+    `.aksel-data-table__thead[data-sticky="true"]`,
   );
 
   const stickyNodesStart = table.querySelectorAll<HTMLElement>(

package/src/data/table/hooks/__tests__/useTableItems.test.ts

@@ -1,6 +1,6 @@
 import { renderHook } from "@testing-library/react";
 import { describe, expect, test } from "vitest";
-import type { TableRowEntryId } from "../../root/DataTable.types";
+import type { TableRowEntryId } from "../../root/DataGridTable.types";
 import { useTableItems } from "../useTableItems";
 
 type TestRow = {

package/src/data/table/hooks/useColumnOptions.ts

@@ -1,18 +1,23 @@
 import { useMemo } from "react";
+import { consoleWarning } from "../../../utils/helpers/consoleWarning";
 import type {
   ColumnDefinition,
   ColumnDefinitions,
-} from "../root/DataTable.types";
+} from "../root/DataGridTable.types";
 import { ACTION_CELL_WIDTH } from "../tr/DataTableTr";
 
 type UseColumnOptions = {
   stickyColumns?: {
-    start?: "1";
-    end?: "1";
+    start?: 1;
+    end?: 1;
   };
   hasSelection: boolean;
   hasDetailsPanel: boolean;
   layout: "fixed" | "auto";
+  columnDisplay?: {
+    id: string;
+    visible: boolean;
+  }[];
 };
 
 type StickyStartState = {
@@ -37,9 +42,15 @@ function useColumnOptions<T>(
   columnDefinitions: ColumnDefinitions<T>,
   options: UseColumnOptions,
 ): UseColumnOptionsResult<T> {
-  const { stickyColumns, hasSelection, hasDetailsPanel, layout } = options;
+  const {
+    stickyColumns,
+    hasSelection,
+    hasDetailsPanel,
+    layout,
+    columnDisplay,
+  } = options;
 
-  const hasStickyStart = stickyColumns?.start === "1";
+  const hasStickyStart = stickyColumns?.start === 1;
 
   const stickyExpansion = hasStickyStart && hasDetailsPanel;
   const stickySelection = hasStickyStart && hasSelection;
@@ -49,11 +60,15 @@ function useColumnOptions<T>(
     (stickyExpansion ? ACTION_CELL_WIDTH : 0) +
     (stickySelection ? ACTION_CELL_WIDTH : 0);
 
+  const visibleColumns = useMemo(() => {
+    return orderColumnsAndFilterByVisibility(columnDefinitions, columnDisplay);
+  }, [columnDefinitions, columnDisplay]);
+
   const columns = useMemo(() => {
-    return columnDefinitions.map((colDef, index) => {
+    return visibleColumns.map((colDef, index) => {
       const isFirstSticky = hasStickyStart && index === 0;
       const isLastSticky =
-        stickyColumns?.end === "1" && index === columnDefinitions.length - 1;
+        stickyColumns?.end === 1 && index === visibleColumns.length - 1;
 
       return {
         isSticky: isFirstSticky
@@ -66,12 +81,7 @@ function useColumnOptions<T>(
         colDef,
       };
     });
-  }, [
-    columnDefinitions,
-    hasStickyStart,
-    stickyColumns,
-    stickyFirstColumnOffset,
-  ]);
+  }, [visibleColumns, hasStickyStart, stickyColumns, stickyFirstColumnOffset]);
 
   const totalColSpan =
     columns.length +
@@ -91,6 +101,31 @@ function useColumnOptions<T>(
   };
 }
 
+function orderColumnsAndFilterByVisibility<T>(
+  columns: ColumnDefinition<T>[],
+  columnDisplay?: { id: string; visible: boolean }[],
+): ColumnDefinition<T>[] {
+  if (!columnDisplay) {
+    return columns;
+  }
+
+  const columnMap = new Map(columns.map((col) => [col.id, col]));
+
+  return columnDisplay.reduce<ColumnDefinition<T>[]>((acc, { id, visible }) => {
+    const col = columnMap.get(id);
+
+    if (!col) {
+      consoleWarning(
+        `DataGrid: Column with id "${id}" not found in column definitions. Please check your columnDisplay configuration.`,
+      );
+    }
+
+    if (col && visible) {
+      acc.push(col);
+    }
+    return acc;
+  }, []);
+}
+
 export { useColumnOptions };
-export type { StickyStartState };
-export type { UseColumnOptionsResult };
+export type { StickyStartState, UseColumnOptionsResult };