@navikt/ds-react 8.10.6 → 8.11.0

package/esm/data/table/root/DataTableRoot.legacy.d.ts

@@ -1,172 +0,0 @@
-import React from "react";
-import { DataTableCaption, type DataTableCaptionProps } from "../caption/DataTableCaption.js";
-import { DataTableEmptyState, type DataTableEmptyStateProps } from "../empty-state/DataTableEmptyState.js";
-import { type SelectionProps } from "../hooks/useTableSelection.js";
-import { DataTableLoadingState, type DataTableLoadingStateProps } from "../loading-state/DataTableLoadingState.js";
-import { DataTableTbody, type DataTableTbodyProps } from "../tbody/DataTableTbody.js";
-import { DataTableTd, type DataTableTdProps } from "../td/DataTableTd.js";
-import { DataTableTfoot, type DataTableTfootProps } from "../tfoot/DataTableTfoot.js";
-import { DataTableTh, type DataTableThProps } from "../th/DataTableTh.js";
-import { DataTableThead, type DataTableTheadProps } from "../thead/DataTableThead.js";
-import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr.js";
-interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
-    children: React.ReactNode;
-    /**
-     * Controls vertical cell padding.
-     * @default "normal"
-     */
-    rowDensity?: "condensed" | "normal" | "spacious";
-    /**
-     * Zebra striped table
-     * @default false
-     */
-    zebraStripes?: boolean;
-    /**
-     * Truncate content in cells and show ellipsis for overflowed text.
-     *
-     * **NB:** When using `layout="auto"`, you have to manually set a `maxWidth` on columns that should be truncated.
-     * @default true
-     */
-    truncateContent?: boolean;
-    /**
-     * Enables keyboard navigation for table rows and cells.
-     * @default false
-     */
-    withKeyboardNav?: boolean;
-    /**
-     * Controls table layout.
-     *
-     * ### fixed
-     * Gives you full control of column widths. This is required for resizable columns.
-     *
-     * ### auto
-     * Makes the columns resize automatically based on the content.
-     * The table will take up at least 100% of available width.
-     *
-     * **NB:** When using this with `truncateContent`, you have to manually
-     * set a `contentMaxWidth` on cells that should be truncated.
-     * @default "fixed"
-     */
-    layout?: "fixed" | "auto";
-    selection?: SelectionProps;
-}
-interface DataTableRootComponent extends React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>> {
-    /**
-     * @see 🏷️ {@link DataTableCaptionProps}
-     * @example
-     * ```jsx
-     * <DataTable>
-     *   <DataTable.Caption>
-     *     Lorem ipsum
-     *   </DataTable.Caption
-     * </DataTable>
-     * ```
-     */
-    Caption: typeof DataTableCaption;
-    /**
-     * @see 🏷️ {@link DataTableTheadProps}
-     * @example
-     * ```jsx
-     * <DataTable>
-     *   <DataTable.Thead>
-     *     ... TODO
-     *   </DataTable.Thead>
-     * </DataTable>
-     * ```
-     */
-    Thead: typeof DataTableThead;
-    /**
-     * @see 🏷️ {@link DataTableTbodyProps}
-     * @example
-     * ```jsx
-     * <DataTable>
-     *   <DataTable.Tbody>
-     *     ... TODO
-     *   </DataTable.Tbody>
-     * </DataTable>
-     * ```
-     */
-    Tbody: typeof DataTableTbody;
-    /**
-     * @see 🏷️ {@link DataTableTrProps}
-     * @example
-     * ```jsx
-     * <DataTable>
-     *   <DataTable.Tr>
-     *     ... TODO
-     *   </DataTable.Tr
-     * </DataTable>
-     * ```
-     */
-    Tr: typeof DataTableTr;
-    /**
-     * @see 🏷️ {@link DataTableThProps}
-     * @example
-     * ```jsx
-     * ```
-     */
-    Th: typeof DataTableTh;
-    /**
-     * @see 🏷️ {@link DataTableTdProps}
-     * @example
-     * ```jsx
-     * <DataTable>
-     *   <DataTable.Tbody>
-     *     <DataTable.Td>
-     *       Lorem ipsum
-     *     </DataTable.Td>
-     *     <DataTable.Td>
-     *       Dolor sit amet
-     *     </DataTable.Td>
-     *   </DataTable.Tbody>
-     * </DataTable>
-     * ```
-     */
-    Td: typeof DataTableTd;
-    /**
-     * @see 🏷️ {@link DataTableTfootProps}
-     * @example
-     * ```jsx
-     * <DataTable>
-     *   <DataTable.Tfoot>
-     *     ...
-     *   </DataTable.Tfoot>
-     * </DataTable>
-     * ```
-     */
-    Tfoot: typeof DataTableTfoot;
-    /**
-     * @see 🏷️ {@link DataTableEmptyStateProps}
-     * @example
-     * ```jsx
-     * <DataTable>
-     *   <DataTable.TBody>
-     *     <DataTable.EmptyState />
-     *   </DataTable.TBody>
-     * </DataTable>
-     * ```
-     */
-    EmptyState: typeof DataTableEmptyState;
-    /**
-     * @see 🏷️ {@link DataTableEmptyStateProps}
-     * @example
-     * ```jsx
-     * <DataTable>
-     *   <DataTable.TBody>
-     *     <DataTable.LoadingState />
-     *   </DataTable.TBody>
-     * </DataTable>
-     * ```
-     */
-    LoadingState: typeof DataTableLoadingState;
-}
-/**
- * TODO Component description etc.
- *
- * **NB:** To get sticky headers, you have to set a height restriction on the table container. You can use VStack for this:
- * TODO example
- */
-declare const DataTable: DataTableRootComponent;
-export { DataTable, DataTableCaption, DataTableEmptyState, DataTableLoadingState, DataTableTbody, DataTableTd, DataTableTfoot, DataTableTh, DataTableThead, DataTableTr, };
-export default DataTable;
-export type { DataTableCaptionProps, DataTableEmptyStateProps, DataTableLoadingStateProps, DataTableProps, DataTableTbodyProps, DataTableTdProps, DataTableTfootProps, DataTableTheadProps, DataTableThProps, DataTableTrProps, };

