Merge pull request #1747 from kamalqureshi/hide_column_layout

Column Hide Toggle in Responsive Layout

Author: raheeliftikhar5

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

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();

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%.",