lowcoder-org · iamfaran · Jun 4, 2026 · Jul 3, 2026 · Jul 6, 2026
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/ResizeableTable.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/ResizeableTable.tsx
@@ -7,7 +7,7 @@ import { useUserViewMode } from "util/hooks";
 import { ReactRef, ResizeHandleAxis } from "layout/gridLayoutPropTypes";
 import { COL_MIN_WIDTH, RecordType, CustomColumnType } from "./tableUtils";
 import { RowColorViewType, RowHeightViewType } from "./tableTypes";
-import { TableColumnStyleType, TableColumnLinkStyleType, TableRowStyleType } from "comps/controls/styleControlConstants";
+import { TableColumnStyleType, TableGlobalColumnStyleType, TableColumnLinkStyleType, TableRowStyleType } from "comps/controls/styleControlConstants";
 import { CellColorViewType } from "./column/tableColumnComp";
 import { TableCellView } from "./TableCell";
 import { TableRowView } from "./TableRow";
@@ -105,7 +105,7 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
   visibleResizables: boolean;
   rowColorFn: RowColorViewType;
   rowHeightFn: RowHeightViewType;
-  columnsStyle: TableColumnStyleType;
+  columnsStyle: TableGlobalColumnStyleType;
   rowStyle: TableRowStyleType;
   size?: string;
   rowAutoHeight?: boolean;

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/TableCell.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/TableCell.tsx
@@ -1,14 +1,13 @@
-import React, { useContext, useMemo, useState } from "react";
-import styled, { css } from "styled-components";
-import { TableCellContext, TableRowContext } from "./tableContext";
-import { TableColumnStyleType, TableColumnLinkStyleType, ThemeDetail, TableRowStyleType } from "comps/controls/styleControlConstants";
+import React, { useMemo, useState } from "react";
+import styled from "styled-components";
+import { TableCellContext } from "./tableContext";
+import { TableColumnStyleType, TableGlobalColumnStyleType, TableColumnLinkStyleType, ThemeDetail } from "comps/controls/styleControlConstants";
 import { RowColorViewType, RowHeightViewType } from "./tableTypes";
 import { CellColorViewType } from "./column/tableColumnComp";
 import { RecordType, OB_ROW_ORI_INDEX } from "./tableUtils";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 import Skeleton from "antd/es/skeleton";
 import { SkeletonButtonProps } from "antd/es/skeleton/Button";
