Skip to content

Commit eecbde8

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #549 from raheeliftikhar5/table-fixed-footer
Table: Separate controls for Fixed Header and Fixed Toolbar
2 parents e7301bd + e959fd1 commit eecbde8

File tree

5 files changed

+163
-124
lines changed

5 files changed

+163
-124
lines changed

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

Lines changed: 130 additions & 117 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,14 @@ const TableWrapper = styled.div<{
157130
$style: TableStyleType;
158131
$rowStyle: TableRowStyleType;
159132
toolbarPosition: "above" | "below" | "close";
133+
fixedHeader: boolean;
134+
fixedToolbar: boolean;
160135
}>`
161136
max-height: 100%;
162137
overflow-y: auto;
163138
background: white;
164-
border: 1px solid #d7d9e0;
139+
border: ${(props) => `1px solid ${props.$style.border}`};
140+
border-radius: ${(props) => props.$style.radius};
165141
166142
.ant-table-wrapper {
167143
border-top: ${(props) => (props.toolbarPosition === "above" ? "1px solid" : "unset")};
@@ -194,63 +170,102 @@ const TableWrapper = styled.div<{
194170
border-inline-start: none !important;
195171
196172
.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-
}
173+
overflow: unset !important;
174+
}
201175
202-
table {
203-
border-top: unset;
176+
// A table expand row contains table
177+
.ant-table-tbody .ant-table-wrapper:only-child .ant-table {
178+
margin: 0;
179+
}
204180
205-
td {
206-
padding: 0px 0px;
207-
}
181+
table {
182+
border-top: unset;
183+
184+
> .ant-table-thead {
185+
> tr > th {
186+
background-color: ${(props) => props.$style.headerBackground};
187+
border-color: ${(props) => props.$style.border};
188+
color: ${(props) => props.$style.headerText};
189+
border-inline-end: ${(props) => `1px solid ${props.$style.border}`} !important;
190+
${(props) =>
191+
props.fixedHeader && `
192+
position: sticky;
193+
position: -webkit-sticky;
194+
top: ${props.fixedToolbar ? '47px' : '0'};
195+
z-index: 99;
196+
`
197+
}
198+
199+
&:last-child {
200+
border-inline-end: none !important;
201+
}
202+
&.ant-table-column-has-sorters:hover {
203+
background-color: ${(props) => darkenColor(props.$style.headerBackground, 0.05)};
204+
}
205+
206+
> .ant-table-column-sorters > .ant-table-column-sorter {
207+
color: ${(props) => props.$style.headerText === defaultTheme.textDark ? "#bfbfbf" : props.$style.headerText};
208+
}
208209
209-
thead > tr:first-child {
210-
th:last-child {
211-
border-right: unset;
210+
&::before {
211+
background-color: ${(props) => props.$style.border};
212212
}
213213
}
214+
}
214215
215-
tbody > tr > td:last-child {
216+
> thead > tr > th,
217+
> tbody > tr > td {
218+
border-color: ${(props) => props.$style.border};
219+
}
220+
221+
td {
222+
padding: 0px 0px;
223+
}
224+
225+
thead > tr:first-child {
226+
th:last-child {
216227
border-right: unset;
217228
}
229+
}
218230
219-
.ant-empty-img-simple-g {
220-
fill: #fff;
221-
}
231+
tbody > tr > td:last-child {
232+
border-right: unset;
233+
}
222234
223-
> thead > tr:first-child {
224-
th:first-child {
225-
border-top-left-radius: 0px;
226-
}
235+
.ant-empty-img-simple-g {
236+
fill: #fff;
237+
}
227238
228-
th:last-child {
229-
border-top-right-radius: 0px;
230-
}
239+
> thead > tr:first-child {
240+
th:first-child {
241+
border-top-left-radius: 0px;
231242
}
232243
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-
`}
244+
th:last-child {
245+
border-top-right-radius: 0px;
246+
}
241247
}
242248
243-
.ant-table-expanded-row-fixed:after {
244-
border-right: unset !important;
245-
}
249+
// hide the bottom border of the last row
250+
${(props) =>
251+
props.toolbarPosition !== "below" &&
252+
`
253+
tbody > tr:last-child > td {
254+
border-bottom: unset;
255+
}
256+
`}
257+
}
258+
259+
.ant-table-expanded-row-fixed:after {
260+
border-right: unset !important;
246261
}
247262
}
248263
}
249-
264+
250265
${(props) =>
251266
props.$style && getStyle(props.$style, props.$rowStyle)}
252267
`;
253-
268+
254269
const TableTh = styled.th<{ width?: number }>`
255270
overflow: hidden;
256271
@@ -272,6 +287,11 @@ const TableTd = styled.td<{
272287
.ant-table-row-indent {
273288
display: ${(props) => (props.$isEditing ? "none" : "initial")};
274289
}
290+
&.ant-table-row-expand-icon-cell {
291+
background: ${(props) => props.background};
292+
border-color: ${(props) => props.$style.border};
293+
}
294+
275295
background: ${(props) => props.background} !important;
276296
border-color: ${(props) => props.$style.border} !important;
277297
border-width: ${(props) => props.$style.borderWidth} !important;
@@ -364,9 +384,6 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
364384
viewModeResizable: boolean;
365385
rowColorFn: RowColorViewType;
366386
columnsStyle: TableColumnStyleType;
367-
fixedHeader: boolean;
368-
height?: number;
369-
autoHeight?: boolean;
370387
};
371388

