@carto/ps-react-ui 4.3.7 → 4.3.9

package/src/widgets/actions/fullscreen/types.ts

@@ -1,4 +1,8 @@
-import type { DialogContentProps, IconButtonProps } from '@mui/material'
+import type {
+  DialogContentProps,
+  IconButtonProps,
+  DialogProps,
+} from '@mui/material'
 import type { ReactNode } from 'react'
 import type { BaseWidgetState } from '../../../widgets/stores/types'
 
@@ -22,6 +26,7 @@ export interface FullScreenProps {
   }
   children: ReactNode
   DialogContentProps?: DialogContentProps
+  DialogProps?: DialogProps
   IconButtonProps?: IconButtonProps
   Icon?: ReactNode
 }

package/src/widgets/actions/index.ts

@@ -24,7 +24,7 @@ export type {
 
 /* Stack Toggle Widget */
 export { StackToggle, STACK_TOGGLE_TOOL_ID } from './stack-toggle/stack-toggle'
-export type { StackToggleProps } from './stack-toggle/types'
+export type { StackToggleProps, StackToggleState } from './stack-toggle/types'
 
 /* Searcher Toggle Widget */
 export { Searcher, SEARCHER_TOOL_ID } from './searcher/searcher'
@@ -37,7 +37,10 @@ export type {
 } from './searcher/types'
 
 /* Change Column Widget */
-export { ChangeColumn } from './change-column/change-column'
+export {
+  ChangeColumn,
+  CHANGE_COLUMN_TOOL_ID,
+} from './change-column/change-column'
 export type { ChangeColumnProps } from './change-column/types'
 
 /* Lock Selection Widget */
@@ -45,4 +48,7 @@ export {
   LockSelection,
   LOCK_SELECTION_TOOL_ID,
 } from './lock-selection/lock-selection'
-export type { LockSelectionProps } from './lock-selection/types'
+export type {
+  LockSelectionProps,
+  LockSelectionState,
+} from './lock-selection/types'

package/src/widgets/actions/lock-selection/lock-selection.tsx

@@ -1,7 +1,7 @@
 import { IconButton } from '@mui/material'
 import { CheckBoxOutlined } from '@mui/icons-material'
-import { useCallback, useEffect } from 'react'
-import type { LockSelectionProps } from './types'
+import { useCallback, useEffect, useMemo } from 'react'
+import type { LockSelectionProps, LockSelectionState } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
 import { useWidgetStore } from '../../stores/widget-store'
@@ -34,60 +34,61 @@ export function LockSelection({
   Icon,
   IconButtonProps,
 }: LockSelectionProps) {
-  const getWidget = useWidgetStore((state) => state.getWidget)
+  const setWidget = useWidgetStore((state) => state.setWidget)
   const registerTool = useWidgetStore((state) => state.registerTool)
   const unregisterTool = useWidgetStore((state) => state.unregisterTool)
   const setToolEnabled = useWidgetStore((state) => state.setToolEnabled)
   const updateToolConfig = useWidgetStore((state) => state.updateToolConfig)
 
-  const lockTool = useWidgetStore(
-    useShallow((state) => {
-      const tools = state.getWidget(id)?.registeredTools ?? []
-      return tools.find((tool) => tool.id === LOCK_SELECTION_TOOL_ID)
-    }),
+  const storeIsLocked = useWidgetStore(
+    useShallow((state) => state.getWidget<LockSelectionState>(id)?.isLocked),
   )
 
-  const isLocked = lockTool?.enabled ?? false
+  const isLocked = storeIsLocked ?? false
+  const lockedItems = useMemo(
+    () => (isLocked ? selectedItems : []),
+    [isLocked, selectedItems],
+  )
 
   // Register tool on mount
   useEffect(() => {
-    const existingTool = getWidget(id)?.registeredTools?.find(
-      (tool) => tool.id === LOCK_SELECTION_TOOL_ID,
-    )
-
-    const initialEnabled = existingTool?.enabled ?? false
-    const initialLockedItems =
-      (existingTool?.config?.lockedItems as string[]) ?? []
-
     registerTool(id, {
       id: LOCK_SELECTION_TOOL_ID,
       order,
-      enabled: initialEnabled,
+      enabled: isLocked,
       fn: (data, config) => {
         const items = (config?.lockedItems as string[]) || []
         if (items.length === 0) return data
 
         return filterDataByLockedItems(data as EchartWidgetData, items)
       },
-      config: { lockedItems: initialLockedItems },
+      config: { lockedItems },
     })
 
     return () => unregisterTool(id, LOCK_SELECTION_TOOL_ID)
-  }, [id, order, registerTool, unregisterTool, getWidget])
+  }, [id, order, registerTool, unregisterTool, isLocked, lockedItems])
+
+  // Update enabled flag and config when they change
+  useEffect(() => {
+    setToolEnabled(id, LOCK_SELECTION_TOOL_ID, isLocked)
+    updateToolConfig(id, LOCK_SELECTION_TOOL_ID, { lockedItems })
+  }, [id, isLocked, lockedItems, setToolEnabled, updateToolConfig])
 
   const handleToggle = useCallback(() => {
     if (isLocked) {
       // Unlock: clear locked items and disable tool
-      setToolEnabled(id, LOCK_SELECTION_TOOL_ID, false)
-      updateToolConfig(id, LOCK_SELECTION_TOOL_ID, { lockedItems: [] })
+      setWidget(id, {
+        isLocked: false,
+        lockedItems: [],
+      })
     } else {
       // Lock: save selected items and enable tool
-      setToolEnabled(id, LOCK_SELECTION_TOOL_ID, true)
-      updateToolConfig(id, LOCK_SELECTION_TOOL_ID, {
+      setWidget(id, {
+        isLocked: true,
         lockedItems: selectedItems,
       })
     }
-  }, [id, isLocked, selectedItems, setToolEnabled, updateToolConfig])
+  }, [id, isLocked, selectedItems, setWidget])
 
   // Don't render if no selections
   if (selectedItems.length === 0) {

package/src/widgets/actions/lock-selection/types.ts

@@ -1,5 +1,14 @@
 import type { IconButtonProps } from '@mui/material'
 import type { ReactNode } from 'react'
+import type { BaseWidgetState } from '../../stores/types'
+
+/**
+ * Widget state extension for lock selection functionality.
+ * Extends the base widget state with lock-specific properties.
+ */
+export type LockSelectionState<T = object> = BaseWidgetState<
+  T & LockSelectionStateProps
+>
 
 export interface LockSelectionProps {
   /** Widget ID to store lock selection state */
@@ -22,3 +31,11 @@ export interface LockSelectionProps {
   /** Custom icon to display */
   Icon?: ReactNode
 }
+
+/**
+ * Lock selection specific state properties.
+ */
+export interface LockSelectionStateProps {
+  /** Whether the selection is currently locked */
+  isLocked?: boolean
+}

package/src/widgets/actions/relative-data/relative-data.tsx

@@ -2,12 +2,11 @@ import { IconButton } from '@mui/material'
 import { PercentOutlined } from '@mui/icons-material'
 import { useCallback, useEffect, useRef } from 'react'
 import { useWidgetStore } from '../../stores/widget-store'
-import type { RelativeDataProps } from './types'
+import type { RelativeDataProps, RelativeDataState } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
 import { calculateTotal, toRelativeData } from './utils'
 import type { EchartWidgetData } from '../../../widgets/echart'
-import { useShallow } from 'zustand/shallow'
 
 export const RELATIVE_DATA_TOOL_ID = 'relative-data'
 
@@ -44,27 +43,26 @@ export function RelativeData({
   const unregisterTool = useWidgetStore((state) => state.unregisterTool)
   const setToolEnabled = useWidgetStore((state) => state.setToolEnabled)
 
-  const relativeTool = useWidgetStore(
-    useShallow((state) => {
-      const tools = state.getWidget(id)?.registeredTools ?? []
-      return tools.find((tool) => tool.id === RELATIVE_DATA_TOOL_ID)
-    }),
+  const storeIsRelative = useWidgetStore(
+    (state) => state.getWidget<RelativeDataState>(id)?.isRelative,
   )
 
-  const isRelative = relativeTool?.enabled ?? defaultIsRelative
+  const isRelative = storeIsRelative ?? defaultIsRelative
 
-  // Register tool on mount
+  // Initialize store with default value on mount
   useEffect(() => {
-    const existingTool = getWidget(id)?.registeredTools?.find(
-      (tool) => tool.id === RELATIVE_DATA_TOOL_ID,
-    )
-
-    const initialEnabled = existingTool?.enabled ?? defaultIsRelative
+    const currentValue = getWidget<RelativeDataState>(id)?.isRelative
+    if (currentValue === undefined) {
+      setWidget(id, { isRelative: defaultIsRelative })
+    }
+  }, [defaultIsRelative, getWidget, id, setWidget])
 
+  // Register tool on mount
+  useEffect(() => {
     registerTool(id, {
       id: RELATIVE_DATA_TOOL_ID,
       order,
-      enabled: initialEnabled,
+      enabled: isRelative,
       fn: (data) => {
         const echartData = data as EchartWidgetData
         const total = calculateTotal(echartData)
@@ -73,7 +71,12 @@ export function RelativeData({
     })
 
     return () => unregisterTool(id, RELATIVE_DATA_TOOL_ID)
-  }, [id, order, registerTool, unregisterTool, defaultIsRelative, getWidget])
+  }, [id, order, registerTool, unregisterTool, isRelative])
+
+  // Update enabled flag when toggle changes
+  useEffect(() => {
+    setToolEnabled(id, RELATIVE_DATA_TOOL_ID, isRelative)
+  }, [id, isRelative, setToolEnabled])
 
   const handleToggle = useCallback(() => {
     const newIsRelative = !isRelative
@@ -93,8 +96,8 @@ export function RelativeData({
       max = 100
     }
 
-    setToolEnabled(id, RELATIVE_DATA_TOOL_ID, newIsRelative)
     setWidget(id, {
+      isRelative: newIsRelative,
       max,
       formatter: newIsRelative
         ? (value: number) => {
@@ -107,7 +110,7 @@ export function RelativeData({
           }
         : originalFormatter.current,
     })
-  }, [isRelative, setWidget, setToolEnabled, id, getWidget])
+  }, [isRelative, setWidget, id, getWidget])
 
   const tooltipLabel = isRelative
     ? (labels?.absolute ?? 'Show absolute values')

package/src/widgets/actions/relative-data/types.ts

@@ -1,5 +1,6 @@
 import type { IconButtonProps } from '@mui/material'
 import type { ReactNode } from 'react'
+import type { BaseWidgetState } from '../../../widgets/stores'
 
 export interface RelativeDataProps {
   /** Widget ID to update data in the widget store */
@@ -22,3 +23,9 @@ export interface RelativeDataProps {
   /** Custom icon to display */
   Icon?: ReactNode
 }
+
+export type RelativeDataState<T = unknown> = BaseWidgetState<
+  T & {
+    isRelative?: boolean
+  }
+>

package/src/widgets/actions/searcher/searcher.tsx

@@ -1,6 +1,6 @@
 import { TextField, InputAdornment, IconButton } from '@mui/material'
 import { ClearOutlined, SearchOutlined } from '@mui/icons-material'
-import { useEffect, useRef, useCallback, useState } from 'react'
+import { useEffect, useRef, useCallback } from 'react'
 import { useWidgetStore } from '../../stores/widget-store'
 import type { SearcherProps, SearcherFilterFn, SearcherState } from './types'
 import type { EchartWidgetData } from '../../echart/types'
@@ -40,33 +40,29 @@ export function Searcher({
   const inputRef = useRef<HTMLInputElement>(null)
   const debounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  // Read enabled state from widget store (set by SearcherToggle)
+  // Read enabled state and search text from widget store
   const widgetState = useWidgetStore((state) =>
     state.getWidget<SearcherState>(id),
   )
   const enabled = widgetState?.isSearchEnabled ?? false
+  const searchText = widgetState?.searchText ?? ''
   const prevEnabledRef = useRef(enabled)
 
-  const getWidget = useWidgetStore((state) => state.getWidget)
-
-  // Local state for immediate input value — restore from tool config on remount
-  const [searchTextLocal, setSearchTextLocal] = useState(() => {
-    const existingTool = getWidget(id)?.registeredTools?.find(
-      (tool) => tool.id === SEARCHER_TOOL_ID,
-    )
-    return (existingTool?.config?.searchText as string) ?? ''
-  })
-
-  // When disabled, display empty; when enabled, use local state
-  const searchText = enabled ? searchTextLocal : ''
-
   const filter = filterFn ?? defaultFilterFn
 
+  const setWidget = useWidgetStore((state) => state.setWidget)
   const registerTool = useWidgetStore((state) => state.registerTool)
   const unregisterTool = useWidgetStore((state) => state.unregisterTool)
   const setToolEnabled = useWidgetStore((state) => state.setToolEnabled)
   const updateToolConfig = useWidgetStore((state) => state.updateToolConfig)
 
+  const setSearchText = useCallback(
+    (text: string) => {
+      setWidget(id, { searchText: text })
+    },
+    [id, setWidget],
+  )
+
   // Register tool on mount
   useEffect(() => {
     registerTool(id, {
@@ -82,17 +78,12 @@ export function Searcher({
         // Return result directly (pipeline will handle Promise)
         return result
       },
-      config: {
-        searchText:
-          (getWidget(id)?.registeredTools?.find(
-            (tool) => tool.id === SEARCHER_TOOL_ID,
-          )?.config?.searchText as string) ?? '',
-      },
+      config: { searchText },
       disables: [LOCK_SELECTION_TOOL_ID],
     })
 
     return () => unregisterTool(id, SEARCHER_TOOL_ID)
-  }, [id, order, filter, registerTool, unregisterTool, enabled, getWidget])
+  }, [id, order, filter, registerTool, unregisterTool, enabled, searchText])
 
   // Update enabled flag when it changes
   useEffect(() => {
@@ -112,24 +103,15 @@ export function Searcher({
     [id, updateToolConfig, debounceDelay],
   )
 
-  // Handle enabled state transitions during render (React setState-during-render pattern)
-  if (enabled !== prevEnabledRef.current) {
-    if (enabled) {
-      // Transition from disabled to enabled - reset local state
-      setSearchTextLocal('')
-    }
-    prevEnabledRef.current = enabled
-  }
-
   // Auto-focus when enabled becomes true
   useEffect(() => {
-    if (enabled && inputRef.current) {
+    // Transition from disabled to enabled - focus input
+    if (enabled && !prevEnabledRef.current && inputRef.current) {
       inputRef.current.focus()
     }
-    if (!enabled) {
-      updateToolConfig(id, SEARCHER_TOOL_ID, { searchText: '' })
-    }
-  }, [enabled, id, updateToolConfig])
+
+    prevEnabledRef.current = enabled
+  }, [enabled])
 
   // Cleanup debounce timeout on unmount
   useEffect(() => {
@@ -143,19 +125,19 @@ export function Searcher({
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const newValue = event.target.value
-      setSearchTextLocal(newValue)
+      setSearchText(newValue)
       debouncedUpdateConfig(newValue)
     },
-    [debouncedUpdateConfig],
+    [debouncedUpdateConfig, setSearchText],
   )
 
   const handleClear = useCallback(() => {
-    setSearchTextLocal('')
+    setSearchText('')
     updateToolConfig(id, SEARCHER_TOOL_ID, { searchText: '' })
     if (inputRef.current) {
       inputRef.current.focus()
     }
-  }, [id, updateToolConfig])
+  }, [id, setSearchText, updateToolConfig])
 
   if (!enabled) {
     return null

package/src/widgets/actions/searcher/types.ts

@@ -19,6 +19,8 @@ export type SearcherFilterFn = (
 export interface SearcherStateProps {
   /** Whether search is currently enabled */
   isSearchEnabled?: boolean
+  /** Current search text */
+  searchText?: string
 }
 
 /**

package/src/widgets/actions/stack-toggle/stack-toggle.tsx

@@ -1,7 +1,7 @@
 import { IconButton } from '@mui/material'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useWidgetStore } from '../../stores/widget-store'
-import type { StackToggleProps } from './types'
+import type { StackToggleProps, StackToggleState } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
 import { GroupedBarChartIcon } from './grouped-bar-chart-icon'
@@ -34,17 +34,14 @@ export function StackToggle({
   Icon,
   IconButtonProps,
 }: StackToggleProps) {
-  const getWidget = useWidgetStore((state) => state.getWidget)
+  const setWidget = useWidgetStore((state) => state.setWidget)
   const registerTool = useWidgetStore((state) => state.registerTool)
   const unregisterTool = useWidgetStore((state) => state.unregisterTool)
   const setToolEnabled = useWidgetStore((state) => state.setToolEnabled)
   const updateToolConfig = useWidgetStore((state) => state.updateToolConfig)
 
-  const stackTool = useWidgetStore(
-    useShallow((state) => {
-      const tools = state.getWidget(id)?.registeredTools ?? []
-      return tools.find((tool) => tool.id === STACK_TOGGLE_TOOL_ID)
-    }),
+  const storeIsStacked = useWidgetStore(
+    useShallow((state) => state.getWidget<StackToggleState>(id)?.isStacked),
   )
 
   const option = useWidgetStore(
@@ -64,25 +61,15 @@ export function StackToggle({
 
   // If series already has stack defined, default to stacked=true
   const effectiveDefaultIsStacked = hasStackInSeries || defaultIsStacked
-  const isStacked =
-    (stackTool?.config?.stacked as boolean | undefined) ??
-    effectiveDefaultIsStacked
+  const isStacked = storeIsStacked ?? effectiveDefaultIsStacked
 
   // Register config tool on mount
   useEffect(() => {
-    const existingTool = getWidget(id)?.registeredTools?.find(
-      (tool) => tool.id === STACK_TOGGLE_TOOL_ID,
-    )
-
-    const initialStacked =
-      (existingTool?.config?.stacked as boolean | undefined) ??
-      effectiveDefaultIsStacked
-
     registerTool(id, {
       id: STACK_TOGGLE_TOOL_ID,
       type: 'config',
       order: 10,
-      enabled: initialStacked && hasMultiSeries,
+      enabled: isStacked && hasMultiSeries,
       fn: (currentConfig, toolConfig) => {
         const config = currentConfig as Record<string, unknown>
         const option = config.option as EchartOptionsProps | undefined
@@ -103,23 +90,26 @@ export function StackToggle({
 
         return { ...config, option: { ...option, series: updatedSeries } }
       },
-      config: { stacked: initialStacked },
+      config: { stacked: isStacked },
     })
     return () => unregisterTool(id, STACK_TOGGLE_TOOL_ID)
-  }, [
-    id,
-    registerTool,
-    unregisterTool,
-    effectiveDefaultIsStacked,
-    hasMultiSeries,
-    getWidget,
-  ])
+  }, [id, registerTool, unregisterTool, isStacked, hasMultiSeries])
+
+  // Sync tool enabled/config when state changes
+  useEffect(() => {
+    setToolEnabled(id, STACK_TOGGLE_TOOL_ID, isStacked && hasMultiSeries)
+    updateToolConfig(id, STACK_TOGGLE_TOOL_ID, { stacked: isStacked })
+  }, [id, isStacked, hasMultiSeries, setToolEnabled, updateToolConfig])
+
+  // Initialize store with default value only if not already configured
+  useEffect(() => {
+    if (storeIsStacked !== undefined) return
+    setWidget(id, { isStacked: effectiveDefaultIsStacked })
+  }, [effectiveDefaultIsStacked, id, setWidget, storeIsStacked])
 
   const handleToggle = useCallback(() => {
-    const newStacked = !isStacked
-    setToolEnabled(id, STACK_TOGGLE_TOOL_ID, newStacked && hasMultiSeries)
-    updateToolConfig(id, STACK_TOGGLE_TOOL_ID, { stacked: newStacked })
-  }, [isStacked, hasMultiSeries, id, setToolEnabled, updateToolConfig])
+    setWidget(id, { isStacked: !isStacked })
+  }, [isStacked, id, setWidget])
 
   const tooltipLabel = isStacked
     ? (labels?.unstacked ?? 'Disable stacking')

package/src/widgets/actions/stack-toggle/types.ts

@@ -1,5 +1,7 @@
 import type { IconButtonProps } from '@mui/material'
 import type { ReactNode } from 'react'
+import type { BaseWidgetState } from '../../stores/types'
+
 export interface StackToggleProps {
   /** Widget ID to update stack configuration in the widget store */
   id: string
@@ -19,3 +21,9 @@ export interface StackToggleProps {
   /** Custom icon to display */
   Icon?: ReactNode
 }
+
+export type StackToggleState<T = unknown> = BaseWidgetState<
+  T & {
+    isStacked?: boolean
+  }
+>

package/src/widgets/loader/loader.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useRef, useSyncExternalStore } from 'react'
 import type { WidgetLoaderProps } from './types'
 import { useWidgetStore } from '../stores/widget-store'
 import type { WrapperState } from '../wrapper'
@@ -14,6 +14,20 @@ export function WidgetLoader<T extends object = Record<string, unknown>>(
     (state) => state.executeConfigPipeline,
   )
 
+  const registeredTools = useSyncExternalStore(
+    useWidgetStore.subscribe,
+    () => useWidgetStore.getState().widgets[props.id]?.registeredTools,
+  )
+
+  const dataRef = useRef(props.data)
+  const configRef = useRef(props.config)
+  const isMountedRef = useRef(false)
+
+  useEffect(() => {
+    dataRef.current = props.data
+    configRef.current = props.config
+  })
+
   // Split into 3 effects for metadata and 1 for data pipeline:
   // Each property that can be modified independently gets its own effect to avoid
   // accidentally resetting other properties.
@@ -52,31 +66,18 @@ export function WidgetLoader<T extends object = Record<string, unknown>>(
     void executeToolPipeline(props.id, props.data)
   }, [props.id, props.data, executeToolPipeline])
 
-  // Effect 5: Re-execute pipelines when tool state changes (enabled/config)
+  // Effect 5: Re-execute pipelines when registered tools change
   useEffect(() => {
-    let prevTools = useWidgetStore.getState().widgets[props.id]?.registeredTools
-
-    const unsubscribe = useWidgetStore.subscribe((state) => {
-      const currentTools = state.widgets[props.id]?.registeredTools
-
-      // Only re-execute if tools array changed
-      if (currentTools !== prevTools) {
-        prevTools = currentTools
-        void executeToolPipeline(props.id, props.data)
-        if (props.config) {
-          void executeConfigPipeline(props.id, props.config)
-        }
-      }
-    })
+    if (!isMountedRef.current) {
+      isMountedRef.current = true
+      return
+    }
 
-    return unsubscribe
-  }, [
-    props.id,
-    props.data,
-    props.config,
-    executeToolPipeline,
-    executeConfigPipeline,
-  ])
+    void executeToolPipeline(props.id, dataRef.current)
+    if (configRef.current) {
+      void executeConfigPipeline(props.id, configRef.current)
+    }
+  }, [registeredTools, props.id, executeToolPipeline, executeConfigPipeline])
 
   return props.children
 }

package/src/widgets/table/components/cell.tsx

@@ -1,6 +1,6 @@
 import { TableCell as MuiTableCell, Link, Typography } from '@mui/material'
 import ReactMarkdown, { type Components } from 'react-markdown'
-import type { TableColumn } from '../types'
+import type { TableColumn, TableRow } from '../types'
 import { getCellValue } from '../helpers'
 import type { ReactNode } from 'react'
 
@@ -10,6 +10,8 @@ import type { ReactNode } from 'react'
 export interface CellProps {
   /** Column definition */
   column: TableColumn
+  /** Full table row for context */
+  row: TableRow
   /** Cell value */
   value: unknown
 }
@@ -54,12 +56,12 @@ const CELL_MARKDOWN_COMPONENTS: Components = {
  * Markdown is rendered when the raw value is a string and no formatter is defined.
  * If a formatter is used, its output is rendered directly without markdown parsing.
  */
-export function Cell({ column, value }: CellProps) {
+export function Cell({ column, row, value }: CellProps) {
   // If formatter is defined, use it directly without markdown
   if (column.formatter) {
     return (
       <MuiTableCell align={column.align}>
-        {column.formatter(value)}
+        {column.formatter(value, row)}
       </MuiTableCell>
     )
   }

package/src/widgets/table/components/row.tsx

@@ -53,7 +53,12 @@ export function Row({
         </TableCell>
       )}
       {columns.map((column) => (
-        <Cell key={column.id} column={column} value={row[column.id]} />
+        <Cell
+          key={column.id}
+          row={row}
+          column={column}
+          value={row[column.id]}
+        />
       ))}
     </MuiTableRow>
   )

package/src/widgets/table/types.ts

@@ -27,7 +27,7 @@ export interface TableColumn {
   /** Enable sorting for this column */
   sortable?: boolean
   /** Custom cell value formatter */
-  formatter?: (value: unknown) => ReactNode
+  formatter?: (value: unknown, row: TableRow) => ReactNode
 }
 
 /**