From 9df924308db155dd8338cba8475105948ec2eb97 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 5 Jun 2026 00:50:12 +0500 Subject: [PATCH] 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 d788bed84..0bd32d41b 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 2ef7329e8..1989bee03 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 69f4fde15..a2e671112 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 801ec56b8..000000000 --- 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 f145d5216..000000000 --- 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