@navikt/ds-react 8.9.0 → 8.10.0

package/esm/data/table/hooks/useTableKeyboardNav.d.ts

@@ -6,8 +6,9 @@ type UseTableKeyboardNavOptions = {
      */
     shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
 };
-declare function useTableKeyboardNav(tableRef: HTMLTableElement | null, { enabled, shouldBlockNavigation: customBlockFn }: UseTableKeyboardNavOptions): {
+declare function useTableKeyboardNav({ enabled, shouldBlockNavigation: customBlockFn, }: UseTableKeyboardNavOptions): {
     tabIndex: number | undefined;
+    setTableRef: import("react").Dispatch<import("react").SetStateAction<HTMLTableElement | null>>;
 };
 export { useTableKeyboardNav };
 export type { UseTableKeyboardNavOptions };

package/esm/data/table/hooks/useTableKeyboardNav.js

@@ -1,11 +1,12 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useEventCallback } from "../../../utils/hooks/index.js";
 import { focusInitialTableTarget } from "../helpers/table-cell.js";
 import { focusCellAndUpdateTabIndex } from "../helpers/table-focus.js";
 import { findFirstCell, findFirstCellInRow, findLastCell, findLastCellInRow, findNextFocusableCell, } from "../helpers/table-grid-nav.js";
 import { getNavigationAction, shouldBlockNavigation, } from "../helpers/table-keyboard.js";
 import { useGridCache } from "./useGridCache.js";
-function useTableKeyboardNav(tableRef, { enabled, shouldBlockNavigation: customBlockFn }) {
+function useTableKeyboardNav({ enabled, shouldBlockNavigation: customBlockFn, }) {
+    const [tableRef, setTableRef] = useState(null);
     const { getTableGrid, activeCell, setActiveCell } = useGridCache(tableRef, enabled);
     /**
      * Executes a navigation action and returns the target cell.
@@ -117,6 +118,7 @@ function useTableKeyboardNav(tableRef, { enabled, shouldBlockNavigation: customB
     return {
         /* Table should only have tabIndex until the focus is moved inside and is enabled */
         tabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
+        setTableRef,
     };
 }
 export { useTableKeyboardNav };

package/esm/data/table/hooks/useTableKeyboardNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableKeyboardNav.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableKeyboardNav.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useTableKeyboardNav.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableKeyboardNav.ts"],"names":[],"mappings":"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"}

package/esm/data/table/hooks/useTableSelection.d.ts

