implement simple bar

Author: iamfaran

client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableContainer.tsx

@@ -1,16 +1,16 @@
 // parts/TableContainer.tsx
 import React from 'react';
 import styled from 'styled-components';
+import SimpleBar from 'simplebar-react';
+import 'simplebar-react/dist/simplebar.min.css';
 
 const MainContainer = styled.div<{
   $mode: 'AUTO' | 'FIXED';
 }>`
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow: hidden;
   position: relative;
-  border: 4px solid red;
 `;
 
 const StickyToolbar = styled.div<{
@@ -33,8 +33,34 @@ const DefaultToolbar = styled.div`
 const TableSection = styled.div<{
   $mode: 'AUTO' | 'FIXED';
 }>`
-  overflow: ${props => props.$mode === 'FIXED' ? 'auto' : 'visible'};
+
+  flex: 1 1 auto;
+  min-height: 0;
   border: 4px solid blue;
+  overflow: hidden;
+`;
+
+
+const SimpleBarWrapper = styled(SimpleBar)<{
+  $showVertical: boolean;
+  $showHorizontal: boolean;
+}>`
+  height: 100%;
+  border: 4px solid red;
+  
+  ${props => !props.$showVertical && `
+    .simplebar-scrollbar[data-direction="vertical"] {
+      opacity: 0 !important;
+      pointer-events: none;
+    }
+  `}
+  
+  ${props => !props.$showHorizontal && `
+    .simplebar-scrollbar[data-direction="horizontal"] {
+      opacity: 0 !important;
+      pointer-events: none;
+    }
+  `}
 `;
 
 interface TableContainerProps {
@@ -45,6 +71,8 @@ interface TableContainerProps {
   toolbar: React.ReactNode;
   children: React.ReactNode;
   containerRef?: React.RefObject<HTMLDivElement>;
+  showVerticalScrollbar: boolean;
+  showHorizontalScrollbar: boolean;
 }
 
 export const TableContainer: React.FC<TableContainerProps> = ({
@@ -54,25 +82,36 @@ export const TableContainer: React.FC<TableContainerProps> = ({
   showToolbar,
   toolbar,
   children,
-  containerRef
+  containerRef,
+  showVerticalScrollbar,
+  showHorizontalScrollbar
 }) => {
 
 
   return (
     <MainContainer $mode={mode} ref={containerRef}>
+      {stickyToolbar && toolbarPosition === 'above' && (
+        <StickyToolbar $position="above">{toolbar}</StickyToolbar>
+      )}
     <TableSection $mode={mode}>
-      {showToolbar && toolbarPosition === 'above' && (
-        stickyToolbar
-          ? <StickyToolbar $position="above">{toolbar}</StickyToolbar>
-          : <DefaultToolbar>{toolbar}</DefaultToolbar>
+      
+      <SimpleBarWrapper
+        $showVertical={showVerticalScrollbar}
+        $showHorizontal={showHorizontalScrollbar}
+      >
+        {!stickyToolbar && toolbarPosition === 'above' && (
+        <DefaultToolbar>{toolbar}</DefaultToolbar>
       )}
-      {children}
-      {showToolbar && toolbarPosition === 'below' && (
-        stickyToolbar
-          ? <StickyToolbar $position="below">{toolbar}</StickyToolbar>
-          : <DefaultToolbar>{toolbar}</DefaultToolbar>
+        {children}
+        {!stickyToolbar && toolbarPosition === 'below' && (
+        <DefaultToolbar>{toolbar}</DefaultToolbar>
       )}
+      </SimpleBarWrapper>
+      
     </TableSection>
+    {stickyToolbar && toolbarPosition === 'below' && (
+      <StickyToolbar $position="below">{toolbar}</StickyToolbar>
+    )}
   </MainContainer>
   );
 };

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

@@ -181,6 +181,8 @@ export const TableCompView = React.memo((props: {
 			stickyToolbar={stickyToolbar}
 			showToolbar={!hideToolbar}
 			toolbar={toolbarView}
+			showVerticalScrollbar={compChildren.showVerticalScrollbar.getView()}
+			showHorizontalScrollbar={compChildren.showHorizontalScrollbar.getView()}
 		  >
 			<EmptyContent text={trans("table.emptyColumns")} />
 		  </TableContainer>
@@ -199,6 +201,8 @@ export const TableCompView = React.memo((props: {
 			  showToolbar={!hideToolbar}
 			  toolbar={toolbarView}
 			  containerRef={containerRef}
+			  showVerticalScrollbar={compChildren.showVerticalScrollbar.getView()}
+			  showHorizontalScrollbar={compChildren.showHorizontalScrollbar.getView()}
 			>
 
 				<TableRenderer<any>