-import { isTransparentColor } from "lowcoder-design";
 
 interface TableTdProps {
   $background: string;
@@ -137,9 +136,9 @@ export const TableCellView = React.forwardRef<HTMLTableCellElement, {
   cellColorFn: CellColorViewType;
   rowIndex: number;
   children: any;
-  columnsStyle: TableColumnStyleType;
+  columnsStyle: TableGlobalColumnStyleType;
   columnStyle: TableColumnStyleType;
-  rowStyle: TableRowStyleType;
+  rowStyle: any;
   linkStyle: TableColumnLinkStyleType;
   tableSize?: string;
   autoHeight?: boolean;
@@ -166,7 +165,6 @@ export const TableCellView = React.forwardRef<HTMLTableCellElement, {
   } = props;
 
   const [editing, setEditing] = useState(false);
-  const rowContext = useContext(TableRowContext);
 
   // Memoize style calculations
   const style = useMemo(() => {
@@ -188,8 +186,10 @@ export const TableCellView = React.forwardRef<HTMLTableCellElement, {
       currentRow: record,
     });
 
+    const explicitBackground = cellColor || rowColor || columnStyle.background;
+
     return {
-      background: cellColor || rowColor || columnStyle.background || columnsStyle.background,
+      background: explicitBackground || 'inherit',
       margin: columnStyle.margin || columnsStyle.margin,
       text: columnStyle.text || columnsStyle.text,
       border: columnStyle.border || columnsStyle.border,
@@ -211,17 +211,12 @@ export const TableCellView = React.forwardRef<HTMLTableCellElement, {
     );
   }
 
-  let { background } = style!;
-  if (rowContext.hover && !isTransparentColor(rowStyle.hoverRowBackground)) {
-    background = 'transparent';
-  }
-
   return (
     <TableCellContext.Provider value={{ isEditing: editing, setIsEditing: setEditing }}>
       <TableTd
         ref={ref}
         {...restProps}
-        $background={background}
+        $background={style!.background}
         $style={style!}
         $defaultThemeDetail={defaultTheme}
         $linkStyle={linkStyle}

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts b/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts
@@ -16,59 +16,57 @@ 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;
+      > tr.ant-table-row-selected {
+        background: ${selectedRowBackground} !important;
+      }
 
-        // > td.ant-table-cell-row-hover,
-        &:hover {
-          background: ${hoverRowBackground || selectedRowBackground || rowStyle.background} !important;
+      ${hasHoverRowBackground && css`
+        > tr:hover:not(.ant-table-row-selected) {
+          background: ${hoverRowBackground} !important;
         }
+      `}
+
+      > tr.ant-table-expanded-row {
+        background: ${background};
       }
+    }
 
-      > tr:nth-of-type(2n).ant-table-row-selected {
-        background: ${selectedRowBackground || alternateBackground} !important;
+    .ant-table-tbody-virtual .ant-table-row {
+      background: ${rowBackground};
 
-        // > td.ant-table-cell-row-hover,
-        &:hover {
-          background: ${hoverRowBackground || selectedRowBackground || alternateBackground} !important;
-        }
+      &:nth-child(2n):not(.ant-table-row-selected) {
+        background: ${alternateBackground};
       }
 
-      // hover row
-      > tr:nth-of-type(2n + 1):hover {
-        background: ${hoverRowBackground || rowStyle.background} !important;
-        > td.ant-table-cell-row-hover {
-          background: transparent;
-        }
-      }
-      > tr:nth-of-type(2n):hover {
-        background: ${hoverRowBackground || alternateBackground} !important;
-        > td.ant-table-cell-row-hover {
-          background: transparent;
-        }
+      &.ant-table-row-selected {
+        background: ${selectedRowBackground} !important;
       }
 
-      > tr.ant-table-expanded-row {
-        background: ${background};
-      }
+      ${hasHoverRowBackground && css`
+        &:hover:not(.ant-table-row-selected) {
+          background: ${hoverRowBackground} !important;
+        }
+      `}
     }
   `;
 };
@@ -298,10 +296,6 @@ export const TableWrapper = styled.div.attrs<{
 
         }
 
-        /* Fix for selected and hovered rows */
-
-
-
         thead > tr:first-child {
           th:last-child {
             border-right: unset;

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
@@ -13,7 +13,7 @@ import {
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
-import { TableColumnStyle, TableRowStyle, TableStyle, TableToolbarStyle, TableHeaderStyle, TableSummaryRowStyle } from "comps/controls/styleControlConstants";
+import { TableColumnStyle, TableGlobalColumnStyle, TableRowStyle, TableStyle, TableToolbarStyle, TableHeaderStyle, TableSummaryRowStyle } from "comps/controls/styleControlConstants";
 import {
   MultiCompBuilder,
   stateComp,
@@ -253,7 +253,7 @@ const tableChildrenMap = {
   hideToolbar: withDefault(BoolControl,false),
   headerStyle: styleControl(TableHeaderStyle, 'headerStyle'),
   searchText: StringControl,
-  columnsStyle: styleControl(TableColumnStyle, 'columnsStyle'),
+  columnsStyle: styleControl(TableGlobalColumnStyle, 'columnsStyle'),
   viewModeResizable: BoolControl,
   visibleResizables: BoolControl,
   // sample data for regenerating columns

diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/BaseTable.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/BaseTable.tsx
@@ -7,7 +7,7 @@ import React, {
   import ResizeableTitle from "./ResizeableTitle";
   import TableCellView from "./TableCellView";
   import { COL_MIN_WIDTH, CustomColumnType } from "../tableUtils";
-  import { TableColumnStyleType } from "comps/controls/styleControlConstants";
+  import { TableColumnStyleType, TableGlobalColumnStyleType } from "comps/controls/styleControlConstants";
   import { RowColorViewType, RowHeightViewType } from "../tableTypes";
   import {
     TableContainer,
@@ -22,7 +22,7 @@ import React, {
     viewModeResizable: boolean;
     rowColorFn: RowColorViewType;
     rowHeightFn: RowHeightViewType;
-    columnsStyle: TableColumnStyleType;
+    columnsStyle: TableGlobalColumnStyleType;
     rowAutoHeight?: boolean;
     customLoading?: boolean;
     onCellClick: (columnName: string, dataIndex: string) => void;

diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/ResizeableTable.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/ResizeableTable.tsx
@@ -9,7 +9,7 @@ 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 { TableColumnStyleType, TableGlobalColumnStyleType } from "comps/controls/styleControlConstants";
 import { RowColorViewType, RowHeightViewType } from "../tableTypes";
 import styled from "styled-components";
 
@@ -41,7 +41,7 @@ export type ResizeableTableProps<RecordType> = Omit<
   viewModeResizable: boolean;
   rowColorFn: RowColorViewType;
   rowHeightFn: RowHeightViewType;
-  columnsStyle: TableColumnStyleType;
+  columnsStyle: TableGlobalColumnStyleType;
   size?: string;
   rowAutoHeight?: boolean;
   customLoading?: boolean;

diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableCellView.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableCellView.tsx
@@ -4,7 +4,7 @@ import Skeleton from "antd/es/skeleton";
 import { SkeletonButtonProps } from "antd/es/skeleton/Button";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 import { OB_ROW_ORI_INDEX } from "../tableUtils";
-import { TableColumnLinkStyleType, TableColumnStyleType, ThemeDetail } from "comps/controls/styleControlConstants";
+import { TableColumnLinkStyleType, TableColumnStyleType, TableGlobalColumnStyleType, ThemeDetail } from "comps/controls/styleControlConstants";
 import { RowColorViewType, RowHeightViewType } from "../tableTypes";
 import { CellColorViewType } from "../column/tableColumnComp";
 
@@ -128,7 +128,7 @@ const TableCellView = React.memo((props: {
   cellColorFn: CellColorViewType;
   rowIndex: number;
   children: any;
-  columnsStyle: TableColumnStyleType;
+  columnsStyle: TableGlobalColumnStyleType;
   columnStyle: TableColumnStyleType;
   linkStyle: TableColumnLinkStyleType;
   tableSize?: string;
@@ -173,8 +173,10 @@ const TableCellView = React.memo((props: {
       currentRow: record,
     });
 
+    const explicitBackground = cellColor || rowColor || columnStyle.background;
+
     return {
-      background: cellColor || rowColor || columnStyle.background || columnsStyle.background,
+      background: explicitBackground || 'inherit',
       margin: columnStyle.margin || columnsStyle.margin,
       text: columnStyle.text || columnsStyle.text,
       border: columnStyle.border || columnsStyle.border,

diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/CellStyles.ts b/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,11 @@ export const CellStyleProvider = styled.div<{
     ${props => props.$columnsStyle?.textAlign && `text-align: ${props.$columnsStyle.textAlign};`}
     ${props => props.$columnsStyle?.customCSS || ''}
   }
-`;
+
+  /* Virtual mode cell styles */
+  .ant-table-tbody-virtual .ant-table-row > td.ant-table-cell {
+    color: ${props => props.$rowStyle?.color || 'rgba(0, 0, 0, 0.85)'};
+    border-color: ${props => props.$rowStyle?.border || '#f0f0f0'};
+    ${props => props.$columnsStyle?.textAlign && `text-align: ${props.$columnsStyle.textAlign};`}
+  }
+`;
diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/RowStyles.ts b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/RowStyles.ts
@@ -1,51 +1,63 @@
-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};
+  .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;
     }
   `}
-
-  /* Alternating row colors - only if explicitly set */
-  ${props => props.$rowStyle?.alternatingBackground && `
-    .ant-table-tbody > tr:nth-child(even) {
-      background: ${props.$rowStyle.alternatingBackground};
+
+  /* Virtual mode row styles */
+  .ant-table-tbody-virtual .ant-table-row {
+    background: ${(props) => props.$rowStyle.background};
+
+    &:nth-child(2n):not(.ant-table-row-selected) {
+      background: ${(props) => props.$rowStyle.alternateBackground} !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-row-selected {
+      background: ${(props) => props.$rowStyle.selectedRowBackground} !important;
+    }
+  }
+
+  ${(props) => !isTransparentColor(props.$rowStyle.hoverRowBackground) && css`
+    .ant-table-tbody-virtual .ant-table-row:hover:not(.ant-table-row-selected) {
+      background: ${props.$rowStyle.hoverRowBackground} !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};
+    }
+
+    .ant-table-tbody-virtual .ant-table-row > td.ant-table-cell {
+      border-bottom: ${props.$rowStyle.borderWidth} ${props.$rowStyle.borderStyle} ${props.$rowStyle.border};
     }
   `}
 
   /* Custom row CSS */
-  ${props => props.$rowStyle?.customCSS || ''}
-`;
+  ${(props) => props.$rowStyle?.customCSS || ''}
+`;