package/esm/data/table/root/DataTableRoot.legacy.js

@@ -1,73 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { forwardRef } from "react";
-import { useId } from "../../../utils-external/index.js";
-import { cl } from "../../../utils/helpers/index.js";
-import { useMergeRefs } from "../../../utils/hooks/index.js";
-import { DataTableCaption, } from "../caption/DataTableCaption.js";
-import { DataTableEmptyState, } from "../empty-state/DataTableEmptyState.js";
-import { DataTableDetailsPanelProvider } from "../hooks/useTableDetailsPanel.js";
-import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav.js";
-import { noSelectionState, } from "../hooks/useTableSelection.js";
-import { DataTableLoadingState, } from "../loading-state/DataTableLoadingState.js";
-import { DataTableTbody, } from "../tbody/DataTableTbody.js";
-import { DataTableTd } from "../td/DataTableTd.js";
-import { DataTableTfoot, } from "../tfoot/DataTableTfoot.js";
-import { DataTableTh } from "../th/DataTableTh.js";
-import { DataTableThead, } from "../thead/DataTableThead.js";
-import { DataTableTr } from "../tr/DataTableTr.js";
-import { DataTableContextProvider } from "./DataTableRoot.context.js";
-/**
- * TODO Component description etc.
- *
- * **NB:** To get sticky headers, you have to set a height restriction on the table container. You can use VStack for this:
- * TODO example
- */
-const DataTable = forwardRef((_a, forwardedRef) => {
-    var { className, rowDensity = "normal", withKeyboardNav = false, zebraStripes = false, truncateContent = true, layout = "fixed" } = _a, rest = __rest(_a, ["className", "rowDensity", "withKeyboardNav", "zebraStripes", "truncateContent", "layout"]);
-    const { tabIndex, setTableRef } = useTableKeyboardNav({
-        enabled: withKeyboardNav,
-    });
-    const mergedRef = useMergeRefs(forwardedRef, setTableRef);
-    return (React.createElement(DataTableContextProvider, { layout: layout, withKeyboardNav: withKeyboardNav, selectionState: noSelectionState, stickyStart: {
-            expansion: false,
-            selection: false,
-            selectionOffset: 0,
-            firstColumnOffset: 0,
-        }, stickyHeader: true, tableId: useId(), loading: undefined, onRowClick: undefined, columns: [], totalColSpan: 9999, tableItems: {
-            childRowIdsById: new Map(),
-            visibleRowIds: [],
-            itemDetails: new Map(),
-            items: [],
-            isSubRowExpanded: () => false,
-            onExpandedRowIdsChange: () => null,
-        }, sortingState: {
-            onSortClick: () => null,
-            sortState: [],
-        } },
-        React.createElement(DataTableDetailsPanelProvider, null,
-            React.createElement("div", { className: "aksel-data-table__border-wrapper" },
-                React.createElement("div", { className: "aksel-data-table__scroll-wrapper" },
-                    React.createElement("table", Object.assign({}, rest, { ref: mergedRef, className: cl("aksel-data-table", className), "data-zebra-stripes": zebraStripes, "data-truncate-content": truncateContent, "data-density": rowDensity, "data-layout": layout, tabIndex: tabIndex })))))));
-});
-DataTable.Caption = DataTableCaption;
-DataTable.Thead = DataTableThead;
-DataTable.Tbody = DataTableTbody;
-DataTable.Th = DataTableTh;
-DataTable.Tr = DataTableTr;
-DataTable.Td = DataTableTd;
-DataTable.Tfoot = DataTableTfoot;
-DataTable.EmptyState = DataTableEmptyState;
-DataTable.LoadingState = DataTableLoadingState;
-export { DataTable, DataTableCaption, DataTableEmptyState, DataTableLoadingState, DataTableTbody, DataTableTd, DataTableTfoot, DataTableTh, DataTableThead, DataTableTr, };
-export default DataTable;
-//# sourceMappingURL=DataTableRoot.legacy.js.map

