@navikt/ds-react 8.10.5 → 8.11.0

package/esm/data-grid/root/DataGridRoot.js

@@ -0,0 +1,57 @@
+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, useMemo } from "react";
+import { DataGridTable } from "../../data/table/root/DataGridTableRoot.js";
+import { cl } from "../../utils/helpers/index.js";
+import { DataGridContextProvider } from "./DataGridRoot.context.js";
+/**
+ * Component for displaying tabular data.
+ *
+ * **WARNING: This component is in active development and may receive breaking changes outside major releases!**
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/datagrid)
+ * @see 🏷️ {@link DataGridProps}
+ *
+ * @example
+ * ```jsx
+ * <DataGrid columnDefinitions={columnDefs} data={rowData} getRowId={(row) => row.id}>
+ *   <DataGrid.Table />
+ * </DataGrid>
+ * ```
+ */
+const DataGridInternal = forwardRef((_a, ref) => {
+    var { children, className, columns, data, getRowId, selection, isLoading = false, settings } = _a, rest = __rest(_a, ["children", "className", "columns", "data", "getRowId", "selection", "isLoading", "settings"]);
+    const resolvedSettings = useMemo(() => {
+        var _a, _b, _c, _d;
+        return ({
+            rowDensity: (_a = settings === null || settings === void 0 ? void 0 : settings.rowDensity) !== null && _a !== void 0 ? _a : "standard",
+            zebraStripes: (_b = settings === null || settings === void 0 ? void 0 : settings.zebraStripes) !== null && _b !== void 0 ? _b : false,
+            truncateContent: settings === null || settings === void 0 ? void 0 : settings.truncateContent,
+            stickyColumns: (_c = settings === null || settings === void 0 ? void 0 : settings.stickyColumns) !== null && _c !== void 0 ? _c : {},
+            textSize: (_d = settings === null || settings === void 0 ? void 0 : settings.textSize) !== null && _d !== void 0 ? _d : "medium",
+        });
+    }, [
+        settings === null || settings === void 0 ? void 0 : settings.rowDensity,
+        settings === null || settings === void 0 ? void 0 : settings.zebraStripes,
+        settings === null || settings === void 0 ? void 0 : settings.truncateContent,
+        settings === null || settings === void 0 ? void 0 : settings.stickyColumns,
+        settings === null || settings === void 0 ? void 0 : settings.textSize,
+    ]);
+    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("aksel-data-grid", className) }),
+        React.createElement(DataGridContextProvider, { columnDefinitions: columns, data: data, getRowId: getRowId, selection: selection, isLoading: isLoading, tableSettings: resolvedSettings }, children)));
+});
+const DataGrid = DataGridInternal;
+DataGrid.Table = DataGridTable;
+// eslint-disable-next-line import/export
+export { DataGrid, DataGridInternal }; // DataGridRoot needs to be exported b.c. of docgen
+export default DataGrid;
+//# sourceMappingURL=DataGridRoot.js.map

package/esm/data-grid/root/DataGridRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridRoot.js","sourceRoot":"","sources":["../../../src/data-grid/root/DataGridRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AACxE,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAEzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAwDjE;;;;;;;;;;;;;;GAcG;AACH,MAAM,gBAAgB,GAAG,UAAU,CACjC,CACE,EAUyB,EACzB,GAAG,EACH,EAAE;QAZF,EACE,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,QAAQ,OAEe,EADpB,IAAI,cATT,8FAUC,CADQ;IAIT,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE;;QAAC,OAAA,CAAC;YACL,UAAU,EAAE,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,mCAAI,UAAU;YAC9C,YAAY,EAAE,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,YAAY,mCAAI,KAAK;YAC7C,eAAe,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,eAAe;YAC1C,aAAa,EAAE,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAAa,mCAAI,EAAE;YAC5C,QAAQ,EAAE,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,mCAAI,QAAQ;SACzC,CAAC,CAAA;KAAA,EACF;QACE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU;QACpB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,YAAY;QACtB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,eAAe;QACzB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAAa;QACvB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ;KACnB,CACF,CAAC;IAEF,OAAO,CACL,6CAAS,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC;QAClE,oBAAC,uBAAuB,IACtB,iBAAiB,EAAE,OAAO,EAC1B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,gBAAgB,IAE9B,QAAQ,CACe,CACtB,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,gBAAgD,CAAC;AAClE,QAAQ,CAAC,KAAK,GAAG,aAAa,CAAC;AAsB/B,yCAAyC;AACzC,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC,CAAC,mDAAmD;AAC1F,eAAe,QAAQ,CAAC"}

