add borders

iamfaran · iamfaran · commit c30ffdd84b35 · 2025-08-29T14:06:21.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableContainer.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableContainer.tsx
@@ -4,13 +4,13 @@ import styled from 'styled-components';
 
 const MainContainer = styled.div<{
   $mode: 'AUTO' | 'FIXED';
-  $height?: number;
 }>`
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
   position: relative;
+  border: 4px solid red;
 `;
 
 const StickyToolbar = styled.div<{
@@ -33,14 +33,12 @@ const DefaultToolbar = styled.div`
 const TableSection = styled.div<{
   $mode: 'AUTO' | 'FIXED';
 }>`
-  flex: 1;
-  min-height: 0;
   overflow: ${props => props.$mode === 'FIXED' ? 'auto' : 'visible'};
+  border: 4px solid blue;
 `;
 
 interface TableContainerProps {
   mode: 'AUTO' | 'FIXED';
-  containerHeight?: number;
   toolbarPosition: 'above' | 'below' | 'close';
   stickyToolbar: boolean;
   showToolbar: boolean;
@@ -51,51 +49,30 @@ interface TableContainerProps {
 
 export const TableContainer: React.FC<TableContainerProps> = ({
   mode,
-  containerHeight,
   toolbarPosition,
   stickyToolbar,
   showToolbar,
   toolbar,
   children,
   containerRef
 }) => {
-  const ToolbarComponent = stickyToolbar ? StickyToolbar : DefaultToolbar;
-  
-  const renderToolbarOutside = stickyToolbar && showToolbar;
-  const renderToolbarInside = !stickyToolbar && showToolbar;
+ 
 
   return (
-    <MainContainer $mode={mode} $height={containerHeight} ref={containerRef}>
-      {/* Above toolbar (sticky) */}
-      {renderToolbarOutside && toolbarPosition === 'above' && (
-        <ToolbarComponent $position="above">
-          {toolbar}
-        </ToolbarComponent>
+    <MainContainer $mode={mode} ref={containerRef}>
+    <TableSection $mode={mode}>
+      {showToolbar && toolbarPosition === 'above' && (
+        stickyToolbar
+          ? <StickyToolbar $position="above">{toolbar}</StickyToolbar>
+          : <DefaultToolbar>{toolbar}</DefaultToolbar>
       )}
-      
-      {/* Table content + optional non-sticky toolbar inside scrollable area */}
-      <TableSection $mode={mode}>
-        {/* Non-sticky toolbar ABOVE inside scrollable area */}
-        {renderToolbarInside && toolbarPosition === 'above' && (
-          <DefaultToolbar>
-            {toolbar}
-          </DefaultToolbar>
-        )}
-        {children}
-        {/* Non-sticky toolbar BELOW inside scrollable area */}
-        {renderToolbarInside && toolbarPosition === 'below' && (
-          <DefaultToolbar>
-            {toolbar}
-          </DefaultToolbar>
-        )}
-      </TableSection>
-      
-      {/* Below toolbar (sticky) */}
-      {renderToolbarOutside && toolbarPosition === 'below' && (
-        <ToolbarComponent $position="below">
-          {toolbar}
-        </ToolbarComponent>
+      {children}
+      {showToolbar && toolbarPosition === 'below' && (
+        stickyToolbar
+          ? <StickyToolbar $position="below">{toolbar}</StickyToolbar>
+          : <DefaultToolbar>{toolbar}</DefaultToolbar>
       )}
-    </MainContainer>
+    </TableSection>
+  </MainContainer>
   );
 };
diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableRenderer.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableRenderer.tsx
@@ -94,6 +94,7 @@ function TableRendererComp<RecordType extends object>(props: TableRendererProps<
     // VIRTUALIZED: High performance for large datasets
     if (virtualizationConfig.enabled && heights.canVirtualize) {
       console.log('VirtualizedTable');
+      console.log('VirtualizedTable scrollConfig', { x: totalWidth, y: bodyHeight });
       const scrollConfig = { x: totalWidth, y: bodyHeight };
       return (
         <VirtualizedTable
@@ -117,6 +118,7 @@ function TableRendererComp<RecordType extends object>(props: TableRendererProps<
 
     // FIXED: Regular height-constrained mode without internal vertical scroll
     // Let the outer container handle vertical scrolling so the footer appears right after the table
+    console.log('FixedModeTable', 'scrollConfig', { x: totalWidth, y: bodyHeight });
     return (
       <FixedModeTable
         {...baseTableProps}
diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableCompView.tsx
@@ -177,7 +177,6 @@ export const TableCompView = React.memo((props: {
 		return (
 		  <TableContainer
 			mode={mode as 'AUTO' | 'FIXED'}
-			containerHeight={mode === 'FIXED' ? containerHeight : undefined}
 			toolbarPosition={toolbar.position}
 			stickyToolbar={stickyToolbar}
 			showToolbar={!hideToolbar}
@@ -195,7 +194,6 @@ export const TableCompView = React.memo((props: {
 		return (
 			<TableContainer
 			  mode={mode as 'AUTO' | 'FIXED'}
-			  containerHeight={mode === 'FIXED' ? containerHeight : undefined}
 			  toolbarPosition={toolbar.position}
 			  stickyToolbar={stickyToolbar}
 			  showToolbar={!hideToolbar}
