Skip to content

Commit b2b423d

Browse files
raheeliftikhar5raheeliftikhar5
committed
fix: make table rows interactive when fixed header
1 parent e7301bd commit b2b423d

File tree

2 files changed

+118
-110
lines changed

2 files changed

+118
-110
lines changed

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

Lines changed: 116 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -63,91 +63,64 @@ const getStyle = (
6363
const alternateBackground = genLinerGradient(rowStyle.alternateBackground);
6464

6565
return css`
66-
border-color: ${style.border};
67-
border-radius: ${style.radius};
68-
69-
& > div > div > div > .ant-table > .ant-table-container > .ant-table-content > table {
70-
> thead > tr > th,
71-
> tbody > tr > td {
72-
border-color: ${style.border};
73-
}
74-
75-
> .ant-table-thead > tr > th::before {
76-
background-color: ${style.border};
66+
.ant-table-body {
67+
background: white;
68+
}
69+
.ant-table-tbody {
70+
> tr:nth-of-type(2n + 1) {
71+
&,
72+
> td {
73+
background: ${genLinerGradient(rowStyle.background)};
74+
}
7775
}
7876
79-
> .ant-table-thead {
80-
> tr > th {
81-
background-color: ${style.headerBackground};
82-
border-color: ${style.border};
83-
color: ${style.headerText};
84-
85-
&.ant-table-column-has-sorters:hover {
86-
background-color: ${darkenColor(style.headerBackground, 0.05)};
87-
}
88-
89-
> .ant-table-column-sorters > .ant-table-column-sorter {
90-
color: ${style.headerText === defaultTheme.textDark ? "#bfbfbf" : style.headerText};
91-
}
77+
> tr:nth-of-type(2n) {
78+
&,
79+
> td {
80+
background: ${alternateBackground};
9281
}
9382
}
9483
95-
> .ant-table-tbody {
96-
> tr:nth-of-type(2n + 1) {
97-
&,
98-
> td {
99-
background: ${genLinerGradient(rowStyle.background)};
100-
}
84+
// selected row
85+
> tr:nth-of-type(2n + 1).ant-table-row-selected {
86+
> td {
87+
background: ${selectedRowBackground}, ${rowStyle.background} !important;
10188
}
10289
103-
> tr:nth-of-type(2n) {
104-
&,
105-
> td {
106-
background: ${alternateBackground};
107-
}
90+
> td.ant-table-cell-row-hover,
91+
&:hover > td {
92+
background: ${hoverRowBackground}, ${selectedRowBackground}, ${rowStyle.background} !important;
10893
}
94+
}
10995
110-
// selected row
111-
> tr:nth-of-type(2n + 1).ant-table-row-selected {
112-
> td {
113-
background: ${selectedRowBackground}, ${rowStyle.background} !important;
114-
}
115-
116-
> td.ant-table-cell-row-hover,
117-
&:hover > td {
118-
background: ${hoverRowBackground}, ${selectedRowBackground}, ${rowStyle.background} !important;
119-
}
96+
> tr:nth-of-type(2n).ant-table-row-selected {
97+
> td {
98+
background: ${selectedRowBackground}, ${alternateBackground} !important;
12099
}
121100
122-
> tr:nth-of-type(2n).ant-table-row-selected {
123-
> td {
124-
background: ${selectedRowBackground}, ${alternateBackground} !important;
125-
}
126-
127-
> td.ant-table-cell-row-hover,
128-
&:hover > td {
129-
background: ${hoverRowBackground}, ${selectedRowBackground}, ${alternateBackground} !important;
130-
}
101+
> td.ant-table-cell-row-hover,
102+
&:hover > td {
103+
background: ${hoverRowBackground}, ${selectedRowBackground}, ${alternateBackground} !important;
131104
}
105+
}
132106
133-
// hover row
134-
> tr:nth-of-type(2n + 1) > td.ant-table-cell-row-hover {
135-
&,
136-
> div:nth-of-type(2) {
137-
background: ${hoverRowBackground}, ${rowStyle.background} !important;
138-
}
107+
// hover row
108+
> tr:nth-of-type(2n + 1) > td.ant-table-cell-row-hover {
109+
&,
110+
> div:nth-of-type(2) {
111+
background: ${hoverRowBackground}, ${rowStyle.background} !important;
139112
}
113+
}
140114
141-
> tr:nth-of-type(2n) > td.ant-table-cell-row-hover {
142-
&,
143-
> div:nth-of-type(2) {
144-
background: ${hoverRowBackground}, ${alternateBackground} !important;
145-
}
115+
> tr:nth-of-type(2n) > td.ant-table-cell-row-hover {
116+
&,
117+
> div:nth-of-type(2) {
118+
background: ${hoverRowBackground}, ${alternateBackground} !important;
146119
}
120+
}
147121
148-
> tr.ant-table-expanded-row > td {
149-
background: ${background};
150-
}
122+
> tr.ant-table-expanded-row > td {
123+
background: ${background};
151124
}
152125
}
153126
`;
@@ -157,11 +130,13 @@ const TableWrapper = styled.div<{
157130
$style: TableStyleType;
158131
$rowStyle: TableRowStyleType;
159132
toolbarPosition: "above" | "below" | "close";
133+
fixedHeader: boolean;
160134
}>`
161135
max-height: 100%;
162-
overflow-y: auto;
136+
overflow-y: ${(props) => (props.fixedHeader ? "hidden" : "auto")};
163137
background: white;
164-
border: 1px solid #d7d9e0;
138+
border: ${(props) => `1px solid ${props.$style.border}`};
139+
border-radius: ${(props) => props.$style.radius};
165140
166141
.ant-table-wrapper {
167142
border-top: ${(props) => (props.toolbarPosition === "above" ? "1px solid" : "unset")};
@@ -193,64 +168,91 @@ const TableWrapper = styled.div<{
193168
border-top: none !important;
194169
border-inline-start: none !important;
195170
196-
.ant-table-content {
197-
// A table expand row contains table
198-
.ant-table-tbody .ant-table-wrapper:only-child .ant-table {
199-
margin: 0;
200-
}
201-
202-
table {
203-
border-top: unset;
171+
// A table expand row contains table
172+
.ant-table-tbody .ant-table-wrapper:only-child .ant-table {
173+
margin: 0;
174+
}
204175
205-
td {
206-
padding: 0px 0px;
207-
}
176+
table {
177+
border-top: unset;
178+
179+
> .ant-table-thead {
180+
> tr > th {
181+
background-color: ${(props) => props.$style.headerBackground};
182+
border-color: ${(props) => props.$style.border};
183+
color: ${(props) => props.$style.headerText};
184+
border-inline-end: ${(props) => `1px solid ${props.$style.border}`} !important;
185+
186+
&:last-child {
187+
border-inline-end: none !important;
188+
}
189+
&.ant-table-column-has-sorters:hover {
190+
background-color: ${(props) => darkenColor(props.$style.headerBackground, 0.05)};
191+
}
192+
193+
> .ant-table-column-sorters > .ant-table-column-sorter {
194+
color: ${(props) => props.$style.headerText === defaultTheme.textDark ? "#bfbfbf" : props.$style.headerText};
195+
}
208196
209-
thead > tr:first-child {
210-
th:last-child {
211-
border-right: unset;
197+
&::before {
198+
background-color: ${(props) => props.$style.border};
212199
}
213200
}
201+
}
214202
215-
tbody > tr > td:last-child {
203+
> thead > tr > th,
204+
> tbody > tr > td {
205+
border-color: ${(props) => props.$style.border};
206+
}
207+
208+
td {
209+
padding: 0px 0px;
210+
}
211+
212+
thead > tr:first-child {
213+
th:last-child {
216214
border-right: unset;
217215
}
216+
}
218217
219-
.ant-empty-img-simple-g {
220-
fill: #fff;
221-
}
218+
tbody > tr > td:last-child {
219+
border-right: unset;
220+
}
222221
223-
> thead > tr:first-child {
224-
th:first-child {
225-
border-top-left-radius: 0px;
226-
}
222+
.ant-empty-img-simple-g {
223+
fill: #fff;
224+
}
227225
228-
th:last-child {
229-
border-top-right-radius: 0px;
230-
}
226+
> thead > tr:first-child {
227+
th:first-child {
228+
border-top-left-radius: 0px;
231229
}
232230
233-
// hide the bottom border of the last row
234-
${(props) =>
235-
props.toolbarPosition !== "below" &&
236-
`
237-
tbody > tr:last-child > td {
238-
border-bottom: unset;
239-
}
240-
`}
231+
th:last-child {
232+
border-top-right-radius: 0px;
233+
}
241234
}
242235
243-
.ant-table-expanded-row-fixed:after {
244-
border-right: unset !important;
245-
}
236+
// hide the bottom border of the last row
237+
${(props) =>
238+
props.toolbarPosition !== "below" &&
239+
`
240+
tbody > tr:last-child > td {
241+
border-bottom: unset;
242+
}
243+
`}
244+
}
245+
246+
.ant-table-expanded-row-fixed:after {
247+
border-right: unset !important;
246248
}
247249
}
248250
}
249-
251+
250252
${(props) =>
251253
props.$style && getStyle(props.$style, props.$rowStyle)}
252254
`;
253-
255+
254256
const TableTh = styled.th<{ width?: number }>`
255257
overflow: hidden;
256258
@@ -272,6 +274,11 @@ const TableTd = styled.td<{
272274
.ant-table-row-indent {
273275
display: ${(props) => (props.$isEditing ? "none" : "initial")};
274276
}
277+
&.ant-table-row-expand-icon-cell {
278+
background: ${(props) => props.background};
279+
border-color: ${(props) => props.$style.border};
280+
}
281+
275282
background: ${(props) => props.background} !important;
276283
border-color: ${(props) => props.$style.border} !important;
277284
border-width: ${(props) => props.$style.borderWidth} !important;
@@ -681,6 +688,7 @@ export function TableCompView(props: {
681688
$style={style}
682689
$rowStyle={rowStyle}
683690
toolbarPosition={toolbar.position}
691+
fixedHeader={compChildren.fixedHeader.getView()}
684692
>
685693
{toolbar.position === "above" && toolbarView}
686694
<ResizeableTable<RecordType>

‎client/packages/lowcoder/src/comps/hooks/screenInfoComp.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ type ScreenInfo = {
2020

2121
function useScreenInfo() {
2222
const getDeviceType = () => {
23-
if (window.screen.width < 768) return ScreenTypes.Mobile;
24-
if (window.screen.width < 889) return ScreenTypes.Tablet;
23+
if (window.innerWidth < 768) return ScreenTypes.Mobile;
24+
if (window.innerWidth < 889) return ScreenTypes.Tablet;
2525
return ScreenTypes.Desktop;
2626
}
2727
const getFlagsByDeviceType = (deviceType: ScreenType) => {

0 commit comments

Comments
 (0)