@@ -1,8 +1,15 @@
-import type { SelectionProps, SelectionT, TableSelection } from "../helpers/selection/selection.types.js";
-type UseTableSelectionArgs<T> = SelectionProps & {
-    data: T[];
-    getRowId: (rowData: T, index: number) => string | number;
+import type { SelectionProps, TableSelection } from "../helpers/selection/selection.types.js";
+type UseTableSelectionArgs = SelectionProps & {
+    allRowKeys: (string | number)[];
 };
-declare function useTableSelection<T>({ selectionMode, defaultSelectedKeys, selectedKeys: selectedKeysProp, onSelectionChange, disabledKeys, data, getRowId, }: UseTableSelectionArgs<T>): TableSelection;
-export { useTableSelection };
-export type { SelectionProps, SelectionT };
+type UseTableSelectionReturn = {
+    selection: TableSelection;
+    renderSelection: boolean;
+};
+declare function useTableSelection({ selectionMode, defaultSelectedKeys, selectedKeys: selectedKeysProp, onSelectionChange, disabledSelectionKeys, allRowKeys, }: UseTableSelectionArgs): UseTableSelectionReturn;
+/**
+ * TODO: Only temp needed to keep Root happy
+ */
+declare const noSelectionState: UseTableSelectionReturn;
+export { useTableSelection, noSelectionState };
+export type { SelectionProps, UseTableSelectionReturn };

package/esm/data/table/hooks/useTableSelection.js

@@ -1,47 +1,58 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
+import { useId } from "../../../utils-external/index.js";
 import { useControllableState } from "../../../utils/hooks/index.js";
 import { getMultipleSelectProps } from "../helpers/selection/getMultipleSelectProps.js";
 import { getSingleSelectProps } from "../helpers/selection/getSingleSelectProps.js";
-function useTableSelection({ selectionMode = "none", defaultSelectedKeys, selectedKeys: selectedKeysProp, onSelectionChange, disabledKeys = [], data, getRowId, }) {
-    const allKeys = useMemo(() => data.map((item, index) => getRowId(item, index)), [data, getRowId]);
+function useTableSelection({ selectionMode = "none", defaultSelectedKeys, selectedKeys: selectedKeysProp, onSelectionChange, disabledSelectionKeys = [], allRowKeys, }) {
+    const radioGroupName = useId();
     const [selectedKeys, setSelectedKeys] = useControllableState({
         value: selectionMode !== "none" ? selectedKeysProp : undefined,
         defaultValue: defaultSelectedKeys !== null && defaultSelectedKeys !== void 0 ? defaultSelectedKeys : [],
         onChange: onSelectionChange,
     });
+    const selectedKeysSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
+    const disabledKeysSet = useMemo(() => new Set(disabledSelectionKeys), [disabledSelectionKeys]);
+    const isRowSelected = useCallback((rowId) => selectedKeysSet.has(rowId), [selectedKeysSet]);
+    const baseSelection = { selectedKeys, disabledSelectionKeys, isRowSelected };
     if (selectionMode === "none") {
-        return { selectionMode, allKeys, selectedKeys: [], disabledKeys };
+        return {
+            selection: Object.assign(Object.assign({ selectionMode }, baseSelection), { selectedKeys: [] }),
+            renderSelection: false,
+        };
     }
     if (selectionMode === "single") {
-        const arrayKeys = Array.isArray(selectedKeys) ? selectedKeys : [];
-        const { getRowRadioProps } = getSingleSelectProps({
-            selectedKeys: arrayKeys,
-            setSelectedKeys,
-            disabledKeys,
-        });
         return {
-            selectionMode,
-            allKeys,
-            selectedKeys: arrayKeys,
-            disabledKeys,
-            getRowRadioProps,
+            selection: Object.assign(Object.assign({ selectionMode }, baseSelection), getSingleSelectProps({
+                selectedKeysSet,
+                setSelectedKeys,
+                disabledKeysSet,
+                name: radioGroupName,
+            })),
+            renderSelection: allRowKeys.length !== 0,
         };
     }
-    const { getTheadCheckboxProps, getRowCheckboxProps } = getMultipleSelectProps({
-        selectedKeys,
-        setSelectedKeys,
-        disabledKeys,
-        allKeys,
-        totalCount: data.length,
-    });
     return {
-        selectionMode,
-        allKeys,
-        selectedKeys,
-        disabledKeys,
-        getTheadCheckboxProps,
-        getRowCheckboxProps,
+        selection: Object.assign(Object.assign({ selectionMode }, baseSelection), getMultipleSelectProps({
+            selectedKeysSet,
+            selectedKeys,
+            setSelectedKeys,
+            disabledKeysSet,
+            allRowKeys,
+        })),
+        renderSelection: allRowKeys.length !== 0,
     };
 }
-export { useTableSelection };
+/**
+ * TODO: Only temp needed to keep Root happy
+ */
+const noSelectionState = {
+    selection: {
+        selectionMode: "none",
+        selectedKeys: [],
+        disabledSelectionKeys: [],
+        isRowSelected: () => false,
+    },
+    renderSelection: false,
+};
+export { useTableSelection, noSelectionState };
 //# sourceMappingURL=useTableSelection.js.map

package/esm/data/table/hooks/useTableSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableSelection.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableSelection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAYjF,SAAS,iBAAiB,CAAI,EAC5B,aAAa,GAAG,MAAM,EACtB,mBAAmB,EACnB,YAAY,EAAE,gBAAgB,EAC9B,iBAAiB,EACjB,YAAY,GAAG,EAAE,EACjB,IAAI,EACJ,QAAQ,GACiB;IACzB,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EACtD,CAAC,IAAI,EAAE,QAAQ,CAAC,CACjB,CAAC;IAEF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,oBAAoB,CAAa;QACvE,KAAK,EAAE,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;QAC9D,YAAY,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,EAAE;QACvC,QAAQ,EAAE,iBAAiB;KAC5B,CAAC,CAAC;IAEH,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;QAC7B,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC;IACpE,CAAC;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE,CAAC;QAC/B,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;QAClE,MAAM,EAAE,gBAAgB,EAAE,GAAG,oBAAoB,CAAC;YAChD,YAAY,EAAE,SAAS;YACvB,eAAe;YACf,YAAY;SACb,CAAC,CAAC;QAEH,OAAO;YACL,aAAa;YACb,OAAO;YACP,YAAY,EAAE,SAAS;YACvB,YAAY;YACZ,gBAAgB;SACjB,CAAC;IACJ,CAAC;IAED,MAAM,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,GAAG,sBAAsB,CAC3E;QACE,YAAY;QACZ,eAAe;QACf,YAAY;QACZ,OAAO;QACP,UAAU,EAAE,IAAI,CAAC,MAAM;KACxB,CACF,CAAC;IAEF,OAAO;QACL,aAAa;QACb,OAAO;QACP,YAAY;QACZ,YAAY;QACZ,qBAAqB;QACrB,mBAAmB;KACpB,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"useTableSelection.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableSelection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAiBjF,SAAS,iBAAiB,CAAC,EACzB,aAAa,GAAG,MAAM,EACtB,mBAAmB,EACnB,YAAY,EAAE,gBAAgB,EAC9B,iBAAiB,EACjB,qBAAqB,GAAG,EAAE,EAC1B,UAAU,GACY;IACtB,MAAM,cAAc,GAAG,KAAK,EAAE,CAAC;IAE/B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,oBAAoB,CAAgB;QAC1E,KAAK,EAAE,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;QAC9D,YAAY,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,EAAE;QACvC,QAAQ,EAAE,iBAAiB;KAC5B,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAE7E,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,qBAAqB,CAAC,EACpC,CAAC,qBAAqB,CAAC,CACxB,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAAsB,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EACtD,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,MAAM,aAAa,GAAG,EAAE,YAAY,EAAE,qBAAqB,EAAE,aAAa,EAAE,CAAC;IAE7E,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;QAC7B,OAAO;YACL,SAAS,gCACP,aAAa,IACV,aAAa,KAChB,YAAY,EAAE,EAAE,GACjB;YACD,eAAe,EAAE,KAAK;SACvB,CAAC;IACJ,CAAC;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE,CAAC;QAC/B,OAAO;YACL,SAAS,gCACP,aAAa,IACV,aAAa,GACb,oBAAoB,CAAC;gBACtB,eAAe;gBACf,eAAe;gBACf,eAAe;gBACf,IAAI,EAAE,cAAc;aACrB,CAAC,CACH;YACD,eAAe,EAAE,UAAU,CAAC,MAAM,KAAK,CAAC;SACzC,CAAC;IACJ,CAAC;IAED,OAAO;QACL,SAAS,gCACP,aAAa,IACV,aAAa,GACb,sBAAsB,CAAC;YACxB,eAAe;YACf,YAAY;YACZ,eAAe;YACf,eAAe;YACf,UAAU;SACX,CAAC,CACH;QACD,eAAe,EAAE,UAAU,CAAC,MAAM,KAAK,CAAC;KACzC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,gBAAgB,GAA4B;IAChD,SAAS,EAAE;QACT,aAAa,EAAE,MAAM;QACrB,YAAY,EAAE,EAAE;QAChB,qBAAqB,EAAE,EAAE;QACzB,aAAa,EAAE,GAAG,EAAE,CAAC,KAAK;KAC3B;IACD,eAAe,EAAE,KAAK;CACvB,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,CAAC"}

package/esm/data/table/hooks/useTableSort.d.ts

@@ -0,0 +1,37 @@
+import type { SortChangeDetail, SortEntry } from "../root/DataTable.types.js";
+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[];
+};
+declare function useTableSort(options: TableSortOptions): UseTableSortResults;
+export { useTableSort };
+export type { TableSortOptions };

