From c40fb01d9200283c5d69f3295e65fccc56a9a76f Mon Sep 17 00:00:00 2001 From: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com> Date: Thu, 20 Mar 2025 11:52:07 +0100 Subject: [PATCH] fix(ui): Disable select cells if the row cannot be selected (#11442) --- .changeset/pretty-flowers-float.md | 5 ++ .../components/data-table-select-cell.tsx | 20 ++++++-- .../blocks/data-table/data-table.stories.tsx | 47 ++++++++++--------- .../src/blocks/data-table/use-data-table.tsx | 27 ++++++----- 4 files changed, 61 insertions(+), 38 deletions(-) create mode 100644 .changeset/pretty-flowers-float.md diff --git a/.changeset/pretty-flowers-float.md b/.changeset/pretty-flowers-float.md new file mode 100644 index 0000000000..d799c110b1 --- /dev/null +++ b/.changeset/pretty-flowers-float.md @@ -0,0 +1,5 @@ +--- +"@medusajs/ui": patch +--- + +fix(ui): Disable select cells if the row cannot be selected diff --git a/packages/design-system/ui/src/blocks/data-table/components/data-table-select-cell.tsx b/packages/design-system/ui/src/blocks/data-table/components/data-table-select-cell.tsx index 63816806b7..fd93c048fc 100644 --- a/packages/design-system/ui/src/blocks/data-table/components/data-table-select-cell.tsx +++ b/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 { ctx: DataTableCellContext } -const DataTableSelectCell = (props: DataTableSelectCellProps) => { +const DataTableSelectCell = ( + props: DataTableSelectCellProps +) => { const checked = props.ctx.row.getIsSelected() const onChange = props.ctx.row.getToggleSelectedHandler() + const disabled = !props.ctx.row.getCanSelect() return ( e.stopPropagation()} checked={checked} onCheckedChange={onChange} + disabled={disabled} /> ) } @@ -26,7 +33,9 @@ interface DataTableSelectHeaderProps { ctx: DataTableHeaderContext } -const DataTableSelectHeader = (props: DataTableSelectHeaderProps) => { +const DataTableSelectHeader = ( + props: DataTableSelectHeaderProps +) => { const checked = props.ctx.table.getIsSomePageRowsSelected() ? "indeterminate" : props.ctx.table.getIsAllPageRowsSelected() @@ -34,16 +43,19 @@ const DataTableSelectHeader = (props: DataTableSelectHeaderProps) const onChange = (checked: CheckboxCheckedState) => { props.ctx.table.toggleAllPageRowsSelected(!!checked) } + const disabled = !props.ctx.table + .getRowModel() + .rows.some((row) => row.getCanSelect()) return ( e.stopPropagation()} checked={checked} onCheckedChange={onChange} + disabled={disabled} /> ) } export { DataTableSelectCell, DataTableSelectHeader } export type { DataTableSelectCellProps, DataTableSelectHeaderProps } - diff --git a/packages/design-system/ui/src/blocks/data-table/data-table.stories.tsx b/packages/design-system/ui/src/blocks/data-table/data-table.stories.tsx index f721d88db3..b50e69f46e 100644 --- a/packages/design-system/ui/src/blocks/data-table/data-table.stories.tsx +++ b/packages/design-system/ui/src/blocks/data-table/data-table.stories.tsx @@ -247,29 +247,29 @@ const columns = [ const actions = [ [ { - label: "Edit", - onClick: () => {}, - icon: , - }, - { - label: "Edit", - onClick: () => {}, - icon: , - }, - { - label: "Edit", - onClick: () => {}, - icon: , - }, - ], - [ - { - label: "Delete", - onClick: () => {}, - icon: , - }, - ], - ] + label: "Edit", + onClick: () => {}, + icon: , + }, + { + label: "Edit", + onClick: () => {}, + icon: , + }, + { + label: "Edit", + onClick: () => {}, + icon: , + }, + ], + [ + { + label: "Delete", + onClick: () => {}, + icon: , + }, + ], + ] return actions }, @@ -419,6 +419,7 @@ const KitchenSinkDemo = () => { rowSelection: { state: rowSelection, onRowSelectionChange: setRowSelection, + enableRowSelection: (row) => Number(row.original.id) > 4, }, sorting: { state: sorting, diff --git a/packages/design-system/ui/src/blocks/data-table/use-data-table.tsx b/packages/design-system/ui/src/blocks/data-table/use-data-table.tsx index 1b481d13fc..487396f684 100644 --- a/packages/design-system/ui/src/blocks/data-table/use-data-table.tsx +++ b/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 - extends Pick, "data" | "getRowId"> { + extends Pick, "data" | "getRowId"> { /** * The columns to use for the table. */ - columns: DataTableColumnDef[]; + columns: DataTableColumnDef[] /** * The filters which the user can apply to the table. */ @@ -57,7 +57,10 @@ interface DataTableOptions rowSelection?: { state: DataTableRowSelectionState onRowSelectionChange: (state: DataTableRowSelectionState) => void - enableRowSelection?: boolean | ((row: DataTableRow) => boolean) | undefined + enableRowSelection?: + | boolean + | ((row: DataTableRow) => boolean) + | undefined } /** * The state and callback for the sorting. @@ -172,7 +175,11 @@ const useDataTable = ({ 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 = ({ const rowSelectionStateHandler = React.useCallback(() => { return onRowSelectionChange ? (updaterOrValue: Updater) => { - autoResetPageIndexHandler()?.() onRowSelectionChangeTransformer( onRowSelectionChange, rowSelectionState @@ -531,6 +537,5 @@ function onPaginationChangeTransformer( } } -export { useDataTable }; -export type { DataTableOptions, UseDataTableReturn }; - +export { useDataTable } +export type { DataTableOptions, UseDataTableReturn }