James/b/datatable

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

@@ -45,8 +45,39 @@ export interface ITableComponentBaseProps extends IShaDataTableInlineEditablePro
   rowAlternateBackgroundColor?: string;
   rowHoverBackgroundColor?: string;
   rowSelectedBackgroundColor?: string;
+
+  // Row dimensions
+  rowDimensions?: {
+    height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+  };
+
+  // Row padding using styling box
+  rowStylingBox?: {
+    margin?: {
+      top?: string;
+      right?: string;
+      bottom?: string;
+      left?: string;
+    };
+    padding?: {
+      top?: string;
+      right?: string;
+      bottom?: string;
+      left?: string;
+    };
+  };
+
+  // Row border using standard border controls
+  rowBorderStyle?: IBorderValue;
+
+  // Deprecated properties - kept for backward compatibility
+  /** @deprecated Use rowDimensions.height instead */
   rowHeight?: string;
+  /** @deprecated Use rowStylingBox.padding instead */
   rowPadding?: string;
+  /** @deprecated Use rowBorderStyle instead */
   rowBorder?: string;
 
   // Overall table styling

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

@@ -141,7 +141,10 @@ const TableComponent: TableComponentDefinition = {
   actualModelPropertyFilter: (name, value) => {
     // Allow all styling properties through to the settings form
     const allowedStyleProperties = [
+      // Old properties (deprecated but kept for backward compatibility)
       'rowHeight', 'rowPadding', 'rowBorder',
+      // New structured properties
+      'rowDimensions', 'rowStylingBox', 'rowBorderStyle',
       'headerFontSize', 'headerFontWeight',
       'tableSettings', // For nested structure
     ];

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

@@ -555,29 +555,94 @@ export const getSettings: SettingsFormMarkupFactory = ({ fbf }) => {
                   content: {
                     id: nanoid(),
                     components: [...fbf()
-                      .addSettingsInput({
+                      .addCollapsiblePanel({
                         id: nanoid(),
-                        propertyName: 'rowHeight',
-                        label: 'Row Height',
-                        inputType: 'textField',
-                        tooltip: 'Height for table rows (e.g., 40px, 3rem)',
-                        jsSetting: false,
+                        propertyName: 'pnlRowDimensions',
+                        label: 'Row Dimensions',
+                        labelAlign: 'right',
+                        ghost: true,
+                        collapsible: 'header',
+                        content: {
+                          id: nanoid(),
+                          components: [...fbf()
+                            .addSettingsInputRow({
+                              id: nanoid(),
+                              inline: true,
+                              inputs: [
+                                {
+                                  type: 'textField',
+                                  id: nanoid(),
+                                  label: "Height",
+                                  width: 85,
+                                  propertyName: "rowDimensions.height",
+                                  icon: "heightIcon",
+                                  tooltip: "Row height. You can use any unit (%, px, em, etc). px by default if without unit",
+                                },
+                                {
+                                  type: 'textField',
+                                  id: nanoid(),
+                                  label: "Min Height",
+                                  width: 85,
+                                  hideLabel: true,
+                                  propertyName: "rowDimensions.minHeight",
+                                  icon: "minHeightIcon",
+                                },
+                                {
+                                  type: 'textField',
+                                  id: nanoid(),
+                                  label: "Max Height",
+                                  width: 85,
+                                  hideLabel: true,
+                                  propertyName: "rowDimensions.maxHeight",
+                                  icon: "maxHeightIcon",
+                                },
+                              ],
+                            })
+                            .toJson(),
+                          ],
+                        },
                       })
-                      .addSettingsInput({
+                      .addCollapsiblePanel({
                         id: nanoid(),
-                        propertyName: 'rowPadding',
-                        label: 'Cell Padding',
-                        inputType: 'textField',
-                        tooltip: 'Padding for table cells (e.g., 8px, 0.5rem 1rem)',
-                        jsSetting: false,
+                        propertyName: 'rowStylingBox',
+                        label: 'Row Padding',
+                        labelAlign: 'right',
+                        ghost: true,
+                        collapsible: 'header',
+                        content: {
+                          id: nanoid(),
+                          components: [...fbf()
+                            .addStyleBox({
+                              id: nanoid(),
+                              label: 'Cell Padding',
+                              hideLabel: true,
+                              propertyName: 'rowStylingBox',
+                            })
+                            .toJson(),
+                          ],
+                        },
                       })
-                      .addSettingsInput({
+                      .addCollapsiblePanel({
                         id: nanoid(),
-                        propertyName: 'rowBorder',
+                        propertyName: 'pnlRowBorderStyle',
                         label: 'Row Border',
-                        inputType: 'textField',
-                        tooltip: 'Border style for table rows (e.g., 1px solid #ccc)',
-                        jsSetting: false,
+                        labelAlign: 'right',
+                        ghost: true,
+                        collapsible: 'header',
+                        content: {
+                          id: nanoid(),
+                          components: [...fbf()
+                            .addContainer({
+                              id: nanoid(),
+                              components: getBorderInputs(fbf, 'rowBorder'),
+                            })
+                            .addContainer({
+                              id: nanoid(),
+                              components: getCornerInputs(fbf, 'rowBorderCorner'),
+                            })
+                            .toJson(),
+                          ],
+                        },
                       })
                       .toJson(),
                     ],

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

@@ -5,7 +5,7 @@
   useRef,
   useEffect,
 } from 'react';
-import { filterVisibility, calculateDefaultColumns } from './utils';
+import { filterVisibility, calculateDefaultColumns, convertRowDimensionsToHeight, convertRowStylingBoxToPadding, convertRowBorderStyleToBorder } from './utils';
 import { getStyle } from '@/providers/form/utils';
 import { ITableComponentProps } from './models';
 import { getShadowStyle } from '@/designer-components/_settings/utils/shadow/utils';
@@ -67,6 +67,28 @@
     return props?.shadow ? shadowStyles?.boxShadow : props?.boxShadow;
   }, [props?.shadow, shadowStyles?.boxShadow, props?.boxShadow]);
 
+  // Convert new property structures to old format for backward compatibility
+  const effectiveRowHeight = useMemo(() => {
+    // Prefer new rowDimensions over old rowHeight
+    const converted = convertRowDimensionsToHeight(props?.rowDimensions);
+    console.log('Row Height - rowDimensions:', props?.rowDimensions, 'converted:', converted, 'fallback:', props?.rowHeight);
+    return converted || props?.rowHeight;
+  }, [props?.rowDimensions, props?.rowHeight]);
+
+  const effectiveRowPadding = useMemo(() => {
+    // Prefer new rowStylingBox over old rowPadding
+    const converted = convertRowStylingBoxToPadding(props?.rowStylingBox);
+    console.log('Row Padding - rowStylingBox:', props?.rowStylingBox, 'converted:', converted, 'fallback:', props?.rowPadding);
+    return converted || props?.rowPadding;
+  }, [props?.rowStylingBox, props?.rowPadding]);
+
+  const effectiveRowBorder = useMemo(() => {
+    // Prefer new rowBorderStyle over old rowBorder
+    const converted = convertRowBorderStyleToBorder(props?.rowBorderStyle);
+    console.log('Row Border - rowBorderStyle:', props?.rowBorderStyle, 'converted:', converted, 'fallback:', props?.rowBorder);
+    return converted || props?.rowBorder;
+  }, [props?.rowBorderStyle, props?.rowBorder]);
+
   const { styles } = useStyles({
     fontFamily: props?.font?.type,
     fontWeight: props?.font?.weight,
@@ -88,9 +110,9 @@
     headerFontWeight: props?.headerFontWeight,
     headerBackgroundColor: props?.headerBackgroundColor,
     headerTextColor: props?.headerTextColor,
-    rowHeight: props?.rowHeight,
-    rowPadding: props?.rowPadding,
-    rowBorder: props?.rowBorder,
+    rowHeight: effectiveRowHeight,
+    rowPadding: effectiveRowPadding,
+    rowBorder: effectiveRowBorder,
     boxShadow: finalBoxShadow,
     sortableIndicatorColor: props?.sortableIndicatorColor,
   });
@@ -359,9 +381,9 @@
             headerFontWeight={props.headerFontWeight}
             headerBackgroundColor={props.headerBackgroundColor}
             headerTextColor={props.headerTextColor}
-            rowHeight={props.rowHeight}
-            rowPadding={props.rowPadding}
-            rowBorder={props.rowBorder}
+            rowHeight={effectiveRowHeight}
+            rowPadding={effectiveRowPadding}
+            rowBorder={effectiveRowBorder}
             boxShadow={finalBoxShadow}
             sortableIndicatorColor={props.sortableIndicatorColor}
           />

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

@@ -219,3 +219,103 @@
 
   return columnItems;
 };
+
+/**
+ * Adds 'px' unit to a value if it's a number without a unit
+ */
+const addPxUnit = (value?: string | number): string => {
+  if (!value && value !== 0) return '0px';
+  const strValue = String(value);
+  // If it's just a number (with optional decimal), add 'px'
+  if (/^-?\d+\.?\d*$/.test(strValue)) {
+    return `${strValue}px`;
+  }
+  return strValue;
+};
+
+/**
+ * Converts row dimensions object to a single height string
+ * @param rowDimensions - Row dimensions configuration
+ * @returns Height string for backward compatibility
+ */
+export const convertRowDimensionsToHeight = (rowDimensions?: {
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+}): string | undefined => {
+  if (!rowDimensions?.height) return undefined;
+  // Add px unit if it's just a number
+  return addPxUnit(rowDimensions.height);
+};
+
+/**
+ * Converts styling box padding to a single padding string
+ * @param rowStylingBox - Styling box configuration
+ * @returns Padding string for backward compatibility
+ */
+export const convertRowStylingBoxToPadding = (rowStylingBox?: {
+  margin?: {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+  };
+  padding?: {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+  };
+}): string | undefined => {
+  if (!rowStylingBox?.padding) return undefined;
+
+  const { top, right, bottom, left } = rowStylingBox.padding;
+
+  // Add px units to values if needed
+  const topPx = addPxUnit(top);
+  const rightPx = addPxUnit(right);
+  const bottomPx = addPxUnit(bottom);
+  const leftPx = addPxUnit(left);
+
+  // If all values are the same, return single value
+  if (topPx === rightPx && rightPx === bottomPx && bottomPx === leftPx) {
+    return topPx;
+  }
+
+  // If top/bottom and left/right pairs are the same
+  if (topPx === bottomPx && leftPx === rightPx) {
+    return `${topPx} ${leftPx}`;
+  }
+
+  // Return all four values
+  return `${topPx} ${rightPx} ${bottomPx} ${leftPx}`;
+};
+
+/**
+ * Converts border value object to a single border string
+ * @param rowBorderStyle - Border style configuration
+ * @returns Border string for backward compatibility
+ */
+export const convertRowBorderStyleToBorder = (rowBorderStyle?: any): string | undefined => {
+  if (!rowBorderStyle?.border) return undefined;
+
+  const { borderType, border } = rowBorderStyle;
+
+  // If borderType is 'all', use the all configuration
+  if (borderType === 'all' && border.all) {
+    const { width, style, color } = border.all;
+    if (!width || !style || !color) return undefined;
+    return `${width} ${style} ${color}`;
+  }
+
+  // For custom borders, we can only return one border string
+  // Let's use the top border or the first available border
+  const firstBorder = border.top || border.right || border.bottom || border.left;
+  if (firstBorder) {
+    const { width, style, color } = firstBorder;
+    if (!width || !style || !color) return undefined;
+    return `${width} ${style} ${color}`;
+  }
+
+  return undefined;
+};