added horizontal/vertical scrollbar switches

Author: raheeliftikhar5

client/packages/lowcoder-design/src/components/ScrollBar.tsx

@@ -56,6 +56,8 @@ interface IProps {
   };
   $hideplaceholder?: boolean;
   hideScrollbar?: boolean;
+  prefixNode?: React.ReactNode;
+  suffixNode?: React.ReactNode;
 }
 
 export const ScrollBar = ({
@@ -65,6 +67,8 @@ export const ScrollBar = ({
   scrollableNodeProps,
   hideScrollbar = false,
   $hideplaceholder = false,
+  prefixNode,
+  suffixNode,
   ...otherProps
 }: IProps) => {
   const height = style?.height ?? '100%';
@@ -73,12 +77,24 @@ export const ScrollBar = ({
 
   return hideScrollbar ? (
     <ScrollBarWrapper className={className}>
+      {prefixNode}
       {children}
+      {suffixNode}
     </ScrollBarWrapper>
   ) : (
     <ScrollBarWrapper className={className}>
       <SimpleBar style={combinedStyle} scrollableNodeProps={scrollableNodeProps} {...otherProps}>
-        {children}
+        {({ scrollableNodeProps, contentNodeProps }) => {
+          return (
+            <div {...scrollableNodeProps as any}>
+              {prefixNode}
+              <div {...contentNodeProps as any}>
+                {children}
+              </div>
+              {suffixNode}
+            </div>
+          );
+        }}
       </SimpleBar>
     </ScrollBarWrapper>
   );

client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx

@@ -142,20 +142,35 @@ const TitleResizeHandle = styled.span`
 const BackgroundWrapper = styled.div<{
   $style: TableStyleType;
   $tableAutoHeight: boolean;
-}>`  
+  $showHorizontalScrollbar: boolean;
+  $showVerticalScrollbar: boolean;
+}>`
+  display: flex;
+  flex-direction: column;
   background: ${(props) => props.$style.background} !important;
-  // border: ${(props) => `${props.$style.border} !important`};
   border-radius: ${(props) => props.$style.radius} !important;
-  // padding: unset !important;
   padding: ${(props) => props.$style.padding} !important;
   margin: ${(props) => props.$style.margin} !important;
-  // overflow: scroll !important;
   border-style: ${(props) => props.$style.borderStyle} !important;
   border-width: ${(props) => `${props.$style.borderWidth} !important`};
   border-color: ${(props) => `${props.$style.border} !important`};
   height: calc(100% - ${(props) => getVerticalMargin(props.$style.margin.split(' '))});
-  // overflow-y: auto;
-  // ${(props) => props.$style}
+  overflow: hidden;
+
+  > div.table-scrollbar-wrapper {
+    height: auto;
+    overflow: auto;
+    ${(props) => !props.$showHorizontalScrollbar && `
+      div.simplebar-horizontal {
+        visibility: hidden !important;
+      }  
+    `}
+    ${(props) => !props.$showVerticalScrollbar && `
+      div.simplebar-vertical {
+        visibility: hidden !important;
+      }  
+    `}
+  }
 `;
 
 // TODO: find a way to limit the calc function for max-height only to first Margin value
@@ -231,7 +246,8 @@ const TableWrapper = styled.div<{
             props.$fixedHeader && `
               position: sticky;
               position: -webkit-sticky;
-              top: ${props.$fixedToolbar ? '47px' : '0'};
+              // top: ${props.$fixedToolbar ? '47px' : '0'};
+              top: 0;
               z-index: 99;
             `
           }
@@ -842,13 +858,21 @@ export function TableCompView(props: {
 
   return (
     <BackgroundColorContext.Provider value={style.background} >
-      <BackgroundWrapper ref={ref} $style={style} $tableAutoHeight={tableAutoHeight}>
-        {/* <div style={{
-          overflowY: 'auto',
-          maxHeight: '100%',
-        }}> */}
-        <ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }} hideScrollbar={!showVerticalScrollbar}>
-          {toolbar.position === "above" && toolbarView}
+      <BackgroundWrapper
+        ref={ref}
+        $style={style}
+        $tableAutoHeight={tableAutoHeight}
+        $showHorizontalScrollbar={showHorizontalScrollbar}
+        $showVerticalScrollbar={showVerticalScrollbar}
+      >
+        {toolbar.position === "above" && toolbar.fixedToolbar && toolbarView}
+        <ScrollBar
+          className="table-scrollbar-wrapper"
+          style={{ height: "100%", margin: "0px", padding: "0px" }}
+          hideScrollbar={!showHorizontalScrollbar && !showVerticalScrollbar}
+          prefixNode={toolbar.position === "above" && !toolbar.fixedToolbar && toolbarView}
+          suffixNode={toolbar.position === "below" && !toolbar.fixedToolbar && toolbarView}
+        >
           <TableWrapper
             $style={style}
             $rowStyle={rowStyle}
@@ -910,9 +934,8 @@ export function TableCompView(props: {
               {expansion.expandModalView}
             </SlotConfigContext.Provider>
           </TableWrapper>
-          {toolbar.position === "below" && toolbarView}
         </ScrollBar>
-        {/* </div> */}
+        {toolbar.position === "below" && toolbar.fixedToolbar && toolbarView}
       </BackgroundWrapper>
 
     </BackgroundColorContext.Provider>

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -1512,7 +1512,6 @@ export const TableHeaderStyle = [
   },
   TEXT_SIZE,
   TEXT_WEIGHT,
-  FONT_FAMILY,
 ] as const;
 
 export const TableRowStyle = [

client/packages/lowcoder/src/i18n/locales/de.ts

@@ -200,8 +200,8 @@ export const de: typeof en = {
       "className": "Klasse",
       "dataTestId": "Test ID",
       "horizontalGridCells": "Horizontale Gitterzellen",
-      "showHorizontalScrollbar": "Show horizontal scrollbar",
-      "showVerticalScrollbar": "Show vertical scrollbar",
+      "showHorizontalScrollbar": "Horizontale Bildlaufleiste anzeigen",
+      "showVerticalScrollbar": "Vertikale Bildlaufleiste anzeigen",
   },
   "autoHeightProp": {
       ...en.autoHeightProp,

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -220,8 +220,8 @@ export const en = {
     "preventOverwriting": "Prevent overwriting styles",
     "color": "Color",
     "horizontalGridCells": "Horizontal Grid Cells",
-    "showHorizontalScrollbar": "Show horizontal scrollbar",
-    "showVerticalScrollbar": "Show vertical scrollbar",
+    "showHorizontalScrollbar": "Show Horizontal Scrollbar",
+    "showVerticalScrollbar": "Show Vertical Scrollbar",
   },
   "autoHeightProp": {
     "auto": "Auto",

client/packages/lowcoder/src/i18n/locales/pt.ts

@@ -231,8 +231,8 @@ export const pt: typeof en = {
         "className": "Nome da Classe CSS",
         "dataTestId": "ID Individual",
         "horizontalGridCells": "Células de grade horizontal",
-        "showHorizontalScrollbar": "Show horizontal scrollbar",
-        "showVerticalScrollbar": "Show vertical scrollbar",
+        "showHorizontalScrollbar": "Mostrar barra de rolagem horizontal",
+        "showVerticalScrollbar": "Mostrar barra de rolagem vertical",
     },
     "autoHeightProp": {
         ...en.autoHeightProp,

client/packages/lowcoder/src/i18n/locales/zh.ts

@@ -220,8 +220,8 @@ export const zh: typeof en = {
         "horizontal": "水平",
         "minHorizontalWidth": "最小水平宽度",
         "horizontalGridCells": "水平网格单元",
-        "showHorizontalScrollbar": "Show horizontal scrollbar",
-        "showVerticalScrollbar": "Show vertical scrollbar",
+        "showHorizontalScrollbar": "显示水平滚动条",
+        "showVerticalScrollbar": "显示垂直滚动条",
     },
 
     autoHeightProp: {