@navikt/ds-react 8.9.0 → 8.10.0

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

@@ -0,0 +1,103 @@
+import { useCallback } from "react";
+import { useControllableState } from "../../../utils/hooks";
+import type { SortChangeDetail, SortEntry } from "../root/DataTable.types";
+
+type TableSortOptions = {
+  /**
+   * Current sort state. Each entry represents a sorted column.
+   * 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.
+   */
+  sort?: SortEntry[];
+  /**
+   * Initial sort state for uncontrolled usage.
+   * Use `sort` + `onSortChange` for controlled usage.
+   * @default []
+   */
+  defaultSort?: 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;
+};
+
+type UseTableSortResults = {
+  /**
+   * Handler for when a sortable column header is clicked. Pass the column's `id` as an argument.
+   */
+  onSortClick: (
+    columnId: string,
+    event: React.MouseEvent<HTMLElement, MouseEvent>,
+  ) => void;
+  /**
+   * The current sort state, to be passed to the table header for rendering sort indicators.
+   */
+  sortState: SortEntry[];
+};
+
+function useTableSort(options: TableSortOptions): UseTableSortResults {
+  const { defaultSort = [], onSortChange, sort: sortOption } = options;
+
+  const [sort, setSort] = useControllableState({
+    value: sortOption,
+    defaultValue: defaultSort,
+  });
+
+  const handleSortClick = useCallback(
+    (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.`,
+          );
+        }
+        return;
+      }
+
+      const cumulative = event.shiftKey;
+      const base = cumulative ? sort : sort.filter((s) => s.columnId === id);
+      const { next, detail } = nextSortEntries(base, id);
+      setSort(next);
+      onSortChange?.(next, detail);
+    },
+    [onSortChange, setSort, sort],
+  );
+
+  return {
+    onSortClick: handleSortClick,
+    sortState: sort,
+  };
+}
+
+function nextSortEntries(
+  current: SortEntry[],
+  columnId: string,
+): { next: SortEntry[]; detail: SortChangeDetail } {
+  const existing = current.find((s) => s.columnId === columnId);
+  if (!existing) {
+    return {
+      next: [...current, { columnId, direction: "asc" }],
+      detail: { columnId, direction: "asc" },
+    };
+  }
+  if (existing.direction === "asc") {
+    return {
+      next: current.map((s) =>
+        s.columnId === columnId ? { ...s, direction: "desc" } : s,
+      ),
+      detail: { columnId, direction: "desc" },
+    };
+  }
+  return {
+    next: current.filter((s) => s.columnId !== columnId),
+    detail: { columnId, direction: "none" },
+  };
+}
+
+export { useTableSort };
+export type { TableSortOptions };

package/src/data/table/loading-state/DataTableLoadingState.tsx

@@ -1,15 +1,17 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
 
-type DataTableLoadingStateProps = React.HTMLAttributes<HTMLDivElement>;
+type DataTableLoadingStateProps = React.HTMLAttributes<HTMLDivElement> & {
+  colSpan?: number;
+};
 
 const DataTableLoadingState = forwardRef<
   HTMLDivElement,
   DataTableLoadingStateProps
->(({ className, children, ...rest }, forwardedRef) => {
+>(({ className, children, colSpan = 999, ...rest }, forwardedRef) => {
   return (
     <tr>
-      <td colSpan={999}>
+      <td colSpan={colSpan}>
         <div
           {...rest}
           ref={forwardedRef}

package/src/data/table/root/DataTable.types.ts

@@ -1,16 +1,75 @@
+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;
-  header: React.ReactNode;
+  id: string;
   width?: number | string;
+  defaultWidth?: number | string;
   minWidth?: number | string;
   maxWidth?: number | string;
-  /* isRowHeader?: boolean; */
   /**
-   * TODO: Could add table/row/cell context into callback
+   * Currently only handles cell alignment.
+   * TODO: Should this include centering?
+   * type "icon" or something to avoid ellipsis on actions, tags etc
+   */
+  type?: "string" | "number";
+  /**
+   * 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: Not implemented
+   * - Add a generic tablecell component that can render either a td or th based on context or this prop.
+   */
+  isRowHeader?: boolean;
+  /**
+   * Renders table header-cell
+   */
+  header?: React.ReactNode;
+  /**
+   * Renders table-cell
    */
   cell: (item: T) => React.ReactNode;
+  /**
+   * Label of header. Renders if header is not provided.
+   */
+  label: string;
+  /**
+   * Makes the column sortable. Renders the header as a sort button.
+   * Use `sort` and `onSortChange` on the root component to control sort state.
+   */
+  sortable?: boolean;
 };
 
 type ColumnDefinitions<T> = ColumnDefinition<T>[];
 
-export type { ColumnDefinition, ColumnDefinitions };
+/**
+ * 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";
+};
+
+export type {
+  ColumnDefinition,
+  ColumnDefinitions,
+  SortDirection,
+  SortEntry,
+  SortChangeDetail,
+};