@navikt/ds-react 8.10.6 → 8.11.0

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

@@ -1,8 +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;
@@ -22,47 +24,48 @@ type SWData = {
 const columnDef_TEST_DATA: ColumnDefinitions<SWData> = [
   {
     id: "id",
-    label: "Id",
-    cell: (row) => row.id,
+    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})` : ""}`,
   },
   {
-    label: "National id",
+    header: "National id",
     id: "nationalId",
-    cell: (row) => row.nationalId,
+    bodyCell: (row) => row.nationalId,
     align: "right",
     width: { autoResizeOnce: true },
   },
   {
-    label: "Day job",
+    header: "Day job",
     id: "dayJob",
-    cell: (row) => row.dayJob,
+    bodyCell: (row) => row.dayJob,
   },
   {
-    label: "Supervisor",
+    header: "Supervisor",
     id: "supervisor",
-    cell: (row) => row.supervisor,
+    bodyCell: (row) => row.supervisor,
   },
   {
-    label: "Date received",
+    header: "Date received",
     id: "dateReceived",
-    cell: (row) => row.dateReceived,
+    bodyCell: (row) => row.dateReceived,
   },
   {
-    label: "Message",
+    header: "Message",
     id: "message",
-    cell: (row) => row.message,
+    bodyCell: (row) => row.message,
   },
   {
-    label: "Age",
+    header: "Age",
     id: "age",
-    cell: (row) => row.age,
+    bodyCell: (row) => row.age,
     align: "right",
     width: { autoResizeOnce: true },
 
@@ -77,9 +80,9 @@ const columnDef_TEST_DATA: ColumnDefinitions<SWData> = [
     }, */
   },
   {
-    label: "Force sensitive",
+    header: "Force sensitive",
     id: "forceSensitive",
-    cell: (row) => (
+    bodyCell: (row) => (
       <Tag
         size="small"
         variant="moderate"
@@ -90,41 +93,29 @@ const columnDef_TEST_DATA: ColumnDefinitions<SWData> = [
     align: "center",
   },
   {
-    label: "Home system",
+    header: "Home system",
     id: "homeSystem",
-    cell: (row) => row.homeSystem,
+    bodyCell: (row) => row.homeSystem,
   },
   {
-    label: "Skills",
+    header: "Skills",
     id: "skills",
-    cell: (row) =>
-      row.skills.map((skill) => (
-        <Tag key={skill} size="small" variant="moderate">
-          {skill}
-        </Tag>
-      )),
-    /* cell: (row) => (
-      <Bleed marginBlock="space-4" marginInline="space-4">
+    bodyCell: (row) => (
+      <HStack gap="space-8" wrap={false}>
         {row.skills.map((skill) => (
-          <Box
-            key={skill}
-            style={{ display: "inline-block" }}
-            padding="space-4"
-          >
-            <Tag size="small" variant="moderate">
-              {skill}
-            </Tag>
-          </Box>
+          <Tag key={skill} size="small" variant="moderate">
+            {skill}
+          </Tag>
         ))}
-      </Bleed>
-    ), */
+      </HStack>
+    ),
   },
   {
-    label: "Actions",
+    header: "Actions",
     id: "actions",
     width: { autoResizeOnce: true },
-    cell: (row) => (
-      <>
+    bodyCell: (row) => (
+      <HStack gap="space-8">
         <Button
           size="xsmall"
           variant="secondary"
@@ -133,13 +124,24 @@ const columnDef_TEST_DATA: ColumnDefinitions<SWData> = [
         >
           Edit
         </Button>
-        <Button
-          size="xsmall"
-          variant="secondary"
-          data-color="neutral"
-          icon={<MenuElipsisVerticalIcon title="Meny" />}
-        />
-      </>
+        <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

@@ -7,12 +7,12 @@ interface DataTableBaseCellProps extends Omit<
   "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";
   /**
    * 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.
@@ -20,7 +20,7 @@ interface DataTableBaseCellProps extends Omit<
    */
   cellType?: "action";
   /**
-   * 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.
    */
@@ -28,7 +28,7 @@ interface DataTableBaseCellProps extends Omit<
   /**
    * 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 | string;
   /**
@@ -58,7 +58,7 @@ const DataTableBaseCell = forwardRef<
       children,
       as: Component,
       beforeContent,
-      textAlign = "left",
+      align = "left",
       cellType,
       preventRowClick,
       contentMaxWidth,
@@ -77,7 +77,7 @@ const DataTableBaseCell = forwardRef<
         ref={forwardedRef}
         className={cl("aksel-data-table__cell", className)}
         tabIndex={withKeyboardNav ? -1 : undefined}
-        data-align={textAlign}
+        data-align={align}
         data-cell-type={cellType || undefined}
         data-prevent-row-click={
           preventRowClick || cellType === "action" || undefined

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

@@ -6,21 +6,21 @@ import {
   SortDownIcon,
   SortUpIcon,
 } from "@navikt/aksel-icons";
+import { useDataGridContext } from "../../../data-grid/root/DataGridRoot.context";
 import { cl } from "../../../utils/helpers";
 import { useMergeRefs } from "../../../utils/hooks";
 import {
   DataTableBaseCell,
   type DataTableBaseCellProps,
 } from "../base-cell/DataTableBaseCell";
-import type { SortDirection } from "../root/DataTable.types";
 import { useDataTableContext } from "../root/DataTableRoot.context";
 import { type ResizeProps, useTableColumnResize } from "./useTableColumnResize";
 
 interface DataTableColumnHeaderProps extends DataTableBaseCellProps {
   /**
-   * Unique identifier for the column. Required for sortable columns to identify which column is being sorted.
+   * Unique identifier for the column. Used when sorting to identify which column is being sorted.
    */
-  id?: string;
+  id: string;
   /**
    * Accessible name of the column.
    */
@@ -29,18 +29,7 @@ interface DataTableColumnHeaderProps extends DataTableBaseCellProps {
    * Makes the column sortable by clicking on the header.
    * The entire header cell content becomes a clickable button when true.
    */
-  sortable?: boolean; // TODO: Consider merging sortable, sortDirection and onSortClick into a single "sort" object prop
-  /**
-   * Current sort direction. Only relevant when `sortable` is true.
-   * Uses values matching the `aria-sort` attribute directly. // TODO: What does this mean? (Can we just remove it?)
-   * @default "none"
-   */
-  sortDirection?: SortDirection; // TODO Not in use???
-  /**
-   * Called when the user clicks the header. Only relevant when `sortable` is true.
-   * The consumer is responsible for determining and setting the next sort state. // TODO: We don't use the term "consumer" in JSDoc anywhere else
-   */
-  onSortClick?: (event: React.MouseEvent<HTMLElement>) => void; // TODO Not in use???
+  sortable?: boolean;
   /**
    * Object with props related to column width and resizing. Summary:
    *
@@ -49,7 +38,7 @@ interface DataTableColumnHeaderProps extends DataTableBaseCellProps {
    * - `resizeMin?: number` - Minimum width of the column when resizing.
    * - `resizeMax?: number` - Maximum width of the column when resizing.
    * - `value?: number | string` - Controlled width of the column.
-   * - `default?: number | string` - Initial width of the column.
+   * - `defaultValue?: number | string` - Initial width of the column.
    * - `onChange?: (width: number) => void` - Called when the column width changes.
    *
    * See individual props for details and defaults.
@@ -57,7 +46,7 @@ interface DataTableColumnHeaderProps extends DataTableBaseCellProps {
   width?: ResizeProps;
 }
 
-const SORT_ICON: Record<SortDirection, React.ElementType> = {
+const SORT_ICON: Record<"asc" | "desc" | "none", React.ElementType> = {
   asc: SortUpIcon,
   desc: SortDownIcon,
   none: ArrowsUpDownIcon,
@@ -86,6 +75,7 @@ const DataTableColumnHeader = forwardRef<
     },
     forwardedRef,
   ) => {
+    const { isLoading } = useDataGridContext();
     const thRef = useRef<HTMLTableCellElement>(null);
     const mergedRef = useMergeRefs(forwardedRef, thRef);
     const { sortingState } = useDataTableContext();
@@ -106,6 +96,8 @@ const DataTableColumnHeader = forwardRef<
 
     const SortIcon = canSort ? SORT_ICON[sortDirection] : null;
 
+    const contentId = `th-content-${id.replace(/\s/g, "-")}`;
+
     return (
       <DataTableBaseCell
         as="th"
@@ -116,14 +108,18 @@ const DataTableColumnHeader = forwardRef<
         style={{ ...style, width: resizeResult.width }}
         aria-sort={canSort ? getAriaSort(sortDirection) : undefined}
         cellType={cellType}
+        aria-labelledby={contentId} // Avoids VO announcing "Endre bredde" when navigating horizontally in tbody
       >
         {canSort ? (
           <button
             type="button"
             className="aksel-data-table__th-sort-button"
             onClick={(event) => onSortClick(id, event)}
+            disabled={isLoading}
           >
-            <div className="aksel-data-table__th-content">{children}</div>
+            <div id={contentId} className="aksel-data-table__th-content">
+              {children}
+            </div>
             {SortIcon && (
               <SortIcon
                 aria-hidden
@@ -135,6 +131,7 @@ const DataTableColumnHeader = forwardRef<
           </button>
         ) : (
           <div
+            id={contentId}
             className={cl({
               "aksel-data-table__th-content": cellType !== "action",
             })}
@@ -164,7 +161,7 @@ const DataTableColumnHeader = forwardRef<
               typeof resizeResult.width === "number" &&
               resizeResult.isResizingWithKeyboard
                 ? resizeResult.width.toString()
-                : "" // Needs to be blank when not in keyboard resizing mode to avoid NVDA announcing the value as part of the column heading
+                : " " // Needs to be blank when not in keyboard resizing mode to avoid NVDA announcing the value as part of the column heading
             } // Need either this or aria-valuemax to get SR (at least NVDA) to announce the value
           >
             {resizeResult.isResizingWithKeyboard && (
@@ -185,7 +182,7 @@ const DataTableColumnHeader = forwardRef<
 );
 
 function getAriaSort(
-  sortDirection: SortDirection | undefined,
+  sortDirection: "asc" | "desc" | "none" | undefined,
 ): "ascending" | "descending" | "none" | undefined {
   if (sortDirection === "asc") return "ascending";
   if (sortDirection === "desc") return "descending";

package/src/data/table/column-header/useTableColumnResize.ts

@@ -55,7 +55,7 @@ type ResizeProps = {
    * **NB:** Percentage as initial width does not work well with resizing.
    * @default 140px
    */
-  default?: number | string;
+  defaultValue?: number | string;
   /**
    * Called when the column width changes.
    * @param width New width in pixels.
@@ -98,7 +98,7 @@ function useTableColumnResize({
   resizeMin = 40,
   resizeMax = Infinity,
   value,
-  default: defaultProp,
+  defaultValue,
   onChange,
   thRef,
   colSpan,
@@ -110,7 +110,7 @@ function useTableColumnResize({
 
   const [width, setWidth] = useControllableState({
     value,
-    defaultValue: defaultProp ?? (colSpan ?? 1) * 140,
+    defaultValue: defaultValue ?? (colSpan ?? 1) * 140,
     /**
      * TODO:
      * - Potential optimization: Only call when width as "stopped" changing, e.g. on mouse up or after a debounce when resizing with keyboard.
@@ -344,18 +344,18 @@ function getAutoColumnWidth(
     // Find needed width
     const cellContent = cell.querySelector(
       ".aksel-data-table__cell-content",
-    ) as HTMLElement;
-    range.selectNodeContents(cellContent);
-    const cellContentWidth = range.getBoundingClientRect().width;
-    const contentElStyle = window.getComputedStyle(cellContent);
-    const inlinePadding =
-      parseInt(contentElStyle.paddingLeft, 10) +
-      parseInt(contentElStyle.paddingRight, 10);
-    const marginLeft = parseInt(contentElStyle.marginLeft, 10); // We don't have right margin for now
-    const widthNeededForThisCell =
-      (cellContentWidth + inlinePadding + marginLeft) / cell.colSpan;
+    ) as HTMLElement | null;
+
+    if (!cellContent) {
+      continue;
+    }
+
+    cellContent.style.width = "fit-content";
+    const cellContentWidth = cellContent.scrollWidth;
+    cellContent.style.removeProperty("width");
+    const widthNeededForThisCell = (cellContentWidth + 1) / cell.colSpan;
     if (widthNeededForThisCell > newColumnWidth) {
-      newColumnWidth = widthNeededForThisCell;
+      newColumnWidth = Math.ceil(widthNeededForThisCell);
     }
   }
 

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

@@ -1,4 +1,4 @@
-import type { TableRowEntryId } from "../root/DataTable.types";
+import type { TableRowEntryId } from "../root/DataGridTable.types";
 
 type CollectTableRowEntriesArgs<T> = {
   items: T[];

package/src/data/table/helpers/selection/getMultipleSelectProps.ts

@@ -2,15 +2,16 @@ import type { ChangeEventHandler, SetStateAction } from "react";
 import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput";
 import { consoleWarning } from "../../../../utils/helpers/consoleWarning";
 import type { UseTableItemsReturn } from "../../hooks/useTableItems";
-import type { TableRowEntryId } from "../../root/DataTable.types";
-import type { SelectedKeysT, SelectionProps } from "./selection.types";
+import type { TableRowEntryId } from "../../root/DataGridTable.types";
+import type { SelectionProps } from "./selection.types";
 import { canSelectTableRow, mutateRowSelection } from "./selection.utils";
 
 type GetMultipleSelectPropsArgs<T> = {
   selectedKeysSet: Set<TableRowEntryId>;
-  selectedKeys: SelectedKeysT;
-  setSelectedKeys: (next: SetStateAction<SelectedKeysT>) => void;
+  selectedKeys: string[];
+  setSelectedKeys: (next: SetStateAction<string[]>) => void;
   tableItems: UseTableItemsReturn<T>;
+  isLoading?: boolean;
 } & Pick<SelectionProps<T>, "enableRowSelection">;
 
 function getMultipleSelectProps<T>({
@@ -19,6 +20,7 @@ function getMultipleSelectProps<T>({
   setSelectedKeys,
   enableRowSelection,
   tableItems,
+  isLoading,
 }: GetMultipleSelectPropsArgs<T>) {
   const selectableIdsSet: Set<TableRowEntryId> = new Set();
 
@@ -40,7 +42,7 @@ function getMultipleSelectProps<T>({
   const handleToggleRow = (key: TableRowEntryId, row: T) => {
     if (!row) {
       consoleWarning(
-        `Row data is undefined for key ${key}. This may cause issues with selection if enableRowSelection is used.`,
+        `DataGrid.Table: Row data is undefined for key ${key}. This may cause issues with selection if enableRowSelection is used.`,
       );
     }
 
@@ -62,6 +64,9 @@ function getMultipleSelectProps<T>({
   const toggleAllRowSelected: ChangeEventHandler<HTMLInputElement> = (
     event,
   ) => {
+    if (isLoading) {
+      return;
+    }
     if (event.target.checked) {
       const preserved = selectedKeys.filter((k) => !selectableIdsSet.has(k));
       setSelectedKeys([...preserved, ...selectableIdsSet]);
@@ -75,6 +80,7 @@ function getMultipleSelectProps<T>({
       checked: isAllSelected,
       indeterminate: !isAllSelected && someSelected,
       onChange: toggleAllRowSelected,
+      disabled: selectableIdsSet.size === 0 || isLoading,
     }),
     getRowCheckboxProps: (key: TableRowEntryId, row: T): CheckboxInputProps => {
       return {

package/src/data/table/helpers/selection/getSingleSelectProps.ts

@@ -1,12 +1,12 @@
 import type { RadioInputProps } from "../../../../form/radio/radio-input/RadioInput";
 import { consoleWarning } from "../../../../utils/helpers/consoleWarning";
-import type { TableRowEntryId } from "../../root/DataTable.types";
-import type { SelectedKeysT, SelectionProps } from "./selection.types";
+import type { TableRowEntryId } from "../../root/DataGridTable.types";
+import type { SelectionProps } from "./selection.types";
 import { canSelectTableRow } from "./selection.utils";
 
 type GetSingleSelectPropsArgs<T> = {
   selectedKeysSet: Set<TableRowEntryId>;
-  setSelectedKeys: (keys: SelectedKeysT) => void;
+  setSelectedKeys: (keys: string[]) => void;
   name: string;
 } & Pick<SelectionProps<T>, "enableRowSelection">;
 
@@ -19,7 +19,7 @@ function getSingleSelectProps<T>({
   const handleSelectionChange = (key: TableRowEntryId, row: T) => {
     if (!row) {
       consoleWarning(
-        `Row data is undefined for key ${key}. This may cause issues with selection if enableRowSelection is used.`,
+        `DataGrid.Table: Row data is undefined for key ${key}. This may cause issues with selection if enableRowSelection is used.`,
       );
     }
     if (!canSelectTableRow(enableRowSelection, { row, id: key })) {

package/src/data/table/helpers/selection/selection.types.ts

@@ -1,11 +1,8 @@
 import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput";
 import type { RadioInputProps } from "../../../../form/radio/radio-input/RadioInput";
-import type { TableRowEntryId } from "../../root/DataTable.types";
 
-type SelectedKeysT = TableRowEntryId[];
-
-// TODO: Remove `any` if possible
-type SelectionProps<T = any> = {
+// TODO: Remove `= unknown` if possible
+type SelectionProps<T = unknown> = {
   /**
    * Enables selection of rows.
    *
@@ -16,57 +13,51 @@ type SelectionProps<T = any> = {
    *
    * @default "none"
    */
-  selectionMode: "none" | "single" | "multiple";
+  mode: "none" | "single" | "multiple";
   /**
-   * Controlled selected keys. Should be used in conjunction with `onSelectionChange`.
+   * Controlled selected keys. Should be used in conjunction with `onSelectedRowIdsChange`.
    */
-  selectedKeys?: SelectedKeysT;
+  selectedRowIds?: string[];
   /**
    * Default selected keys when using uncontrolled selection. Should not be used together with `selectedKeys`.
    */
-  defaultSelectedKeys?: SelectedKeysT;
+  defaultSelectedRowIds?: string[];
   /**
    * Callback with array of selected keys.
    */
-  onSelectionChange?: (keys: SelectedKeysT) => void;
+  onSelectedRowIdsChange?: (ids: string[]) => void;
   /**
    * Callback to determine if a row should be enabled for selection.
    *
-   *
    * If set to a boolean, it will enable selection for all rows when true, and disable selection for all rows when false.
    */
   enableRowSelection?:
-    | (({ row, id }: { row: T; id: TableRowEntryId }) => boolean)
+    | (({ row, id }: { row: T; id: string }) => boolean)
     | boolean;
-  /**
-   * Determines if selection is triggered by clicking the row or the selection control (checkbox/radio).
-   * @default "row"
-   */
-  selectionTrigger?: "row" | "control";
 };
 
 type NoneSelection = {
-  selectionMode: "none";
-  selectedKeys: SelectedKeysT;
+  mode: "none";
+  selectedKeys: string[];
 };
 
 type SingleSelection = {
-  selectionMode: "single";
-  selectedKeys: SelectedKeysT;
-  getRowRadioProps: (key: TableRowEntryId, row: any) => RadioInputProps;
-  toggleSelection: (key: TableRowEntryId, row: any) => void;
+  mode: "single";
+  selectedKeys: string[];
+  getRowRadioProps: (key: string, row: any) => RadioInputProps;
+  toggleSelection: (key: string, row: any) => void;
 };
 
 type MultipleSelection = {
-  selectionMode: "multiple";
-  selectedKeys: SelectedKeysT;
+  mode: "multiple";
+  selectedKeys: string[];
   getTheadCheckboxProps: () => CheckboxInputProps;
-  getRowCheckboxProps: (key: TableRowEntryId, row: any) => CheckboxInputProps;
-  toggleSelection: (key: TableRowEntryId, row: any) => void;
+  getRowCheckboxProps: (key: string, row: any) => CheckboxInputProps;
+  toggleSelection: (key: string, row: any) => void;
 };
 
 type TableSelectionBase = {
-  isRowSelected: (rowId: TableRowEntryId) => boolean;
+  isRowSelected: (rowId: string) => boolean;
 };
 
 type TableSelection = TableSelectionBase &
@@ -75,7 +66,6 @@ type TableSelection = TableSelectionBase &
 export type {
   MultipleSelection,
   NoneSelection,
-  SelectedKeysT,
   SelectionProps,
   SingleSelection,
   TableSelection,

package/src/data/table/helpers/selection/selection.utils.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "vitest";
-import type { TableRowEntryId } from "../../root/DataTable.types";
+import type { TableRowEntryId } from "../../root/DataGridTable.types";
 import type { ItemDetail } from "../collectTableRowEntries";
 import { mutateRowSelection } from "./selection.utils";
 

package/src/data/table/helpers/selection/selection.utils.ts

@@ -1,4 +1,4 @@
-import type { TableRowEntryId } from "../../root/DataTable.types";
+import type { TableRowEntryId } from "../../root/DataGridTable.types";
 import type { ItemDetail } from "../collectTableRowEntries";
 import type { SelectionProps } from "./selection.types";
 

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

@@ -1,6 +1,6 @@
 import { renderHook } from "@testing-library/react";
 import { describe, expect, test } from "vitest";
-import type { TableRowEntryId } from "../../root/DataTable.types";
+import type { TableRowEntryId } from "../../root/DataGridTable.types";
 import { useTableItems } from "../useTableItems";
 
 type TestRow = {

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

@@ -2,13 +2,13 @@ import { useMemo } from "react";
 import type {
   ColumnDefinition,
   ColumnDefinitions,
-} from "../root/DataTable.types";
+} from "../root/DataGridTable.types";
 import { ACTION_CELL_WIDTH } from "../tr/DataTableTr";
 
 type UseColumnOptions = {
   stickyColumns?: {
-    start?: "1";
-    end?: "1";
+    start?: 1;
+    end?: 1;
   };
   hasSelection: boolean;
   hasDetailsPanel: boolean;
@@ -39,7 +39,7 @@ function useColumnOptions<T>(
 ): UseColumnOptionsResult<T> {
   const { stickyColumns, hasSelection, hasDetailsPanel, layout } = options;
 
-  const hasStickyStart = stickyColumns?.start === "1";
+  const hasStickyStart = stickyColumns?.start === 1;
 
   const stickyExpansion = hasStickyStart && hasDetailsPanel;
   const stickySelection = hasStickyStart && hasSelection;
@@ -53,7 +53,7 @@ function useColumnOptions<T>(
     return columnDefinitions.map((colDef, index) => {
       const isFirstSticky = hasStickyStart && index === 0;
       const isLastSticky =
-        stickyColumns?.end === "1" && index === columnDefinitions.length - 1;
+        stickyColumns?.end === 1 && index === columnDefinitions.length - 1;
 
       return {
         isSticky: isFirstSticky