Merge pull request #2071 from iamfaran/fix/table-header

[Fix]: table header on different table sizes

Author: raheeliftikhar5

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

@@ -378,6 +378,7 @@ export const TableCompView = React.memo((props: {
             $isVirtual={scrollConfig.virtual}
             $showHorizontalScrollbar={showHorizontalScrollbar}
             $showVerticalScrollbar={showVerticalScrollbar}
+            $tableSize={size as 'small' | 'middle' | 'large'}
           >
             <ResizeableTable<RecordType>
               expandable={{

client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts

@@ -136,6 +136,7 @@ export const TableWrapper = styled.div.attrs<{
   $isVirtual?: boolean;
   $showHorizontalScrollbar?: boolean;
   $showVerticalScrollbar?: boolean;
+  $tableSize?: "small" | "middle" | "large";
 }>`
   .ant-table-wrapper {
     border-top: unset;
@@ -202,6 +203,8 @@ export const TableWrapper = styled.div.attrs<{
             border-color: ${(props) => props.$headerStyle.border};
             border-width: ${(props) => props.$headerStyle.borderWidth};
             color: ${(props) => props.$headerStyle.headerText};
+            padding: 0 !important; /* Override Ant Design's default padding */
+            // border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important;
             ${(props) => props.$showRowGridBorder
               ? `border-inline-end: ${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border} !important;`
               : `border-inline-end: none !important;`
@@ -221,6 +224,9 @@ export const TableWrapper = styled.div.attrs<{
 
             > div {
               margin: ${(props) => props.$headerStyle.margin};
+              /* Default padding for middle size (Ant Design default) */
+              padding: 8px 8px;
+              min-height: 24px;
 
               &, .ant-table-column-title > div {
                 font-size: ${(props) => props.$headerStyle.textSize};
@@ -229,6 +235,20 @@ export const TableWrapper = styled.div.attrs<{
                 font-style: ${(props) => props.$headerStyle.fontStyle};
                 color:${(props) => props.$headerStyle.headerText}
               }
+
+              /* Adjust header size based on table size */
+              ${(props) => props.$tableSize === 'small' && `
+                padding: 1px 8px;
+                min-height: 14px;
+              `}
+              ${(props) => props.$tableSize === 'middle' && `
+                padding: 8px 8px;
+                min-height: 24px;
+              `}
+              ${(props) => props.$tableSize === 'large' && `
+                padding: 16px 16px;
+                min-height: 48px;
+              `}
             }
 
             &:last-child {

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

@@ -1828,7 +1828,6 @@ export const TableToolbarStyle = [
 
 export const TableHeaderStyle = [
   MARGIN,
-  PADDING,
   FONT_FAMILY,
   FONT_STYLE,
   // getStaticBackground(SURFACE_COLOR),