package/esm/data/table/hooks/useTableSort.js

@@ -0,0 +1,47 @@
+import { useCallback } from "react";
+import { useControllableState } from "../../../utils/hooks/index.js";
+function useTableSort(options) {
+    const { defaultSort = [], onSortChange, sort: sortOption } = options;
+    const [sort, setSort] = useControllableState({
+        value: sortOption,
+        defaultValue: defaultSort,
+    });
+    const handleSortClick = useCallback((id, event) => {
+        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 === null || onSortChange === void 0 ? void 0 : onSortChange(next, detail);
+    }, [onSortChange, setSort, sort]);
+    return {
+        onSortClick: handleSortClick,
+        sortState: sort,
+    };
+}
+function nextSortEntries(current, columnId) {
+    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 ? Object.assign(Object.assign({}, s), { direction: "desc" }) : s),
+            detail: { columnId, direction: "desc" },
+        };
+    }
+    return {
+        next: current.filter((s) => s.columnId !== columnId),
+        detail: { columnId, direction: "none" },
+    };
+}
+export { useTableSort };
+//# sourceMappingURL=useTableSort.js.map

package/esm/data/table/hooks/useTableSort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableSort.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableSort.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAyC5D,SAAS,YAAY,CAAC,OAAyB;IAC7C,MAAM,EAAE,WAAW,GAAG,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;IAErE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,oBAAoB,CAAC;QAC3C,KAAK,EAAE,UAAU;QACjB,YAAY,EAAE,WAAW;KAC1B,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,EAAU,EAAE,KAAgD,EAAE,EAAE;QAC/D,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;YACrB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE,CAAC;gBAC3C,OAAO,CAAC,IAAI,CACV,0DAA0D,KAAK,CAAC,MAAM,+DAA+D,CACtI,CAAC;YACJ,CAAC;YACD,OAAO;QACT,CAAC;QAED,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;QAClC,MAAM,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,EAAE,CAAC,CAAC;QACvE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,eAAe,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACnD,OAAO,CAAC,IAAI,CAAC,CAAC;QACd,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,IAAI,EAAE,MAAM,CAAC,CAAC;IAC/B,CAAC,EACD,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,CAC9B,CAAC;IAEF,OAAO;QACL,WAAW,EAAE,eAAe;QAC5B,SAAS,EAAE,IAAI;KAChB,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CACtB,OAAoB,EACpB,QAAgB;IAEhB,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC;IAC9D,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO;YACL,IAAI,EAAE,CAAC,GAAG,OAAO,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;YAClD,MAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE;SACvC,CAAC;IACJ,CAAC;IACD,IAAI,QAAQ,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;QACjC,OAAO;YACL,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACtB,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,iCAAM,CAAC,KAAE,SAAS,EAAE,MAAM,IAAG,CAAC,CAAC,CAAC,CAC1D;YACD,MAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE;SACxC,CAAC;IACJ,CAAC;IACD,OAAO;QACL,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC;QACpD,MAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE;KACxC,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/esm/data/table/loading-state/DataTableLoadingState.d.ts

