fix(ui): Disable select cells if the row cannot be selected (#11442)

.changeset/pretty-flowers-float.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/ui": patch
+---
+
+fix(ui): Disable select cells if the row cannot be selected

packages/design-system/ui/src/blocks/data-table/components/data-table-select-cell.tsx

@@ -1,6 +1,9 @@
 "use client"
 
-import type { DataTableCellContext, DataTableHeaderContext } from "@/blocks/data-table/types"
+import type {
+  DataTableCellContext,
+  DataTableHeaderContext,
+} from "@/blocks/data-table/types"
 import { Checkbox, CheckboxCheckedState } from "@/components/checkbox"
 import * as React from "react"
 
@@ -8,15 +11,19 @@ interface DataTableSelectCellProps<TData> {
   ctx: DataTableCellContext<TData, unknown>
 }
 
-const DataTableSelectCell = <TData,>(props: DataTableSelectCellProps<TData>) => {
+const DataTableSelectCell = <TData,>(
+  props: DataTableSelectCellProps<TData>
+) => {
   const checked = props.ctx.row.getIsSelected()
   const onChange = props.ctx.row.getToggleSelectedHandler()
+  const disabled = !props.ctx.row.getCanSelect()
 
   return (
     <Checkbox
       onClick={(e) => e.stopPropagation()}
       checked={checked}
       onCheckedChange={onChange}
+      disabled={disabled}
     />
   )
 }
@@ -26,7 +33,9 @@ interface DataTableSelectHeaderProps<TData> {
   ctx: DataTableHeaderContext<TData, unknown>
 }
 
-const DataTableSelectHeader = <TData,>(props: DataTableSelectHeaderProps<TData>) => {
+const DataTableSelectHeader = <TData,>(
+  props: DataTableSelectHeaderProps<TData>
+) => {
   const checked = props.ctx.table.getIsSomePageRowsSelected()
     ? "indeterminate"
     : props.ctx.table.getIsAllPageRowsSelected()
@@ -34,16 +43,19 @@ const DataTableSelectHeader = <TData,>(props: DataTableSelectHeaderProps<TData>)
   const onChange = (checked: CheckboxCheckedState) => {
     props.ctx.table.toggleAllPageRowsSelected(!!checked)
   }
+  const disabled = !props.ctx.table
+    .getRowModel()
+    .rows.some((row) => row.getCanSelect())
 
   return (
     <Checkbox
       onClick={(e) => e.stopPropagation()}
       checked={checked}
       onCheckedChange={onChange}
+      disabled={disabled}
     />
   )
 }
 
 export { DataTableSelectCell, DataTableSelectHeader }
 export type { DataTableSelectCellProps, DataTableSelectHeaderProps }
-

packages/design-system/ui/src/blocks/data-table/data-table.stories.tsx

@@ -247,29 +247,29 @@ const columns = [
       const actions = [
         [
           {
-          label: "Edit",
-          onClick: () => {},
-          icon: <PencilSquare />,
-        },
-        {
-          label: "Edit",
-          onClick: () => {},
-          icon: <PencilSquare />,
-        },
-        {
-          label: "Edit",
-          onClick: () => {},
-          icon: <PencilSquare />,
-        },
-      ],
-      [
-        {
-          label: "Delete",
-          onClick: () => {},
-          icon: <Trash />,
-        },
-      ],
-    ]
+            label: "Edit",
+            onClick: () => {},
+            icon: <PencilSquare />,
+          },
+          {
+            label: "Edit",
+            onClick: () => {},
+            icon: <PencilSquare />,
+          },
+          {
+            label: "Edit",
+            onClick: () => {},
+            icon: <PencilSquare />,
+          },
+        ],
+        [
+          {
+            label: "Delete",
+            onClick: () => {},
+            icon: <Trash />,
+          },
+        ],
+      ]
 
       return actions
     },
@@ -419,6 +419,7 @@ const KitchenSinkDemo = () => {
     rowSelection: {
       state: rowSelection,
       onRowSelectionChange: setRowSelection,
+      enableRowSelection: (row) => Number(row.original.id) > 4,
     },
     sorting: {
       state: sorting,

packages/design-system/ui/src/blocks/data-table/use-data-table.tsx

@@ -9,8 +9,8 @@ import {
   type TableOptions,
   type Updater,
   useReactTable,
-} from "@tanstack/react-table";
-import * as React from "react";
+} from "@tanstack/react-table"
+import * as React from "react"
 import {
   DataTableColumnDef,
   DataTableColumnFilter,
@@ -24,14 +24,14 @@ import {
   DataTableRow,
   DataTableRowSelectionState,
   DataTableSortingState,
-} from "./types";
+} from "./types"
 
 interface DataTableOptions<TData>
-  extends Pick<TableOptions<TData>, "data"  | "getRowId"> {
+  extends Pick<TableOptions<TData>, "data" | "getRowId"> {
   /**
    * The columns to use for the table.
    */
-  columns: DataTableColumnDef<TData, any>[];
+  columns: DataTableColumnDef<TData, any>[]
   /**
    * The filters which the user can apply to the table.
    */
@@ -57,7 +57,10 @@ interface DataTableOptions<TData>
   rowSelection?: {
     state: DataTableRowSelectionState
     onRowSelectionChange: (state: DataTableRowSelectionState) => void
-    enableRowSelection?: boolean | ((row: DataTableRow<TData>) => boolean) | undefined
+    enableRowSelection?:
+      | boolean
+      | ((row: DataTableRow<TData>) => boolean)
+      | undefined
   }
   /**
    * The state and callback for the sorting.
@@ -172,7 +175,11 @@ const useDataTable = <TData,>({
   const { state: sortingState, onSortingChange } = sorting ?? {}
   const { state: filteringState, onFilteringChange } = filtering ?? {}
   const { state: paginationState, onPaginationChange } = pagination ?? {}
-  const { state: rowSelectionState, onRowSelectionChange, enableRowSelection } = rowSelection ?? {}
+  const {
+    state: rowSelectionState,
+    onRowSelectionChange,
+    enableRowSelection,
+  } = rowSelection ?? {}
 
   const autoResetPageIndexHandler = React.useCallback(() => {
     return autoResetPageIndex
@@ -197,7 +204,6 @@ const useDataTable = <TData,>({
   const rowSelectionStateHandler = React.useCallback(() => {
     return onRowSelectionChange
       ? (updaterOrValue: Updater<RowSelectionState>) => {
-          autoResetPageIndexHandler()?.()
           onRowSelectionChangeTransformer(
             onRowSelectionChange,
             rowSelectionState
@@ -531,6 +537,5 @@ function onPaginationChangeTransformer(
   }
 }
 
-export { useDataTable };
-export type { DataTableOptions, UseDataTableReturn };
-
+export { useDataTable }
+export type { DataTableOptions, UseDataTableReturn }