From e74e078ebba4b3d8ac8c84d406549a0bff1ea050 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 10 Oct 2025 20:33:30 +0500 Subject: [PATCH] [Feat]: #1866 add class/id identifies for Table/TableLite --- .../comps/comps/tableComp/ResizeableTable.tsx | 4 +++ .../tableComp/column/tableColumnComp.tsx | 28 ++++++++++++------- .../comps/comps/tableComp/tableCompView.tsx | 4 +++ .../comps/tableComp/tablePropertyView.tsx | 5 ++++ .../src/comps/comps/tableComp/tableStyles.ts | 8 +++++- .../src/comps/comps/tableComp/tableUtils.tsx | 4 +++ .../tableLiteComp/column/tableColumnComp.tsx | 28 ++++++++++++------- .../comps/tableLiteComp/parts/BaseTable.tsx | 4 +++ .../tableLiteComp/parts/ResizeableTable.tsx | 4 +++ .../tableLiteComp/parts/TableContainer.tsx | 16 +++++++++-- .../comps/tableLiteComp/tableCompView.tsx | 6 ++++ .../comps/tableLiteComp/tablePropertyView.tsx | 5 ++++ .../comps/comps/tableLiteComp/tableUtils.tsx | 4 +++ 13 files changed, 97 insertions(+), 23 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/ResizeableTable.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/ResizeableTable.tsx index 55bf8d694..3cdf9119a 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/ResizeableTable.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/ResizeableTable.tsx @@ -165,6 +165,8 @@ function ResizeableTableComp(props: CustomTableProps< onClick: () => onCellClick(col.titleText, String(col.dataIndex)), loading: customLoading, customAlign: col.align, + className: col.columnClassName, + 'data-testid': col.columnDataTestId, }); }, [rowColorFn, rowHeightFn, columnsStyle, size, rowAutoHeight, onCellClick, customLoading]); @@ -182,6 +184,8 @@ function ResizeableTableComp(props: CustomTableProps< onResizeStop: (e: React.SyntheticEvent, { size }: { size: { width: number } }) => { handleResizeStop(size.width, index, col.onWidthResize); }, + className: col.columnClassName, + 'data-testid': col.columnDataTestId, }); }, [viewModeResizable, handleResize, handleResizeStop]); diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx index 938983ac9..f94b17816 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx @@ -134,6 +134,9 @@ export const columnChildrenMap = { align: HorizontalAlignmentControl, tempHide: stateComp(false), fixed: dropdownControl(columnFixOptions, "close"), + // identifiers + className: StringControl, + dataTestId: StringControl, editable: BoolControl, background: withDefault(ColorControl, ""), margin: withDefault(RadiusControl, ""), @@ -162,6 +165,11 @@ const StyledFontFamilyIcon = styled(FontFamilyIcon)` width: 24px; margin: 0 8px const StyledTextWeightIcon = styled(TextWeightIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`; const StyledBackgroundImageIcon = styled(ImageCompIcon)` width: 24px; margin: 0 0px 0 -12px;`; +const SectionHeading = styled.div` + font-weight: bold; + margin-bottom: 8px; +`; + /** * export for test. * Put it here temporarily to avoid circular dependencies @@ -283,11 +291,7 @@ const ColumnPropertyView = React.memo(({ {(columnType === 'link' || columnType === 'links') && ( <> - {controlItem({}, ( -
- {"Link Style"} -
- ))} + Link Style {comp.children.linkColor.propertyView({ label: trans('text') // trans('style.background'), })} @@ -300,11 +304,7 @@ const ColumnPropertyView = React.memo(({ )} - {controlItem({}, ( -
- {"Column Style"} -
- ))} + Column Style {comp.children.background.propertyView({ label: trans('style.background'), })} @@ -346,6 +346,14 @@ const ColumnPropertyView = React.memo(({ })} {comp.children.textOverflow.getPropertyView()} {comp.children.cellColor.getPropertyView()} + + Identifiers + {comp.children.className.propertyView({ + label: trans("prop.className"), + })} + {comp.children.dataTestId.propertyView({ + label: trans("prop.dataTestId"), + })} )} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index 53d423129..74d431f7a 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -100,6 +100,8 @@ export const TableCompView = React.memo((props: { const onEvent = useMemo(() => compChildren.onEvent.getView(), [compChildren.onEvent]); const currentExpandedRows = useMemo(() => compChildren.currentExpandedRows.getView(), [compChildren.currentExpandedRows]); const dynamicColumn = compChildren.dynamicColumn.getView(); + const className = compChildren.className.getView(); + const dataTestId = compChildren.dataTestId.getView(); const dynamicColumnConfig = useMemo( () => compChildren.dynamicColumnConfig.getView(), @@ -360,6 +362,8 @@ export const TableCompView = React.memo((props: { suffixNode={toolbar.position === "below" && !toolbar.fixedToolbar && !(tableMode.isAutoMode && showHorizontalScrollbar) && toolbarView} > tooltip: trans("table.dynamicColumnConfigDesc"), })} + +
+ {comp.children.className.propertyView({ label: trans("prop.className") })} + {comp.children.dataTestId.propertyView({ label: trans("prop.dataTestId") })} +
)} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts b/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts index 5e3cc6dcd..54c856c14 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts @@ -122,7 +122,13 @@ export const BackgroundWrapper = styled.div<{ `; // TODO: find a way to limit the calc function for max-height only to first Margin value -export const TableWrapper = styled.div<{ +export const TableWrapper = styled.div.attrs<{ + className?: string; + "data-testid"?: string; +}>((props) => ({ + className: props.className, + "data-testid": props["data-testid"], +}))<{ $style: TableStyleType; $headerStyle: TableHeaderStyleType; $toolbarStyle: TableToolbarStyleType; diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx index d71ae5a8d..fdc5c775d 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx @@ -333,6 +333,8 @@ export type CustomColumnType = ColumnType & { style: TableColumnStyleType; linkStyle: TableColumnLinkStyleType; cellColorFn: CellColorViewType; + columnClassName?: string; + columnDataTestId?: string; }; /** @@ -400,6 +402,8 @@ export function columnsToAntdFormat( align: column.align, width: column.autoWidth === "auto" ? 0 : column.width, fixed: column.fixed === "close" ? false : column.fixed, + columnClassName: column.className, + columnDataTestId: column.dataTestId, style: { background: column.background, margin: column.margin, diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/column/tableColumnComp.tsx index 4951dea4e..fcfab56af 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/column/tableColumnComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/column/tableColumnComp.tsx @@ -136,6 +136,9 @@ export const columnChildrenMap = { align: HorizontalAlignmentControl, tempHide: stateComp(false), fixed: dropdownControl(columnFixOptions, "close"), + // identifiers + className: StringControl, + dataTestId: StringControl, background: withDefault(ColorControl, ""), margin: withDefault(RadiusControl, ""), text: withDefault(ColorControl, ""), @@ -163,6 +166,11 @@ const StyledFontFamilyIcon = styled(FontFamilyIcon)` width: 24px; margin: 0 8px const StyledTextWeightIcon = styled(TextWeightIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`; const StyledBackgroundImageIcon = styled(ImageCompIcon)` width: 24px; margin: 0 0px 0 -12px;`; +const SectionHeading = styled.div` + font-weight: bold; + margin-bottom: 8px; +`; + /** * export for test. * Put it here temporarily to avoid circular dependencies @@ -285,11 +293,7 @@ const ColumnPropertyView = React.memo(({ {(columnType === 'link' || columnType === 'links') && ( <> - {controlItem({}, ( -
- {"Link Style"} -
- ))} + Link Style {comp.children.linkColor.propertyView({ label: trans('text') // trans('style.background'), })} @@ -302,11 +306,7 @@ const ColumnPropertyView = React.memo(({ )} - {controlItem({}, ( -
- {"Column Style"} -
- ))} + Column Style {comp.children.background.propertyView({ label: trans('style.background'), })} @@ -348,6 +348,14 @@ const ColumnPropertyView = React.memo(({ })} {comp.children.textOverflow.getPropertyView()} {comp.children.cellColor.getPropertyView()} + + Identifiers + {comp.children.className.propertyView({ + label: trans("prop.className"), + })} + {comp.children.dataTestId.propertyView({ + label: trans("prop.dataTestId"), + })} )} diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/BaseTable.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/BaseTable.tsx index 31aa30f33..fffde7f21 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/BaseTable.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/BaseTable.tsx @@ -106,6 +106,8 @@ import React, { onClick: () => onCellClick(col.titleText, String(col.dataIndex)), loading: customLoading, customAlign: col.align, + className: col.columnClassName, + 'data-testid': col.columnDataTestId, }); }, [ @@ -135,6 +137,8 @@ import React, { ) => { handleResizeStop(size.width, index, col.onWidthResize); }, + className: col.columnClassName, + 'data-testid': col.columnDataTestId, }); }, [viewModeResizable, handleResize, handleResizeStop] diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/ResizeableTable.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/ResizeableTable.tsx index c7a5d39c2..16ca3a7d6 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/ResizeableTable.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/ResizeableTable.tsx @@ -108,6 +108,8 @@ function ResizeableTableComp( onClick: () => onCellClick(col.titleText, String(col.dataIndex)), loading: customLoading, customAlign: col.align, + className: col.columnClassName, + 'data-testid': col.columnDataTestId, }); }, [ @@ -138,6 +140,8 @@ function ResizeableTableComp( ) => { handleResizeStop(size.width, index, col.onWidthResize); }, + className: col.columnClassName, + 'data-testid': col.columnDataTestId, }); }, [viewModeResizable, handleResize, handleResizeStop] diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableContainer.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableContainer.tsx index 1a44cfa7d..247c0e0d4 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableContainer.tsx @@ -4,7 +4,13 @@ import styled from 'styled-components'; import SimpleBar from 'simplebar-react'; // import 'simplebar-react/dist/simplebar.min.css'; -const MainContainer = styled.div<{ +const MainContainer = styled.div.attrs<{ + className?: string; + "data-testid"?: string; +}>((props) => ({ + className: props.className, + "data-testid": props["data-testid"], +}))<{ $mode: 'AUTO' | 'FIXED'; $showHorizontalScrollbar: boolean; $showVerticalScrollbar: boolean; @@ -114,6 +120,8 @@ interface TableContainerProps { showVerticalScrollbar: boolean; showHorizontalScrollbar: boolean; virtual: boolean; + className?: string; + dataTestId?: string; } export const TableContainer: React.FC = ({ @@ -126,7 +134,9 @@ export const TableContainer: React.FC = ({ containerRef, showVerticalScrollbar, showHorizontalScrollbar, - virtual + virtual, + className, + dataTestId }) => { return ( = ({ $showHorizontalScrollbar={showHorizontalScrollbar} $showVerticalScrollbar={showVerticalScrollbar} $virtual={virtual} + className={className} + data-testid={dataTestId} > {/* Sticky above toolbar - always visible */} {stickyToolbar && toolbarPosition === 'above' && showToolbar && ( diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableCompView.tsx index c35fcc0ba..4d792e056 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableCompView.tsx @@ -34,6 +34,8 @@ export const TableCompView = React.memo((props: { const headerStyle = compChildren.headerStyle.getView(); const toolbarStyle = compChildren.toolbarStyle.getView(); const showHRowGridBorder = compChildren.showHRowGridBorder.getView(); + const className = compChildren.className.getView(); + const dataTestId = compChildren.dataTestId.getView(); const columns = useMemo(() => compChildren.columns.getView(), [compChildren.columns]); const columnViews = useMemo(() => columns.map((c) => c.getView()), [columns]); const data = comp.filterData; @@ -185,6 +187,8 @@ export const TableCompView = React.memo((props: { showHorizontalScrollbar={compChildren.showHorizontalScrollbar.getView()} virtual={virtualization.enabled} containerRef={containerRef} + className={className} + dataTestId={dataTestId} > @@ -206,6 +210,8 @@ export const TableCompView = React.memo((props: { showVerticalScrollbar={compChildren.showVerticalScrollbar.getView()} showHorizontalScrollbar={compChildren.showHorizontalScrollbar.getView()} virtual={virtualization.enabled} + className={className} + dataTestId={dataTestId} > diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tablePropertyView.tsx index 62f3f1ffb..dbe4edcf8 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tablePropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tablePropertyView.tsx @@ -586,6 +586,11 @@ export function compTablePropertyView tooltip: trans("table.dynamicColumnConfigDesc"), })} + +
+ {comp.children.className.propertyView({ label: trans("prop.className") })} + {comp.children.dataTestId.propertyView({ label: trans("prop.dataTestId") })} +
)} diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableUtils.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableUtils.tsx index 9297eded8..69f18ae83 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableUtils.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableUtils.tsx @@ -286,6 +286,8 @@ export type CustomColumnType = ColumnType & { style: TableColumnStyleType; linkStyle: TableColumnLinkStyleType; cellColorFn: CellColorViewType; + columnClassName?: string; + columnDataTestId?: string; }; /** @@ -539,6 +541,8 @@ export function columnsToAntdFormat( fixed: column.fixed === "close" ? false : column.fixed, style, linkStyle, + columnClassName: column.className, + columnDataTestId: column.dataTestId, cellColorFn: column.cellColor, onWidthResize: column.onWidthResize, render: buildRenderFn(