From 9df924308db155dd8338cba8475105948ec2eb97 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 5 Jun 2026 00:50:12 +0500 Subject: [PATCH 1/3] fix: tablelite + tableComp styles --- .../src/comps/comps/tableComp/tableStyles.ts | 59 ++++----- .../comps/tableLiteComp/styles/CellStyles.ts | 4 +- .../comps/tableLiteComp/styles/RowStyles.ts | 60 ++++----- .../tableLiteComp/styles/TableWrapper.tsx | 38 ------ .../tableLiteComp/styles/tableRowStyles.ts | 116 ------------------ 5 files changed, 55 insertions(+), 222 deletions(-) delete mode 100644 client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/TableWrapper.tsx delete mode 100644 client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/tableRowStyles.ts diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts b/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts index d788bed843..0bd32d41b9 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts +++ b/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; diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/CellStyles.ts b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/CellStyles.ts index 2ef7329e8d..1989bee03f 100644 --- 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,4 @@ export const CellStyleProvider = styled.div<{ ${props => props.$columnsStyle?.textAlign && `text-align: ${props.$columnsStyle.textAlign};`} ${props => props.$columnsStyle?.customCSS || ''} } -`; \ No newline at end of file +`; diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/RowStyles.ts b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/RowStyles.ts index 69f4fde15e..a2e6711122 100644 --- 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,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 || ''} -`; \ No newline at end of file + ${(props) => props.$rowStyle?.customCSS || ''} +`; diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/TableWrapper.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/TableWrapper.tsx deleted file mode 100644 index 801ec56b80..0000000000 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/TableWrapper.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import styled from "styled-components"; -import { - TableStyleType, - TableHeaderStyleType, - TableRowStyleType, -} from "comps/controls/styleControlConstants"; - -import { getTableBaseStyles } from "./tableBaseStyles"; -import { getTableHeaderStyles } from "./tableHeaderStyles"; -import { getTableRowStyles } from "./tableRowStyles"; - -interface TableWrapperProps { - $style: TableStyleType; - $headerStyle: TableHeaderStyleType; - $rowStyle: TableRowStyleType; - $visibleResizables: boolean; - $showHRowGridBorder?: boolean; -} - -export const TableWrapper = styled.div` - /* Base table styles */ - ${(props) => getTableBaseStyles(props.$style)} - - /* Header styles */ - ${(props) => getTableHeaderStyles(props.$headerStyle, props.$visibleResizables)} - - /* Row styles */ - ${(props) => getTableRowStyles(props.$rowStyle)} - - - /* Additional table specific styles */ - ${(props) => !props.$showHRowGridBorder && ` - .ant-table thead > tr > th, - .ant-table tbody > tr > td { - border-bottom: 0px; - } - `} -`; \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/tableRowStyles.ts b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/tableRowStyles.ts deleted file mode 100644 index f145d5216d..0000000000 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/tableRowStyles.ts +++ /dev/null @@ -1,116 +0,0 @@ -import { css } from "styled-components"; -import { TableRowStyleType } from "comps/controls/styleControlConstants"; -import { darkenColor } from "lowcoder-design"; - -export const getTableRowStyles = ( - rowStyle: TableRowStyleType -) => css` - .ant-table { - > .ant-table-container { - .ant-table-body { - background: ${rowStyle.background}; - } - - .ant-table-tbody { - /* Regular row (odd rows - 1st, 3rd, 5th, etc.) */ - > tr:nth-of-type(2n + 1) { - background: ${rowStyle.background}; - - > td.ant-table-cell { - background: transparent; - border-color: ${rowStyle.border}; - border-width: ${rowStyle.borderWidth}; - border-style: ${rowStyle.borderStyle}; - border-radius: ${rowStyle.radius}; - } - } - - /* Alternate row (even rows - 2nd, 4th, 6th, etc.) */ - > tr:nth-of-type(2n) { - background: ${rowStyle.alternateBackground}; - - > td.ant-table-cell { - background: transparent; - border-color: ${rowStyle.border}; - border-width: ${rowStyle.borderWidth}; - border-style: ${rowStyle.borderStyle}; - border-radius: ${rowStyle.radius}; - } - } - - /* Selected row states */ - > tr:nth-of-type(2n + 1).ant-table-row-selected { - background: ${rowStyle.selectedRowBackground} !important; - - > td.ant-table-cell { - background: transparent !important; - } - - &:hover { - background: ${darkenColor(rowStyle.selectedRowBackground, 0.05)} !important; - } - } - - > tr:nth-of-type(2n).ant-table-row-selected { - background: ${rowStyle.selectedRowBackground} !important; - - > td.ant-table-cell { - background: transparent !important; - } - - &:hover { - background: ${darkenColor(rowStyle.selectedRowBackground, 0.05)} !important; - } - } - - /* Hover row states for non-selected rows */ - > tr:nth-of-type(2n + 1):hover:not(.ant-table-row-selected) { - background: ${rowStyle.hoverRowBackground} !important; - - > td.ant-table-cell-row-hover { - background: transparent; - } - } - - > tr:nth-of-type(2n):hover:not(.ant-table-row-selected) { - background: ${rowStyle.hoverRowBackground} !important; - - > td.ant-table-cell-row-hover { - background: transparent; - } - } - - /* Fixed column support for row backgrounds */ - tr td.ant-table-cell-fix-left, - tr td.ant-table-cell-fix-right { - z-index: 1; - background: inherit; - transition: background-color 0.3s; - } - - /* Selected row fixed columns */ - tr.ant-table-row-selected td.ant-table-cell-fix-left, - tr.ant-table-row-selected td.ant-table-cell-fix-right { - background-color: ${rowStyle.selectedRowBackground} !important; - } - - /* Hover row fixed columns */ - tr:hover:not(.ant-table-row-selected) td.ant-table-cell-fix-left, - tr:hover:not(.ant-table-row-selected) td.ant-table-cell-fix-right { - background-color: ${rowStyle.hoverRowBackground} !important; - } - - /* Selected and hovered row fixed columns */ - tr.ant-table-row-selected:hover td.ant-table-cell-fix-left, - tr.ant-table-row-selected:hover td.ant-table-cell-fix-right { - background-color: ${darkenColor(rowStyle.selectedRowBackground, 0.05)} !important; - } - } - - /* Last cell border removal */ - table tbody > tr > td:last-child { - border-right: unset !important; - } - } - } -`; \ No newline at end of file From cd3d68ab7bdb82fff0ab44303f9e937981a82854 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 3 Jul 2026 19:11:55 +0500 Subject: [PATCH 2/3] simplify styles and fix #1868 issue --- .../src/comps/comps/tableComp/TableCell.tsx | 23 ++++++++----------- .../src/comps/comps/tableComp/tableStyles.ts | 11 --------- .../tableLiteComp/parts/TableCellView.tsx | 4 +++- .../comps/tableLiteComp/styles/RowStyles.ts | 11 --------- 4 files changed, 12 insertions(+), 37 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/TableCell.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/TableCell.tsx index cc46bfe056..fb68c544db 100644 --- 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, 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; @@ -139,7 +138,7 @@ export const TableCellView = React.forwardRef { @@ -188,8 +186,10 @@ export const TableCellView = React.forwardRef 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; - } - - ${hasHoverRowBackground && css` - > tr:hover:not(.ant-table-row-selected) > td.ant-table-cell { - background: transparent !important; - } - `} - > tr.ant-table-expanded-row { background: ${background}; } diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableCellView.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableCellView.tsx index 70de6dee71..1c26a3fd2f 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableCellView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableCellView.tsx @@ -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/RowStyles.ts b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/RowStyles.ts index a2e6711122..971e184df2 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/RowStyles.ts +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/RowStyles.ts @@ -27,17 +27,6 @@ export const RowStyleProvider = styled.div<{ background: ${props.$rowStyle.hoverRowBackground} !important; } `} - - .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 && ` From d1043f2ee032c5fb24b605346c9d1709beb981f0 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Mon, 6 Jul 2026 21:33:45 +0500 Subject: [PATCH 3/3] fix: table virtaulization styles, ts errors and overriding cellcolumns --- .../comps/comps/tableComp/ResizeableTable.tsx | 4 ++-- .../src/comps/comps/tableComp/TableCell.tsx | 4 ++-- .../src/comps/comps/tableComp/tableStyles.ts | 18 +++++++++++++++ .../src/comps/comps/tableComp/tableTypes.tsx | 4 ++-- .../comps/tableLiteComp/parts/BaseTable.tsx | 4 ++-- .../tableLiteComp/parts/ResizeableTable.tsx | 4 ++-- .../tableLiteComp/parts/TableCellView.tsx | 4 ++-- .../comps/tableLiteComp/styles/CellStyles.ts | 7 ++++++ .../comps/tableLiteComp/styles/RowStyles.ts | 23 +++++++++++++++++++ .../comps/comps/tableLiteComp/tableTypes.tsx | 4 ++-- .../comps/controls/styleControlConstants.tsx | 12 ++++++++++ 11 files changed, 74 insertions(+), 14 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/ResizeableTable.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/ResizeableTable.tsx index b85c16afbb..359a208466 100644 --- 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 = Omit, "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 index fb68c544db..da65c8a29d 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/TableCell.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/TableCell.tsx @@ -1,7 +1,7 @@ import React, { useMemo, useState } from "react"; import styled from "styled-components"; import { TableCellContext } from "./tableContext"; -import { TableColumnStyleType, TableColumnLinkStyleType, ThemeDetail } from "comps/controls/styleControlConstants"; +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"; @@ -136,7 +136,7 @@ export const TableCellView = React.forwardRef 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 index 16ca3a7d60..475d5f73d8 100644 --- 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 = 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 index 1c26a3fd2f..c7337ffb1f 100644 --- 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; diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/CellStyles.ts b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/CellStyles.ts index 1989bee03f..c63302501f 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/CellStyles.ts +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/CellStyles.ts @@ -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 index 971e184df2..6dfd29f5b4 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/RowStyles.ts +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/RowStyles.ts @@ -27,12 +27,35 @@ export const RowStyleProvider = styled.div<{ background: ${props.$rowStyle.hoverRowBackground} !important; } `} + + /* 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; + } + + &.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 && ` .ant-table-tbody > tr > td { 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 */ diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableTypes.tsx index 7a16193c91..4d5cf410fb 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableTypes.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableTypes.tsx @@ -12,7 +12,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, @@ -211,7 +211,7 @@ const tableChildrenMap = { toolbarStyle: styleControl(TableToolbarStyle, 'toolbarStyle'), hideToolbar: withDefault(BoolControl,false), headerStyle: styleControl(TableHeaderStyle, 'headerStyle'), - 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/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 815184ea7f..e8f5b50503 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1962,6 +1962,17 @@ export const TableColumnStyle = [ FONT_STYLE, ] as const; +export const TableGlobalColumnStyle = [ + getStaticBorder(), + MARGIN, + RADIUS, + TEXT, + TEXT_SIZE, + TEXT_WEIGHT, + FONT_FAMILY, + FONT_STYLE, +] as const; + export const TableColumnLinkStyle = [...LinkTextStyle] as const; export const TableSummaryRowStyle = [ @@ -2568,6 +2579,7 @@ export type TableHeaderStyleType = StyleConfigType; export type TableToolbarStyleType = StyleConfigType; export type TableRowStyleType = StyleConfigType; export type TableColumnStyleType = StyleConfigType; +export type TableGlobalColumnStyleType = StyleConfigType; export type TableColumnLinkStyleType = StyleConfigType< typeof TableColumnLinkStyle >;