feat: DynamicDataTable - remove validationSchema, add errorState to show error from outside

Author: RohitRaj011

src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx

@@ -39,8 +39,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
     headers,
     readOnly,
     isDeletionNotAllowed,
-    validationSchema = () => ({ isValid: true, errorMessages: [] }),
-    showError,
+    cellError = {},
     actionButtonConfig = null,
     onRowEdit,
     onRowDelete,
@@ -86,7 +85,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
 
             cellRef.current = updatedCellRef
         }
-    }, [rows])
+    }, [rows.length])
 
     // METHODS
     const onChange =
@@ -237,12 +236,12 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
     )
 
     const renderErrorMessages = (row: DynamicDataTableRowType<K, CustomStateType>, key: K) => {
-        const { isValid, errorMessages } = !row.data[key].disabled
-            ? validationSchema(row.data[key].value, key, row)
-            : { isValid: true, errorMessages: [] }
-        const showErrorMessages = showError && !isValid
+        const { isValid, errorMessages } =
+            !row.data[key].disabled && cellError[row.id]?.[key]
+                ? cellError[row.id][key]
+                : { isValid: true, errorMessages: [] }
 
-        if (!showErrorMessages) {
+        if (isValid) {
             return null
         }
 
@@ -265,7 +264,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
                 plugins={[followCursor]}
             >
                 <div
-                    className={`dynamic-data-table__cell bcn-0 flexbox dc__align-items-center dc__gap-4 dc__position-rel ${isDisabled ? 'cursor-not-allowed no-hover' : ''} ${showError && !isDisabled && !validationSchema(row.data[key].value, key, row).isValid ? 'dynamic-data-table__cell--error no-hover' : ''} ${!rowTypeHasInputField(row.data[key].type) ? 'no-hover no-focus' : ''}`}
+                    className={`dynamic-data-table__cell bcn-0 flexbox dc__align-items-center dc__gap-4 dc__position-rel ${isDisabled ? 'cursor-not-allowed no-hover' : ''} ${!isDisabled && !cellError[row.id]?.[key]?.isValid ? 'dynamic-data-table__cell--error no-hover' : ''} ${!rowTypeHasInputField(row.data[key].type) ? 'no-hover no-focus' : ''}`}
                 >
                     {renderCellIcon(row, key, true)}
                     {renderCellContent(row, key)}
@@ -279,7 +278,13 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
         const actionButtonIndex = getActionButtonPosition({ headers, actionButtonConfig })
         if (actionButtonIndex === index) {
             const { renderer, position = 'start' } = actionButtonConfig
-            const actionButtonNode = <div className="dc__overflow-hidden flex top bcn-0">{renderer(row)}</div>
+            const actionButtonNode = (
+                <div
+                    className={`dc__overflow-hidden flex top bcn-0 ${(position === 'start' && key === headers[0].key) || (isDeletionNotAllowed && position === 'end' && key === headers[headers.length - 1].key) ? 'dynamic-data-table__cell' : ''}`}
+                >
+                    {renderer(row)}
+                </div>
+            )
 
             return position === 'start' ? (
                 <>

src/Shared/Components/DynamicDataTable/types.ts

@@ -111,6 +111,23 @@ export type DynamicDataTableRowType<K extends string, CustomStateType = Record<s
     disableDelete?: boolean
 }
 
+/**
+ * Represents the validation state of a cell in a dynamic data table.
+ */
+export type DynamicDataTableCellValidationState = {
+    isValid: boolean
+    errorMessages: string[]
+}
+
+/**
+ * Defines the structure of validation errors for a cell.
+ *
+ * `K` represents the column `key` of the cell (i.e., the column identifiers).
+ */
+export type DynamicDataTableCellErrorType<K extends string> = {
+    [rowId: string | number]: Partial<Record<K, DynamicDataTableCellValidationState>>
+}
+
 type DynamicDataTableCellIcon<K extends string, CustomStateType = Record<string, unknown>> = {
     [key in K]?: (row: DynamicDataTableRowType<K, CustomStateType>) => ReactNode
 }
@@ -192,24 +209,9 @@ export type DynamicDataTableProps<K extends string, CustomStateType = Record<str
         position?: 'start' | 'end'
     }
     /**
-     * Indicates whether to show errors.
-     */
-    showError?: boolean
-    /**
-     * Function to validate the value of a table cell.
-     * @param value - The value to validate.
-     * @param key - The column key of the cell.
-     * @param row - The row containing the cell.
-     * @returns An object with a boolean indicating validity and an array of error messages.
+     * Validation state for a specific cell in a dynamic data table.
      */
-    validationSchema?: (
-        value: string,
-        key: K,
-        row: DynamicDataTableRowType<K, CustomStateType>,
-    ) => {
-        isValid: boolean
-        errorMessages: string[]
-    }
+    cellError?: DynamicDataTableCellErrorType<K>
 }
 
 export interface DynamicDataTableHeaderProps<K extends string, CustomStateType = Record<string, unknown>>
@@ -237,8 +239,7 @@ export interface DynamicDataTableRowProps<K extends string, CustomStateType = Re
         | 'onRowEdit'
         | 'onRowDelete'
         | 'actionButtonConfig'
-        | 'showError'
-        | 'validationSchema'
+        | 'cellError'
         | 'leadingCellIcon'
         | 'trailingCellIcon'
         | 'buttonCellWrapComponent'