@@ -1,5 +1,9 @@
 import React from "react";
-type DataTableLoadingStateProps = React.HTMLAttributes<HTMLDivElement>;
-declare const DataTableLoadingState: React.ForwardRefExoticComponent<DataTableLoadingStateProps & React.RefAttributes<HTMLDivElement>>;
+type DataTableLoadingStateProps = React.HTMLAttributes<HTMLDivElement> & {
+    colSpan?: number;
+};
+declare const DataTableLoadingState: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    colSpan?: number;
+} & React.RefAttributes<HTMLDivElement>>;
 export { DataTableLoadingState };
 export type { DataTableLoadingStateProps };

package/esm/data/table/loading-state/DataTableLoadingState.js

@@ -12,9 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers/index.js";
 const DataTableLoadingState = forwardRef((_a, forwardedRef) => {
-    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    var { className, children, colSpan = 999 } = _a, rest = __rest(_a, ["className", "children", "colSpan"]);
     return (React.createElement("tr", null,
-        React.createElement("td", { colSpan: 999 },
+        React.createElement("td", { colSpan: colSpan },
             React.createElement("div", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__loading-state", className) }), children))));
 });
 export { DataTableLoadingState };

package/esm/data/table/loading-state/DataTableLoadingState.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableLoadingState.js","sourceRoot":"","sources":["../../../../src/data/table/loading-state/DataTableLoadingState.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAI5C,MAAM,qBAAqB,GAAG,UAAU,CAGtC,CAAC,EAAgC,EAAE,YAAY,EAAE,EAAE;QAAlD,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC/B,OAAO,CACL;QACE,4BAAI,OAAO,EAAE,GAAG;YACd,6CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAE,SAAS,CAAC,KAE1D,QAAQ,CACL,CACH,CACF,CACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,OAAO,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"DataTableLoadingState.js","sourceRoot":"","sources":["../../../../src/data/table/loading-state/DataTableLoadingState.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAM5C,MAAM,qBAAqB,GAAG,UAAU,CAGtC,CAAC,EAA+C,EAAE,YAAY,EAAE,EAAE;QAAjE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,GAAG,GAAG,OAAW,EAAN,IAAI,cAA7C,oCAA+C,CAAF;IAC9C,OAAO,CACL;QACE,4BAAI,OAAO,EAAE,OAAO;YAClB,6CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAE,SAAS,CAAC,KAE1D,QAAQ,CACL,CACH,CACF,CACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/esm/data/table/root/DataTable.types.d.ts

@@ -1,13 +1,64 @@
+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;
     /**
-     * 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, };

package/esm/data/table/root/DataTableAuto.d.ts

@@ -1,8 +1,9 @@
 /** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
 import React from "react";
 import { type SelectionProps } from "../hooks/useTableSelection.js";
+import { type TableSortOptions } from "../hooks/useTableSort.js";
 import type { ColumnDefinitions } from "./DataTable.types.js";
-interface DataTableProps<T> extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
+interface DataTableProps<T> extends React.HTMLAttributes<HTMLTableElement>, SelectionProps, TableSortOptions {
     children?: never;
     /**
      * Controls vertical cell padding.
@@ -48,11 +49,106 @@ interface DataTableProps<T> extends React.HTMLAttributes<HTMLTableElement>, Sele
      */
     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;
 }
 declare const DataTableAuto: <T>(props: DataTableProps<T> & React.RefAttributes<HTMLTableElement>) => React.ReactElement | null;
 export { DataTableAuto };