[Fix]: Custom Table Styles

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;

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}

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

@@ -722,6 +722,33 @@ TableTmpComp = withMethodExposing(TableTmpComp, [
       comp.children.selection.children.selectedRowKeys.dispatchChangeValueAction(allKeys);
     },
   },
+  {
+    method: {
+      name: "rowClick",
+      description:
+        "Programmatically click a table row by index and trigger rowClick event handlers",
+      params: [{ name: "rowIndex", type: "number" }],
+    },
+    execute: (comp, values) => {
+      const rowIndex = Number(values[0]);
+      const displayData = comp.filterData ?? [];
+      if (Number.isNaN(rowIndex) || rowIndex < 0 || rowIndex >= displayData.length) {
+        return Promise.reject(
+          "rowClick expects a valid row index within the current filtered data"
+        );
+      }
+      const key = displayData[rowIndex][OB_ROW_ORI_INDEX] + "";
+      const prevKey = comp.children.selection.children.selectedRowKey.getView();
+      if (key !== prevKey) {
+        comp.children.selection.children.selectedRowKey.dispatchChangeValueAction(key);
+      }
+      const onEvent = comp.children.onEvent.getView();
+      onEvent("rowClick");
+      if (key !== prevKey) {
+        onEvent("rowSelectChange");
+      }
+    },
+  },
   {
     method: {
       name: "selectRowsByIndex",

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;

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

client/packages/lowcoder/src/comps/comps/tableLiteComp/methods/tableMethodExposings.ts

@@ -78,4 +78,31 @@ export const tableMethodExposings = [
       comp.children.selection.children.selectedRowKeys.dispatchChangeValueAction(allKeys);
     },
   },
+  {
+    method: {
+      name: "rowClick",
+      description:
+        "Programmatically click a table row by index and trigger rowClick event handlers",
+      params: [{ name: "rowIndex", type: "number" as const }],
+    },
+    execute: (comp: any, values: any[]) => {
+      const rowIndex = Number(values[0]);
+      const displayData = comp.filterData ?? [];
+      if (Number.isNaN(rowIndex) || rowIndex < 0 || rowIndex >= displayData.length) {
+        return Promise.reject(
+          "rowClick expects a valid row index within the current filtered data"
+        );
+      }
+      const key = displayData[rowIndex][OB_ROW_ORI_INDEX] + "";
+      const prevKey = comp.children.selection.children.selectedRowKey.getView();
+      if (key !== prevKey) {
+        comp.children.selection.children.selectedRowKey.dispatchChangeValueAction(key);
+      }
+      const onEvent = comp.children.onEvent.getView();
+      onEvent("rowClick");
+      if (key !== prevKey) {
+        onEvent("rowSelectChange");
+      }
+    },
+  },
 ]; 

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;

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;

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,

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};`}
+  }
+`;