add remaining styles

lowcoder-org · iamfaran · Aug 5, 2025 · Aug 5, 2025 · Aug 5, 2025 · Aug 6, 2025
commit 4590bfe362a738ce42a37ec57a417e9b1262a7b9
diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/BaseTable.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/BaseTable.tsx
@@ -2,23 +2,20 @@ import React, {
     useCallback,
     useMemo,
     useState,
-    useRef,
   } from "react";
   import { default as Table, TableProps, ColumnType } from "antd/es/table";
   import ResizeableTitle from "./ResizeableTitle";
   import TableCellView from "./TableCellView";
   import { COL_MIN_WIDTH, CustomColumnType } from "../tableUtils";
   import { TableColumnStyleType } from "comps/controls/styleControlConstants";
   import { RowColorViewType, RowHeightViewType } from "../tableTypes";
-  import styled from "styled-components";
-  // Add this import at the top
-import {
-  TableContainer,
-  HeaderStyleProvider,
-  CellStyleProvider,
-  ScrollbarStyleProvider,
-  RowStyleProvider
-} from "../styles";
+  import {
+    TableContainer,
+    HeaderStyleProvider,
+    CellStyleProvider,
+    ScrollbarStyleProvider,
+    RowStyleProvider
+  } from "../styles";
 
   export interface BaseTableProps<RecordType> extends Omit<TableProps<RecordType>, "components" | "columns"> {
     columns: CustomColumnType<RecordType>[];
@@ -36,6 +33,7 @@ import {
     style?: any;
     headerStyle?: any;
     rowStyle?: any;
+    toolbarStyle?: any;
     showHeader?: boolean;
     fixedHeader?: boolean;
     showHRowGridBorder?: boolean;
@@ -61,18 +59,20 @@ import {
       scroll,
       virtual,
       dataSource,
+      size = "large",
       //  the style props
       style,
       headerStyle,
       rowStyle,
+      toolbarStyle,
       showHeader = true,
       fixedHeader = false,
       showHRowGridBorder = false,
-      showVerticalScrollbar = true,
-      showHorizontalScrollbar = true,
+      showVerticalScrollbar = false,
+      showHorizontalScrollbar = false,
       ...restProps
     } = props;
-
+    
     const [resizeData, setResizeData] = useState({ index: -1, width: -1 });
 
 
@@ -206,6 +206,7 @@ import {
                 scroll={scroll || { x: 'max-content' }}
                 showHeader={showHeader}
                 sticky={fixedHeader ? { offsetHeader: 0 } : false}
+                size={size}
               />
             </CellStyleProvider>
           </ScrollbarStyleProvider>

diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/CellStyles.ts b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/CellStyles.ts
@@ -8,7 +8,7 @@ export const CellStyleProvider = styled.div<{
     background: ${props => props.$rowStyle?.background || '#ffffff'};
     color: ${props => props.$rowStyle?.color || 'rgba(0, 0, 0, 0.85)'};
     border-color: ${props => props.$rowStyle?.borderColor || '#f0f0f0'};
-    padding: ${props => props.$rowStyle?.padding || '12px 16px'};
+    /* padding: ${props => props.$rowStyle?.padding || '12px 16px'}; */
     ${props => props.$rowStyle?.customCSS || ''}
   }
 

diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/HeaderStyles.ts b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/HeaderStyles.ts
@@ -5,6 +5,11 @@ export const HeaderStyleProvider = styled.div<{
   $isSticky: boolean;
   $isHidden: boolean;
 }>`
+  ${props => {
+    console.log("HeaderStyleProvider props:", props);
+    return "";
+  }}
+
   ${props => props.$isHidden && `
     .ant-table-thead {
       display: none;
@@ -17,11 +22,14 @@ export const HeaderStyleProvider = styled.div<{
     border-color: ${props => props.$headerStyle?.border};
     border-width: ${props => props.$headerStyle?.borderWidth};
     padding: ${props => props.$headerStyle?.padding};
-    margin: ${props => props.$headerStyle?.margin};
     font-size: ${props => props.$headerStyle?.textSize};
 
     ${props => props.$headerStyle?.customCSS || ''}
   }
+
+  .ant-table-thead > tr > th > div {
+    margin: ${props => props.$headerStyle?.margin};
+  }
 
   ${props => props.$isSticky && `
     &&& .ant-table-thead > tr > th {
@@ -30,4 +38,4 @@ export const HeaderStyleProvider = styled.div<{
       z-index: 3;
     }
   `}
-`;
+`;
diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/RowStyles.ts b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/RowStyles.ts
@@ -4,28 +4,40 @@ export const RowStyleProvider = styled.div<{
   $rowStyle: any;
   $showHRowGridBorder: boolean;
 }>`
-  /* Row container styling */
+
+  /* Hide the measure row to avoid the extra space */
+  tr.ant-table-measure-row{
+        visibility: collapse;
+  } 
+
+  /* Only apply row styles if explicitly set by user */
   .ant-table-tbody > tr {
-    background: ${props => props.$rowStyle?.background || '#ffffff'};
-    border-color: ${props => props.$rowStyle?.borderColor || '#f0f0f0'};
-    height: ${props => props.$rowStyle?.height || 'auto'};
-    min-height: ${props => props.$rowStyle?.minHeight || 'auto'};
+    ${props => props.$rowStyle?.background && `background: ${props.$rowStyle.background};`}
+    ${props => props.$rowStyle?.borderColor && `border-color: ${props.$rowStyle.borderColor};`}
+    ${props => props.$rowStyle?.height && `height: ${props.$rowStyle.height};`}
+    ${props => props.$rowStyle?.minHeight && `min-height: ${props.$rowStyle.minHeight};`}
   }
 
-  /* Row hover effects */
-  .ant-table-tbody > tr:hover {
-    background: ${props => props.$rowStyle?.hoverBackground || '#f5f5f5'};
-  }
+  /* Row hover effects - only if explicitly set */
+  ${props => props.$rowStyle?.hoverBackground && `
+    .ant-table-tbody > tr:hover {
+      background: ${props.$rowStyle.hoverBackground};
+    }
+  `}
 
-  /* Alternating row colors */
-  .ant-table-tbody > tr:nth-child(even) {
-    background: ${props => props.$rowStyle?.alternatingBackground || props.$rowStyle?.background || '#ffffff'};
-  }
+  /* Alternating row colors - only if explicitly set */
+  ${props => props.$rowStyle?.alternatingBackground && `
+    .ant-table-tbody > tr:nth-child(even) {
+      background: ${props.$rowStyle.alternatingBackground};
+    }
+  `}
 
-  /* Selected row styling */
-  .ant-table-tbody > tr.ant-table-row-selected {
-    background: ${props => props.$rowStyle?.selectedBackground || '#e6f7ff'};
-  }
+  /* Selected row styling - only if explicitly set */
+  ${props => props.$rowStyle?.selectedBackground && `
+    .ant-table-tbody > tr.ant-table-row-selected {
+      background: ${props.$rowStyle.selectedBackground};
+    }
+  `}
 
   /* Horizontal grid borders */
   ${props => props.$showHRowGridBorder && `

diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/ScrollbarStyles.ts b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/ScrollbarStyles.ts
@@ -4,28 +4,46 @@ export const ScrollbarStyleProvider = styled.div<{
   $showVerticalScrollbar: boolean;
   $showHorizontalScrollbar: boolean;
 }>`
-  ${props => !props.$showVerticalScrollbar && `
-    .ant-table-body::-webkit-scrollbar:vertical {
+  /* Debug console logs */
+  ${props => {
+    console.log('ScrollbarStyleProvider received:', {
+      showVerticalScrollbar: props.$showVerticalScrollbar,
+      showHorizontalScrollbar: props.$showHorizontalScrollbar
+    });
+    return '';
+  }}
+
+
+  ${props => !props.$showHorizontalScrollbar && `
+    /* Target horizontal scrollbars - focus on .ant-table-body since it's common to all modes */
+    .ant-table-body::-webkit-scrollbar:horizontal,
+    .ant-table-body::-webkit-scrollbar {
       display: none;
     }
-    .ant-table-body {
-      scrollbar-width: none;
+    .ant-table-content::-webkit-scrollbar:horizontal,
+    .ant-table-content::-webkit-scrollbar {
+      display: none;
+    }
+
+    .ant-table-body,
+    .ant-table-content {
+      scrollbar-width: none; /* Firefox */
+      -ms-overflow-style: none; /* IE */
     }
   `}
 
+  /* Hide ANTD's virtual scrollbars */
   ${props => !props.$showHorizontalScrollbar && `
-    .ant-table-body::-webkit-scrollbar:horizontal {
-      display: none;
+    .ant-table-tbody-virtual-scrollbar-horizontal {
+      display: none !important;
+      height: 0 !important;
     }
   `}
 
-  /* Hide ANTD's virtual scrollbars */
-  .ant-table-tbody-virtual-scrollbar-horizontal {
-    display: none !important;
-    height: 0 !important;
-  }
-
-  .ant-table-tbody-virtual-scrollbar {
-    pointer-events: none !important;
-  }
+  ${props => !props.$showVerticalScrollbar && `
+    .ant-table-tbody-virtual-scrollbar {
+      display: none !important;
+      width: 0 !important;
+    }
+  `}
 `;
diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/TableContainerStyles.ts b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/TableContainerStyles.ts
@@ -1,15 +1,73 @@
 import styled from "styled-components";
 
-export const TableContainer = styled.div<{ $style: any }>`
-  width: 100%;
-  height: 100%;
-  position: relative;
+export const TableContainer = styled.div<{
+  $style: any;
+}>`
+  /* SMALL SIZE */
+  .ant-table-small {
+    /* Body cell padding */
+    .ant-table-tbody > tr > td {
+      padding: 8px 8px !important;
+      font-size: 12px; /* Smaller font */
+      line-height: 1.4;
+    }
+
+    /* Header cell padding and font */
+    .ant-table-thead > tr > th {
+      padding: 8px 8px !important;
+      font-size: 12px;
+    }
+
+    /* Row height adjustments */
+    .ant-table-tbody > tr {
+      height: auto;
+      min-height: 32px; /* Smaller minimum row height */
+    }
+  }
 
-  /* Base table container styles */
-  background: ${props => props.$style?.background || 'transparent'};
-  border: ${props => props.$style?.border || 'none'};
-  border-radius: ${props => props.$style?.borderRadius || '0'};
+  /* MIDDLE SIZE */
+  .ant-table-middle {
+    /* Body cell padding */
+    .ant-table-tbody > tr > td {
+      padding: 12px 12px !important;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    /* Header cell padding and font */
+    .ant-table-thead > tr > th {
+      padding: 12px 12px !important;
+      font-size: 14px;
+    }
+
+    /* Row height adjustments */
+    .ant-table-tbody > tr {
+      min-height: 40px;
+    }
+  }
 
-  /* Custom CSS injection */
+  /* DEFAULT/LARGE SIZE */
+  .ant-table:not(.ant-table-small):not(.ant-table-middle) {
+    /* Body cell padding */
+    .ant-table-tbody > tr > td {
+      padding: 16px 16px !important;
+      font-size: 14px;
+      line-height: 1.6;
+    }
+
+    /* Header cell padding and font */
+    .ant-table-thead > tr > th {
+      padding: 16px 16px !important;
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    /* Row height adjustments */
+    .ant-table-tbody > tr {
+      min-height: 48px;
+    }
+  }
+
+  /* Your existing custom styles */
   ${props => props.$style?.customCSS || ''}
 `;
diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/TableWrapper.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/TableWrapper.tsx
@@ -3,19 +3,16 @@ import {
   TableStyleType,
   TableHeaderStyleType,
   TableRowStyleType,
-  TableToolbarStyleType,
 } from "comps/controls/styleControlConstants";
 
 import { getTableBaseStyles } from "./tableBaseStyles";
 import { getTableHeaderStyles } from "./tableHeaderStyles";
 import { getTableRowStyles } from "./tableRowStyles";
-import { getTableToolbarStyles } from "./tableToolbarStyles";
 
 interface TableWrapperProps {
   $style: TableStyleType;
   $headerStyle: TableHeaderStyleType;
   $rowStyle: TableRowStyleType;
-  $toolbarStyle: TableToolbarStyleType;
   $visibleResizables: boolean;
   $showHRowGridBorder?: boolean;
 }
@@ -30,8 +27,6 @@ export const TableWrapper = styled.div<TableWrapperProps>`
   /* Row styles */
   ${(props) => getTableRowStyles(props.$rowStyle)}
 
-  /* Toolbar styles */
-  ${(props) => getTableToolbarStyles(props.$toolbarStyle)}
 
   /* Additional table specific styles */
   ${(props) => !props.$showHRowGridBorder && `

diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/ToolbarStyles.ts b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/ToolbarStyles.ts
@@ -0,0 +1,18 @@
+import styled from "styled-components";
+import { TableToolbarStyleType } from "comps/controls/styleControlConstants";
+
+export const ToolbarStyleProvider = styled.div<{
+ $toolbarStyle: TableToolbarStyleType;
+}>`
+ ${props => {
+   console.log("ToolbarStyleProvider props:", props);
+   console.log("Toolbar style object:", props.$toolbarStyle);
+   return "";
+ }}
+
+ background: ${props => props.$toolbarStyle?.background};
+ border: 1px solid ${props => props.$toolbarStyle?.border};
+ margin: ${props => props.$toolbarStyle?.margin};
+ color: ${props => props.$toolbarStyle?.toolbarText};
+
+`;
diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/index.ts b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/index.ts
@@ -1,13 +1,3 @@
-// Export the main TableWrapper
-export { TableWrapper } from "./TableWrapper";
-
-// Export individual style functions
-export { getTableBaseStyles } from "./tableBaseStyles";
-export { getTableHeaderStyles } from "./tableHeaderStyles";
-export { getTableRowStyles } from "./tableRowStyles";
-export { getTableToolbarStyles } from "./tableToolbarStyles"; 
-
-
 export { TableContainer } from './TableContainerStyles';
 export { HeaderStyleProvider } from './HeaderStyles';
 export { CellStyleProvider } from './CellStyles';