package/esm/preview.d.ts

@@ -0,0 +1 @@
+export { DataGrid } from "./data-grid/index.js";

package/esm/preview.js

@@ -0,0 +1,3 @@
+"use client";
+export { DataGrid } from "./data-grid/index.js";
+//# sourceMappingURL=preview.js.map

package/esm/preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.js","sourceRoot":"","sources":["../src/preview.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/esm/table/ColumnHeader.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef, useContext } from "react";
 import { ArrowsUpDownIcon, SortDownIcon, SortUpIcon, } from "@navikt/aksel-icons";
+import { consoleWarning } from "../utils/helpers/consoleWarning.js";
 import HeaderCell from "./HeaderCell.js";
 import { TableContext } from "./context.js";
 export const ColumnHeader = forwardRef((_a, ref) => {
@@ -18,7 +19,7 @@ export const ColumnHeader = forwardRef((_a, ref) => {
     var { children, sortable = false, sortKey } = _a, rest = __rest(_a, ["children", "sortable", "sortKey"]);
     const context = useContext(TableContext);
     if (sortable && !sortKey) {
-        console.warn("ColumnHeader with `sortable=true` must have a sortKey.");
+        consoleWarning("ColumnHeader with `sortable=true` must have a sortKey.");
     }
     return (React.createElement(HeaderCell, Object.assign({ scope: "col", ref: ref, "aria-sort": sortable
             ? ((_b = context === null || context === void 0 ? void 0 : context.sort) === null || _b === void 0 ? void 0 : _b.orderBy) === sortKey

package/esm/table/ColumnHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeader.js","sourceRoot":"","sources":["../../src/table/ColumnHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,UAAU,GACX,MAAM,qBAAqB,CAAC;AAC7B,OAAO,UAA+B,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAkBzC,MAAM,CAAC,MAAM,YAAY,GAAqB,UAAU,CACtD,CAAC,EAAgD,EAAE,GAAG,EAAE,EAAE;;QAAzD,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,OAAO,OAAW,EAAN,IAAI,cAA9C,mCAAgD,CAAF;IAC7C,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,IAAI,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;QACzB,OAAO,CAAC,IAAI,CAAC,wDAAwD,CAAC,CAAC;IACzE,CAAC;IAED,OAAO,CACL,oBAAC,UAAU,kBACT,KAAK,EAAC,KAAK,EACX,GAAG,EAAE,GAAG,eAEN,QAAQ;YACN,CAAC,CAAC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,MAAK,OAAO;gBAClC,CAAC,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,SAAS;gBAC1B,CAAC,CAAC,MAAM;YACV,CAAC,CAAC,SAAS,IAEX,IAAI,GAEP,QAAQ,CAAC,CAAC,CAAC,CACV,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,0BAA0B,EACpC,OAAO,EACL,QAAQ,IAAI,OAAO;YACjB,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,wDAAG,OAAO,CAAC,CAAA,EAAA;YACxC,CAAC,CAAC,SAAS;QAGd,QAAQ;QACR,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,MAAK,OAAO,CAAC,CAAC,CAAC,CACpC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,SAAS,MAAK,YAAY,CAAC,CAAC,CAAC,CAC1C,oBAAC,YAAY,0BAAe,CAC7B,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,0BAAe,CAC3B,CACF,CAAC,CAAC,CAAC,CACF,oBAAC,gBAAgB,0BAAe,CACjC,CACM,CACV,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ColumnHeader.js","sourceRoot":"","sources":["../../src/table/ColumnHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,UAAU,GACX,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,UAA+B,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAkBzC,MAAM,CAAC,MAAM,YAAY,GAAqB,UAAU,CACtD,CAAC,EAAgD,EAAE,GAAG,EAAE,EAAE;;QAAzD,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,OAAO,OAAW,EAAN,IAAI,cAA9C,mCAAgD,CAAF;IAC7C,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,IAAI,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;QACzB,cAAc,CAAC,wDAAwD,CAAC,CAAC;IAC3E,CAAC;IAED,OAAO,CACL,oBAAC,UAAU,kBACT,KAAK,EAAC,KAAK,EACX,GAAG,EAAE,GAAG,eAEN,QAAQ;YACN,CAAC,CAAC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,MAAK,OAAO;gBAClC,CAAC,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,SAAS;gBAC1B,CAAC,CAAC,MAAM;YACV,CAAC,CAAC,SAAS,IAEX,IAAI,GAGP,QAAQ,CAAC,CAAC,CAAC,CACV,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,0BAA0B,EACpC,OAAO,EACL,QAAQ,IAAI,OAAO;YACjB,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,wDAAG,OAAO,CAAC,CAAA,EAAA;YACxC,CAAC,CAAC,SAAS;QAGd,QAAQ;QACR,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,MAAK,OAAO,CAAC,CAAC,CAAC,CACpC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,SAAS,MAAK,YAAY,CAAC,CAAC,CAAC,CAC1C,oBAAC,YAAY,0BAAe,CAC7B,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,0BAAe,CAC3B,CACF,CAAC,CAAC,CAAC,CACF,oBAAC,gBAAgB,0BAAe,CACjC,CACM,CACV,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "8.10.5",
+  "version": "8.11.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -46,6 +46,26 @@
         "default": "./cjs/index.js"
       }
     },
+    "./PREVIEW": {
+      "import": {
+        "types": "./esm/preview.d.ts",
+        "default": "./esm/preview.js"
+      },
+      "require": {
+        "types": "./cjs/preview.d.ts",
+        "default": "./cjs/preview.js"
+      }
+    },
+    "./PREVIEW/DataGrid": {
+      "import": {
+        "types": "./esm/data-grid/index.d.ts",
+        "default": "./esm/data-grid/index.js"
+      },
+      "require": {
+        "types": "./cjs/data-grid/index.d.ts",
+        "default": "./cjs/data-grid/index.js"
+      }
+    },
     "./types/theme": {
       "types": "./esm/types/theme.d.ts"
     },
@@ -706,8 +726,8 @@
   "dependencies": {
     "@floating-ui/react": "0.27.19",
     "@floating-ui/react-dom": "^2.1.8",
-    "@navikt/aksel-icons": "^8.10.5",
-    "@navikt/ds-tokens": "^8.10.5",
+    "@navikt/aksel-icons": "^8.11.0",
+    "@navikt/ds-tokens": "^8.11.0",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.14.0"
   },

package/src/data/drag-and-drop/drag-handler/DragAndDropDragHandler.tsx

@@ -90,7 +90,6 @@ export const DragAndDropDragHandler = React.forwardRef<
 
           if (event.key === "Escape") {
             // Cancel dragging
-            // TODO Handle reset
             event.preventDefault();
             context?.setAnnouncer(`Flytting av ${itemLabel} avbrutt.`);
             context?.cancelDrag(true);

package/src/data/drag-and-drop/root/DragAndDropRoot.tsx

@@ -10,62 +10,31 @@ import { Floating } from "../../../utils/components/floating/Floating";
 import {
   ColumnDefinition,
   ColumnDefinitions,
-} from "../../table/root/DataTable.types";
+} from "../../table/root/DataGridTable.types";
 import DragAndDropItem, { DragAndDropItemProps } from "../item/DragAndDropItem";
 import { DragAndDropElement } from "../types";
 import { DragAndDropProvider } from "./DragAndDrop.context";
 
-interface DragAndDropProps<
-  T,
-  DetailsT extends Record<string, any>,
-> extends React.HTMLAttributes<HTMLUListElement> {
-  items: ColumnDefinitions<T, DetailsT>;
-  setItems: React.Dispatch<
-    React.SetStateAction<ColumnDefinitions<T, DetailsT>>
-  >;
-  renderItem: (
-    item: ColumnDefinition<T, DetailsT>,
-    index: number,
-  ) => React.ReactNode;
+interface DragAndDropProps<T> extends React.HTMLAttributes<HTMLUListElement> {
+  items: ColumnDefinitions<T>;
+  setItems: React.Dispatch<React.SetStateAction<ColumnDefinitions<T>>>;
+  renderItem: (item: ColumnDefinition<T>, index: number) => React.ReactNode;
 }
 
 /**
- * TODO
- * [x] setItems on root
- * [x] state : active element
- * [x] pointer over listener / state, onPointerEnter, onPointerLeave
- * [x] Overlay - Use floating component
- * [x] Keyboard navigation
- * [x] UU - announce on drag start, item moved, drag end
- * [x] Make overlay same width as the OG item, currently jumps to content width
- * [x] Look into adding a cancel listener event
- * [x] Make onClick work on drag handler button, currently blocked by pointer down/up listeners
- * [x] Talk to design about what should happen on ESC key press, currently just cancels dragging, should it also reset position?
- * [x] Make arrow icons into buttons that react to keyboard events, currently just decorative
- * [x] Keep handler focus after clicking arrows for dragging
- * [x] Look into data-based API vs component-based API
- * [x] Should we have hidden instructions for screen readers on how to use the drag and drop, and should we announce the position of the item while dragging?
- * [x] Discuss if this component should be generic for drag and drop, or if it should be specifically for tables - just for table for now
- * [x] Discuss items type
- * [x] Discuss how to implement label best
- * [ ] Quick nav (< > samtidig) - få piltastene til å fungere
- * [x] Implement new type for items - ColumnDefinitions<T>
- * [x] Remove announcer div and use a live region component instead
- * [x] Make ESC reset position, not just cancel dragging
- * [x] Make instructions for keyboard users (visible?)
- * [ ] Ask design about visible keyboard instructions
- * [ ] Update design from Figma
+ * TODO:
+ *
+ * Backlog:
+ * [ ] Quick nav (< > samtidig) - få piltastene til å fungere - ignore?
  * [ ] Look at instructions text
- * [x] Remove default ul styling
- * [x] Fix setItems type
  *
  */
 
 const DRAG_THRESHOLD = 4; // Minimum movement in pixels to start dragging
 const SR_INSTRUCTIONS_ID = "drag-and-drop-instructions-id";
 
-function DragAndDropInner<T, DetailsT extends Record<string, any>>(
-  { items, setItems, renderItem }: DragAndDropProps<T, DetailsT>,
+function DragAndDropInner<T>(
+  { items, setItems, renderItem }: DragAndDropProps<T>,
   forwardedRef: React.ForwardedRef<HTMLUListElement>,
 ) {
   const [activeItem, setActiveItem] = useState<DragAndDropElement | null>(null);
@@ -74,7 +43,7 @@ function DragAndDropInner<T, DetailsT extends Record<string, any>>(
     useState<DragAndDropElement | null>(null);
   const [overlayWidth, setOverlayWidth] = useState<number | null>(null);
   const [announcer, setAnnouncer] = useState("");
-  const initialItemsRef = useRef<ColumnDefinitions<T, DetailsT> | null>(null);
+  const initialItemsRef = useRef<ColumnDefinitions<T> | null>(null);
   const activeData = items.find((item) => item.id === activeItem?.id);
 
   const activeItemRef = useRef<DragAndDropElement | null>(null);
@@ -164,8 +133,8 @@ function DragAndDropInner<T, DetailsT extends Record<string, any>>(
   );
 
   useEffect(() => {
-    /* This useEffect is used to toggle a class on the html element when dragging, 
-      to prevent cursor issues when dragging over interactive elements, 
+    /* This useEffect is used to toggle a class on the html element when dragging,
+      to prevent cursor issues when dragging over interactive elements,
       and to prevent text selection during dragging. */
 
     if (activeItem) {
@@ -335,7 +304,7 @@ function DragAndDropInner<T, DetailsT extends Record<string, any>>(
               key={item.id}
               id={item.id}
               index={index}
-              itemLabel={item.label}
+              itemLabel={item.header}
             >
               {renderItem(item, index)}
             </DragAndDropItem>
@@ -361,7 +330,7 @@ function DragAndDropInner<T, DetailsT extends Record<string, any>>(
               id={activeItem.id}
               index={activeItem.index}
               isOverlay
-              itemLabel={activeData.label}
+              itemLabel={activeData.header}
             >
               {renderItem(activeData, activeItem.index)}
             </DragAndDropItem>
@@ -372,11 +341,8 @@ function DragAndDropInner<T, DetailsT extends Record<string, any>>(
   );
 }
 
-const DragAndDrop = forwardRef(DragAndDropInner) as <
-  T,
-  DetailsT extends Record<string, any>,
->(
-  props: DragAndDropProps<T, DetailsT> & React.RefAttributes<HTMLUListElement>,
+const DragAndDrop = forwardRef(DragAndDropInner) as <T>(
+  props: DragAndDropProps<T> & React.RefAttributes<HTMLUListElement>,
 ) => React.ReactElement | null;
 
 export { DragAndDrop, DragAndDropItem };

package/src/data/stories/Data.test-data.tsx

@@ -1,6 +1,10 @@
 import React from "react";
+import { MenuElipsisVerticalIcon } from "@navikt/aksel-icons";
+import { ActionMenu } from "../../action-menu";
+import { Button } from "../../button";
+import { HStack } from "../../primitives/stack";
 import { Tag } from "../../tag";
-import type { ColumnDefinitions } from "../table/root/DataTable.types";
+import type { ColumnDefinitions } from "../table/root/DataGridTable.types";
 
 type SWData = {
   id: number;
@@ -17,80 +21,54 @@ type SWData = {
   nestedRows: Omit<NestedSWData, "nestedRows">[];
 };
 
-type Details = {
-  visible: boolean;
-};
-
-const columnDef_TEST_DATA: ColumnDefinitions<SWData, Details> = [
+const columnDef_TEST_DATA: ColumnDefinitions<SWData> = [
   {
     id: "id",
-    label: "Id",
-    cell: (row) => row.id,
-    autoWidth: true,
-    details: {
-      visible: true,
-    },
+    header: "Id",
+    bodyCell: (row) => row.id,
+    width: { autoResizeOnce: true },
   },
   {
-    label: "Name",
+    header: "Name",
     id: "name",
-    cell: (row) =>
+    isRowHeader: true,
+    bodyCell: (row) =>
       `${row.name} ${row?.nestedRows?.length > 0 ? `(${row?.nestedRows?.length})` : ""}`,
-    details: {
-      visible: true,
-    },
   },
   {
-    label: "National id",
+    header: "National id",
     id: "nationalId",
-    cell: (row) => row.nationalId,
+    bodyCell: (row) => row.nationalId,
     align: "right",
-    autoWidth: true,
-    details: {
-      visible: true,
-    },
+    width: { autoResizeOnce: true },
   },
   {
-    label: "Day job",
+    header: "Day job",
     id: "dayJob",
-    cell: (row) => row.dayJob,
-    details: {
-      visible: true,
-    },
+    bodyCell: (row) => row.dayJob,
   },
   {
-    label: "Supervisor",
+    header: "Supervisor",
     id: "supervisor",
-    cell: (row) => row.supervisor,
-    details: {
-      visible: true,
-    },
+    bodyCell: (row) => row.supervisor,
   },
   {
-    label: "Date received",
+    header: "Date received",
     id: "dateReceived",
-    cell: (row) => row.dateReceived,
-    details: {
-      visible: true,
-    },
+    bodyCell: (row) => row.dateReceived,
   },
   {
-    label: "Message",
+    header: "Message",
     id: "message",
-    cell: (row) => row.message,
-    details: {
-      visible: true,
-    },
+    bodyCell: (row) => row.message,
   },
   {
-    label: "Age",
+    header: "Age",
     id: "age",
-    cell: (row) => row.age,
+    bodyCell: (row) => row.age,
     align: "right",
-    autoWidth: true,
-    details: {
-      visible: true,
-    },
+    width: { autoResizeOnce: true },
+
     /* TODO: NOt yet implemented */
     /* footer: ({ table }) => {
       const ages: number[] = [];
@@ -102,36 +80,69 @@ const columnDef_TEST_DATA: ColumnDefinitions<SWData, Details> = [
     }, */
   },
   {
-    label: "Force sensitive",
+    header: "Force sensitive",
     id: "forceSensitive",
-    cell: (row) => (
+    bodyCell: (row) => (
       <Tag
         size="small"
         variant="moderate"
         data-color={row.forceSensitive ? "accent" : "warning"}
       >{`${row.forceSensitive ? "Yes" : "No"}`}</Tag>
     ),
-    autoWidth: true,
+    width: { autoResizeOnce: true },
     align: "center",
-    details: {
-      visible: true,
-    },
   },
   {
-    label: "Home system",
+    header: "Home system",
     id: "homeSystem",
-    cell: (row) => row.homeSystem,
-    details: {
-      visible: true,
-    },
+    bodyCell: (row) => row.homeSystem,
   },
   {
-    label: "Skills",
+    header: "Skills",
     id: "skills",
-    cell: (row) => row.skills,
-    details: {
-      visible: true,
-    },
+    bodyCell: (row) => (
+      <HStack gap="space-8" wrap={false}>
+        {row.skills.map((skill) => (
+          <Tag key={skill} size="small" variant="moderate">
+            {skill}
+          </Tag>
+        ))}
+      </HStack>
+    ),
+  },
+  {
+    header: "Actions",
+    id: "actions",
+    width: { autoResizeOnce: true },
+    bodyCell: (row) => (
+      <HStack gap="space-8">
+        <Button
+          size="xsmall"
+          variant="secondary"
+          data-color="neutral"
+          onClick={() => alert(`Edit ${row.name}`)}
+        >
+          Edit
+        </Button>
+        <ActionMenu>
+          <ActionMenu.Trigger>
+            <Button
+              size="xsmall"
+              variant="secondary"
+              data-color="neutral"
+              icon={<MenuElipsisVerticalIcon title="Menu" />}
+            />
+          </ActionMenu.Trigger>
+          <ActionMenu.Content>
+            <ActionMenu.Group label="Actions">
+              <ActionMenu.Item>Delete</ActionMenu.Item>
+              <ActionMenu.Item>Assign</ActionMenu.Item>
+              <ActionMenu.Item>Change status</ActionMenu.Item>
+            </ActionMenu.Group>
+          </ActionMenu.Content>
+        </ActionMenu>
+      </HStack>
+    ),
   },
 ];
 

package/src/data/table/base-cell/DataTableBaseCell.tsx

@@ -2,23 +2,25 @@ import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
 import { useDataTableContext } from "../root/DataTableRoot.context";
 
-interface DataTableBaseCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+interface DataTableBaseCellProps extends Omit<
+  React.TdHTMLAttributes<HTMLTableCellElement>,
+  "width"
+> {
   /**
-   * Content alignment inside cell
+   * Text alignment inside cell.
+   *
+   * Quantitative figures like amounts and percentages should be right‑aligned (but not phone numbers, postal codes etc.)
    * @default "left"
    */
-  textAlign?: "left" | "center" | "right";
+  align?: "left" | "center" | "right";
   /**
-   * TODO: Shouldnt be needed to declare these here... But getting type-errors if not
+   * Internal cell type that controls padding, alignment, row-click prevention, and resize behavior.
+   * - `"action"`: Centers content, removes cell padding, prevents row click, and disables column resize.
+   *    Used for selection (checkbox/radio) and expansion (expand/collapse) cells.
    */
-  colSpan?: number;
-  rowSpan?: number;
+  cellType?: "action";
   /**
-   * Temp hack to solve overflow and alignment
-   */
-  UNSAFE_isSelection?: boolean;
-  /**
-   * When true, clicking this cell will not trigger `onRowClick` on the row.
+   * When true, clicking this cell will not trigger `onRowAction` on the row.
    * Useful for cells that contain their own interactive content or actions
    * that should be independent of row-level click handling.
    */
@@ -26,20 +28,15 @@ interface DataTableBaseCellProps extends React.HTMLAttributes<HTMLTableCellEleme
   /**
    * Sets a max-width on the content wrapper div inside the cell.
    * This is only needed when using `layout="auto"` together with
-   * `truncateContent` on `<DataTable>` and you want the cell to be truncated.
+   * `truncateContent` on `<DataGrid.Table>` and you want the cell to be truncated.
    */
-  contentMaxWidth?: number | `${number}${string}`;
+  contentMaxWidth?: number | string;
   /**
    * Makes the cell sticky.
    */
   isSticky?: "start" | "end" | false;
 }
 
-/**
- * TODO:
- * - Need a "type" or something that centers content instead of relying on isSelection prop.
- * - Need a separate prop do disabled resizing instead of relying on isSelection prop.
- */
 const DataTableBaseCell = forwardRef<
   HTMLTableCellElement,
   DataTableBaseCellProps & {
@@ -47,6 +44,12 @@ const DataTableBaseCell = forwardRef<
      * Cell type
      */
     as: "th" | "td";
+    /**
+     * Content to render before the main cell content.
+     *
+     * **WARNING: Adding content here that takes up space will probably break auto-resizing!**
+     */
+    beforeContent?: React.ReactNode;
   }
 >(
   (
@@ -54,13 +57,14 @@ const DataTableBaseCell = forwardRef<
       className,
       children,
       as: Component,
-      textAlign = "left",
-      colSpan,
-      UNSAFE_isSelection,
+      beforeContent,
+      align = "left",
+      cellType,
       preventRowClick,
       contentMaxWidth,
-      rowSpan,
       isSticky,
+      colSpan,
+      rowSpan,
       ...rest
     },
     forwardedRef,
@@ -73,16 +77,22 @@ const DataTableBaseCell = forwardRef<
         ref={forwardedRef}
         className={cl("aksel-data-table__cell", className)}
         tabIndex={withKeyboardNav ? -1 : undefined}
-        data-align={textAlign}
-        data-selectable={UNSAFE_isSelection}
+        data-align={align}
+        data-cell-type={cellType || undefined}
         data-prevent-row-click={
-          preventRowClick || UNSAFE_isSelection || undefined
+          preventRowClick || cellType === "action" || undefined
         }
         data-sticky={isSticky || undefined}
         colSpan={colSpan}
         rowSpan={rowSpan}
       >
-        <div style={{ maxWidth: contentMaxWidth }}>{children}</div>
+        {beforeContent}
+        <div
+          className="aksel-data-table__cell-content"
+          style={{ maxWidth: contentMaxWidth }}
+        >
+          {children}
+        </div>
       </Component>
     );
   },