[Fix]: Custom Table Styles

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

@@ -16,55 +16,46 @@ export const getStyle = (
   toolbarStyle: TableToolbarStyleType,
 ) => {
   const background = genLinerGradient(style.background);
-  const selectedRowBackground = genLinerGradient(rowStyle.selectedRowBackground);
-  const hoverRowBackground = isTransparentColor(rowStyle.hoverRowBackground) ? null : genLinerGradient(rowStyle.hoverRowBackground);
+  const rowBackground = genLinerGradient(rowStyle.background);
   const alternateBackground = genLinerGradient(rowStyle.alternateBackground);
+  const selectedRowBackground = genLinerGradient(rowStyle.selectedRowBackground);
+  const hoverRowBackground = genLinerGradient(rowStyle.hoverRowBackground);
+  const hasHoverRowBackground = !isTransparentColor(rowStyle.hoverRowBackground);
 
   return css`
     .ant-table-body {
-      background: ${genLinerGradient(style.background)};
+      background: ${background};
     }
+
     .ant-table-tbody {
-      > tr:nth-of-type(2n + 1) {
-        background: ${genLinerGradient(rowStyle.background)};
+      > tr {
+        background: ${rowBackground};
       }
 
-      > tr:nth-of-type(2n) {
+      > tr:nth-of-type(2n):not(.ant-table-row-selected) {
         background: ${alternateBackground};
       }
 
-      // selected row
-      > tr:nth-of-type(2n + 1).ant-table-row-selected {
-        background: ${selectedRowBackground || rowStyle.background} !important;
-
-        // > td.ant-table-cell-row-hover,
-        &:hover {
-          background: ${hoverRowBackground || selectedRowBackground || rowStyle.background} !important;
-        }
+      > tr.ant-table-row-selected {
+        background: ${selectedRowBackground} !important;
       }
 
-      > tr:nth-of-type(2n).ant-table-row-selected {
-        background: ${selectedRowBackground || alternateBackground} !important;
-
-        // > td.ant-table-cell-row-hover,
-        &:hover {
-          background: ${hoverRowBackground || selectedRowBackground || alternateBackground} !important;
+      ${hasHoverRowBackground && css`
+        > tr:hover:not(.ant-table-row-selected) {
+          background: ${hoverRowBackground} !important;
         }
-      }
+      `}
 
-      // hover row
-      > tr:nth-of-type(2n + 1):hover {
-        background: ${hoverRowBackground || rowStyle.background} !important;
-        > td.ant-table-cell-row-hover {
-          background: transparent;
-        }
+      > tr.ant-table-row-selected > td.ant-table-cell,
+      > tr:nth-of-type(2n):not(.ant-table-row-selected) > td.ant-table-cell {
+        background: transparent !important;
       }
-      > tr:nth-of-type(2n):hover {
-        background: ${hoverRowBackground || alternateBackground} !important;
-        > td.ant-table-cell-row-hover {
-          background: transparent;
+
+      ${hasHoverRowBackground && css`
+        > tr:hover:not(.ant-table-row-selected) > td.ant-table-cell {
+          background: transparent !important;
         }
-      }
+      `}
 
       > tr.ant-table-expanded-row {
         background: ${background};
@@ -298,10 +289,6 @@ export const TableWrapper = styled.div.attrs<{
 
         }
 
-        /* Fix for selected and hovered rows */
-
-
-
         thead > tr:first-child {
           th:last-child {
             border-right: unset;

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

@@ -7,7 +7,7 @@ export const CellStyleProvider = styled.div<{
   .ant-table-tbody > tr > td {
     background: ${props => props.$rowStyle?.background || '#ffffff'};
     color: ${props => props.$rowStyle?.color || 'rgba(0, 0, 0, 0.85)'};
-    border-color: ${props => props.$rowStyle?.borderColor || '#f0f0f0'};
+    border-color: ${props => props.$rowStyle?.border || '#f0f0f0'};
     /* padding: ${props => props.$rowStyle?.padding || '12px 16px'}; */
     ${props => props.$rowStyle?.customCSS || ''}
   }
@@ -16,4 +16,4 @@ export const CellStyleProvider = styled.div<{
     ${props => props.$columnsStyle?.textAlign && `text-align: ${props.$columnsStyle.textAlign};`}
     ${props => props.$columnsStyle?.customCSS || ''}
   }
-`;
+`;

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

@@ -1,51 +1,51 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+import { isTransparentColor } from "lowcoder-design";
 
 export const RowStyleProvider = styled.div<{
   $rowStyle: any;
   $showHRowGridBorder: boolean;
 }>`
-
   /* Hide the measure row to avoid the extra space */
-  tr.ant-table-measure-row{
-        visibility: collapse;
-  } 
+  tr.ant-table-measure-row {
+    visibility: collapse;
+  }
 
-  /* Only apply row styles if explicitly set by user */
   .ant-table-tbody > tr {
-    ${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};`}
+    background: ${(props) => props.$rowStyle.background};
   }
 
-  /* Row hover effects - only if explicitly set */
-  ${props => props.$rowStyle?.hoverBackground && `
-    .ant-table-tbody > tr:hover {
-      background: ${props.$rowStyle.hoverBackground};
-    }
-  `}
-
-  /* Alternating row colors - only if explicitly set */
-  ${props => props.$rowStyle?.alternatingBackground && `
-    .ant-table-tbody > tr:nth-child(even) {
-      background: ${props.$rowStyle.alternatingBackground};
+  .ant-table-tbody > tr:nth-of-type(2n):not(.ant-table-row-selected) {
+    background: ${(props) => props.$rowStyle.alternateBackground} !important;
+  }
+
+  .ant-table-tbody > tr.ant-table-row-selected {
+    background: ${(props) => props.$rowStyle.selectedRowBackground} !important;
+  }
+
+  ${(props) => !isTransparentColor(props.$rowStyle.hoverRowBackground) && css`
+    .ant-table-tbody > tr:hover:not(.ant-table-row-selected) {
+      background: ${props.$rowStyle.hoverRowBackground} !important;
     }
   `}
-
-  /* Selected row styling - only if explicitly set */
-  ${props => props.$rowStyle?.selectedBackground && `
-    .ant-table-tbody > tr.ant-table-row-selected {
-      background: ${props.$rowStyle.selectedBackground};
+
+  .ant-table-tbody > tr.ant-table-row-selected > td.ant-table-cell,
+  .ant-table-tbody > tr:nth-of-type(2n):not(.ant-table-row-selected) > td.ant-table-cell {
+    background: transparent !important;
+  }
+
+  ${(props) => !isTransparentColor(props.$rowStyle.hoverRowBackground) && css`
+    .ant-table-tbody > tr:hover:not(.ant-table-row-selected) > td.ant-table-cell {
+      background: transparent !important;
     }
   `}
 
   /* Horizontal grid borders */
-  ${props => props.$showHRowGridBorder && `
+  ${(props) => props.$showHRowGridBorder && `
     .ant-table-tbody > tr > td {
-      border-bottom: 1px solid ${props.$rowStyle?.borderColor || '#f0f0f0'};
+      border-bottom: ${props.$rowStyle.borderWidth} ${props.$rowStyle.borderStyle} ${props.$rowStyle.border};
     }
   `}
 
   /* Custom row CSS */
-  ${props => props.$rowStyle?.customCSS || ''}
-`;
+  ${(props) => props.$rowStyle?.customCSS || ''}
+`;