Add footer/ header customizations + virtualization layout fix

Author: iamfaran

client/packages/lowcoder/src/comps/comps/tableLiteComp/hooks/useTableConfiguration.ts

@@ -46,6 +46,7 @@ interface HeightConfig {
   toolbarHeight?: number;
   headerHeight?: number;
   containerPadding?: number;
+  stickyToolbar?: boolean; // when true, toolbar is outside scroll and should be reserved
 }
 
 export function useTableHeights(
@@ -74,20 +75,18 @@ export function useTableHeights(
       showHeader = true,
       toolbarHeight = 48,
       headerHeight = 40,
-      containerPadding = 0
+      containerPadding = 0,
+      stickyToolbar = false,
     } = config;
 
-    const toolbarSpace = showToolbar ? toolbarHeight : 0;
+    // Reserve space for toolbar ONLY if it's sticky (outside the scroll area)
+    const toolbarSpace = showToolbar && stickyToolbar ? toolbarHeight : 0;
     const headerSpace = showHeader ? headerHeight : 0;
     const totalUsedSpace = toolbarSpace + headerSpace + containerPadding;
 
     // Calculate available height for table body
     const bodyHeight = Math.max(0, containerHeight - totalUsedSpace);
 
-    console.log('Container height:', containerHeight);
-    console.log('Body height calculated:', bodyHeight);
-  
-    
     return {
       containerStyle: { 
         height: '100%', 

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

@@ -61,22 +61,37 @@ export const TableContainer: React.FC<TableContainerProps> = ({
 }) => {
   const ToolbarComponent = stickyToolbar ? StickyToolbar : DefaultToolbar;
 
+  const renderToolbarOutside = stickyToolbar && showToolbar;
+  const renderToolbarInside = !stickyToolbar && showToolbar;
+
   return (
     <MainContainer $mode={mode} $height={containerHeight} ref={containerRef}>
-      {/* Above toolbar */}
-      {showToolbar && toolbarPosition === 'above' && (
+      {/* Above toolbar (sticky) */}
+      {renderToolbarOutside && toolbarPosition === 'above' && (
         <ToolbarComponent $position="above">
           {toolbar}
         </ToolbarComponent>
       )}
 
-      {/* Table content */}
+      {/* 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 */}
-      {showToolbar && toolbarPosition === 'below' && (
+      {/* Below toolbar (sticky) */}
+      {renderToolbarOutside && toolbarPosition === 'below' && (
         <ToolbarComponent $position="below">
           {toolbar}
         </ToolbarComponent>

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

@@ -91,11 +91,10 @@ function TableRendererComp<RecordType extends object>(props: TableRendererProps<
       );
     }
 
-    const scrollConfig = { x: totalWidth, y: bodyHeight };
-
     // VIRTUALIZED: High performance for large datasets
     if (virtualizationConfig.enabled && heights.canVirtualize) {
-        console.log('VirtualizedTable');
+      console.log('VirtualizedTable');
+      const scrollConfig = { x: totalWidth, y: bodyHeight };
       return (
         <VirtualizedTable
           {...baseTableProps}
@@ -116,13 +115,14 @@ function TableRendererComp<RecordType extends object>(props: TableRendererProps<
       );
     }
 
-    // FIXED: Regular height-constrained mode
+    // FIXED: Regular height-constrained mode without internal vertical scroll
+    // Let the outer container handle vertical scrolling so the footer appears right after the table
     return (
       <FixedModeTable
         {...baseTableProps}
         columns={columns}
         bodyHeight={bodyHeight}
-        scroll={scrollConfig}
+        scroll={{ x: totalWidth }}
         virtual={false}
         style={props.style}
         headerStyle={props.headerStyle}

client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/TableContainerStyles.ts

@@ -11,6 +11,12 @@ export const TableContainer = styled.div<{
       font-size: 12px; /* Smaller font */
       line-height: 1.4;
     }
+    /* Virtualized body cell padding */
+    .ant-table-tbody-virtual .ant-table-cell {
+      padding: 8px 8px !important;
+      font-size: 12px;
+      line-height: 1.4;
+    }
     
     /* Header cell padding and font */
     .ant-table-thead > tr > th {
@@ -33,6 +39,12 @@ export const TableContainer = styled.div<{
       font-size: 14px;
       line-height: 1.5;
     }
+    /* Virtualized body cell padding */
+    .ant-table-tbody-virtual .ant-table-cell {
+      padding: 12px 12px !important;
+      font-size: 14px;
+      line-height: 1.5;
+    }
     
     /* Header cell padding and font */
     .ant-table-thead > tr > th {
@@ -54,6 +66,12 @@ export const TableContainer = styled.div<{
       font-size: 14px;
       line-height: 1.6;
     }
+    /* Virtualized body cell padding */
+    .ant-table-tbody-virtual .ant-table-cell {
+      padding: 16px 16px !important;
+      font-size: 14px;
+      line-height: 1.6;
+    }
     
     /* Header cell padding and font */
     .ant-table-thead > tr > th {

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

@@ -49,7 +49,7 @@ export const TableCompView = React.memo((props: {
 	const autoHeight = compChildren.autoHeight.getView();
 	const rowAutoHeight = compChildren.rowAutoHeight.getView();
 	const showHeader = !compChildren.hideHeader.getView();
-	const stickyToolbar = false; // TODO: Add this as a prop later
+	const stickyToolbar = !!toolbar.fixedToolbar; // use toolbar setting
 
 
 	// NEW: Use hooks for clean logic
@@ -59,7 +59,8 @@ export const TableCompView = React.memo((props: {
 		showToolbar: !hideToolbar,
 		showHeader: showHeader,
 		toolbarHeight: 48,
-		headerHeight: 40
+		headerHeight: 40,
+		stickyToolbar,
 	});
 	const virtualization = useVirtualization(
 		heights.canVirtualize,
@@ -74,8 +75,8 @@ export const TableCompView = React.memo((props: {
 	);
 	const columnsAggrData = comp.columnAggrData;
 	const headerFilters = useMemo(() => compChildren.headerFilters.getView(), [compChildren.headerFilters]);
-	
-	
+		
+		
 
 	const antdColumns = useMemo(
 		() =>