Skip to content

Commit 08710c9

Browse files
raheeliftikhar5raheeliftikhar5
authored
Merge pull request #2156 from iamfaran/fix/table-selectedrow
[Fix]: Custom Table Styles
2 parents 63a4aad + 6f4f34f commit 08710c9

15 files changed

Lines changed: 172 additions & 250 deletions

File tree

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useUserViewMode } from "util/hooks";
77
import { ReactRef, ResizeHandleAxis } from "layout/gridLayoutPropTypes";
88
import { COL_MIN_WIDTH, RecordType, CustomColumnType } from "./tableUtils";
99
import { RowColorViewType, RowHeightViewType } from "./tableTypes";
10-
import { TableColumnStyleType, TableColumnLinkStyleType, TableRowStyleType } from "comps/controls/styleControlConstants";
10+
import { TableColumnStyleType, TableGlobalColumnStyleType, TableColumnLinkStyleType, TableRowStyleType } from "comps/controls/styleControlConstants";
1111
import { CellColorViewType } from "./column/tableColumnComp";
1212
import { TableCellView } from "./TableCell";
1313
import { TableRowView } from "./TableRow";
@@ -105,7 +105,7 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
105105
visibleResizables: boolean;
106106
rowColorFn: RowColorViewType;
107107
rowHeightFn: RowHeightViewType;
108-
columnsStyle: TableColumnStyleType;
108+
columnsStyle: TableGlobalColumnStyleType;
109109
rowStyle: TableRowStyleType;
110110
size?: string;
111111
rowAutoHeight?: boolean;

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

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
import React, { useContext, useMemo, useState } from "react";
2-
import styled, { css } from "styled-components";
3-
import { TableCellContext, TableRowContext } from "./tableContext";
4-
import { TableColumnStyleType, TableColumnLinkStyleType, ThemeDetail, TableRowStyleType } from "comps/controls/styleControlConstants";
1+
import React, { useMemo, useState } from "react";
2+
import styled from "styled-components";
3+
import { TableCellContext } from "./tableContext";
4+
import { TableColumnStyleType, TableGlobalColumnStyleType, TableColumnLinkStyleType, ThemeDetail } from "comps/controls/styleControlConstants";
55
import { RowColorViewType, RowHeightViewType } from "./tableTypes";
66
import { CellColorViewType } from "./column/tableColumnComp";
77
import { RecordType, OB_ROW_ORI_INDEX } from "./tableUtils";
88
import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
99
import Skeleton from "antd/es/skeleton";
1010
import { SkeletonButtonProps } from "antd/es/skeleton/Button";
11-
import { isTransparentColor } from "lowcoder-design";
1211