372389
function TableCellView(props: {
@@ -540,9 +557,7 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
540557
columns={columns}
541558
scroll={{
542559
x: COL_MIN_WIDTH * columns.length,
543-
y: props.fixedHeader && props.height && !props.autoHeight
544-
? `${props.height - 100}px`
545-
: undefined,
560+
y: undefined,
546561
}}
547562
></Table>
548563
);
@@ -556,10 +571,10 @@ export function TableCompView(props: {
556571
onDownload: (fileName: string) => void;
557572
}) {
558573
const editorState = useContext(EditorContext);
559-
const { width, height, ref } = useResizeDetector({
574+
const { width, ref } = useResizeDetector({
560575
refreshMode: "debounce",
561576
refreshRate: 600,
562-
handleHeight: true,
577+
handleHeight: false,
563578
});
564579
const viewMode = useUserViewMode();
565580
const compName = useContext(CompNameContext);
@@ -584,7 +599,6 @@ export function TableCompView(props: {
584599
() => compChildren.dynamicColumnConfig.getView(),
585600
[compChildren.dynamicColumnConfig]
586601
);
587-
const autoHeight = compChildren.autoHeight.getView();
588602
const columnsAggrData = comp.columnAggrData;
589603
const expansion = useMemo(() => compChildren.expansion.getView(), [compChildren.expansion]);
590604
const antdColumns = useMemo(
@@ -681,6 +695,8 @@ export function TableCompView(props: {
681695
$style={style}
682696
$rowStyle={rowStyle}
683697
toolbarPosition={toolbar.position}
698+
fixedHeader={compChildren.fixedHeader.getView()}
699+
fixedToolbar={toolbar.fixedToolbar && toolbar.position === 'above'}
684700
>
685701
{toolbar.position === "above" && toolbarView}
686702
<ResizeableTable<RecordType>
@@ -701,15 +717,12 @@ export function TableCompView(props: {
701717
onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent);
702718
}}
703719
showHeader={!compChildren.hideHeader.getView()}
704-
fixedHeader={compChildren.fixedHeader.getView()}
705720
columns={antdColumns}
706721
columnsStyle={columnsStyle}
707722
viewModeResizable={compChildren.viewModeResizable.getView()}
708723
dataSource={pageDataInfo.data}
709724
size={compChildren.size.getView()}
710725
tableLayout="fixed"
711-
height={height}
712-
autoHeight={autoHeight}
713726
loading={
714727
loading ||
715728
// fixme isLoading type

0 commit comments

Comments
 (0)