@navikt/ds-react 8.10.5 → 8.11.0

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

@@ -1,6 +1,6 @@
-import { useCallback } from "react";
-import { useControllableState } from "../../../utils/hooks";
-import type { SortChangeDetail, SortEntry } from "../root/DataTable.types";
+import { consoleWarning } from "../../../utils/helpers/consoleWarning";
+import { useControllableState, useEventCallback } from "../../../utils/hooks";
+import type { SortChangeDetail, SortEntry } from "../root/DataGridTable.types";
 
 type TableSortOptions = {
   /**
@@ -8,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 = {
@@ -40,32 +49,36 @@ type UseTableSortResults = {
   sortState: SortEntry[];
 };
 
-function useTableSort(options: TableSortOptions): UseTableSortResults {
-  const { defaultSort = [], onSortChange, sort: sortOption } = options;
+function useTableSort(options?: TableSortOptions): UseTableSortResults {
+  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) {
-        if (process.env.NODE_ENV === "development") {
-          console.warn(
-            `Aksel: Column id is undefined for sort event on target ${event.target}. Make sure your column definitions include an 'id' property.`,
-          );
-        }
+        consoleWarning(
+          "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 {
@@ -100,4 +113,4 @@ function nextSortEntries(
 }
 
 export { useTableSort };
-export type { TableSortOptions };
+export type { TableSortOptions, UseTableSortResults };

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/DataGridTable.types.ts

@@ -0,0 +1,82 @@
+import type { DataTableColumnHeaderProps } from "../column-header/DataTableColumnHeader";
+
+/**
+ * TODO:
+ * - Consider "accessorKey" or similar to allow simple column definitions without a cell function.
+ */
+type ColumnDefinition<T> = {
+  id: string;
+  /**
+   * Uses `<th>` instead of `<td>` for the cell if true.
+   *
+   * Should be used on the column that acts as row header.
+   * There should be exactly one column with this set to true.
+   */
+  isRowHeader?: boolean; // 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.
+   */
+  header: string;
+  /**
+   * Overrides header cell content. Should not differ too much from `header`.
+   */
+  headerCell?: React.ReactNode;
+  /**
+   * Renders table body cell content.
+   */
+  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 `sorting` prop on `DataGrid.Table` to configure sorting behavior and state management.
+   */
+  isSortable?: boolean;
+} & Pick<DataTableColumnHeaderProps, "width" | "align">;
+
+type ColumnDefinitions<T> = ColumnDefinition<T>[];
+
+/**
+ * A single sort entry representing a column's current sort state.
+ * Absent from the `sort` array means the column is unsorted.
+ */
+type SortEntry = {
+  columnId: string;
+  direction: "asc" | "desc";
+};
+
+/**
+ * The column that changed in a sort operation, passed as the second argument
+ * to `onSortChange`. Useful for triggering targeted server-side sort requests.
+ */
+type SortChangeDetail = {
+  columnId: string;
+  /** The new direction for this column. `"none"` means the column was removed from the sort. */
+  direction: "asc" | "desc" | "none";
+};
+
+type DataTableLoadingConfig =
+  | {
+      variant: "content";
+      content: React.ReactNode;
+    }
+  | {
+      variant: "skeleton";
+      rows?: number;
+      label?: string;
+    }
+  | {
+      variant: "overlay";
+      label?: string;
+    };
+
+type TableRowEntryId = string;
+
+export type {
+  ColumnDefinition,
+  ColumnDefinitions,
+  DataTableLoadingConfig,
+  SortEntry,
+  SortChangeDetail,
+  TableRowEntryId,
+};