1312
interface TableTdProps {
1413
$background: string;
@@ -137,9 +136,9 @@ export const TableCellView = React.forwardRef<HTMLTableCellElement, {
137136
cellColorFn: CellColorViewType;
138137
rowIndex: number;
139138
children: any;
140-
columnsStyle: TableColumnStyleType;
139+
columnsStyle: TableGlobalColumnStyleType;
141140
columnStyle: TableColumnStyleType;
142-
rowStyle: TableRowStyleType;
141+
rowStyle: any;
143142
linkStyle: TableColumnLinkStyleType;
144143
tableSize?: string;
145144
autoHeight?: boolean;
@@ -166,7 +165,6 @@ export const TableCellView = React.forwardRef<HTMLTableCellElement, {
166165
} = props;
167166

168167
const [editing, setEditing] = useState(false);
169-
const rowContext = useContext(TableRowContext);
170168

171169
// Memoize style calculations
172170
const style = useMemo(() => {
@@ -188,8 +186,10 @@ export const TableCellView = React.forwardRef<HTMLTableCellElement, {
188186
currentRow: record,
189187
});
190188

189+
const explicitBackground = cellColor || rowColor || columnStyle.background;
190+
191191
return {
192-
background: cellColor || rowColor || columnStyle.background || columnsStyle.background,
192+
background: explicitBackground || 'inherit',
193193
margin: columnStyle.margin || columnsStyle.margin,
194194
text: columnStyle.text || columnsStyle.text,
195195
border: columnStyle.border || columnsStyle.border,
@@ -211,17 +211,12 @@ export const TableCellView = React.forwardRef<HTMLTableCellElement, {
211211
);
212212
}
213213

214-
let { background } = style!;
215-
if (rowContext.hover && !isTransparentColor(rowStyle.hoverRowBackground)) {
216-
background = 'transparent';
217-
}
218-
219214
return (
220215
<TableCellContext.Provider value={{ isEditing: editing, setIsEditing: setEditing }}>
221216
<TableTd
222217
ref={ref}
223218
{...restProps}
224-
$background={background}
219+
$background={style!.background}
225220
$style={style!}
226221
$defaultThemeDetail={defaultTheme}
227222
$linkStyle={linkStyle}

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -722,6 +722,33 @@ TableTmpComp = withMethodExposing(TableTmpComp, [
722722
comp.children.selection.children.selectedRowKeys.dispatchChangeValueAction(allKeys);
723723
},
724724
},
725+
{
726+
method: {
727+
name: "rowClick",
728+
description:
729+
"Programmatically click a table row by index and trigger rowClick event handlers",
730+
params: [{ name: "rowIndex", type: "number" }],
731+
},
732+
execute: (comp, values) => {
733+
const rowIndex = Number(values[0]);
734+
const displayData = comp.filterData ?? [];
735+
if (Number.isNaN(rowIndex) || rowIndex < 0 || rowIndex >= displayData.length) {
736+
return Promise.reject(
737+
"rowClick expects a valid row index within the current filtered data"
738+
);
739+
}
740+
const key = displayData[rowIndex][OB_ROW_ORI_INDEX] + "";
741+
const prevKey = comp.children.selection.children.selectedRowKey.getView();
742+
if (key !== prevKey) {
743+
comp.children.selection.children.selectedRowKey.dispatchChangeValueAction(key);
744+
}
745+
const onEvent = comp.children.onEvent.getView();
746+
onEvent("rowClick");
747+
if (key !== prevKey) {
748+
onEvent("rowSelectChange");
749+
}
750+
},
751+
},
725752
{
726753
method: {
727754
name: "selectRowsByIndex",

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

Lines changed: 31 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -16,59 +16,57 @@ export const getStyle = (
1616
toolbarStyle: TableToolbarStyleType,
1717
) => {
1818
const background = genLinerGradient(style.background);
19-
const selectedRowBackground = genLinerGradient(rowStyle.selectedRowBackground);
20-
const hoverRowBackground = isTransparentColor(rowStyle.hoverRowBackground) ? null : genLinerGradient(rowStyle.hoverRowBackground);
19+
const rowBackground = genLinerGradient(rowStyle.background);
2120
const alternateBackground = genLinerGradient(rowStyle.alternateBackground);
21+
const selectedRowBackground = genLinerGradient(rowStyle.selectedRowBackground);
22+
const hoverRowBackground = genLinerGradient(rowStyle.hoverRowBackground);
23+
const hasHoverRowBackground = !isTransparentColor(rowStyle.hoverRowBackground);
2224

2325
return css`
2426
.ant-table-body {
25-
background: ${genLinerGradient(style.background)};
27+
background: ${background};
2628
}
29+
2730
.ant-table-tbody {
28-
> tr:nth-of-type(2n + 1) {
29-
background: ${genLinerGradient(rowStyle.background)};
31+
> tr {
32+
background: ${rowBackground};
3033
}
3134
32-
> tr:nth-of-type(2n) {
35+
> tr:nth-of-type(2n):not(.ant-table-row-selected) {
3336
background: ${alternateBackground};
3437
}
3538
36-
// selected row
37-
> tr:nth-of-type(2n + 1).ant-table-row-selected {
38-
background: ${selectedRowBackground || rowStyle.background} !important;
39+
> tr.ant-table-row-selected {
40+
background: ${selectedRowBackground} !important;
41+
}
3942
40-
// > td.ant-table-cell-row-hover,
41-
&:hover {
42-
background: ${hoverRowBackground || selectedRowBackground || rowStyle.background} !important;
43+
${hasHoverRowBackground && css`
44+
> tr:hover:not(.ant-table-row-selected) {
45+
background: ${hoverRowBackground} !important;
4346
}
47+
`}
48+
49+
> tr.ant-table-expanded-row {
50+
background: ${background};
4451
}
52+
}
4553
46-
> tr:nth-of-type(2n).ant-table-row-selected {
47-
background: ${selectedRowBackground || alternateBackground} !important;
54+
.ant-table-tbody-virtual .ant-table-row {
55+
background: ${rowBackground};
4856
49-
// > td.ant-table-cell-row-hover,
50-
&:hover {
51-
background: ${hoverRowBackground || selectedRowBackground || alternateBackground} !important;
52-
}
57+
&:nth-child(2n):not(.ant-table-row-selected) {
58+
background: ${alternateBackground};
5359
}
5460
55-
// hover row
56-
> tr:nth-of-type(2n + 1):hover {
57-
background: ${hoverRowBackground || rowStyle.background} !important;
58-
> td.ant-table-cell-row-hover {
59-
background: transparent;
60-
}
61-
}
62-
> tr:nth-of-type(2n):hover {
63-
background: ${hoverRowBackground || alternateBackground} !important;
64-
> td.ant-table-cell-row-hover {
65-
background: transparent;
66-
}
61+
&.ant-table-row-selected {
62+
background: ${selectedRowBackground} !important;
6763
}
6864
69-
> tr.ant-table-expanded-row {
70-
background: ${background};
71-
}
65+
${hasHoverRowBackground && css`
66+
&:hover:not(.ant-table-row-selected) {
67+
background: ${hoverRowBackground} !important;
68+
}
69+
`}
7270
}
7371
`;
7472
};
@@ -298,10 +296,6 @@ export const TableWrapper = styled.div.attrs<{
298296
299297
}
300298
301-
/* Fix for selected and hovered rows */
302-
303-
304-
305299
thead > tr:first-child {
306300
th:last-child {
307301
border-right: unset;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
import { dropdownControl } from "comps/controls/dropdownControl";
1414
import { eventHandlerControl } from "comps/controls/eventHandlerControl";
1515
import { styleControl } from "comps/controls/styleControl";
16-
import { TableColumnStyle, TableRowStyle, TableStyle, TableToolbarStyle, TableHeaderStyle, TableSummaryRowStyle } from "comps/controls/styleControlConstants";
16+
import { TableColumnStyle, TableGlobalColumnStyle, TableRowStyle, TableStyle, TableToolbarStyle, TableHeaderStyle, TableSummaryRowStyle } from "comps/controls/styleControlConstants";
1717
import {
1818
MultiCompBuilder,
1919
stateComp,
@@ -253,7 +253,7 @@ const tableChildrenMap = {
253253
hideToolbar: withDefault(BoolControl,false),
254254
headerStyle: styleControl(TableHeaderStyle, 'headerStyle'),
255255
searchText: StringControl,
256-
columnsStyle: styleControl(TableColumnStyle, 'columnsStyle'),
256+
columnsStyle: styleControl(TableGlobalColumnStyle, 'columnsStyle'),
257257
viewModeResizable: BoolControl,
258258
visibleResizables: BoolControl,
259259
// sample data for regenerating columns

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,4 +78,31 @@ export const tableMethodExposings = [
7878
comp.children.selection.children.selectedRowKeys.dispatchChangeValueAction(allKeys);
7979
},
8080
},
81+
{
82+
method: {
83+
name: "rowClick",
84+
description:
85+
"Programmatically click a table row by index and trigger rowClick event handlers",
86+
params: [{ name: "rowIndex", type: "number" as const }],
87+
},
88+
execute: (comp: any, values: any[]) => {
89+
const rowIndex = Number(values[0]);
90+
const displayData = comp.filterData ?? [];
91+
if (Number.isNaN(rowIndex) || rowIndex < 0 || rowIndex >= displayData.length) {
92+
return Promise.reject(
93+
"rowClick expects a valid row index within the current filtered data"
94+
);
95+
}
96+
const key = displayData[rowIndex][OB_ROW_ORI_INDEX] + "";
97+
const prevKey = comp.children.selection.children.selectedRowKey.getView();
98+
if (key !== prevKey) {
99+
comp.children.selection.children.selectedRowKey.dispatchChangeValueAction(key);
100+
}
101+
const onEvent = comp.children.onEvent.getView();
102+
onEvent("rowClick");
103+
if (key !== prevKey) {
104+
onEvent("rowSelectChange");
105+
}
106+
},
107+
},
81108
];

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/BaseTable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import React, {
77
import ResizeableTitle from "./ResizeableTitle";
88
import TableCellView from "./TableCellView";
99
import { COL_MIN_WIDTH, CustomColumnType } from "../tableUtils";
10-
import { TableColumnStyleType } from "comps/controls/styleControlConstants";
10+
import { TableColumnStyleType, TableGlobalColumnStyleType } from "comps/controls/styleControlConstants";
1111
import { RowColorViewType, RowHeightViewType } from "../tableTypes";
1212
import {
1313
TableContainer,
@@ -22,7 +22,7 @@ import React, {
2222
viewModeResizable: boolean;
2323
rowColorFn: RowColorViewType;
2424
rowHeightFn: RowHeightViewType;
25-
columnsStyle: TableColumnStyleType;
25+
columnsStyle: TableGlobalColumnStyleType;
2626
rowAutoHeight?: boolean;
2727
customLoading?: boolean;
2828
onCellClick: (columnName: string, dataIndex: string) => void;

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/ResizeableTable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { default as Table, TableProps, ColumnType } from "antd/es/table";
99
import ResizeableTitle from "./ResizeableTitle";
1010
import TableCellView from "./TableCellView";
1111
import { COL_MIN_WIDTH, CustomColumnType } from "../tableUtils";
12-
import { TableColumnStyleType } from "comps/controls/styleControlConstants";
12+
import { TableColumnStyleType, TableGlobalColumnStyleType } from "comps/controls/styleControlConstants";
1313
import { RowColorViewType, RowHeightViewType } from "../tableTypes";
1414
import styled from "styled-components";
1515

@@ -41,7 +41,7 @@ export type ResizeableTableProps<RecordType> = Omit<
4141
viewModeResizable: boolean;
4242
rowColorFn: RowColorViewType;
4343
rowHeightFn: RowHeightViewType;
44-
columnsStyle: TableColumnStyleType;
44+
columnsStyle: TableGlobalColumnStyleType;
4545
size?: string;
4646
rowAutoHeight?: boolean;
4747
customLoading?: boolean;

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableCellView.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Skeleton from "antd/es/skeleton";
44
import { SkeletonButtonProps } from "antd/es/skeleton/Button";
55
import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
66
import { OB_ROW_ORI_INDEX } from "../tableUtils";
7-
import { TableColumnLinkStyleType, TableColumnStyleType, ThemeDetail } from "comps/controls/styleControlConstants";
7+
import { TableColumnLinkStyleType, TableColumnStyleType, TableGlobalColumnStyleType, ThemeDetail } from "comps/controls/styleControlConstants";
88
import { RowColorViewType, RowHeightViewType } from "../tableTypes";
99
import { CellColorViewType } from "../column/tableColumnComp";
1010

@@ -128,7 +128,7 @@ const TableCellView = React.memo((props: {
128128
cellColorFn: CellColorViewType;
129129
rowIndex: number;
130130
children: any;
131-
columnsStyle: TableColumnStyleType;
131+
columnsStyle: TableGlobalColumnStyleType;
132132
columnStyle: TableColumnStyleType;
133133
linkStyle: TableColumnLinkStyleType;
134134
tableSize?: string;
@@ -173,8 +173,10 @@ const TableCellView = React.memo((props: {
173173
currentRow: record,
174174
});
175175

176+
const explicitBackground = cellColor || rowColor || columnStyle.background;
177+
176178
return {
177-
background: cellColor || rowColor || columnStyle.background || columnsStyle.background,
179+
background: explicitBackground || 'inherit',
178180
margin: columnStyle.margin || columnsStyle.margin,
179181
text: columnStyle.text || columnsStyle.text,
180182
border: columnStyle.border || columnsStyle.border,

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const CellStyleProvider = styled.div<{
77
.ant-table-tbody > tr > td {
88
background: ${props => props.$rowStyle?.background || '#ffffff'};
99
color: ${props => props.$rowStyle?.color || 'rgba(0, 0, 0, 0.85)'};
10-
border-color: ${props => props.$rowStyle?.borderColor || '#f0f0f0'};
10+
border-color: ${props => props.$rowStyle?.border || '#f0f0f0'};
1111
/* padding: ${props => props.$rowStyle?.padding || '12px 16px'}; */
1212
${props => props.$rowStyle?.customCSS || ''}
1313
}
@@ -16,4 +16,11 @@ export const CellStyleProvider = styled.div<{
1616
${props => props.$columnsStyle?.textAlign && `text-align: ${props.$columnsStyle.textAlign};`}
1717
${props => props.$columnsStyle?.customCSS || ''}
1818
}
19-
`;
19+
20+
/* Virtual mode cell styles */
21+
.ant-table-tbody-virtual .ant-table-row > td.ant-table-cell {
22+
color: ${props => props.$rowStyle?.color || 'rgba(0, 0, 0, 0.85)'};
23+
border-color: ${props => props.$rowStyle?.border || '#f0f0f0'};
24+
${props => props.$columnsStyle?.textAlign && `text-align: ${props.$columnsStyle.textAlign};`}
25+
}
26+
`;

0 commit comments

Comments
 (0)