@navikt/ds-react 8.10.6 → 8.11.0

package/src/data/table/hooks/useTableDetailsPanel.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from "react";
 import { createStrictContext } from "../../../utils/helpers";
 import { useControllableState } from "../../../utils/hooks";
-import type { TableRowEntryId } from "../root/DataTable.types";
 import { useDataTableContext } from "../root/DataTableRoot.context";
 
 type DetailsPanelProps<T> = {
@@ -17,18 +16,18 @@ type DetailsPanelProps<T> = {
   isRowExpandable?: (rowData: T) => boolean;
   /**
    * Controlled list of expanded row IDs.
-   * Use with `onDetailsPanelChange` for controlled usage, or `defaultDetailsPanelRowIds` for uncontrolled.
+   * Use with `onExpandedRowIdsChange` for controlled usage, or `defaultExpandedRowIds` for uncontrolled.
    */
-  expandedRowIds?: TableRowEntryId[];
+  expandedRowIds?: string[];
   /**
    * Initial list of expanded row IDs for uncontrolled usage.
    * @default []
    */
-  defaultExpandedRowIds?: TableRowEntryId[];
+  defaultExpandedRowIds?: string[];
   /**
    * Called when the list of expanded row IDs changes.
    */
-  onExpandedRowIdsChange?: (ids: TableRowEntryId[]) => void; // TODO: Docs: This pattern is called "Master / Detail" in general terms
+  onExpandedRowIdsChange?: (ids: string[]) => void; // TODO: Docs: This pattern is called "Master / Detail" in general terms
   /**
    * 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.
@@ -43,9 +42,9 @@ type DetailsPanelProps<T> = {
 };
 
 type DataTableDetailsPanelContextT = {
-  isExpanded: (id: TableRowEntryId) => boolean;
-  isDetailsPanelExpandable: (id: TableRowEntryId) => boolean;
-  toggleExpansion: (id: TableRowEntryId) => void;
+  isExpanded: (id: string) => boolean;
+  isDetailsPanelExpandable: (id: string) => boolean;
+  toggleExpansion: (id: string) => void;
   toggleAll: () => void;
   isAllExpanded: boolean;
   getDetailsPanelContent?: (row: unknown) => React.ReactNode;
@@ -87,18 +86,15 @@ function DataTableDetailsPanelProvider<T>({
   const tableContext = useDataTableContext(false);
 
   const { itemDetails } = tableContext?.tableItems ?? {
-    itemDetails: new Map<
-      TableRowEntryId,
-      { rowData: T; id: TableRowEntryId; level: number }
-    >(),
+    itemDetails: new Map<string, { rowData: T; id: string; level: number }>(),
   };
 
   const expandableIds = React.useMemo(() => {
     if (!getContent) {
-      return new Set<TableRowEntryId>();
+      return new Set<string>();
     }
 
-    const ids = new Set<TableRowEntryId>();
+    const ids = new Set<string>();
 
     for (const { rowData, id, level } of itemDetails.values()) {
       /* We only allow Master - Details pattern on top level rows */
@@ -115,18 +111,18 @@ function DataTableDetailsPanelProvider<T>({
   }, [getContent, isRowExpandable, itemDetails]);
 
   const isDetailsPanelExpandableById = useCallback(
-    (id: TableRowEntryId) => expandableIds.has(id),
+    (id: string) => expandableIds.has(id),
     [expandableIds],
   );
 
   const isExpanded = useCallback(
-    (id: TableRowEntryId) =>
+    (id: string) =>
       isDetailsPanelExpandableById(id) && expandedIds.includes(id),
     [expandedIds, isDetailsPanelExpandableById],
   );
 
   const toggleExpansion = useCallback(
-    (id: TableRowEntryId) => {
+    (id: string) => {
       if (!isDetailsPanelExpandableById(id)) {
         return;
       }
@@ -169,7 +165,7 @@ function DataTableDetailsPanelProvider<T>({
   );
 }
 
-function getDataTableDetailsPanelId(tableId: string, rowId: TableRowEntryId) {
+function getDataTableDetailsPanelId(tableId: string, rowId: string) {
   return `${tableId}-expansion-${rowId}`;
 }
 

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

@@ -4,7 +4,6 @@ import {
   type ItemDetail,
   collectTableRowEntries,
 } from "../helpers/collectTableRowEntries";
-import type { TableRowEntryId } from "../root/DataTable.types";
 
 type SubRowsProps<T> = {
   /**
@@ -14,18 +13,18 @@ type SubRowsProps<T> = {
   /**
    * Controlled list of IDs of rows that should be expanded.
    */
-  expandedRowIds?: TableRowEntryId[];
+  expandedRowIds?: string[];
   /**
    * IDs of rows that should be initially expanded.
    * Only used when `expandedRowIds` is not provided, i.e. when the expanded state is uncontrolled.
    */
-  defaultExpandedRowIds?: TableRowEntryId[];
+  defaultExpandedRowIds?: string[];
   /**
    * Called when the list of expanded row IDs changes.
    */
-  onExpandedRowIdsChange?: (ids: TableRowEntryId[]) => void;
+  onExpandedRowIdsChange?: (ids: string[]) => void;
   /**
-   * Function to get whether a row should be expandable.
+   * Determines whether a row should be expandable.
    * By default, all rows are expandable when `getRows` is provided.
    */
   isRowExpandable?: (rowData: T) => boolean;
@@ -33,19 +32,19 @@ type SubRowsProps<T> = {
 
 type UseTableItemsArgs<T> = {
   items: T[];
-  getRowId?: (rowData: T) => TableRowEntryId;
+  getRowId?: (rowData: T) => string;
   subRows?: SubRowsProps<T>;
 };
 
 type UseTableItemsReturn<T> = {
   items: T[];
-  itemDetails: Map<TableRowEntryId, ItemDetail<T>>;
+  itemDetails: Map<string, ItemDetail<T>>;
   /** Row ids for the rows currently rendered in the table body. */
-  visibleRowIds: TableRowEntryId[];
+  visibleRowIds: string[];
   /** Direct child ids for each row, used to traverse selection groups lazily. */
-  childRowIdsById: Map<TableRowEntryId, TableRowEntryId[]>;
-  onExpandedRowIdsChange: (id: TableRowEntryId) => void;
-  isSubRowExpanded: (id: TableRowEntryId) => boolean;
+  childRowIdsById: Map<string, string[]>;
+  onExpandedRowIdsChange: (id: string) => void;
+  isSubRowExpanded: (id: string) => boolean;
 };
 
 function useTableItems<T>(args: UseTableItemsArgs<T>): UseTableItemsReturn<T> {
@@ -85,9 +84,9 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): UseTableItemsReturn<T> {
       });
 
       const localVisibleItems: T[] = [];
-      const localVisibleRowIds: TableRowEntryId[] = [];
+      const localVisibleRowIds: string[] = [];
 
-      const addVisibleRows = (rowId: TableRowEntryId): TableRowEntryId[] => {
+      const addVisibleRows = (rowId: string): string[] => {
         const details = rowEntriesMap.get(rowId);
 
         if (!details) {
@@ -97,7 +96,7 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): UseTableItemsReturn<T> {
         localVisibleItems.push(details.rowData);
         localVisibleRowIds.push(details.id);
 
-        const visibleDescendantRowIds: TableRowEntryId[] = [];
+        const visibleDescendantRowIds: string[] = [];
 
         if (expandedIdsSet.has(details.id)) {
           for (const childRowId of details.children) {
@@ -122,7 +121,7 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): UseTableItemsReturn<T> {
     }, [getRows, items, getRowId, isRowExpandable, expandedIdsSet]);
 
   const handleExpandedSubRowIdChange = useCallback(
-    (id: TableRowEntryId) => {
+    (id: string) => {
       setNestedSubRowsExpandedIds((prev) =>
         prev.includes(id)
           ? prev.filter((expandedId) => expandedId !== id)
@@ -132,14 +131,29 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): UseTableItemsReturn<T> {
     [setNestedSubRowsExpandedIds],
   );
 
-  return {
-    items: visibleItems,
-    itemDetails,
-    visibleRowIds,
-    childRowIdsById,
-    onExpandedRowIdsChange: handleExpandedSubRowIdChange,
-    isSubRowExpanded: (id: TableRowEntryId) => expandedIdsSet.has(id),
-  };
+  const isSubRowExpanded = useCallback(
+    (id: string) => expandedIdsSet.has(id),
+    [expandedIdsSet],
+  );
+
+  return useMemo(
+    () => ({
+      items: visibleItems,
+      itemDetails,
+      visibleRowIds,
+      childRowIdsById,
+      onExpandedRowIdsChange: handleExpandedSubRowIdChange,
+      isSubRowExpanded,
+    }),
+    [
+      visibleItems,
+      itemDetails,
+      visibleRowIds,
+      childRowIdsById,
+      handleExpandedSubRowIdChange,
+      isSubRowExpanded,
+    ],
+  );
 }
 
 export { useTableItems };

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

@@ -1,18 +1,19 @@
 import { useCallback, useMemo } from "react";
+import { useDataGridContext } from "../../../data-grid/root/DataGridRoot.context";
 import { useId } from "../../../utils-external";
 import { useControllableState } from "../../../utils/hooks";
 import { getMultipleSelectProps } from "../helpers/selection/getMultipleSelectProps";
 import { getSingleSelectProps } from "../helpers/selection/getSingleSelectProps";
 import type {
-  SelectedKeysT,
   SelectionProps,
   TableSelection,
 } from "../helpers/selection/selection.types";
-import type { TableRowEntryId } from "../root/DataTable.types";
+import type { TableRowEntryId } from "../root/DataGridTable.types";
 import type { UseTableItemsReturn } from "./useTableItems";
 
 type UseTableSelectionArgs<T> = {
   selection?: SelectionProps<T>;
+  selectionTrigger: "row" | "control";
   tableItems: UseTableItemsReturn<T>;
 };
 
@@ -24,27 +25,28 @@ type UseTableSelectionReturn = {
 
 function useTableSelection<T>({
   selection = {
-    selectionMode: "none",
+    mode: "none",
   },
+  selectionTrigger = "row",
   tableItems,
 }: UseTableSelectionArgs<T>): UseTableSelectionReturn {
+  const { isLoading } = useDataGridContext();
   const {
-    selectionMode,
-    defaultSelectedKeys,
-    selectedKeys: selectedKeysProp,
-    onSelectionChange,
+    mode,
+    defaultSelectedRowIds,
+    selectedRowIds: selectedRowIdsProp,
+    onSelectedRowIdsChange,
     enableRowSelection,
-    selectionTrigger = "row",
   } = selection;
 
   const { visibleRowIds = [] } = tableItems;
 
   const radioGroupName = useId();
 
-  const [selectedKeys, setSelectedKeys] = useControllableState<SelectedKeysT>({
-    value: selectionMode !== "none" ? selectedKeysProp : undefined,
-    defaultValue: defaultSelectedKeys ?? [],
-    onChange: onSelectionChange,
+  const [selectedKeys, setSelectedKeys] = useControllableState<string[]>({
+    value: mode !== "none" ? selectedRowIdsProp : undefined,
+    defaultValue: defaultSelectedRowIds ?? [],
+    onChange: onSelectedRowIdsChange,
   });
 
   const selectedKeysSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
@@ -54,52 +56,67 @@ function useTableSelection<T>({
     [selectedKeysSet],
   );
 
-  const baseSelection = { selectedKeys, isRowSelected };
+  return useMemo(() => {
+    const baseSelection = { selectedKeys, isRowSelected };
 
-  if (selectionMode === "none") {
-    return {
-      selection: {
-        selectionMode,
-        ...baseSelection,
-        selectedKeys: [],
-      },
-      selectionTrigger,
-      renderSelection: false,
-    };
-  }
+    if (mode === "none") {
+      return {
+        selection: {
+          mode,
+          ...baseSelection,
+          selectedKeys: [],
+        },
+        selectionTrigger,
+        renderSelection: false,
+      };
+    }
+
+    if (mode === "single") {
+      return {
+        selection: {
+          mode,
+          ...baseSelection,
+          ...getSingleSelectProps({
+            selectedKeysSet,
+            setSelectedKeys,
+            name: radioGroupName,
+            enableRowSelection,
+          }),
+        },
+        selectionTrigger,
+        renderSelection: visibleRowIds.length !== 0,
+      };
+    }
 
-  if (selectionMode === "single") {
     return {
       selection: {
-        selectionMode,
+        mode,
         ...baseSelection,
-        ...getSingleSelectProps({
+        ...getMultipleSelectProps({
           selectedKeysSet,
+          selectedKeys,
           setSelectedKeys,
-          name: radioGroupName,
           enableRowSelection,
+          tableItems,
+          isLoading,
         }),
       },
       selectionTrigger,
       renderSelection: visibleRowIds.length !== 0,
     };
-  }
-
-  return {
-    selection: {
-      selectionMode,
-      ...baseSelection,
-      ...getMultipleSelectProps({
-        selectedKeysSet,
-        selectedKeys,
-        setSelectedKeys,
-        enableRowSelection,
-        tableItems,
-      }),
-    },
+  }, [
+    mode,
+    selectedKeys,
+    selectedKeysSet,
+    isRowSelected,
     selectionTrigger,
-    renderSelection: visibleRowIds.length !== 0,
-  };
+    visibleRowIds,
+    setSelectedKeys,
+    radioGroupName,
+    enableRowSelection,
+    tableItems,
+    isLoading,
+  ]);
 }
 
 /**
@@ -107,7 +124,7 @@ function useTableSelection<T>({
  */
 const noSelectionState: UseTableSelectionReturn = {
   selection: {
-    selectionMode: "none",
+    mode: "none",
     selectedKeys: [],
     isRowSelected: () => false,
   },

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

@@ -1,7 +1,6 @@
-import { useCallback } from "react";
 import { consoleWarning } from "../../../utils/helpers/consoleWarning";
-import { useControllableState } from "../../../utils/hooks";
-import type { SortChangeDetail, SortEntry } from "../root/DataTable.types";
+import { useControllableState, useEventCallback } from "../../../utils/hooks";
+import type { SortChangeDetail, SortEntry } from "../root/DataGridTable.types";
 
 type TableSortOptions = {
   /**
@@ -9,22 +8,31 @@ type TableSortOptions = {
    * Columns not present in the array are unsorted.
    * Supports multi-column sorting when multiple entries are provided.
    *
-   * When provided, the component is controlled — you must also handle `onSortChange`.
-   * For uncontrolled usage, use `defaultSort` instead.
+   * When provided, the component is controlled - you must also handle `onSortOrderChange`.
+   * For uncontrolled usage, use `defaultSortOrder` instead.
    */
-  sort?: SortEntry[];
+  sortOrder?: SortEntry[];
   /**
    * Initial sort state for uncontrolled usage.
-   * Use `sort` + `onSortChange` for controlled usage.
+   * Use `sortOrder` + `onSortOrderChange` for controlled usage.
    * @default []
    */
-  defaultSort?: SortEntry[];
+  defaultSortOrder?: SortEntry[];
   /**
    * Called when the user clicks a sortable column header.
    * - `sort` — the full updated sort array after cycling: unsorted → asc → desc → unsorted.
    * - `detail` — the specific column that changed, including its new direction (`"none"` means removed).
    */
-  onSortChange?: (sort: SortEntry[], detail: SortChangeDetail) => void;
+  onSortOrderChange?: (
+    sortOrder: SortEntry[],
+    detail: SortChangeDetail,
+  ) => void;
+  /**
+   * When true, allows multiple columns to be sorted by holding Shift while clicking headers.
+   *
+   * @default true
+   */
+  allowMultiSort?: boolean;
 };
 
 type UseTableSortResults = {
@@ -42,31 +50,35 @@ type UseTableSortResults = {
 };
 
 function useTableSort(options?: TableSortOptions): UseTableSortResults {
-  const { defaultSort, onSortChange, sort: sortOption } = options || {};
+  const {
+    defaultSortOrder,
+    onSortOrderChange,
+    sortOrder,
+    allowMultiSort = true,
+  } = options || {};
 
   const [sort, setSort] = useControllableState({
-    value: sortOption,
-    defaultValue: defaultSort || [],
+    value: sortOrder,
+    defaultValue: defaultSortOrder || [],
   });
 
-  const handleSortClick = useCallback(
+  const handleSortClick = useEventCallback(
     (id: string, event: React.MouseEvent<HTMLElement, MouseEvent>) => {
       if (id === undefined) {
         consoleWarning(
-          "DataTable: Column id is undefined for sort event on target",
+          "DataGrid.Table: Column id is undefined for sort event on target",
           event.target,
           "Make sure your column definitions include an 'id' property.",
         );
         return;
       }
 
-      const cumulative = event.shiftKey;
+      const cumulative = allowMultiSort && event.shiftKey;
       const base = cumulative ? sort : sort.filter((s) => s.columnId === id);
       const { next, detail } = nextSortEntries(base, id);
       setSort(next);
-      onSortChange?.(next, detail);
+      onSortOrderChange?.(next, detail);
     },
-    [onSortChange, setSort, sort],
   );
 
   return {

package/src/data/table/index.tsx

@@ -1,23 +1,6 @@
 "use client";
-/* export {
-  default as DataTable,
-  DataTableCaption,
-  DataTableThead,
-  DataTableTbody,
-  DataTableTr,
-  DataTableTh,
-  DataTableTd,
-  DataTableTfoot,
-} from "./root/DataTableRoot.legacy";
-export type {
-  DataTableProps,
-  DataTableCaptionProps,
-  DataTableTheadProps,
-  DataTableTbodyProps,
-  DataTableTrProps,
-  DataTableThProps,
-  DataTableTdProps,
-  DataTableTfootProps,
-} from "./root/DataTableRoot.legacy"; */
 
-export { DataTable, type DataTableProps } from "./root/DataTableRoot";
+export {
+  DataGridTable,
+  type DataGridTableProps,
+} from "./root/DataGridTableRoot";

package/src/data/table/root/{DataTable.types.ts → DataGridTable.types.ts}

@@ -1,47 +1,38 @@
 import type { DataTableColumnHeaderProps } from "../column-header/DataTableColumnHeader";
 
-type SortDirection = "asc" | "desc" | "none";
-
 /**
  * TODO:
  * - Consider "accessorKey" or similar to allow simple column definitions without a cell function.
- * - Add "align" property for better control over text alignment in cells.
  */
 type ColumnDefinition<T> = {
   id: string;
   /**
-   * Text alignment for cells in this column.
+   * Uses `<th>` instead of `<td>` for the cell if true.
    *
-   * @default "left"
+   * Should be used on the column that acts as row header.
+   * There should be exactly one column with this set to true.
    */
-  align?: "left" | "right" | "center"; // TODO: Pri zero: Use same name as in DataTableColumnHeaderProps (DataTableBaseCellProps) so that we can just Pick<DataTableColumnHeaderProps, "textAlign">
+  isRowHeader?: boolean; // TODO: Better documentation, consider warning if not one column has this set to true.
   /**
-   * Assigned to the cell's `th` element instead of `td` if true.
-   *
-   * Should be used for cells that act as row headers. Each row should have one rowheader, and only have one cell with `isRowHeader: true`,
-   * TODO: Better documentation, consider warning if not one column has this set to true.
+   * Name of the column.
+   * Used in the header cell unless `headerCell` is provided.
+   * Also used in the settings dialog.
    */
-  isRowHeader?: boolean;
+  header: string;
   /**
-   * Renders table header-cell
-   * TODO: Pri zero rename to headerCell
+   * Overrides header cell content. Should not differ too much from `header`.
    */
-  header?: React.ReactNode;
+  headerCell?: React.ReactNode;
   /**
-   * Renders table-cell
+   * Renders table body cell content.
    */
-  cell: (item: T) => React.ReactNode;
-  /**
-   * Label of header. Renders if header is not provided.
-   * TODO: Pri zero consider renaming to header
-   */
-  label: string;
+  bodyCell: (item: T) => React.ReactNode; // TODO: Consider including truncateContent (maybe all options) so that consumer can adjust how content is rendered based on this (e.g. toggle flex-wrap)
   /**
    * Makes the column sortable. Renders the header as a sort button.
-   * Use `sort` and `onSortChange` on the root component to control sort state.
+   * Use `sorting` prop on `DataGrid.Table` to configure sorting behavior and state management.
    */
-  sortable?: boolean;
-} & Pick<DataTableColumnHeaderProps, "width">;
+  isSortable?: boolean;
+} & Pick<DataTableColumnHeaderProps, "width" | "align">;
 
 type ColumnDefinitions<T> = ColumnDefinition<T>[];
 
@@ -64,9 +55,7 @@ type SortChangeDetail = {
   direction: "asc" | "desc" | "none";
 };
 
-type DataTableLoadingConfig = {
-  isLoading?: boolean;
-} & (
+type DataTableLoadingConfig =
   | {
       variant: "content";
       content: React.ReactNode;
@@ -79,8 +68,7 @@ type DataTableLoadingConfig = {
   | {
       variant: "overlay";
       label?: string;
-    }
-);
+    };
 
 type TableRowEntryId = string;
 
@@ -88,7 +76,6 @@ export type {
   ColumnDefinition,
   ColumnDefinitions,
   DataTableLoadingConfig,
-  SortDirection,
   SortEntry,
   SortChangeDetail,
   TableRowEntryId,