Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit aa874b4

Browse files
Merge pull request #2048 from iamfaran/feat/1866-custom-class-ids
[Feat]: #1866 add class/id identifies for Table/TableLite
2 parents be6f14d + e74e078 commit aa874b4

File tree

13 files changed

+97
-23
lines changed

13 files changed

+97
-23
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,8 @@ function ResizeableTableComp<RecordType extends object>(props: CustomTableProps<
165165
onClick: () => onCellClick(col.titleText, String(col.dataIndex)),
166166
loading: customLoading,
167167
customAlign: col.align,
168+
className: col.columnClassName,
169+
'data-testid': col.columnDataTestId,
168170
});
169171
}, [rowColorFn, rowHeightFn, columnsStyle, size, rowAutoHeight, onCellClick, customLoading]);
170172

@@ -182,6 +184,8 @@ function ResizeableTableComp<RecordType extends object>(props: CustomTableProps<
182184
onResizeStop: (e: React.SyntheticEvent, { size }: { size: { width: number } }) => {
183185
handleResizeStop(size.width, index, col.onWidthResize);
184186
},
187+
className: col.columnClassName,
188+
'data-testid': col.columnDataTestId,
185189
});
186190
}, [viewModeResizable, handleResize, handleResizeStop]);
187191

‎client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,9 @@ export const columnChildrenMap = {
134134
align: HorizontalAlignmentControl,
135135
tempHide: stateComp<boolean>(false),
136136
fixed: dropdownControl(columnFixOptions, "close"),
137+
// identifiers
138+
className: StringControl,
139+
dataTestId: StringControl,
137140
editable: BoolControl,
138141
background: withDefault(ColorControl, ""),
139142
margin: withDefault(RadiusControl, ""),
@@ -162,6 +165,11 @@ const StyledFontFamilyIcon = styled(FontFamilyIcon)` width: 24px; margin: 0 8px
162165
const StyledTextWeightIcon = styled(TextWeightIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
163166
const StyledBackgroundImageIcon = styled(ImageCompIcon)` width: 24px; margin: 0 0px 0 -12px;`;
164167

168+
const SectionHeading = styled.div`
169+
font-weight: bold;
170+
margin-bottom: 8px;
171+
`;
172+
165173
/**
166174
* export for test.
167175
* Put it here temporarily to avoid circular dependencies
@@ -283,11 +291,7 @@ const ColumnPropertyView = React.memo(({
283291
{(columnType === 'link' || columnType === 'links') && (
284292
<>
285293
<Divider style={{ margin: '12px 0' }} />
286-
{controlItem({}, (
287-
<div>
288-
<b>{"Link Style"}</b>
289-
</div>
290-
))}
294+
<SectionHeading>Link Style</SectionHeading>
291295
{comp.children.linkColor.propertyView({
292296
label: trans('text') // trans('style.background'),
293297
})}
@@ -300,11 +304,7 @@ const ColumnPropertyView = React.memo(({
300304
</>
301305
)}
302306
<Divider style={{ margin: '12px 0' }} />
303-
{controlItem({}, (
304-
<div>
305-
<b>{"Column Style"}</b>
306-
</div>
307-
))}
307+
<SectionHeading>Column Style</SectionHeading>
308308
{comp.children.background.propertyView({
309309
label: trans('style.background'),
310310
})}
@@ -346,6 +346,14 @@ const ColumnPropertyView = React.memo(({
346346
})}
347347
{comp.children.textOverflow.getPropertyView()}
348348
{comp.children.cellColor.getPropertyView()}
349+
<Divider style={{ margin: '12px 0' }} />
350+
<SectionHeading>Identifiers</SectionHeading>
351+
{comp.children.className.propertyView({
352+
label: trans("prop.className"),
353+
})}
354+
{comp.children.dataTestId.propertyView({
355+
label: trans("prop.dataTestId"),
356+
})}
349357
</>
350358
)}
351359
</>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,8 @@ export const TableCompView = React.memo((props: {
100100
const onEvent = useMemo(() => compChildren.onEvent.getView(), [compChildren.onEvent]);
101101
const currentExpandedRows = useMemo(() => compChildren.currentExpandedRows.getView(), [compChildren.currentExpandedRows]);
102102
const dynamicColumn = compChildren.dynamicColumn.getView();
103+
const className = compChildren.className.getView();
104+
const dataTestId = compChildren.dataTestId.getView();
103105

104106
const dynamicColumnConfig = useMemo(
105107
() => compChildren.dynamicColumnConfig.getView(),
@@ -360,6 +362,8 @@ export const TableCompView = React.memo((props: {
360362
suffixNode={toolbar.position === "below" && !toolbar.fixedToolbar && !(tableMode.isAutoMode && showHorizontalScrollbar) && toolbarView}
361363
>
362364
<TableWrapper
365+
className={className}
366+
data-testid={dataTestId}
363367
$style={style}
364368
$rowStyle={rowStyle}
365369
$headerStyle={headerStyle}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -612,6 +612,11 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
612612
tooltip: trans("table.dynamicColumnConfigDesc"),
613613
})}
614614
</Section>
615+
616+
<Section name={trans("prop.component")}>
617+
{comp.children.className.propertyView({ label: trans("prop.className") })}
618+
{comp.children.dataTestId.propertyView({ label: trans("prop.dataTestId") })}
619+
</Section>
615620
</>
616621
)}
617622

‎client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,13 @@ export const BackgroundWrapper = styled.div<{
122122
`;
123123

124124
// TODO: find a way to limit the calc function for max-height only to first Margin value
125-
export const TableWrapper = styled.div<{
125+
export const TableWrapper = styled.div.attrs<{
126+
className?: string;
127+
"data-testid"?: string;
128+
}>((props) => ({
129+
className: props.className,
130+
"data-testid": props["data-testid"],
131+
}))<{
126132
$style: TableStyleType;
127133
$headerStyle: TableHeaderStyleType;
128134
$toolbarStyle: TableToolbarStyleType;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -333,6 +333,8 @@ export type CustomColumnType<RecordType> = ColumnType<RecordType> & {
333333
style: TableColumnStyleType;
334334
linkStyle: TableColumnLinkStyleType;
335335
cellColorFn: CellColorViewType;
336+
columnClassName?: string;
337+
columnDataTestId?: string;
336338
};
337339

338340
/**
@@ -400,6 +402,8 @@ export function columnsToAntdFormat(
400402
align: column.align,
401403
width: column.autoWidth === "auto" ? 0 : column.width,
402404
fixed: column.fixed === "close" ? false : column.fixed,
405+
columnClassName: column.className,
406+
columnDataTestId: column.dataTestId,
403407
style: {
404408
background: column.background,
405409
margin: column.margin,

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/column/tableColumnComp.tsx‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,9 @@ export const columnChildrenMap = {
136136
align: HorizontalAlignmentControl,
137137
tempHide: stateComp<boolean>(false),
138138
fixed: dropdownControl(columnFixOptions, "close"),
139+
// identifiers
140+
className: StringControl,
141+
dataTestId: StringControl,
139142
background: withDefault(ColorControl, ""),
140143
margin: withDefault(RadiusControl, ""),
141144
text: withDefault(ColorControl, ""),
@@ -163,6 +166,11 @@ const StyledFontFamilyIcon = styled(FontFamilyIcon)` width: 24px; margin: 0 8px
163166
const StyledTextWeightIcon = styled(TextWeightIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
164167
const StyledBackgroundImageIcon = styled(ImageCompIcon)` width: 24px; margin: 0 0px 0 -12px;`;
165168

169+
const SectionHeading = styled.div`
170+
font-weight: bold;
171+
margin-bottom: 8px;
172+
`;
173+
166174
/**
167175
* export for test.
168176
* Put it here temporarily to avoid circular dependencies
@@ -285,11 +293,7 @@ const ColumnPropertyView = React.memo(({
285293
{(columnType === 'link' || columnType === 'links') && (
286294
<>
287295
<Divider style={{ margin: '12px 0' }} />
288-
{controlItem({}, (
289-
<div>
290-
<b>{"Link Style"}</b>
291-
</div>
292-
))}
296+
<SectionHeading>Link Style</SectionHeading>
293297
{comp.children.linkColor.propertyView({
294298
label: trans('text') // trans('style.background'),
295299
})}
@@ -302,11 +306,7 @@ const ColumnPropertyView = React.memo(({
302306
</>
303307
)}
304308
<Divider style={{ margin: '12px 0' }} />
305-
{controlItem({}, (
306-
<div>
307-
<b>{"Column Style"}</b>
308-
</div>
309-
))}
309+
<SectionHeading>Column Style</SectionHeading>
310310
{comp.children.background.propertyView({
311311
label: trans('style.background'),
312312
})}
@@ -348,6 +348,14 @@ const ColumnPropertyView = React.memo(({
348348
})}
349349
{comp.children.textOverflow.getPropertyView()}
350350
{comp.children.cellColor.getPropertyView()}
351+
<Divider style={{ margin: '12px 0' }} />
352+
<SectionHeading>Identifiers</SectionHeading>
353+
{comp.children.className.propertyView({
354+
label: trans("prop.className"),
355+
})}
356+
{comp.children.dataTestId.propertyView({
357+
label: trans("prop.dataTestId"),
358+
})}
351359
</>
352360
)}
353361
</>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,8 @@ import React, {
106106
onClick: () => onCellClick(col.titleText, String(col.dataIndex)),
107107
loading: customLoading,
108108
customAlign: col.align,
109+
className: col.columnClassName,
110+
'data-testid': col.columnDataTestId,
109111
});
110112
},
111113
[
@@ -135,6 +137,8 @@ import React, {
135137
) => {
136138
handleResizeStop(size.width, index, col.onWidthResize);
137139
},
140+
className: col.columnClassName,
141+
'data-testid': col.columnDataTestId,
138142
});
139143
},
140144
[viewModeResizable, handleResize, handleResizeStop]

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,8 @@ function ResizeableTableComp<RecordType extends object>(
108108
onClick: () => onCellClick(col.titleText, String(col.dataIndex)),
109109
loading: customLoading,
110110
customAlign: col.align,
111+
className: col.columnClassName,
112+
'data-testid': col.columnDataTestId,
111113
});
112114
},
113115
[
@@ -138,6 +140,8 @@ function ResizeableTableComp<RecordType extends object>(
138140
) => {
139141
handleResizeStop(size.width, index, col.onWidthResize);
140142
},
143+
className: col.columnClassName,
144+
'data-testid': col.columnDataTestId,
141145
});
142146
},
143147
[viewModeResizable, handleResize, handleResizeStop]

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,13 @@ import styled from 'styled-components';
44
import SimpleBar from 'simplebar-react';
55
// import 'simplebar-react/dist/simplebar.min.css';
66

7-
const MainContainer = styled.div<{
7+
const MainContainer = styled.div.attrs<{
8+
className?: string;
9+
"data-testid"?: string;
10+
}>((props) => ({
11+
className: props.className,
12+
"data-testid": props["data-testid"],
13+
}))<{
814
$mode: 'AUTO' | 'FIXED';
915
$showHorizontalScrollbar: boolean;
1016
$showVerticalScrollbar: boolean;
@@ -114,6 +120,8 @@ interface TableContainerProps {
114120
showVerticalScrollbar: boolean;
115121
showHorizontalScrollbar: boolean;
116122
virtual: boolean;
123+
className?: string;
124+
dataTestId?: string;
117125
}
118126

119127
export const TableContainer: React.FC<TableContainerProps> = ({
@@ -126,7 +134,9 @@ export const TableContainer: React.FC<TableContainerProps> = ({
126134
containerRef,
127135
showVerticalScrollbar,
128136
showHorizontalScrollbar,
129-
virtual
137+
virtual,
138+
className,
139+
dataTestId
130140
}) => {
131141
return (
132142
<MainContainer
@@ -135,6 +145,8 @@ export const TableContainer: React.FC<TableContainerProps> = ({
135145
$showHorizontalScrollbar={showHorizontalScrollbar}
136146
$showVerticalScrollbar={showVerticalScrollbar}
137147
$virtual={virtual}
148+
className={className}
149+
data-testid={dataTestId}
138150
>
139151
{/* Sticky above toolbar - always visible */}
140152
{stickyToolbar && toolbarPosition === 'above' && showToolbar && (

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /