@navikt/ds-react 8.10.4 → 8.10.5

package/src/data/{drag-and-drop-old/item/DataDragAndDropItem.tsx → drag-and-drop-legacy/item/DragAndDropItemLegacy.tsx}

@@ -3,10 +3,10 @@ import React, { useRef } from "react";
 import { HStack } from "../../../primitives/stack";
 import { cl } from "../../../utils/helpers";
 import { useMergeRefs } from "../../../utils/hooks";
-import { DataDragAndDropDragHandler } from "../drag-handler/DataDragAndDropDragHandler";
-import { DataDragAndDropContext } from "../root/DataDragAndDrop.context";
+import { DragAndDropDragHandlerLegacy } from "../drag-handler/DragAndDropDragHandlerLegacy";
+import { DragAndDropLegacyContext } from "../root/DragAndDropLegacy.context";
 
-interface DataDragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement> {
+interface DragAndDropItemLegacyProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /**
    * Unique id
@@ -21,17 +21,17 @@ interface DataDragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement>
 /**
  * TODO
  *
- * @see 🏷️ {@link DataDragAndDropItemProps}
+ * @see 🏷️ {@link DragAndDropItemLegacyProps}
  * @example
  * ```tsx
- * <DragAndDrop.Item numOfSelectedRows={selectedRows.length} onClear={handleClear}>
+ * <DragAndDropLegacy.Item numOfSelectedRows={selectedRows.length} onClear={handleClear}>
  *   TODO
- * </DragAndDrop.Item>
+ * </DragAndDropLegacy.Item>
  * ```
  */
-const DataDragAndDropItem = React.forwardRef<
+const DragAndDropItemLegacy = React.forwardRef<
   HTMLDivElement,
-  DataDragAndDropItemProps
+  DragAndDropItemLegacyProps
 >(({ children, id, index, className, ...rest }, forwardedRef) => {
   const handleRef = useRef<HTMLDivElement>(null);
   const { ref, isDragging, isDropTarget } = useSortable({
@@ -40,7 +40,7 @@ const DataDragAndDropItem = React.forwardRef<
     handle: handleRef,
   });
   const mergedRef = useMergeRefs(ref, forwardedRef);
-  const context = React.useContext(DataDragAndDropContext);
+  const context = React.useContext(DragAndDropLegacyContext);
   const mouseDragging = isDragging && context?.inputMethod === "mouse";
   const mouseDropTarget = isDropTarget && context?.inputMethod === "mouse";
   const keyboardDragging = isDragging && context?.inputMethod === "keyboard";
@@ -58,7 +58,7 @@ const DataDragAndDropItem = React.forwardRef<
         data-drop-target={mouseDropTarget}
         tabIndex={-1}
       >
-        <DataDragAndDropDragHandler
+        <DragAndDropDragHandlerLegacy
           handleRef={handleRef}
           keyboardDragging={keyboardDragging}
           alt
@@ -69,6 +69,6 @@ const DataDragAndDropItem = React.forwardRef<
   );
 });
 
-export default DataDragAndDropItem;
-export { DataDragAndDropItem };
-export type { DataDragAndDropItemProps };
+export default DragAndDropItemLegacy;
+export { DragAndDropItemLegacy };
+export type { DragAndDropItemLegacyProps };

package/src/data/{drag-and-drop-old/root/DataDragAndDrop.context.tsx → drag-and-drop-legacy/root/DragAndDropLegacy.context.tsx}

@@ -1,11 +1,11 @@
 import { createContext } from "react";
 