package/esm/data/table/root/DataTableRoot.legacy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataTableRoot.legacy.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.legacy.tsx"],"names":[],"mappings":"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"}

package/src/data/data-grid/index.ts

@@ -1,3 +0,0 @@
-"use client";
-export { DataGridRoot as DataGrid } from "./root/DataGridRoot";
-export type { DataGridProps } from "./root/DataGridRoot";

package/src/data/data-grid/root/DataGridRoot.context.ts

@@ -1,16 +0,0 @@
-import { createStrictContext } from "../../../utils/helpers";
-import type { ColumnDefinitions } from "../../table/root/DataTable.types";
-
-type DataGridContextValue<RowDef = unknown> = {
-  data: RowDef[];
-  columnDefinitions: ColumnDefinitions<RowDef>;
-  getRowId?: (rowData: RowDef) => string;
-};
-
-const { Provider: DataGridContextProvider, useContext: useDataGridContext } =
-  createStrictContext<DataGridContextValue>({
-    name: "DataGridContext",
-    errorMessage: "DataGrid hooks must be used within a <DataGrid />",
-  });
-
-export { DataGridContextProvider, useDataGridContext };

package/src/data/data-grid/root/DataGridRoot.tsx

@@ -1,71 +0,0 @@
-import React, { HTMLAttributes, forwardRef } from "react";
-import { cl } from "../../../utils/helpers";
-import type { ColumnDefinitions } from "../../table/root/DataTable.types";
-import { DataGridContextProvider } from "./DataGridRoot.context";
-
-type RowTId = string;
-
-export interface DataGridProps<RowT> extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  /**
-   * Definitions of the columns to display in the data grid.
-   *
-   * Each column definition should have a unique `id` and a `cell`-renderer function that takes the row data as argument and returns a React node.
-   */
-  columnDefinitions: ColumnDefinitions<RowT>;
-  /**
-   * The data to display.
-   *
-   * 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: RowT[];
-  /**
-   * 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: RowT) => RowTId;
-}
-
-type DataGridRootComponent = <RowT>(
-  props: DataGridProps<RowT> & React.RefAttributes<HTMLDivElement>,
-) => React.ReactElement | null;
-
-/**
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/data-grid)
- * @see 🏷️ {@link DataGridProps}
- *
- * @example
- * ```jsx
- * <DataGrid columnDefinitions={columnDefs} data={rowData} getRowId={(row) => row.id}>
- *   <DataTable />
- * </DataGrid>
- * ```
- */
-export const DataGridRoot = forwardRef<HTMLDivElement, DataGridProps<unknown>>(
-  (
-    {
-      children,
-      className,
-      columnDefinitions,
-      data,
-      getRowId,
-      ...rest
-    }: DataGridProps<unknown>,
-    ref,
-  ) => {
-    return (
-      <div {...rest} ref={ref} className={cl("aksel-data-grid", className)}>
-        <DataGridContextProvider
-          columnDefinitions={columnDefinitions}
-          data={data}
-          getRowId={getRowId}
-        >
-          {children}
-        </DataGridContextProvider>
-      </div>
-    );
-  },
-) as DataGridRootComponent;
-
-export default DataGridRoot;

