Added hide toggle for columns in responsive layout

kamal-qureshi · kamal-qureshi · commit f23c3099da6d · 2025-06-05T01:46:17.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -234,7 +234,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
             {columns.map((column) => {
               const id = String(column.id);
               const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
-              if (!containers[id]) return null;
+              if (!containers[id] || column.hidden) return null;
               const containerProps = containers[id].children;
 
               // Use the actual minWidth from column configuration instead of calculated width
diff --git a/client/packages/lowcoder/src/comps/controls/optionsControl.tsx b/client/packages/lowcoder/src/comps/controls/optionsControl.tsx
@@ -588,6 +588,7 @@ const ColumnOption = new MultiCompBuilder(
     radius: withDefault(RadiusControl, ""),
     margin: withDefault(StringControl, ""),
     padding: withDefault(StringControl, ""),
+    hidden: withDefault(BoolControl, false),
   },
   (props) => props
 )
@@ -624,6 +625,9 @@ const ColumnOption = new MultiCompBuilder(
       preInputNode: <StyledIcon as={CompressIcon} title="" />,	
       placeholder: '3px',
     })}
+    {children.hidden.propertyView({
+      label: trans('style.hideColumn'),
+    })}
   </StyledContent>
 ))
   .build();
diff --git a/translations/locales/en.js b/translations/locales/en.js
@@ -589,6 +589,7 @@ export const en = {
       "chartBorderColor": "Border Color",
       "chartTextColor": "Text Color",
       "detailSize": "Detail Size",
+      "hideColumn": "Hide Column",
   
       "radiusTip": "Specifies the radius of the element's corners. Example: 5px, 50%, or 1em.",
       "gapTip": "Specifies the gap between rows and columns in a grid or flex container. Example: 10px, 1rem, or 5%.",
