@@ -6,11 +6,29 @@ import 'simplebar-react/dist/simplebar.min.css';
6
6
7
7
const MainContainer = styled . div < {
8
8
$mode :'AUTO' | 'FIXED' ;
9
+ $showHorizontalScrollbar :boolean ;
10
+ $showVerticalScrollbar :boolean ;
9
11
} > `
10
12
display: flex;
11
13
flex-direction: column;
12
14
height: 100%;
13
15
position: relative;
16
+
17
+ /* Critical CSS controls for SimpleBar */
18
+
19
+
20
+ ${ props => ! props . $showHorizontalScrollbar && `
21
+ div.simplebar-horizontal {
22
+ visibility: hidden !important;
23
+ }
24
+ ` }
25
+
26
+ ${ props => ! props . $showVerticalScrollbar && `
27
+ div.simplebar-vertical {
28
+ visibility: hidden !important;
29
+ }
30
+ ` }
31
+
14
32
` ;
15
33
16
34
const StickyToolbar = styled . div < {
@@ -24,46 +42,33 @@ const StickyToolbar = styled.div<{
24
42
?'0 2px 8px rgba(0,0,0,0.1)'
25
43
:'0 -2px 8px rgba(0,0,0,0.1)'
26
44
} ;
45
+ flex-shrink: 0;
27
46
` ;
28
47
29
48
const DefaultToolbar = styled . div `
30
49
flex-shrink: 0;
50
+ /* Prevent horizontal scrolling while allowing vertical flow */
51
+ position: sticky;
52
+ left: 0;
53
+ right: 0;
54
+ z-index: 1;
55
+ background: inherit;
31
56
` ;
32
57
33
58
const TableSection = styled . div < {
34
59
$mode :'AUTO' | 'FIXED' ;
35
60
} > `
36
-
37
61
flex: 1 1 auto;
38
62
min-height: 0;
39
- border: 4px solid blue;
40
- overflow: hidden;
63
+ min-width: 0;
41
64
` ;
42
65
43
-
44
- const SimpleBarWrapper = styled ( SimpleBar ) < {
45
- $showVertical :boolean ;
46
- $showHorizontal :boolean ;
47
- } > `
66
+ const SimpleBarWrapper = styled ( SimpleBar ) `
48
67
height: 100%;
49
- border: 4px solid red ;
68
+ overflow: auto !important ;
50
69
51
- .ant-table-content, .ant-table-body {
52
- overflow: unset !important;
53
- }
54
-
55
- ${ props => ! props . $showVertical && `
56
- .simplebar-track.simplebar-vertical {
57
- visibility: hidden !important;
58
- }
59
- ` }
60
-
61
- ${ props => ! props . $showHorizontal && `
62
- .simplebar-track.simplebar-horizontal {
63
- visibility: hidden !important;
64
- }
65
- ` }
66
-
70
+
71
+ /* CRITICAL: Transfer scroll control from Ant Design to SimpleBar */
67
72
` ;
68
73
69
74
interface TableContainerProps {
@@ -89,32 +94,50 @@ export const TableContainer: React.FC<TableContainerProps> = ({
89
94
showVerticalScrollbar,
90
95
showHorizontalScrollbar
91
96
} ) => {
92
-
97
+ const hideScrollbar = ! showHorizontalScrollbar && ! showVerticalScrollbar ;
93
98
94
99
return (
95
- < MainContainer $mode = { mode } ref = { containerRef } >
96
- { stickyToolbar && toolbarPosition === 'above' && (
100
+ < MainContainer
101
+ $mode = { mode }
102
+ ref = { containerRef }
103
+ $showHorizontalScrollbar = { showHorizontalScrollbar }
104
+ $showVerticalScrollbar = { showVerticalScrollbar }
105
+ >
106
+ { /* Sticky above toolbar - always visible */ }
107
+ { stickyToolbar && toolbarPosition === 'above' && showToolbar && (
97
108
< StickyToolbar $position = "above" > { toolbar } </ StickyToolbar >
98
109
) }
99
- < TableSection $mode = { mode } >
100
-
101
- < SimpleBarWrapper
102
- $showVertical = { showVerticalScrollbar }
103
- $showHorizontal = { showHorizontalScrollbar }
104
- >
105
- { ! stickyToolbar && toolbarPosition === 'above' && (
106
- < DefaultToolbar > { toolbar } </ DefaultToolbar >
107
- ) }
108
- { children }
109
- { ! stickyToolbar && toolbarPosition === 'below' && (
110
- < DefaultToolbar > { toolbar } </ DefaultToolbar >
110
+
111
+ < TableSection $mode = { mode } >
112
+ { hideScrollbar ?(
113
+ /* No scrollbars - render without SimpleBar */
114
+ < >
115
+ { ! stickyToolbar && toolbarPosition === 'above' && showToolbar && (
116
+ < DefaultToolbar > { toolbar } </ DefaultToolbar >
117
+ ) }
118
+ { children }
119
+ { ! stickyToolbar && toolbarPosition === 'below' && showToolbar && (
120
+ < DefaultToolbar > { toolbar } </ DefaultToolbar >
121
+ ) }
122
+ </ >
123
+ ) :(
124
+ /* Scrollbars enabled - use SimpleBar */
125
+ < SimpleBarWrapper className = "simplebar-wrapper" >
126
+ { ! stickyToolbar && toolbarPosition === 'above' && showToolbar && (
127
+ < DefaultToolbar > { toolbar } </ DefaultToolbar >
128
+ ) }
129
+ { children }
130
+ { ! stickyToolbar && toolbarPosition === 'below' && showToolbar && (
131
+ < DefaultToolbar > { toolbar } </ DefaultToolbar >
132
+ ) }
133
+ </ SimpleBarWrapper >
134
+ ) }
135
+ </ TableSection >
136
+
137
+ { /* Sticky below toolbar - always visible */ }
138
+ { stickyToolbar && toolbarPosition === 'below' && showToolbar && (
139
+ < StickyToolbar $position = "below" > { toolbar } </ StickyToolbar >
111
140
) }
112
- </ SimpleBarWrapper >
113
-
114
- </ TableSection >
115
- { stickyToolbar && toolbarPosition === 'below' && (
116
- < StickyToolbar $position = "below" > { toolbar } </ StickyToolbar >
117
- ) }
118
- </ MainContainer >
141
+ </ MainContainer >
119
142
) ;
120
143
} ;