Merge pull request #4323 from James-Baloyi/james/b/datatable

James-Baloyi · web-flow · commit 6993b0da2e89 · 2025-12-05T21:20:41.000+02:00
James/b/datatable
diff --git a/shesha-reactjs/src/components/dataTable/index.tsx b/shesha-reactjs/src/components/dataTable/index.tsx
@@ -90,6 +90,7 @@ export interface IIndexTableProps extends IShaDataTableProps, TableProps {
   rowHeight?: string;
   rowPadding?: string;
   rowBorder?: string;
+  rowBorderStyle?: IBorderValue;
 
   // Overall table styling
   boxShadow?: string;
@@ -149,6 +150,7 @@ export const DataTable: FC<Partial<IIndexTableProps>> = ({
   rowHeight,
   rowPadding,
   rowBorder,
+  rowBorderStyle,
   boxShadow,
   sortableIndicatorColor,
   ...props
@@ -943,6 +945,7 @@ export const DataTable: FC<Partial<IIndexTableProps>> = ({
     rowHeight,
     rowPadding,
     rowBorder,
+    rowBorderStyle,
     boxShadow,
     sortableIndicatorColor,
 
diff --git a/shesha-reactjs/src/components/reactTable/index.tsx b/shesha-reactjs/src/components/reactTable/index.tsx
@@ -104,6 +104,7 @@ export const ReactTable: FC<IReactTableProps> = ({
   rowHeight,
   rowPadding,
   rowBorder,
+  rowBorderStyle,
   boxShadow,
   sortableIndicatorColor,
   striped = true,
@@ -132,6 +133,7 @@ export const ReactTable: FC<IReactTableProps> = ({
     rowHeight,
     rowPadding,
     rowBorder,
+    rowBorderStyle,
     boxShadow,
     sortableIndicatorColor,
     striped,
diff --git a/shesha-reactjs/src/components/reactTable/interfaces.ts b/shesha-reactjs/src/components/reactTable/interfaces.ts
@@ -242,7 +242,8 @@ export interface IReactTableProps extends ITableRowDragProps {
   rowSelectedBackgroundColor?: string;
   rowHeight?: string;
   rowPadding?: string;
-  rowBorder?: string;
+  rowBorder?: string; // Deprecated: use rowBorderStyle for full border control
+  rowBorderStyle?: IBorderValue; // Full border configuration with per-side control
 
   // Overall table styling
   borderRadius?: string;
diff --git a/shesha-reactjs/src/components/reactTable/styles/styles.ts b/shesha-reactjs/src/components/reactTable/styles/styles.ts
@@ -52,6 +52,7 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
   rowHeight,
   rowPadding,
   rowBorder,
+  rowBorderStyle,
   boxShadow,
   sortableIndicatorColor,
   striped: _striped,
@@ -69,6 +70,7 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
   rowHeight?: string;
   rowPadding?: string;
   rowBorder?: string;
+  rowBorderStyle?: IBorderValue;
   boxShadow?: string;
   sortableIndicatorColor?: string;
   striped?: boolean;
@@ -239,7 +241,17 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
         }
         .${tr} {
           ${rowHeight ? `height: ${rowHeight};` : 'height: 100%;'}
-          ${rowBorder ? `border: ${rowBorder};` : ''}
+          ${(() => {
+            // Prefer rowBorderStyle over rowBorder for full border control
+            if (rowBorderStyle) {
+              const borderStyles = getBorderStyle(rowBorderStyle, {});
+              return Object.entries(borderStyles)
+                .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value};`)
+                .join(' ');
+            }
+            // Fallback to simple border string
+            return rowBorder ? `border: ${rowBorder};` : '';
+          })()}
 
           &.${trHead} {
             box-shadow: 0 2px 15px 0 rgb(0 0 0 / 15%);
diff --git a/shesha-reactjs/src/designer-components/dataTable/table/models.ts b/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
diff --git a/shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx b/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
     ];
diff --git a/shesha-reactjs/src/designer-components/dataTable/table/tableSettings.ts b/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, 'rowBorderStyle'),
+                            })
+                            .addContainer({
+                              id: nanoid(),
+                              components: getCornerInputs(fbf, 'rowBorderCorner'),
+                            })
+                            .toJson(),
+                          ],
+                        },
                       })
                       .toJson(),
                     ],
diff --git a/shesha-reactjs/src/designer-components/dataTable/table/tableWrapper.tsx b/shesha-reactjs/src/designer-components/dataTable/table/tableWrapper.tsx
@@ -5,7 +5,7 @@ import React, {
   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,34 @@ export const TableWrapper: FC<ITableComponentProps> = (props) => {
     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);
+    if (isDesignMode) {
+      console.warn('Row Height - rowDimensions:', props?.rowDimensions, 'converted:', converted, 'fallback:', props?.rowHeight);
+    }
+    return converted || props?.rowHeight;
+  }, [props?.rowDimensions, props?.rowHeight, isDesignMode]);
+
+  const effectiveRowPadding = useMemo(() => {
+    // Prefer new rowStylingBox over old rowPadding
+    const converted = convertRowStylingBoxToPadding(props?.rowStylingBox);
+    if (isDesignMode) {
+      console.warn('Row Padding - rowStylingBox:', props?.rowStylingBox, 'converted:', converted, 'fallback:', props?.rowPadding);
+    }
+    return converted || props?.rowPadding;
+  }, [props?.rowStylingBox, props?.rowPadding, isDesignMode]);
+
+  const effectiveRowBorder = useMemo(() => {
+    // Prefer new rowBorderStyle over old rowBorder
+    const converted = convertRowBorderStyleToBorder(props?.rowBorderStyle);
+    if (isDesignMode) {
+      console.warn('Row Border - rowBorderStyle:', props?.rowBorderStyle, 'converted:', converted, 'fallback:', props?.rowBorder);
+    }
+    return converted || props?.rowBorder;
+  }, [props?.rowBorderStyle, props?.rowBorder, isDesignMode]);
+
   const { styles } = useStyles({
     fontFamily: props?.font?.type,
     fontWeight: props?.font?.weight,
@@ -88,9 +116,9 @@ export const TableWrapper: FC<ITableComponentProps> = (props) => {
     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 +387,10 @@ export const TableWrapper: FC<ITableComponentProps> = (props) => {
             headerFontWeight={props.headerFontWeight}
             headerBackgroundColor={props.headerBackgroundColor}
             headerTextColor={props.headerTextColor}
-            rowHeight={props.rowHeight}
-            rowPadding={props.rowPadding}
-            rowBorder={props.rowBorder}
+            rowHeight={effectiveRowHeight}
+            rowPadding={effectiveRowPadding}
+            rowBorder={effectiveRowBorder}
+            rowBorderStyle={props.rowBorderStyle}
             boxShadow={finalBoxShadow}
             sortableIndicatorColor={props.sortableIndicatorColor}
           />
diff --git a/shesha-reactjs/src/designer-components/dataTable/table/utils.ts b/shesha-reactjs/src/designer-components/dataTable/table/utils.ts