package/src/data/table/Readme.md

@@ -1,11 +0,0 @@
-# Naming discussions
-
-## Under same scope
-
-DataTable
-DataToolbar
-DataFilter
-
-DataSearchField
-DataCombobox
-DataOperator

package/src/data/table/agent-component-review.md

@@ -1,175 +0,0 @@
-# DataTable Beta Readiness Review
-
-## Summary
-
-The DataTable is a well-architected component with thoughtful separation of concerns (hooks, helpers, sub-components). The keyboard navigation, selection cascading, and sort state management are solid. However, there are several a11y gaps, API inconsistencies, and edge cases that should be addressed before a public beta.
-
----
-
-## Findings
-
-| #   | Category        | Finding                                                                              | Severity | Recommendation                                                                                                                                                                                                                                                                                         |
-| --- | --------------- | ------------------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| 2   | A11y            | No `aria-selected` on selected rows                                                  | 🔴       | Add `aria-selected="true"` on `<tr>` for selected rows (required by grid/table selection pattern per ARIA APG).                                                                                                                                                                                        |
-| 3   | A11y            | No `aria-label`/`aria-labelledby` on the table element                               | 🟡       | Expose a `label` or `aria-label` prop. Without it, screen readers announce the table generically. React Aria requires a label on every table.                                                                                                                                                          |
-| 4   | A11y            | Hardcoded Norwegian strings without i18n support                                     | 🟡       | All aria-labels ("Vis under-rader", "Skjul detaljer", "Velg alle synlige rader", "Laster innhold", resize labels) are Norwegian-only. Expose a `labels`/`translations` prop or accept them via column definitions for i18n.                                                                            |
-| 5   | A11y            | Sub-rows should use `role="treegrid"`                                                | 🟡       | When `subRows` is provided, the table should use `role="treegrid"` with `aria-level`, `aria-setsize`, `aria-posinset` on rows. Already flagged as TODO in code.                                                                                                                                        |
-| 7   | API             | `disableRowSelection` signature inconsistency with stories                           | 🔴       | Type declares `({ row, id }) => boolean` but stories pass `({ id }) => id === 2`. The prop name is confusing: "disable" + returns `true` to disable = double negative. Consider `isRowSelectable` (positive predicate) like React Aria's `disabledKeys` pattern.                                       |
-| 8   | API             | `stickyColumns` type is overly restrictive                                           | 🟡       | `first?: "1"` and `last?: "1"` prevent future extension to 2+ sticky columns. Use `number` instead.                                                                                                                                                                                                    |
-| 9   | API             | `sort` and `onSortChange` mixed into `DataTableProps` via `TableSortOptions`         | 🟡       | Spreading sort props at root level makes the API flat but could collide with native HTML attributes or future features. Consider grouping into a `sort={{ state, onChange, defaultState }}` pattern. However, this is a style preference — the flat API is also valid.                                 |
-| 10  | API             | `children?: never` prevents slot-based composition                                   | 🟢       | The data-driven API is good for beta, but consider a path to compositional usage (render props or slot API) for GA. MUI and TanStack offer both modes.                                                                                                                                                 |
-| 11  | API             | Missing `aria-rowcount`/`aria-colcount` for virtualized/paginated tables             | 🟡       | When data is paginated (as in `SelectionPagination` story), ATs cannot know total row count. Expose `totalRowCount` prop that maps to `aria-rowcount`.                                                                                                                                                 |
-| 12  | Code Quality    | `selectableIdsSet` in `getMultipleSelectProps` iterates all rows including sub-rows  | 🟡       | "Select all" selects ALL rows in `itemDetails` including hidden sub-rows. The `selectableIdsSet` should filter by `visibleRowIds` for the "select all" checkbox, while still cascading to children when selecting individual parent rows. Variable naming is misleading.                               |
-| 13  | Code Quality    | `useTableSelection` passes `tableItems` (full object) to `getMultipleSelectProps`    | 🟡       | This couples selection logic to the full table items shape. Consider passing only what's needed (`visibleRowIds`, `childRowIdsById`, `itemDetails`).                                                                                                                                                   |
-| 14  | Performance     | `columns.map()` inside render creates new objects on each render                     | 🟢       | `useColumnOptions` is memoized — this is fine. The `columns.map()` inside `DataTableTBodyContent` render loop is acceptable for normal table sizes.                                                                                                                                                    |
-| 15  | Performance     | No virtualization support                                                            | 🟢       | For beta, this is acceptable. Document the performance ceiling (recommended max ~500-1000 rows without virtualization). For GA, consider integrating with `@tanstack/react-virtual`.                                                                                                                   |
-| 16  | Potential Issue | `fullWidthColSpan` may be wrong when `subRows` adds the expansion column             | 🔴       | `fullWidthColSpan` counts `columns.length + layout filler + selection + detailsPanel`. The `RowExpansionCell` renders a separate `<td>` for detailsPanel. If both `subRows` AND `detailsPanel` are used together, verify `fullWidthColSpan` is correct. Check with `NestedRowsWithMasterDetail` story. |
-| 17  | Potential Issue | Selection row-click fires AND toggles selection simultaneously                       | 🟡       | When `onRowClick` and `selection` are both enabled and `disableRowSelectionOnClick` is false (default), clicking a row both selects it and fires `onRowClick`. The default should probably be `disableRowSelectionOnClick: true` when `onRowClick` is also provided.                                   |
-| 18  | Potential Issue | `getRowId` fallback uses index — breaks selection on reorder/filter                  | 🟡       | If users don't provide `getRowId` and data changes (filter, sort, paginate), selection state becomes stale because index-based IDs shift. Consider logging a dev warning when `selection` is used without `getRowId`.                                                                                  |
-| 19  | API             | `loading.loadingLabel` only applies to skeleton/overlay mode                         | 🟢       | When `loadingState` is a custom ReactNode, there's no mechanism to announce loading to ATs. The `aria-busy` on the table partially covers this but `aria-live` region would be more robust.                                                                                                            |
-| 20  | API             | `detailsPanel.getHeight` returns `number \| "auto"` — inconsistent with CSS patterns | 🟢       | Consider accepting a CSS value string (`"200px"`, `"auto"`) or always `number` (pixels). The mixed type works but requires the consumer to handle units.                                                                                                                                               |
-| 21  | A11y            | Details panel row `aria-controls` relationship from toggle to content                | 🟢       | The expansion button has `aria-controls={expansionId}` and the panel `<td>` has the matching `id`. Correctly implemented. ✓ No issue.                                                                                                                                                                  |
-| 22  | Code Quality    | `@ts-expect-error` for Slot ref in `TableElementWrapper`                             | 🟢       | Minor tech debt. Consider typing the Slot component to accept ref properly.                                                                                                                                                                                                                            |
-| 23  | API             | No `onRowDoubleClick` or `onCellClick` callbacks                                     | 🟢       | Common in MUI DataGrid. Not needed for beta but worth considering for GA.                                                                                                                                                                                                                              |
-| 24  | Potential Issue | Sort `onSortChange` may double-fire in controlled mode                               | 🟡       | In `useTableSort`, `setSort(next)` is called and then `onSortChange?.(next, detail)` separately. If `useControllableState` invokes `onChange` internally, `onSortChange` fires twice in controlled mode. Verify.                                                                                       |
-| 25  | API             | `selection` prop type accepts partial object with no `selectionMode`                 | 🟡       | `SelectionProps` has `selectionMode?: "none" \| "single" \| "multiple"` defaulting to `"none"`. Passing `selection={{}}` without `selectionMode` silently does nothing. Consider requiring `selectionMode` when `selection` is provided (discriminated union).                                         |
-| 26  | Potential Issue | Keyboard nav `focusInitialTableTarget` always focuses first cell (including header)  | 🟢       | Initial focus can go to the first data cell. Currently goes to first `td`/`th` which may be the selection header cell. Minor UX concern.                                                                                                                                                               |
-| 27  | A11y            | Resize handle uses `role="slider"` without `aria-valuemin`/`aria-valuemax`           | 🟡       | ARIA slider requires `aria-valuemin` and `aria-valuemax`. Currently only `aria-valuenow` is set. Screen readers may not announce the range correctly.                                                                                                                                                  |
-
----
-
-## Details
-
-### Finding #2 — Missing `aria-selected`
-
-```tsx
-// In DataTableTr, add:
-<tr
-  {...rest}
-  aria-selected={selected || undefined}
-  // ...existing props
->
-```
-
-### Finding #7 — `disableRowSelection` API
-
-Current signature:
-
-```ts
-disableRowSelection?: (({ row, id }: { row: T; id: string | number }) => boolean) | boolean;
-```
-
-Stories use:
-
-```tsx
-disableRowSelection: ({ id }) => id === 2 || id === 1;
-```
-
-Recommended rename for clarity (breaking but pre-beta):
-
-```ts
-isRowSelectionDisabled?: (row: T, id: string | number) => boolean;
-// OR (React Aria style):
-disabledKeys?: (string | number)[];
-```
-
-### Finding #24 — Possible double-fire of `onSortChange`
-
-In `useTableSort`:
-
-```ts
-const handleSortClick = useCallback((id, event) => {
-  // ...
-  setSort(next);           // If controlled, useControllableState calls onChange
-  onSortChange?.(next, detail);  // Also called explicitly
-}, [...]);
-```
-
-If `useControllableState` invokes `onChange` when the `value` prop changes, `onSortChange` is called twice. Verify by checking if `useControllableState` has its own `onChange` invocation path. If it does, remove the explicit `onSortChange` call and pass it as `onChange` to `useControllableState`.
-
----
-
-## API & Developer Experience Analysis
-
-### Overall API shape
-
-The top-level API uses a **data-driven pattern** — you pass `data` + `columnDefinitions` and the component renders everything. This is the right choice for a "batteries included" table. The prop surface splits into:
-
-- **Core:** `data`, `columnDefinitions`, `getRowId`
-- **Features (objects):** `selection`, `loading`, `detailsPanel`, `subRows`, `stickyColumns`
-- **Features (flat):** `sort`, `defaultSort`, `onSortChange`, `onRowClick`, `withKeyboardNav`
-- **Appearance:** `rowDensity`, `zebraStripes`, `truncateContent`, `textSize`, `layout`
-
-This is generally good — feature-objects group related props, and appearance props are flat. However there are some inconsistencies.
-
-### Findings: API & DX
-
-| #   | Category | Finding                                                                                                  | Severity | Recommendation                                                                                                                                                                                                                                                                                                                                                                                |
-| --- | -------- | -------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 28  | DX       | `header` vs `label` in ColumnDefinition is confusing                                                     | 🟡       | Both exist on every column. `label` is required and used for a11y/sort button labels. `header` is optional and overrides what's rendered. Developers will ask "which one is my header text?" Consider: `header` (required, replaces current `label`) + `headerContent` or just always use `header` for rendering and `aria-label` when the header is non-textual.                             |
-| 29  | DX       | `selection` vs sort props use different grouping patterns                                                | 🟡       | Selection is grouped: `selection={{ selectionMode, onSelectionChange, ... }}`. Sort is flat: `sort`, `defaultSort`, `onSortChange`. This inconsistency will confuse devs. Either group sort (`sort={{ state, defaultState, onChange }}`) or flatten selection. Since sort also uses `detail` parameter, the flat pattern is defensible, but be consistent — pick one and apply it everywhere. |
-| 30  | DX       | `ColumnDefinition` mixes rendering, behavior, and sizing concerns                                        | 🟢       | A single column def contains `cell`, `header`, `label`, `sortable`, `align`, `resizable`, `width`, `defaultWidth`, `autoWidth`, `minWidth`, `maxWidth`, `onWidthChange`, `isRowHeader`, `details`. That's 14+ properties. For beta this is fine (flat = discoverable), but for GA consider splitting into `column.sizing` or using separate configuration layers for power users.             |
-| 31  | DX       | `detailsPanel` and `subRows` both have `expandedRowIds`/`defaultExpandedRowIds`/`onExpandedRowIdsChange` | 🟡       | Same prop names exist in both objects. When both features are used together (`NestedRowsWithMasterDetail`), developers must understand these are independent expansion states. The naming collision makes this unclear. Consider `detailsPanel.expandedRowIds` staying as-is but subRows using `expandedSubRowIds` or documenting clearly that they're independent.                           |
-| 32  | DX       | Resize props pollute column definition for non-resizable tables                                          | 🟢       | When `layout="auto"`, resize props (`resizable`, `width`, `defaultWidth`, `autoWidth`, `minWidth`, `maxWidth`, `onWidthChange`) are all ignored. Developers may set them without realizing they have no effect. The JSDoc on `resizable` mentions this, but it's easy to miss.                                                                                                                |
-| 33  | DX       | `getRowId` return type `string \| number` makes controlled selection awkward                             | 🟡       | `selectedKeys` is `(string \| number)[]`. If `getRowId` returns a number (like `row.id`), the consumer can pass `selectedKeys: [1, 2]` fine. But if they later compare with `===`, `string` vs `number` mismatches bite. TanStack Table uses `string` only for row IDs. Consider normalizing to `string` internally (with automatic `String()` coercion) or staying `number` only — pick one. |
-| 34  | DX       | No way to hide/show columns dynamically                                                                  | 🟡       | Consumers must filter `columnDefinitions` array externally to toggle column visibility. This is fine API-wise (keep it data-driven), but should be documented as the expected pattern. The `Data.settings.stories.tsx` likely shows this but it's not obvious from the types alone.                                                                                                           |
-| 35  | DX       | `loading` object has confusing interaction between its props                                             | 🟡       | Three modes: (1) `isLoading + loadingState` → custom content, (2) `isLoading + loadingRows` → skeletons, (3) `isLoading` alone → overlay on existing data. These modes are implicit from which subset of props you pass. A discriminated union would make intent explicit, but adds verbosity. At minimum, JSDoc should clearly document "if you pass X, Y is ignored."                       |
-| 36  | DX       | `withKeyboardNav` defaults to `true` — unexpected for simple tables                                      | 🟢       | Most table components default keyboard nav to off. When devs use DataTable for a simple read-only table, the `tabIndex=0` and arrow-key behavior is unexpected. Consider defaulting to `false` or auto-enabling only when interactive features (selection, sorting) are present.                                                                                                              |
-| 37  | DX       | `onRowClick` doesn't convey which row data was clicked                                                   | 🟡       | Signature is `(rowId, event) => void`. Consumers must look up `rowId` in their own data array to get the row object. Consider `(rowData: T, rowId, event) => void` — this is what MUI and TanStack expose. Avoids forcing an O(n) lookup.                                                                                                                                                     |
-| 38  | DX       | `isRowHeader` on ColumnDefinition has no enforcement or guidance                                         | 🟢       | JSDoc says "each row should have one rowheader" but nothing prevents 0 or many. This is a documentation issue, not a code issue. Consider a dev-mode warning if no column has `isRowHeader: true`.                                                                                                                                                                                            |
-
-### What's working well (keep as-is)
-
-- **Controlled/uncontrolled pattern** is consistent across selection, sort, sub-rows expansion, and details panel expansion. All use `value`/`defaultValue`/`onChange` semantics.
-- **`getRowId`** — good that it's optional with a sensible fallback, and the JSDoc warns about the tradeoff.
-- **`columnDefinitions` as a typed array** — gives excellent autocomplete and catches typos at compile time.
-- **`selection.selectionMode`** driving the UI (checkbox vs radio) automatically — reduces decision surface.
-- **Sort cycling** (none → asc → desc → none) with shift-click for multi-sort is well thought out.
-- **Feature-as-object pattern** (`loading`, `selection`, `detailsPanel`, `subRows`) — good discoverability, scales well for adding future options.
-
----
-
-## Priority Summary
-
-### 🔴 Beta Blockers (must fix)
-
-1. **#2** — Add `aria-selected` on selected rows
-2. **#7** — Resolve `disableRowSelection` API inconsistency (breaking change is OK pre-beta)
-3. **#16** — Verify `fullWidthColSpan` correctness with combined subRows + detailsPanel
-
-### 🟡 Should Fix Before Beta
-
-5. **#3** — Require/encourage table label
-6. **#4** — Externalize hardcoded Norwegian strings
-7. **#5** — `role="treegrid"` for sub-rows
-8. **#8** — `stickyColumns` type to `number`
-9. **#11** — `aria-rowcount` for paginated tables
-10. **#12** — Verify "select all" behavior with pagination
-11. **#17** — Default `disableRowSelectionOnClick: true` when `onRowClick` is set
-12. **#18** — Dev warning for selection without `getRowId`
-13. **#24** — Verify sort `onSortChange` double-fire
-14. **#25** — Make `selectionMode` required when `selection` is provided
-15. **#27** — Add `aria-valuemin`/`aria-valuemax` to resize slider
-16. **#28** — Clarify `header` vs `label` in ColumnDefinition
-17. **#29** — Decide on consistent grouping pattern (flat vs object) for features
-18. **#31** — Disambiguate `expandedRowIds` between subRows and detailsPanel
-19. **#33** — Normalize row ID type (string-only or document clearly)
-20. **#35** — Document loading prop interactions or use discriminated union
-21. **#37** — Add `rowData` to `onRowClick` callback signature
-
-### 🟢 Post-Beta / GA
-
-22. **#9** — Consider grouping sort props
-23. **#10** — Compositional/slot API
-24. **#15** — Virtualization
-25. **#19** — `aria-live` for loading announcements
-26. **#20** — `getHeight` type cleanup
-27. **#22** — Fix `@ts-expect-error` tech debt
-28. **#23** — `onRowDoubleClick`/`onCellClick`
-29. **#26** — Initial focus target
-30. **#14** — Performance for large tables (acceptable for beta)
-31. **#30** — Split ColumnDefinition into layers for power users
-32. **#32** — Warn when resize props used with `layout="auto"`
-33. **#34** — Document column visibility pattern
-34. **#36** — Consider `withKeyboardNav` default
-35. **#38** — Dev warning for missing `isRowHeader`