table styling changes

MenamAfzaal · MenamAfzaal · commit b2fbcee11c61 · 2024-05-12T02:50:16.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -67,13 +67,17 @@ const getStyle = (
         &,
         > td {
           background: ${genLinerGradient(rowStyle.background)};
+          border-bottom:${rowStyle.borderWidth} ${rowStyle.borderStyle} ${rowStyle.border} !important;
+          border-right:${rowStyle.borderWidth} ${rowStyle.borderStyle} ${rowStyle.border} !important;
         }
       }
 
       > tr:nth-of-type(2n) {
         &,
         > td {
           background: ${alternateBackground};
+          border-bottom:${rowStyle.borderWidth} ${rowStyle.borderStyle} ${rowStyle.border} !important;
+          border-right:${rowStyle.borderWidth} ${rowStyle.borderStyle} ${rowStyle.border} !important;
         }
       }
 
@@ -136,14 +140,15 @@ const BackgroundWrapper = styled.div<{
   $style: TableStyleType;
   $tableAutoHeight: boolean;
 }>`  
-  ${(props) => !props.$tableAutoHeight && `height: calc(100% - ${props.$style.margin} - ${props.$style.margin});`}
   background: ${(props) => props.$style.background} !important;
-  border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border} !important`};
+  // border: ${(props) => `${props.$style.border} !important`};
   border-radius: ${(props) => props.$style.radius} !important;
   // padding: unset !important;
-  padding: ${(props) => props.$style.padding} !important
+  padding: ${(props) => props.$style.padding} !important;
   margin: ${(props) => props.$style.margin} !important;
   overflow: scroll !important;
+  border-style:${(props) => props.$style.borderStyle} !important;
+  border-width: ${(props) => `${props.$style.borderWidth} !important`};
   ${(props) => props.$style}
 `;
 
@@ -339,7 +344,6 @@ const TableTd = styled.td<{
   }
   background: ${(props) => props.$background} !important;
   border-color: ${(props) => props.$style.border} !important;
-  border-width: ${(props) => props.$style.borderWidth} !important;
   border-radius: ${(props) => props.$style.radius};
 
   padding: 0 !important;
@@ -533,7 +537,7 @@ function TableCellView(props: {
       text: columnStyle.text || columnsStyle.text,
       border: columnStyle.border || columnsStyle.border,
       radius: columnStyle.radius || columnsStyle.radius,
-      borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth,
+      // borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth,
       textSize: columnStyle.textSize || columnsStyle.textSize,
       textWeight: columnsStyle.textWeight || columnStyle.textWeight,
       fontFamily: columnsStyle.fontFamily || columnStyle.fontFamily,
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
@@ -205,12 +205,12 @@ const tableChildrenMap = {
   pagination: PaginationControl,
   sort: valueComp<Array<SortValue>>([]),
   toolbar: TableToolbarComp,
-  style: styleControl(TableStyle),
-  rowStyle: styleControl(TableRowStyle),
+  style: withDefault(styleControl(TableStyle), {borderWidth: '1px'}),
+  rowStyle: withDefault(styleControl(TableRowStyle),{ borderWidth: '1px'}),
   toolbarStyle: styleControl(TableToolbarStyle),
-  headerStyle: styleControl(TableHeaderStyle),
+  headerStyle:withDefault(styleControl(TableHeaderStyle), {borderWidth: '1px'}),
   searchText: StringControl,
-  columnsStyle: withDefault(styleControl(TableColumnStyle), {borderWidth: '1px', radius: '0px',fontStyle:'italic'}),
+  columnsStyle: styleControl(TableColumnStyle),
   viewModeResizable: BoolControl,
   visibleResizables: BoolControl,
   // sample data for regenerating columns
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -1137,12 +1137,9 @@ const LinkTextStyle = [
 export const TableStyle = [
   MARGIN,
   PADDING,
+  BORDER_STYLE, 
+  BORDER_WIDTH,
   ...BG_STATIC_BORDER_RADIUS,
-  {
-    name: "borderWidth",
-    label: trans("style.borderWidth"),
-    borderWidth: "borderWidth",
-  },
 ] as const;
 
 export const TableToolbarStyle = [
@@ -1191,6 +1188,9 @@ export const TableHeaderStyle = [
 ] as const;
 
 export const TableRowStyle = [
+  BORDER_WIDTH,
+  BORDER_STYLE,
+  ...BG_STATIC_BORDER_RADIUS,
   getBackground(),
   {
     name: "selectedRowBackground",
@@ -1218,7 +1218,7 @@ export const TableColumnStyle = [
   getStaticBackground("#00000000"),
   getStaticBorder(),
   MARGIN,
-  BORDER_WIDTH,
+  
   RADIUS,
   TEXT,
   TEXT_SIZE,