-interface DataDragAndDropContextType {
+interface DragAndDropContextLegacyType {
   inputMethod: "mouse" | "keyboard" | null;
   // setInputMethod: (method: "mouse" | "keyboard" | null) => void;
   // setItems: React.Dispatch<React.SetStateAction<any[]>>;
 }
 
-export const DataDragAndDropContext = createContext<
-  DataDragAndDropContextType | undefined
+export const DragAndDropLegacyContext = createContext<
+  DragAndDropContextLegacyType | undefined
 >(undefined);

package/src/data/{drag-and-drop-old/root/DataDragAndDropRoot.tsx → drag-and-drop-legacy/root/DragAndDropLegacyRoot.tsx}

@@ -2,34 +2,32 @@ import { DragDropProvider, DragOverlay } from "@dnd-kit/react";
 import { isSortable } from "@dnd-kit/react/sortable";
 import React, { forwardRef, isValidElement } from "react";
 import { VStack } from "../../../primitives/stack";
-import DataDragAndDropItem, {
-  DataDragAndDropItemProps,
-} from "../item/DataDragAndDropItem";
-import { DataDragAndDropContext } from "./DataDragAndDrop.context";
+import DragAndDropItemLegacy from "../item/DragAndDropItemLegacy";
+import { DragAndDropLegacyContext } from "./DragAndDropLegacy.context";
 
-interface DataDragAndDropProps extends React.HTMLAttributes<HTMLDivElement> {
+interface DragAndDropLegacyProps extends React.HTMLAttributes<HTMLDivElement> {
   children: any[];
   setItems: React.Dispatch<React.SetStateAction<any[]>>;
 }
 
-interface DataDragAndDropRootComponent extends React.ForwardRefExoticComponent<
-  DataDragAndDropProps & React.RefAttributes<HTMLDivElement>
+interface DragAndDropLegacyRootComponent extends React.ForwardRefExoticComponent<
+  DragAndDropLegacyProps & React.RefAttributes<HTMLDivElement>
 > {
   /**
-   * @see 🏷️ {@link DataDragAndDropItemProps}
+   * @see 🏷️ {@link DragAndDropItemLegacyProps}
    * * @example
    * ```jsx
-   * <DragAndDrop>
-   *   <DragAndDrop.Item id="1" index={0}>
+   * <DragAndDropLegacy>
+   *   <DragAndDropLegacy.Item id="1" index={0}>
    *     ...
-   *   </DragAndDrop.Item>
-   * </DragAndDrop>
+   *   </DragAndDropLegacy.Item>
+   * </DragAndDropLegacy>
    * ```
    */
-  Item: typeof DataDragAndDropItem;
+  Item: typeof DragAndDropItemLegacy;
 }
 
-const DataDragAndDrop = forwardRef<HTMLDivElement, DataDragAndDropProps>(
+const DragAndDropLegacy = forwardRef<HTMLDivElement, DragAndDropLegacyProps>(
   ({ setItems, children, ...rest }, forwardedRef) => {
     const [inputMethod, setInputMethod] = React.useState<
       "mouse" | "keyboard" | null
@@ -45,7 +43,7 @@ const DataDragAndDrop = forwardRef<HTMLDivElement, DataDragAndDropProps>(
     };
 
     return (
-      <DataDragAndDropContext.Provider value={{ inputMethod }}>
+      <DragAndDropLegacyContext.Provider value={{ inputMethod }}>
         <DragDropProvider
           // TODO Look into overriding default keybinds, might eliminate context need
           onBeforeDragStart={(event) =>
@@ -84,13 +82,13 @@ const DataDragAndDrop = forwardRef<HTMLDivElement, DataDragAndDropProps>(
             }}
           </DragOverlay>
         </DragDropProvider>
-      </DataDragAndDropContext.Provider>
+      </DragAndDropLegacyContext.Provider>
     );
   },
-) as DataDragAndDropRootComponent;
+) as DragAndDropLegacyRootComponent;
 
-DataDragAndDrop.Item = DataDragAndDropItem;
+DragAndDropLegacy.Item = DragAndDropItemLegacy;
 
-export { DataDragAndDrop, DataDragAndDropItem };
-export default DataDragAndDrop;
-export type { DataDragAndDropItemProps, DataDragAndDropProps };
+export { DragAndDropLegacy, DragAndDropItemLegacy };
+export default DragAndDropLegacy;
+export type { DragAndDropLegacyProps };

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

@@ -26,7 +26,6 @@ const columnDef_TEST_DATA: ColumnDefinitions<SWData, Details> = [
     id: "id",
     label: "Id",
     cell: (row) => row.id,
-    align: "right",
     autoWidth: true,
     details: {
       visible: true,

package/src/data/table/column-header/DataTableColumnHeader.tsx

@@ -111,6 +111,7 @@ const DataTableColumnHeader = forwardRef<
       >
         {sortable ? (
           <button
+            type="button"
             className="aksel-data-table__th-sort-button"
             onClick={onSortClick}
           >
@@ -140,6 +141,7 @@ const DataTableColumnHeader = forwardRef<
         {resizeResult.enabled && !UNSAFE_isSelection && (
           <button
             {...resizeResult.resizeHandlerProps}
+            type="button"
             className="aksel-data-table__th-resize-handle"
             aria-label={
               resizeResult.isResizingWithKeyboard

package/src/data/table/details-panel-row/DataTableDetailsPanelRow.tsx

@@ -43,7 +43,11 @@ function DataTableDetailsPanelRow<T>({
 
   return (
     <tr className="aksel-data-table__details-panel-row">
-      <td id={expansionId} colSpan={fullWidthColSpan}>
+      <td
+        id={expansionId}
+        colSpan={fullWidthColSpan}
+        className="aksel-data-table__details-panel-row-cell"
+      >
         <div style={style}>{content}</div>
       </td>
     </tr>

package/src/data/table/helpers/collectTableRowEntries.ts

@@ -2,20 +2,22 @@ type TableRowEntryId = string | number;
 
 type CollectTableRowEntriesArgs<T> = {
   items: T[];
-  getRowId: (rowData: T, index: number) => TableRowEntryId;
+  getRowId?: (rowData: T, index: number) => TableRowEntryId;
   getRows?: (rowData: T) => T[];
   isRowExpandable?: (rowData: T) => boolean;
 };
 
 interface ItemDetail<T> {
-  id: string | number;
+  id: TableRowEntryId;
+  rowData: T;
   level: number;
-  parent: null | T;
-  children: readonly T[];
+  parentId: TableRowEntryId | null;
+  children: readonly TableRowEntryId[];
 }
 
 type CollectTableRowEntriesReturn<T> = {
-  itemDetails: Map<T, ItemDetail<T>>;
+  itemDetails: Map<TableRowEntryId, ItemDetail<T>>;
+  rootRowIds: TableRowEntryId[];
   /**
    * Direct child ids for each row, used to traverse nested selection groups
    * without storing every descendant list on each ancestor.
@@ -29,50 +31,62 @@ function collectTableRowEntries<T>({
   getRows,
   isRowExpandable,
 }: CollectTableRowEntriesArgs<T>): CollectTableRowEntriesReturn<T> {
-  const itemDetailsMap = new Map<T, ItemDetail<T>>();
+  const itemDetailsMap = new Map<TableRowEntryId, ItemDetail<T>>();
   const childRowIdsById = new Map<TableRowEntryId, TableRowEntryId[]>();
+  const rootRowIds: TableRowEntryId[] = [];
 
   const traverseRow = (
     rowData: T,
     rowIndex: number,
     level: number,
-    parent: T | null,
+    parentRowId: TableRowEntryId | null,
   ): TableRowEntryId => {
-    const rowId = getRowId(rowData, rowIndex);
+    const rowId = getRowId
+      ? getRowId(rowData, rowIndex)
+      : getFallbackTableRowId(rowIndex, parentRowId);
 
     const children =
       ((isRowExpandable?.(rowData) ?? true) ? getRows?.(rowData) : []) ?? [];
 
-    itemDetailsMap.set(rowData, {
-      id: rowId,
-      level,
-      parent,
-      children,
-    });
-
     const childRowIds: TableRowEntryId[] = [];
 
     for (let childIndex = 0; childIndex < children.length; childIndex++) {
       const childRow = children[childIndex];
-      const childRowId = traverseRow(childRow, childIndex, level + 1, rowData);
+      const childRowId = traverseRow(childRow, childIndex, level + 1, rowId);
       childRowIds.push(childRowId);
     }
 
+    itemDetailsMap.set(rowId, {
+      id: rowId,
+      rowData,
+      level,
+      parentId: parentRowId,
+      children: childRowIds,
+    });
+
     childRowIdsById.set(rowId, childRowIds);
 
     return rowId;
   };
 
   for (let rowIndex = 0; rowIndex < items.length; rowIndex++) {
-    traverseRow(items[rowIndex], rowIndex, 0, null);
+    rootRowIds.push(traverseRow(items[rowIndex], rowIndex, 0, null));
   }
 
   return {
     itemDetails: itemDetailsMap,
+    rootRowIds,
     childRowIdsById,
   };
 }
 
+function getFallbackTableRowId(
+  rowIndex: number,
+  parentRowId: TableRowEntryId | null,
+): string {
+  return parentRowId == null ? String(rowIndex) : `${parentRowId}.${rowIndex}`;
+}
+
 export { collectTableRowEntries };
 export type {
   CollectTableRowEntriesArgs,

package/src/data/table/helpers/table-focus.ts

@@ -121,16 +121,70 @@ function prepareCellFocus(cell: Element): HTMLElement | null {
 /**
  * Applies focus and scroll to an element.
  */
+function getStickyOffsets(element: HTMLElement): {
+  stickyOffsetStart: number;
+  stickyOffsetEnd: number;
+  stickyHeaderHeight: number;
+} {
+  const table = element.closest(".aksel-data-table");
+
+  if (!table) {
+    return {
+      stickyOffsetStart: 0,
+      stickyOffsetEnd: 0,
+      stickyHeaderHeight: 0,
+    };
+  }
+
+  const stickyHeader = table.querySelector<HTMLElement>(
+    `.aksel-data-table__tr[data-sticky="true"]`,
+  );
+
+  const stickyNodesStart = table.querySelectorAll<HTMLElement>(
+    `.aksel-data-table__column-header[data-sticky="start"]`,
+  );
+
+  const stickyNodesEnd = table.querySelectorAll<HTMLElement>(
+    `.aksel-data-table__column-header[data-sticky="end"]`,
+  );
+
+  return {
+    stickyOffsetStart: Array.from(stickyNodesStart).reduce(
+      (offset, node) => offset + node.getBoundingClientRect().width,
+      0,
+    ),
+    stickyOffsetEnd: Array.from(stickyNodesEnd).reduce(
+      (offset, node) => offset + node.getBoundingClientRect().width,
+      0,
+    ),
+    stickyHeaderHeight: stickyHeader?.getBoundingClientRect().height ?? 0,
+  };
+}
+
 function applyFocusAndScroll(element: HTMLElement): void {
-  element.focus({
-    preventScroll: true,
-  });
-
-  element.scrollIntoView({
-    behavior: "smooth",
-    block: "nearest",
-    inline: "nearest",
-  });
+  const { stickyOffsetStart, stickyOffsetEnd, stickyHeaderHeight } =
+    getStickyOffsets(element);
+
+  const originalScrollMarginInline = element.style.scrollMarginInline;
+  const originalScrollMarginBlockStart = element.style.scrollMarginBlockStart;
+
+  element.style.scrollMarginInline = `${stickyOffsetStart}px ${stickyOffsetEnd}px`;
+  element.style.scrollMarginBlockStart = `${stickyHeaderHeight}px`;
+
+  try {
+    element.focus({
+      preventScroll: true,
+    });
+
+    element.scrollIntoView({
+      behavior: "auto",
+      block: "nearest",
+      inline: "nearest",
+    });
+  } finally {
+    element.style.scrollMarginBlockStart = originalScrollMarginBlockStart;
+    element.style.scrollMarginInline = originalScrollMarginInline;
+  }
 }
 
 /**

package/src/data/table/hooks/__tests__/useTableItems.test.ts

@@ -45,6 +45,12 @@ const fallbackRows: FallbackTestRow[] = [
   },
 ];
 
+const duplicatedRowObject: TestRow = {
+  id: "shared",
+  name: "Shared",
+  subRows: [{ id: "shared-child", name: "Child" }],
+};
+
 const getSubRows = (row: TestRow) => row.subRows ?? [];
 
 const getVisibleIds = (rows: TestRow[]) => rows.map((row) => row.id);
@@ -59,16 +65,18 @@ describe("useTableItems", () => {
     );
 
     expect(getVisibleIds(result.current.items)).toEqual(["a", "b"]);
-    expect(result.current.itemDetails.get(plainRows[0])).toMatchObject({
+    expect(result.current.itemDetails.get("a")).toMatchObject({
       id: "a",
+      rowData: plainRows[0],
       level: 0,
-      parent: null,
+      parentId: null,
       children: [],
     });
-    expect(result.current.itemDetails.get(plainRows[1])).toMatchObject({
+    expect(result.current.itemDetails.get("b")).toMatchObject({
       id: "b",
+      rowData: plainRows[1],
       level: 0,
-      parent: null,
+      parentId: null,
       children: [],
     });
   });
@@ -102,14 +110,13 @@ describe("useTableItems", () => {
     expect(result.current.childRowIdsById.get("b")).toEqual(["b1"]);
   });
 
-  test("uses the same fallback root id to reveal child rows when getRowId is omitted", () => {
+  test("uses unique fallback ids to reveal child rows when getRowId is omitted", () => {
     const { result } = renderHook(() =>
       useTableItems({
         items: fallbackRows,
-        getRowId: (_, index) => index,
         subRows: {
           getRows: (row: any) => row.subRows ?? [],
-          defaultExpandedRowIds: [0],
+          defaultExpandedRowIds: ["0"],
         },
       }),
     );
@@ -118,6 +125,7 @@ describe("useTableItems", () => {
       "Parent",
       "Child",
     ]);
+    expect(result.current.childRowIdsById.get("0")).toEqual(["0.0"]);
   });
 
   test("updates visible rows in depth-first order for controlled expanded ids", () => {
@@ -149,4 +157,35 @@ describe("useTableItems", () => {
       "b1",
     ]);
   });
+
+  test("tracks duplicated row objects by row id instead of object identity", () => {
+    const { result } = renderHook(() =>
+      useTableItems({
+        items: [duplicatedRowObject, duplicatedRowObject],
+        subRows: {
+          getRows: getSubRows,
+          defaultExpandedRowIds: ["0"],
+        },
+      }),
+    );
+
+    expect(result.current.visibleRowIds).toEqual(["0", "0.0", "1"]);
+    expect(getVisibleIds(result.current.items)).toEqual([
+      "shared",
+      "shared-child",
+      "shared",
+    ]);
+    expect(result.current.itemDetails.get("0")).toMatchObject({
+      id: "0",
+      rowData: duplicatedRowObject,
+      parentId: null,
+      children: ["0.0"],
+    });
+    expect(result.current.itemDetails.get("1")).toMatchObject({
+      id: "1",
+      rowData: duplicatedRowObject,
+      parentId: null,
+      children: ["1.0"],
+    });
+  });
 });

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

@@ -14,7 +14,7 @@ function useGridCache(tableRef: HTMLTableElement | null, enabled: boolean) {
   });
 
   const [activeCell, setActiveCell] = useState<Element | null>(null);
-  const activeCellRef = useValueAsRef(activeCell).current;
+  const activeCellRef = useValueAsRef(activeCell);
   const observerRef = useRef<MutationObserver | null>(null);
 
   useEffect(() => {
@@ -24,7 +24,8 @@ function useGridCache(tableRef: HTMLTableElement | null, enabled: boolean) {
 
     observerRef.current = new MutationObserver(() => {
       gridCacheRef.current.dirty = true;
-      if (activeCellRef && !activeCellRef.isConnected) {
+
+      if (activeCellRef.current && !activeCellRef.current.isConnected) {
         setActiveCell(null);
       }
     });

package/src/data/table/hooks/useTableDetailsPanel.tsx

@@ -90,7 +90,10 @@ function DataTableDetailsPanelProvider<T>({
   const tableItemsContext = useTableItemsContext(false);
 
   const { itemDetails } = tableItemsContext ?? {
-    itemDetails: new Map(),
+    itemDetails: new Map<
+      string | number,
+      { rowData: T; id: string | number; level: number }
+    >(),
   };
 
   const expandableIds = React.useMemo(() => {
@@ -100,7 +103,7 @@ function DataTableDetailsPanelProvider<T>({
 
     const ids = new Set<string | number>();
 
-    for (const [rowData, { id, level }] of itemDetails.entries()) {
+    for (const { rowData, id, level } of itemDetails.values()) {
       /* We only allow Master - Details pattern on top level rows */
       if (level > 0) {
         continue;

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

@@ -17,13 +17,13 @@ type SubRowsProps<T> = {
 
 type UseTableItemsArgs<T> = {
   items: T[];
-  getRowId: (rowData: T, index: number) => TableRowEntryId;
+  getRowId?: (rowData: T) => TableRowEntryId;
   subRows?: SubRowsProps<T>;
 };
 
 type useTableItemsReturn<T> = {
   items: T[];
-  itemDetails: Map<T, ItemDetail<T>>;
+  itemDetails: Map<TableRowEntryId, ItemDetail<T>>;
   /** Row ids for the rows currently rendered in the table body. */
   visibleRowIds: TableRowEntryId[];
   /** Direct child ids for each row, used to traverse selection groups lazily. */
@@ -57,32 +57,35 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
 
   const { itemDetails, visibleItems, visibleRowIds, childRowIdsById } =
     useMemo(() => {
-      const { itemDetails: rowEntriesMap, childRowIdsById: _childRowIdsById } =
-        collectTableRowEntries({
-          items,
-          getRowId,
-          getRows,
-          isRowExpandable,
-        });
+      const {
+        itemDetails: rowEntriesMap,
+        rootRowIds,
+        childRowIdsById: _childRowIdsById,
+      } = collectTableRowEntries({
+        items,
+        getRowId,
+        getRows,
+        isRowExpandable,
+      });
 
       const localVisibleItems: T[] = [];
       const localVisibleRowIds: TableRowEntryId[] = [];
 
-      const addVisibleRows = (rowData: T): TableRowEntryId[] => {
-        const details = rowEntriesMap.get(rowData);
+      const addVisibleRows = (rowId: TableRowEntryId): TableRowEntryId[] => {
+        const details = rowEntriesMap.get(rowId);
 
         if (!details) {
           return [];
         }
 
-        localVisibleItems.push(rowData);
+        localVisibleItems.push(details.rowData);
         localVisibleRowIds.push(details.id);
 
         const visibleDescendantRowIds: TableRowEntryId[] = [];
 
         if (expandedIdsSet.has(details.id)) {
-          for (const childRow of details.children) {
-            const childVisibleRowIds = addVisibleRows(childRow);
+          for (const childRowId of details.children) {
+            const childVisibleRowIds = addVisibleRows(childRowId);
             visibleDescendantRowIds.push(...childVisibleRowIds);
           }
         }
@@ -90,8 +93,8 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
         return [details.id, ...visibleDescendantRowIds];
       };
 
-      for (const rowData of items) {
-        addVisibleRows(rowData);
+      for (const rowId of rootRowIds) {
+        addVisibleRows(rowId);
       }
 
       return {
@@ -125,9 +128,7 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
 
 const { Provider: TableItemsProvider, useContext: useTableItemsContext } =
   /* TODO: Can we type this better? */
-  createStrictContext<
-    Omit<useTableItemsReturn<any>, "visibleRowIds" | "childRowIdsById">
-  >({
+  createStrictContext<Omit<useTableItemsReturn<any>, "childRowIdsById">>({
     name: "TableItemsContext",
     errorMessage:
       "useTableItemsContext must be used within a TableItemsProvider",

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useEventCallback } from "../../../utils/hooks";
 import { focusInitialTableTarget } from "../helpers/table-cell";
-import { focusCellAndUpdateTabIndex } from "../helpers/table-focus";
+import { focusCell, focusCellAndUpdateTabIndex } from "../helpers/table-focus";
 import {
   findFirstCell,
   findFirstCellInRow,
@@ -137,6 +137,10 @@ function useTableKeyboardNav({
     const target = event.target as Element | null;
 
     if (tableRef && target === tableRef) {
+      if (activeCell) {
+        focusCell(activeCell);
+        return;
+      }
       focusInitialTableTarget(tableRef);
       return;
     }
@@ -173,7 +177,7 @@ function useTableKeyboardNav({
 
   return {
     /* Table should only have tabIndex until the focus is moved inside and is enabled */
-    tabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
+    tabIndex: enabled ? 0 : undefined,
     setTableRef,
   };
 }

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

@@ -29,9 +29,6 @@ type ColumnDefinition<T, DetailsT = Record<string, any>> = Pick<
    * 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;
   /**