Skip to content

Commit 4590bfe

Browse files
iamfaraniamfaran
committed
add remaining styles
1 parent 3edaee4 commit 4590bfe

File tree

11 files changed

+189
-191
lines changed

11 files changed

+189
-191
lines changed

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

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,20 @@ import React, {
22
useCallback,
33
useMemo,
44
useState,
5-
useRef,
65
} from "react";
76
import { default as Table, TableProps, ColumnType } from "antd/es/table";
87
import ResizeableTitle from "./ResizeableTitle";
98
import TableCellView from "./TableCellView";
109
import { COL_MIN_WIDTH, CustomColumnType } from "../tableUtils";
1110
import { TableColumnStyleType } from "comps/controls/styleControlConstants";
1211
import { RowColorViewType, RowHeightViewType } from "../tableTypes";
13-
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";
12+
import {
13+
TableContainer,
14+
HeaderStyleProvider,
15+
CellStyleProvider,
16+
ScrollbarStyleProvider,
17+
RowStyleProvider
18+
} from "../styles";
2219

2320
export interface BaseTableProps<RecordType> extends Omit<TableProps<RecordType>, "components" | "columns"> {
2421
columns: CustomColumnType<RecordType>[];
@@ -36,6 +33,7 @@ import {
3633
style?: any;
3734
headerStyle?: any;
3835
rowStyle?: any;
36+
toolbarStyle?: any;
3937
showHeader?: boolean;
4038
fixedHeader?: boolean;
4139
showHRowGridBorder?: boolean;
@@ -61,18 +59,20 @@ import {
6159
scroll,
6260
virtual,
6361
dataSource,
62+
size = "large",
6463
// the style props
6564
style,
6665
headerStyle,
6766
rowStyle,
67+
toolbarStyle,
6868
showHeader = true,
6969
fixedHeader = false,
7070
showHRowGridBorder = false,
71-
showVerticalScrollbar = true,
72-
showHorizontalScrollbar = true,
71+
showVerticalScrollbar = false,
72+
showHorizontalScrollbar = false,
7373
...restProps
7474
} = props;
75-
75+
7676
const [resizeData, setResizeData] = useState({ index: -1, width: -1 });
7777

7878

@@ -206,6 +206,7 @@ import {
206206
scroll={scroll || { x: 'max-content' }}
207207
showHeader={showHeader}
208208
sticky={fixedHeader ? { offsetHeader: 0 } : false}
209+
size={size}
209210
/>
210211
</CellStyleProvider>
211212
</ScrollbarStyleProvider>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const CellStyleProvider = styled.div<{
88
background: ${props => props.$rowStyle?.background || '#ffffff'};
99
color: ${props => props.$rowStyle?.color || 'rgba(0, 0, 0, 0.85)'};
1010
border-color: ${props => props.$rowStyle?.borderColor || '#f0f0f0'};
11-
padding: ${props => props.$rowStyle?.padding || '12px 16px'};
11+
/* padding: ${props => props.$rowStyle?.padding || '12px 16px'}; */
1212
${props => props.$rowStyle?.customCSS || ''}
1313
}
1414

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ export const HeaderStyleProvider = styled.div<{
55
$isSticky: boolean;
66
$isHidden: boolean;
77
}>`
8+
${props => {
9+
console.log("HeaderStyleProvider props:", props);
10+
return "";
11+
}}
12+
813
${props => props.$isHidden && `
914
.ant-table-thead {
1015
display: none;
@@ -17,11 +22,14 @@ export const HeaderStyleProvider = styled.div<{
1722
border-color: ${props => props.$headerStyle?.border};
1823
border-width: ${props => props.$headerStyle?.borderWidth};
1924
padding: ${props => props.$headerStyle?.padding};
20-
margin: ${props => props.$headerStyle?.margin};
2125
font-size: ${props => props.$headerStyle?.textSize};
2226
2327
${props => props.$headerStyle?.customCSS || ''}
2428
}
29+
30+
.ant-table-thead > tr > th > div {
31+
margin: ${props => props.$headerStyle?.margin};
32+
}
2533
2634
${props => props.$isSticky && `
2735
&&& .ant-table-thead > tr > th {
@@ -30,4 +38,4 @@ export const HeaderStyleProvider = styled.div<{
3038
z-index: 3;
3139
}
3240
`}
33-
`;
41+
`;

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

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,40 @@ export const RowStyleProvider = styled.div<{
44
$rowStyle: any;
55
$showHRowGridBorder: boolean;
66
}>`
7-
/* Row container styling */
7+
8+
/* Hide the measure row to avoid the extra space */
9+
tr.ant-table-measure-row{
10+
visibility: collapse;
11+
}
12+
13+
/* Only apply row styles if explicitly set by user */
814
.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'};
15+
${props => props.$rowStyle?.background && `background: ${props.$rowStyle.background};`}
16+
${props => props.$rowStyle?.borderColor && `border-color: ${props.$rowStyle.borderColor};`}
17+
${props => props.$rowStyle?.height && `height: ${props.$rowStyle.height};`}
18+
${props => props.$rowStyle?.minHeight && `min-height: ${props.$rowStyle.minHeight};`}
1319
}
1420
15-
/* Row hover effects */
16-
.ant-table-tbody > tr:hover {
17-
background: ${props => props.$rowStyle?.hoverBackground || '#f5f5f5'};
18-
}
21+
/* Row hover effects - only if explicitly set */
22+
${props => props.$rowStyle?.hoverBackground && `
23+
.ant-table-tbody > tr:hover {
24+
background: ${props.$rowStyle.hoverBackground};
25+
}
26+
`}
1927
20-
/* Alternating row colors */
21-
.ant-table-tbody > tr:nth-child(even) {
22-
background: ${props => props.$rowStyle?.alternatingBackground || props.$rowStyle?.background || '#ffffff'};
23-
}
28+
/* Alternating row colors - only if explicitly set */
29+
${props => props.$rowStyle?.alternatingBackground && `
30+
.ant-table-tbody > tr:nth-child(even) {
31+
background: ${props.$rowStyle.alternatingBackground};
32+
}
33+
`}
2434
25-
/* Selected row styling */
26-
.ant-table-tbody > tr.ant-table-row-selected {
27-
background: ${props => props.$rowStyle?.selectedBackground || '#e6f7ff'};
28-
}
35+
/* Selected row styling - only if explicitly set */
36+
${props => props.$rowStyle?.selectedBackground && `
37+
.ant-table-tbody > tr.ant-table-row-selected {
38+
background: ${props.$rowStyle.selectedBackground};
39+
}
40+
`}
2941
3042
/* Horizontal grid borders */
3143
${props => props.$showHRowGridBorder && `

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

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,46 @@ export const ScrollbarStyleProvider = styled.div<{
44
$showVerticalScrollbar: boolean;
55
$showHorizontalScrollbar: boolean;
66
}>`
7-
${props => !props.$showVerticalScrollbar && `
8-
.ant-table-body::-webkit-scrollbar:vertical {
7+
/* Debug console logs */
8+
${props => {
9+
console.log('ScrollbarStyleProvider received:', {
10+
showVerticalScrollbar: props.$showVerticalScrollbar,
11+
showHorizontalScrollbar: props.$showHorizontalScrollbar
12+
});
13+
return '';
14+
}}
15+
16+
17+
${props => !props.$showHorizontalScrollbar && `
18+
/* Target horizontal scrollbars - focus on .ant-table-body since it's common to all modes */
19+
.ant-table-body::-webkit-scrollbar:horizontal,
20+
.ant-table-body::-webkit-scrollbar {
921
display: none;
1022
}
11-
.ant-table-body {
12-
scrollbar-width: none;
23+
.ant-table-content::-webkit-scrollbar:horizontal,
24+
.ant-table-content::-webkit-scrollbar {
25+
display: none;
26+
}
27+
28+
.ant-table-body,
29+
.ant-table-content {
30+
scrollbar-width: none; /* Firefox */
31+
-ms-overflow-style: none; /* IE */
1332
}
1433
`}
1534
35+
/* Hide ANTD's virtual scrollbars */
1636
${props => !props.$showHorizontalScrollbar && `
17-
.ant-table-body::-webkit-scrollbar:horizontal {
18-
display: none;
37+
.ant-table-tbody-virtual-scrollbar-horizontal {
38+
display: none !important;
39+
height: 0 !important;
1940
}
2041
`}
2142
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-
}
43+
${props => !props.$showVerticalScrollbar && `
44+
.ant-table-tbody-virtual-scrollbar {
45+
display: none !important;
46+
width: 0 !important;
47+
}
48+
`}
3149
`;

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

Lines changed: 67 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,73 @@
11
import styled from "styled-components";
22

3-
export const TableContainer = styled.div<{ $style: any }>`
4-
width: 100%;
5-
height: 100%;
6-
position: relative;
3+
export const TableContainer = styled.div<{
4+
$style: any;
5+
}>`
6+
/* SMALL SIZE */
7+
.ant-table-small {
8+
/* Body cell padding */
9+
.ant-table-tbody > tr > td {
10+
padding: 8px 8px !important;
11+
font-size: 12px; /* Smaller font */
12+
line-height: 1.4;
13+
}
14+
15+
/* Header cell padding and font */
16+
.ant-table-thead > tr > th {
17+
padding: 8px 8px !important;
18+
font-size: 12px;
19+
}
20+
21+
/* Row height adjustments */
22+
.ant-table-tbody > tr {
23+
height: auto;
24+
min-height: 32px; /* Smaller minimum row height */
25+
}
26+
}
727
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'};
28+
/* MIDDLE SIZE */
29+
.ant-table-middle {
30+
/* Body cell padding */
31+
.ant-table-tbody > tr > td {
32+
padding: 12px 12px !important;
33+
font-size: 14px;
34+
line-height: 1.5;
35+
}
36+
37+
/* Header cell padding and font */
38+
.ant-table-thead > tr > th {
39+
padding: 12px 12px !important;
40+
font-size: 14px;
41+
}
42+
43+
/* Row height adjustments */
44+
.ant-table-tbody > tr {
45+
min-height: 40px;
46+
}
47+
}
1248
13-
/* Custom CSS injection */
49+
/* DEFAULT/LARGE SIZE */
50+
.ant-table:not(.ant-table-small):not(.ant-table-middle) {
51+
/* Body cell padding */
52+
.ant-table-tbody > tr > td {
53+
padding: 16px 16px !important;
54+
font-size: 14px;
55+
line-height: 1.6;
56+
}
57+
58+
/* Header cell padding and font */
59+
.ant-table-thead > tr > th {
60+
padding: 16px 16px !important;
61+
font-size: 14px;
62+
font-weight: 600;
63+
}
64+
65+
/* Row height adjustments */
66+
.ant-table-tbody > tr {
67+
min-height: 48px;
68+
}
69+
}
70+
71+
/* Your existing custom styles */
1472
${props => props.$style?.customCSS || ''}
1573
`;

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/TableWrapper.tsx

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,16 @@ import {
33
TableStyleType,
44
TableHeaderStyleType,
55
TableRowStyleType,
6-
TableToolbarStyleType,
76
} from "comps/controls/styleControlConstants";
87

98
import { getTableBaseStyles } from "./tableBaseStyles";
109
import { getTableHeaderStyles } from "./tableHeaderStyles";
1110
import { getTableRowStyles } from "./tableRowStyles";
12-
import { getTableToolbarStyles } from "./tableToolbarStyles";
1311

1412
interface TableWrapperProps {
1513
$style: TableStyleType;
1614
$headerStyle: TableHeaderStyleType;
1715
$rowStyle: TableRowStyleType;
18-
$toolbarStyle: TableToolbarStyleType;
1916
$visibleResizables: boolean;
2017
$showHRowGridBorder?: boolean;
2118
}
@@ -30,8 +27,6 @@ export const TableWrapper = styled.div<TableWrapperProps>`
3027
/* Row styles */
3128
${(props) => getTableRowStyles(props.$rowStyle)}
3229
33-
/* Toolbar styles */
34-
${(props) => getTableToolbarStyles(props.$toolbarStyle)}
3530
3631
/* Additional table specific styles */
3732
${(props) => !props.$showHRowGridBorder && `

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import styled from "styled-components";
2+
import { TableToolbarStyleType } from "comps/controls/styleControlConstants";
3+
4+
export const ToolbarStyleProvider = styled.div<{
5+
$toolbarStyle: TableToolbarStyleType;
6+
}>`
7+
${props => {
8+
console.log("ToolbarStyleProvider props:", props);
9+
console.log("Toolbar style object:", props.$toolbarStyle);
10+
return "";
11+
}}
12+
13+
background: ${props => props.$toolbarStyle?.background};
14+
border: 1px solid ${props => props.$toolbarStyle?.border};
15+
margin: ${props => props.$toolbarStyle?.margin};
16+
color: ${props => props.$toolbarStyle?.toolbarText};
17+
18+
`;

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

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
// Export the main TableWrapper
2-
export { TableWrapper } from "./TableWrapper";
3-
4-
// Export individual style functions
5-
export { getTableBaseStyles } from "./tableBaseStyles";
6-
export { getTableHeaderStyles } from "./tableHeaderStyles";
7-
export { getTableRowStyles } from "./tableRowStyles";
8-
export { getTableToolbarStyles } from "./tableToolbarStyles";
9-
10-
111
export { TableContainer } from './TableContainerStyles';
122
export { HeaderStyleProvider } from './HeaderStyles';
133
export { CellStyleProvider } from './CellStyles';

0 commit comments

Comments
 (0)