Margins, Header, Borders

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx

@@ -100,6 +100,7 @@ export const columnChildrenMap = {
   fixed: dropdownControl(columnFixOptions, "close"),
   editable: BoolControl,
   background: withDefault(ColorControl, ""),
+  margin: withDefault(RadiusControl, ""),
   text: withDefault(ColorControl, ""),
   border: withDefault(ColorControl, ""),
   borderWidth: withDefault(RadiusControl, ""),

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

@@ -141,9 +141,11 @@ const TableWrapper = styled.div<{
 }>`
   max-height: 100%;
   overflow-y: auto;
-  background: white;
+  background: ${(props) => props.$style.background};
   border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border}`};
   border-radius: ${(props) => props.$style.radius};
+  padding: ${(props) => props.$style.padding};
+  margin: ${(props) => props.$style.margin};
 
   .ant-table-wrapper {
     border-top: ${(props) => (props.$toolbarPosition === "above" ? "1px solid" : "unset")};
@@ -194,11 +196,11 @@ const TableWrapper = styled.div<{
         > .ant-table-thead {
           > tr > th {
             background-color: ${(props) => props.$headerStyle.headerBackground};
-            border-color: ${(props) => props.$style.border};
+            border-color: ${(props) => props.$headerStyle.border};
             border-width: ${(props) => props.$headerStyle.borderWidth};
-            color: ${(props) => props.$style.headerText};
+            color: ${(props) => props.$headerStyle.headerText};
             font-size: ${(props) => props.$headerStyle.textSize};
-            border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$style.border}`} !important;
+            border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important;
             ${(props) => 
               props.$fixedHeader && `
                 position: sticky;
@@ -208,19 +210,23 @@ const TableWrapper = styled.div<{
               `
             }
 
+            > div {
+              margin: ${(props) => props.$headerStyle.margin};
+            }
+
             &:last-child {
               border-inline-end: none !important;
             }
             &.ant-table-column-has-sorters:hover {
-              background-color: ${(props) => darkenColor(props.$style.headerBackground, 0.05)};
+              background-color: ${(props) => darkenColor(props.$headerStyle.headerBackground, 0.05)};
             }
   
             > .ant-table-column-sorters > .ant-table-column-sorter {
-              color: ${(props) => props.$style.headerText === defaultTheme.textDark ? "#bfbfbf" : props.$style.headerText};
+              color: ${(props) => props.$headerStyle.headerText === defaultTheme.textDark ? "#bfbfbf" : props.$headerStyle.headerText};
             }
 
             &::before {
-              background-color: ${(props) => props.$style.border};
+              background-color: ${(props) => props.$headerStyle.border};
             }
           }
         }
@@ -310,6 +316,8 @@ const TableTd = styled.td<{
   border-color: ${(props) => props.$style.border} !important;
   border-width: ${(props) => props.$style.borderWidth} !important;
   border-radius: ${(props) => props.$style.radius};
+  margin: ${(props) => props.$style.margin};
+
   padding: 0 !important;
 
   > div {
@@ -488,6 +496,7 @@ function TableCellView(props: {
 
     const style = {
       background: cellColor || rowColor || columnStyle.background || columnsStyle.background,
+      margin: columnStyle.margin || columnsStyle.margin,
       text: columnStyle.text || columnsStyle.text,
       border: columnStyle.border || columnsStyle.border,
       radius: columnStyle.radius || columnsStyle.radius,

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

@@ -319,6 +319,7 @@ export function columnsToAntdFormat(
       fixed: column.fixed === "close" ? false : column.fixed,
       style: {
         background: column.background,
+        margin: column.margin,
         text: column.text,
         border: column.border,
         radius: column.radius,

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

@@ -683,6 +683,8 @@ const LinkTextStyle = [
 ] as const;
 
 export const TableStyle = [
+  MARGIN,
+  PADDING,
   ...BG_STATIC_BORDER_RADIUS,
   {
     name: "borderWidth",
@@ -719,6 +721,8 @@ export const TableStyle = [
 ] as const;
 
 export const TableToolbarStyle = [
+  MARGIN,
+  PADDING,
   {
     name: "toolbarBackground",
     label: trans("style.toolbarBackground"),
@@ -736,17 +740,19 @@ export const TableToolbarStyle = [
 ] as const;
 
 export const TableHeaderStyle = [
-  {
-    name: "borderWidth",
-    label: trans("style.borderWidth"),
-    borderWidth: "borderWidth",
-  },
   {
     name: "headerBackground",
     label: trans("style.tableHeaderBackground"),
     depName: "background",
     transformer: handleToHeadBg,
   },
+  MARGIN,
+  getStaticBorder(),
+  {
+    name: "borderWidth",
+    label: trans("style.borderWidth"),
+    borderWidth: "borderWidth",
+  },
   {
     name: "headerText",
     label: trans("style.tableHeaderText"),
@@ -784,6 +790,7 @@ export const TableRowStyle = [
 export const TableColumnStyle = [
   getStaticBackground("#00000000"),
   getStaticBorder(),
+  MARGIN,
   BORDER_WIDTH,
   RADIUS,
   TEXT,