fix cell divider

shesha-reactjs/src/components/dataTable/index.tsx

@@ -116,6 +116,10 @@ export interface IIndexTableProps extends IShaDataTableProps, TableProps {
   bodyFontWeight?: string;
   bodyFontColor?: string;
 
+  // Action column icon styling
+  actionIconSize?: string | number;
+  actionIconColor?: string;
+
   // Cell styling
   cellTextColor?: string;
   cellBackgroundColor?: string;
@@ -200,6 +204,8 @@ export const DataTable: FC<Partial<IIndexTableProps>> = ({
   bodyFontSize,
   bodyFontWeight,
   bodyFontColor,
+  actionIconSize,
+  actionIconColor,
   columnsMismatch,
   ...props
 }) => {
@@ -368,7 +374,8 @@ export const DataTable: FC<Partial<IIndexTableProps>> = ({
     if (!onRowDoubleClick?.actionName) return undefined;
 
     return (row: any, rowIndex: number) => {
-      const evaluationContext = { ...appContext, data: row, rowIndex };
+      const currentSelectedRow = { index: rowIndex, row: row, id: row?.id };
+      const evaluationContext = { ...appContext, data: row, rowIndex, selectedRow: currentSelectedRow };
 
       try {
         executeAction({
@@ -1020,6 +1027,8 @@ export const DataTable: FC<Partial<IIndexTableProps>> = ({
     bodyFontSize,
     bodyFontWeight,
     bodyFontColor,
+    actionIconSize,
+    actionIconColor,
   };
 
   // Always render ReactTable - it handles empty columns gracefully

shesha-reactjs/src/components/reactTable/index.tsx

@@ -128,6 +128,8 @@
   bodyFontSize,
   bodyFontWeight,
   bodyFontColor,
+  actionIconSize,
+  actionIconColor,
 }) => {
   const [componentState, setComponentState] = useState<IReactTableState>({
     allRows: data,
@@ -181,6 +183,8 @@
     bodyFontWeight,
     bodyFontColor,
     freezeHeaders,
+    actionIconSize,
+    actionIconColor,
   });
 
   const { setDragState } = useDataTableStore();
@@ -701,7 +705,8 @@
         }}
         onRowHover={() => {
           if (onRowHover) onRowHover(rowIndex, row.original);
-          dispatchRowEvent(onRowHoverAction, row.original, rowIndex);
+          const currentSelectedRow = { index: rowIndex, row: row.original, id: row.original?.id };
+          dispatchRowEvent(onRowHoverAction, row.original, rowIndex, currentSelectedRow);
         }}
         row={row}
         showExpandedView={showExpandedView}
@@ -832,7 +837,12 @@
                           fontWeight: '600',
                           display: 'flex',
                           alignItems: 'center',
-                          justifyContent: effectiveHeaderTextAlign === 'center' ? 'center' : effectiveHeaderTextAlign === 'right' ? 'flex-end' : 'flex-start',
+                          // Map headerTextAlign to justify-content for flex container
+                          justifyContent:
+                            effectiveHeaderTextAlign === 'center' ? 'center' :
+                            effectiveHeaderTextAlign === 'right' ? 'flex-end' :
+                            effectiveHeaderTextAlign === 'justify' ? 'space-between' :
+                            'flex-start', // default for 'left' or undefined
                         }}
                       >
                         {column.render('Header')}

shesha-reactjs/src/components/reactTable/interfaces.ts

@@ -317,6 +317,10 @@ export interface IReactTableProps extends ITableRowDragProps {
   bodyFontWeight?: string;
   bodyFontColor?: string;
 
+  // Action column icon styling
+  actionIconSize?: string | number;
+  actionIconColor?: string;
+
   // Overall table styling
   borderRadius?: string;
   border?: IBorderValue;

shesha-reactjs/src/components/reactTable/styles/styles.ts

@@ -73,6 +73,8 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
   bodyFontWeight,
   bodyFontColor,
   freezeHeaders,
+  actionIconSize,
+  actionIconColor,
 }: {
   rowBackgroundColor?: string;
   rowAlternateBackgroundColor?: string;
@@ -107,6 +109,8 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
   bodyFontWeight?: string;
   bodyFontColor?: string;
   freezeHeaders?: boolean;
+  actionIconSize?: string | number;
+  actionIconColor?: string;
 }) => {
   const {
     shaTable,
@@ -312,6 +316,12 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
             /* Apply text alignment to header cells */
             .${th} {
               ${headerTextAlign ? `text-align: ${headerTextAlign} !important;` : ''}
+
+              /* Map headerTextAlign to justify-content for flex containers */
+              ${headerTextAlign === 'left' ? 'justify-content: flex-start !important;' : ''}
+              ${headerTextAlign === 'right' ? 'justify-content: flex-end !important;' : ''}
+              ${headerTextAlign === 'center' ? 'justify-content: center !important;' : ''}
+              ${headerTextAlign === 'justify' ? 'justify-content: space-between !important;' : ''}
             }
 
             /* Apply header background to relative columns within headers */
@@ -322,6 +332,10 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
 
           &.${trBody} {
             ${rowHeight ? `height: ${rowHeight};` : 'height: auto;'}
+            /* Row must be positioned and use flex for separators to work */
+            position: relative;
+            display: flex;
+            align-items: stretch;
             ${(() => {
               // Prefer rowBorderStyle over rowBorder for full border control
               if (rowBorderStyle) {
@@ -353,7 +367,6 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
               ${bodyFontWeight ? `font-weight: ${bodyFontWeight} !important;` : ''}
               ${bodyFontColor ? `color: ${bodyFontColor} !important;` : ''}
               ${bodyTextAlign ? `text-align: ${bodyTextAlign} !important;` : ''}
-
             }
 
             /* Apply body font styles to form component content */
@@ -433,6 +446,18 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
             vertical-align: middle;
             ${cellBorders && cellBorderColor ? `border: 1px solid ${cellBorderColor};` : ''}
             ${Object.entries(cellBorderStyles).map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value};`).join(' ')}
+
+            /* Action icons styling for all table cells */
+            .sha-link {
+              .${iconPrefixCls} {
+                font-size: ${actionIconSize || bodyFontSize || '16px'};
+                width: ${actionIconSize || bodyFontSize || '16px'};
+                height: ${actionIconSize || bodyFontSize || '16px'};
+                min-width: ${actionIconSize || bodyFontSize || '16px'};
+                min-height: ${actionIconSize || bodyFontSize || '16px'};
+                ${actionIconColor ? `color: ${actionIconColor};` : ''}
+              }
+            }
           }
 
           .${th} {
@@ -459,11 +484,12 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
               height: auto;
 
               .${iconPrefixCls} {
-                font-size: ${bodyFontSize || '16px'};
-                width: ${bodyFontSize || '16px'};
-                height: ${bodyFontSize || '16px'};
-                min-width: ${bodyFontSize || '16px'};
-                min-height: ${bodyFontSize || '16px'};
+                font-size: ${actionIconSize || bodyFontSize || '16px'};
+                width: ${actionIconSize || bodyFontSize || '16px'};
+                height: ${actionIconSize || bodyFontSize || '16px'};
+                min-width: ${actionIconSize || bodyFontSize || '16px'};
+                min-height: ${actionIconSize || bodyFontSize || '16px'};
+                ${actionIconColor ? `color: ${actionIconColor};` : ''}
                 display: inline-flex;
                 align-items: center;
                 justify-content: center;
@@ -476,11 +502,12 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
               align-items: center;
 
               .${iconPrefixCls} {
-                font-size: ${bodyFontSize || '16px'};
-                width: ${bodyFontSize || '16px'};
-                height: ${bodyFontSize || '16px'};
-                min-width: ${bodyFontSize || '16px'};
-                min-height: ${bodyFontSize || '16px'};
+                font-size: ${actionIconSize || bodyFontSize || '16px'};
+                width: ${actionIconSize || bodyFontSize || '16px'};
+                height: ${actionIconSize || bodyFontSize || '16px'};
+                min-width: ${actionIconSize || bodyFontSize || '16px'};
+                min-height: ${actionIconSize || bodyFontSize || '16px'};
+                ${actionIconColor ? `color: ${actionIconColor};` : ''}
                 display: inline-flex;
                 align-items: center;
                 justify-content: center;
@@ -712,14 +739,33 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
           overflow: hidden;
           text-overflow: ellipsis;
           margin: 0;
-          border-right: 1px solid rgba(0, 0, 0, 0.05);
           padding: 0.5rem; /* Default padding for all cells */
 
+          /* Add vertical separator using pseudo-element that stretches full height */
+          &::after {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: 0;
+            bottom: 0px;
+            width: 1px;
+            background-color: rgba(0, 0, 0, 0.05);
+            pointer-events: none;
+          }
+
           /* Only apply minimum height when rowHeight is auto to prevent empty cell collapse */
           ${!rowHeight || rowHeight === 'auto' ? `
-            height: 44px;
-            vertical-align: middle;
-            line-height: normal;
+            /* Force cells to stretch to row height - !important overrides React Table inline styles */
+            min-height: 44px !important;
+            height: auto !important;
+            align-self: stretch !important;
+            display: flex !important;
+            justify-content: ${bodyTextAlign === 'right'
+              ? 'flex-end'
+              : bodyTextAlign === 'center'
+                ? 'center'
+                : 'flex-start'} !important;
+            align-items: center !important;
 
             /* Force empty cells to maintain height */
             &:empty::before {

shesha-reactjs/src/designer-components/dataTable/table/models.ts

@@ -134,6 +134,9 @@ export interface ITableComponentBaseProps extends IShaDataTableInlineEditablePro
   rowDividers?: boolean; // Horizontal dividers between rows
   responsiveMode?: 'scroll' | 'stack' | 'collapse';
 
+  actionIconSize?: string | number; // Icon size for action columns (inherits from bodyFontSize if not set)
+  actionIconColor?: string; // Icon color for action columns
+
   // Table settings nested structure for form binding
   tableSettings?: {
     rowHeight?: string;

shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx

@@ -377,7 +377,12 @@ const TableComponent: TableComponentDefinition = {
             rowDimensions: updateRowHeight(prev.desktop?.rowDimensions),
           },
         };
-      }),
+      })
+      .add<ITableComponentProps>(29, (prev) => ({
+        ...prev,
+        // Set default actionIconSize for existing tables
+        actionIconSize: prev.actionIconSize ?? '14px',
+      })),
   actualModelPropertyFilter: (name, value) => {
     // Allow all styling properties through to the settings form
     const allowedStyleProperties = [

shesha-reactjs/src/designer-components/dataTable/table/tableSettings.ts

@@ -662,6 +662,43 @@ export const getSettings: SettingsFormMarkupFactory = ({ fbf }) => {
                     ],
                   },
                 })
+                .addCollapsiblePanel({
+                  id: nanoid(),
+                  propertyName: 'actionIconStyling',
+                  label: 'Action Column Icons',
+                  labelAlign: 'right',
+                  ghost: true,
+                  parentId: appearanceTabId,
+                  collapsible: 'header',
+                  className: 'ant-collapse-ghost',
+                  content: {
+                    id: nanoid(),
+                    components: [...fbf()
+                      .addSettingsInputRow({
+                        id: nanoid(),
+                        inputs: [
+                          {
+                            id: nanoid(),
+                            propertyName: 'actionIconSize',
+                            label: 'Icon Size',
+                            type: 'textField',
+                            tooltip: 'Size of action column icons (e.g., 16px, 1.2em). Inherits from table font size if not specified.',
+                            jsSetting: true,
+                          },
+                          {
+                            id: nanoid(),
+                            propertyName: 'actionIconColor',
+                            label: 'Icon Color',
+                            type: 'colorPicker',
+                            tooltip: 'Color of action column icons',
+                            jsSetting: true,
+                          },
+                        ],
+                      })
+                      .toJson(),
+                    ],
+                  },
+                })
                 .toJson(),
               ...fbf()
                 .addPropertyRouter({