Merge pull request #1747 from kamalqureshi/hide_column_layout

raheeliftikhar5 · web-flow · commit c3454f3cd2e0 · 2025-06-06T08:18:04.000-07:00
Column Hide Toggle in Responsive Layout
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
@@ -30,6 +30,7 @@ import {
   Option,
   WidthIcon,
   ImageCompIcon,
+  CloseEyeIcon,
 } from "lowcoder-design";
 import styled from "styled-components";
 import { lastValueIfEqual } from "util/objectUtils";
@@ -608,6 +609,7 @@ const ColumnOption = new MultiCompBuilder(
     radius: withDefault(RadiusControl, ""),
     margin: withDefault(StringControl, ""),
     padding: withDefault(StringControl, ""),
+    hidden: withDefault(BoolCodeControl, false),
   },
   (props) => props
 )
@@ -644,6 +646,10 @@ const ColumnOption = new MultiCompBuilder(
       preInputNode: <StyledIcon as={CompressIcon} title="" />,	
       placeholder: '3px',
     })}
+    {children.hidden.propertyView({
+      label: trans('style.hideColumn'),
+      preInputNode: <StyledIcon as={CloseEyeIcon} title="" />
+    })}
   </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%.",
