Skip to content

Commit d73a5ff

Browse files
iamfaraniamfaran
committed
add styles
1 parent 37d494a commit d73a5ff

File tree

9 files changed

+266
-53
lines changed

9 files changed

+266
-53
lines changed

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

Lines changed: 66 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,15 @@ import React, {
1111
import { TableColumnStyleType } from "comps/controls/styleControlConstants";
1212
import { RowColorViewType, RowHeightViewType } from "../tableTypes";
1313
import styled from "styled-components";
14+
// Add this import at the top
15+
import {
16+
TableContainer,
17+
HeaderStyleProvider,
18+
CellStyleProvider,
19+
ScrollbarStyleProvider,
20+
RowStyleProvider
21+
} from "../styles";
1422

15-
16-
const StyledTableWrapper = styled.div`
17-
/* Hide AntD's virtual horizontal scrollbar overlay */
18-
.ant-table-tbody-virtual-scrollbar-horizontal {
19-
display: none !important;
20-
height: 0 !important;
21-
}
22-
/* Make the virtual scrollbar container inert (avoids dead click zone) */
23-
.ant-table-tbody-virtual-scrollbar {
24-
pointer-events: none !important;
25-
}
26-
27-
/* (Optional) Some builds also render a sticky helper track – hide it too */
28-
.ant-table-sticky-scroll,
29-
.ant-table-sticky-scroll-bar {
30-
display: none !important;
31-
height: 0 !important;
32-
}
33-
`;
3423
export interface BaseTableProps<RecordType> extends Omit<TableProps<RecordType>, "components" | "columns"> {
3524
columns: CustomColumnType<RecordType>[];
3625
viewModeResizable: boolean;
@@ -40,10 +29,18 @@ import React, {
4029
rowAutoHeight?: boolean;
4130
customLoading?: boolean;
4231
onCellClick: (columnName: string, dataIndex: string) => void;
43-
44-
// NEW: Accept explicit configuration from parent
4532
scroll?: { x?: number | string; y?: number };
4633
virtual?: boolean;
34+
35+
// NEW: Add these style props
36+
style?: any;
37+
headerStyle?: any;
38+
rowStyle?: any;
39+
showHeader?: boolean;
40+
fixedHeader?: boolean;
41+
showHRowGridBorder?: boolean;
42+
showVerticalScrollbar?: boolean;
43+
showHorizontalScrollbar?: boolean;
4744
}
4845

4946
/**
@@ -64,11 +61,19 @@ import React, {
6461
scroll,
6562
virtual,
6663
dataSource,
64+
// the style props
65+
style,
66+
headerStyle,
67+
rowStyle,
68+
showHeader = true,
69+
fixedHeader = false,
70+
showHRowGridBorder = false,
71+
showVerticalScrollbar = true,
72+
showHorizontalScrollbar = true,
6773
...restProps
6874
} = props;
6975

7076
const [resizeData, setResizeData] = useState({ index: -1, width: -1 });
71-
const tableRef = useRef<HTMLDivElement>(null);
7277

7378

7479
const handleResize = useCallback((width: number, index: number) => {
@@ -168,24 +173,45 @@ import React, {
168173

169174

170175
return (
171-
<StyledTableWrapper ref={tableRef}>
172-
<Table<RecordType>
173-
components={{
174-
header: {
175-
cell: ResizeableTitle,
176-
},
177-
body: {
178-
cell: TableCellView,
179-
},
180-
}}
181-
{...(restProps as any)}
182-
dataSource={dataSource}
183-
pagination={false}
184-
columns={memoizedColumns}
185-
virtual={virtual || false}
186-
scroll={scroll || { x: 'max-content' }}
187-
/>
188-
</StyledTableWrapper>
176+
177+
<TableContainer $style={style}>
178+
<HeaderStyleProvider
179+
$headerStyle={headerStyle}
180+
$isSticky={fixedHeader}
181+
$isHidden={!showHeader}
182+
>
183+
<RowStyleProvider
184+
$rowStyle={rowStyle}
185+
$showHRowGridBorder={showHRowGridBorder}
186+
>
187+
<ScrollbarStyleProvider
188+
$showVerticalScrollbar={showVerticalScrollbar}
189+
$showHorizontalScrollbar={showHorizontalScrollbar}
190+
>
191+
<CellStyleProvider $rowStyle={rowStyle} $columnsStyle={columnsStyle}>
192+
<Table<RecordType>
193+
components={{
194+
header: {
195+
cell: ResizeableTitle,
196+
},
197+
body: {
198+
cell: TableCellView,
199+
},
200+
}}
201+
{...(restProps as any)}
202+
dataSource={dataSource}
203+
pagination={false}
204+
columns={memoizedColumns}
205+
virtual={virtual || false}
206+
scroll={scroll || { x: 'max-content' }}
207+
showHeader={showHeader}
208+
sticky={fixedHeader ? { offsetHeader: 0 } : false}
209+
/>
210+
</CellStyleProvider>
211+
</ScrollbarStyleProvider>
212+
</RowStyleProvider>
213+
</HeaderStyleProvider>
214+
</TableContainer>
189215
);
190216
}
191217

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,14 @@ export interface TableRendererProps<RecordType> extends BaseTableProps<RecordTyp
1818
threshold: number;
1919
reason?: string;
2020
};
21+
style?: any;
22+
headerStyle?: any;
23+
rowStyle?: any;
24+
showHeader?: boolean;
25+
fixedHeader?: boolean;
26+
showHRowGridBorder?: boolean;
27+
showVerticalScrollbar?: boolean;
28+
showHorizontalScrollbar?: boolean;
2129
}
2230

2331
function TableRendererComp<RecordType extends object>(props: TableRendererProps<RecordType>) {
@@ -46,6 +54,14 @@ function TableRendererComp<RecordType extends object>(props: TableRendererProps<
4654
columns={columns}
4755
scroll={{ x: totalWidth }}
4856
virtual={false}
57+
style={props.style}
58+
headerStyle={props.headerStyle}
59+
rowStyle={props.rowStyle}
60+
showHeader={props.showHeader}
61+
fixedHeader={props.fixedHeader}
62+
showHRowGridBorder={props.showHRowGridBorder}
63+
showVerticalScrollbar={props.showVerticalScrollbar}
64+
showHorizontalScrollbar={props.showHorizontalScrollbar}
4965
/>
5066
);
5167
}
@@ -63,6 +79,14 @@ function TableRendererComp<RecordType extends object>(props: TableRendererProps<
6379
columns={columns}
6480
scroll={{ x: totalWidth }}
6581
virtual={false}
82+
style={props.style}
83+
headerStyle={props.headerStyle}
84+
rowStyle={props.rowStyle}
85+
showHeader={props.showHeader}
86+
fixedHeader={props.fixedHeader}
87+
showHRowGridBorder={props.showHRowGridBorder}
88+
showVerticalScrollbar={props.showVerticalScrollbar}
89+
showHorizontalScrollbar={props.showHorizontalScrollbar}
6690
/>
6791
);
6892
}
@@ -80,6 +104,14 @@ function TableRendererComp<RecordType extends object>(props: TableRendererProps<
80104
virtualizationConfig={virtualizationConfig}
81105
scroll={scrollConfig}
82106
virtual={true}
107+
style={props.style}
108+
headerStyle={props.headerStyle}
109+
rowStyle={props.rowStyle}
110+
showHeader={props.showHeader}
111+
fixedHeader={props.fixedHeader}
112+
showHRowGridBorder={props.showHRowGridBorder}
113+
showVerticalScrollbar={props.showVerticalScrollbar}
114+
showHorizontalScrollbar={props.showHorizontalScrollbar}
83115
/>
84116
);
85117
}
@@ -92,6 +124,14 @@ function TableRendererComp<RecordType extends object>(props: TableRendererProps<
92124
bodyHeight={bodyHeight}
93125
scroll={scrollConfig}
94126
virtual={false}
127+
style={props.style}
128+
headerStyle={props.headerStyle}
129+
rowStyle={props.rowStyle}
130+
showHeader={props.showHeader}
131+
fixedHeader={props.fixedHeader}
132+
showHRowGridBorder={props.showHRowGridBorder}
133+
showVerticalScrollbar={props.showVerticalScrollbar}
134+
showHorizontalScrollbar={props.showHorizontalScrollbar}
95135
/>
96136
);
97137
}
@@ -103,6 +143,14 @@ function TableRendererComp<RecordType extends object>(props: TableRendererProps<
103143
columns={columns}
104144
scroll={{ x: totalWidth }}
105145
virtual={false}
146+
style={props.style}
147+
headerStyle={props.headerStyle}
148+
rowStyle={props.rowStyle}
149+
showHeader={props.showHeader}
150+
fixedHeader={props.fixedHeader}
151+
showHRowGridBorder={props.showHRowGridBorder}
152+
showVerticalScrollbar={props.showVerticalScrollbar}
153+
showHorizontalScrollbar={props.showHorizontalScrollbar}
106154
/>
107155
);
108156
}

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import styled from "styled-components";
2+
3+
export const CellStyleProvider = styled.div<{
4+
$rowStyle: any;
5+
$columnsStyle: any;
6+
}>`
7+
.ant-table-tbody > tr > td {
8+
background: ${props => props.$rowStyle?.background || '#ffffff'};
9+
color: ${props => props.$rowStyle?.color || 'rgba(0, 0, 0, 0.85)'};
10+
border-color: ${props => props.$rowStyle?.borderColor || '#f0f0f0'};
11+
padding: ${props => props.$rowStyle?.padding || '12px 16px'};
12+
${props => props.$rowStyle?.customCSS || ''}
13+
}
14+
15+
.ant-table-tbody > tr > td {
16+
${props => props.$columnsStyle?.textAlign && `text-align: ${props.$columnsStyle.textAlign};`}
17+
${props => props.$columnsStyle?.customCSS || ''}
18+
}
19+
`;

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import styled from "styled-components";
2+
3+
export const HeaderStyleProvider = styled.div<{
4+
$headerStyle: any;
5+
$isSticky: boolean;
6+
$isHidden: boolean;
7+
}>`
8+
${props => props.$isHidden && `
9+
.ant-table-thead {
10+
display: none;
11+
}
12+
`}
13+
14+
.ant-table-thead > tr > th {
15+
background: ${props => props.$headerStyle?.background || '#fafafa'};
16+
color: ${props => props.$headerStyle?.color || 'rgba(0, 0, 0, 0.85)'};
17+
border-color: ${props => props.$headerStyle?.borderColor || '#f0f0f0'};
18+
padding: ${props => props.$headerStyle?.padding || '16px'};
19+
font-weight: ${props => props.$headerStyle?.fontWeight || '600'};
20+
${props => props.$headerStyle?.customCSS || ''}
21+
}
22+
23+
${props => props.$isSticky && `
24+
.ant-table-thead > tr > th {
25+
position: sticky;
26+
top: 0;
27+
z-index: 3;
28+
}
29+
`}
30+
`;

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import styled from "styled-components";
2+
3+
export const RowStyleProvider = styled.div<{
4+
$rowStyle: any;
5+
$showHRowGridBorder: boolean;
6+
}>`
7+
/* Row container styling */
8+
.ant-table-tbody > tr {
9+
background: ${props => props.$rowStyle?.background || '#ffffff'};
10+
border-color: ${props => props.$rowStyle?.borderColor || '#f0f0f0'};
11+
height: ${props => props.$rowStyle?.height || 'auto'};
12+
min-height: ${props => props.$rowStyle?.minHeight || 'auto'};
13+
}
14+
15+
/* Row hover effects */
16+
.ant-table-tbody > tr:hover {
17+
background: ${props => props.$rowStyle?.hoverBackground || '#f5f5f5'};
18+
}
19+
20+
/* Alternating row colors */
21+
.ant-table-tbody > tr:nth-child(even) {
22+
background: ${props => props.$rowStyle?.alternatingBackground || props.$rowStyle?.background || '#ffffff'};
23+
}
24+
25+
/* Selected row styling */
26+
.ant-table-tbody > tr.ant-table-row-selected {
27+
background: ${props => props.$rowStyle?.selectedBackground || '#e6f7ff'};
28+
}
29+
30+
/* Horizontal grid borders */
31+
${props => props.$showHRowGridBorder && `
32+
.ant-table-tbody > tr > td {
33+
border-bottom: 1px solid ${props.$rowStyle?.borderColor || '#f0f0f0'};
34+
}
35+
`}
36+
37+
/* Custom row CSS */
38+
${props => props.$rowStyle?.customCSS || ''}
39+
`;

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import styled from "styled-components";
2+
3+
export const ScrollbarStyleProvider = styled.div<{
4+
$showVerticalScrollbar: boolean;
5+
$showHorizontalScrollbar: boolean;
6+
}>`
7+
${props => !props.$showVerticalScrollbar && `
8+
.ant-table-body::-webkit-scrollbar:vertical {
9+
display: none;
10+
}
11+
.ant-table-body {
12+
scrollbar-width: none;
13+
}
14+
`}
15+
16+
${props => !props.$showHorizontalScrollbar && `
17+
.ant-table-body::-webkit-scrollbar:horizontal {
18+
display: none;
19+
}
20+
`}
21+
22+
/* Hide ANTD's virtual scrollbars */
23+
.ant-table-tbody-virtual-scrollbar-horizontal {
24+
display: none !important;
25+
height: 0 !important;
26+
}
27+
28+
.ant-table-tbody-virtual-scrollbar {
29+
pointer-events: none !important;
30+
}
31+
`;

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import styled from "styled-components";
2+
3+
export const TableContainer = styled.div<{ $style: any }>`
4+
width: 100%;
5+
height: 100%;
6+
position: relative;
7+
8+
/* Base table container styles */
9+
background: ${props => props.$style?.background || 'transparent'};
10+
border: ${props => props.$style?.border || 'none'};
11+
border-radius: ${props => props.$style?.borderRadius || '0'};
12+
13+
/* Custom CSS injection */
14+
${props => props.$style?.customCSS || ''}
15+
`;

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,11 @@ export { TableWrapper } from "./TableWrapper";
55
export { getTableBaseStyles } from "./tableBaseStyles";
66
export { getTableHeaderStyles } from "./tableHeaderStyles";
77
export { getTableRowStyles } from "./tableRowStyles";
8-
export { getTableToolbarStyles } from "./tableToolbarStyles";
8+
export { getTableToolbarStyles } from "./tableToolbarStyles";
9+
10+
11+
export { TableContainer } from './TableContainerStyles';
12+
export { HeaderStyleProvider } from './HeaderStyles';
13+
export { CellStyleProvider } from './CellStyles';
14+
export { ScrollbarStyleProvider } from './ScrollbarStyles';
15+
export { RowStyleProvider } from './RowStyles';

0 commit comments

Comments
 (0)