[Feat]: #1866 add class/id identifies for Table/TableLite

iamfaran · iamfaran · commit e74e078ebba4 · 2025-10-10T20:33:30.000+05:00
diff --git 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<RecordType extends object>(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<RecordType extends object>(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
@@ -134,6 +134,9 @@ export const columnChildrenMap = {
   align: HorizontalAlignmentControl,
   tempHide: stateComp<boolean>(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') && (
             <>
               <Divider style={{ margin: '12px 0' }} />
-              {controlItem({}, (
-                <div>
-                  <b>{"Link Style"}</b>
-                </div>
-              ))}
+              <SectionHeading>Link Style</SectionHeading>
               {comp.children.linkColor.propertyView({
                 label: trans('text') // trans('style.background'),
               })}
@@ -300,11 +304,7 @@ const ColumnPropertyView = React.memo(({
             </>
           )}
           <Divider style={{ margin: '12px 0' }} />
-          {controlItem({}, (
-            <div>
-              <b>{"Column Style"}</b>
-            </div>
-          ))}
+          <SectionHeading>Column Style</SectionHeading>
           {comp.children.background.propertyView({
             label: trans('style.background'),
           })}
@@ -346,6 +346,14 @@ const ColumnPropertyView = React.memo(({
           })}
           {comp.children.textOverflow.getPropertyView()}
           {comp.children.cellColor.getPropertyView()}
+          <Divider style={{ margin: '12px 0' }} />
+          <SectionHeading>Identifiers</SectionHeading>
+          {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
@@ -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}
         >
           <TableWrapper
+            className={className}
+            data-testid={dataTestId}
             $style={style}
             $rowStyle={rowStyle}
             $headerStyle={headerStyle}
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -612,6 +612,11 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
                 tooltip: trans("table.dynamicColumnConfigDesc"),
             })}
           </Section>
+
+          <Section name={trans("prop.component")}>
+            {comp.children.className.propertyView({ label: trans("prop.className") })}
+            {comp.children.dataTestId.propertyView({ label: trans("prop.dataTestId") })}
+          </Section>
         </>
       )}
 
diff --git 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
@@ -333,6 +333,8 @@ export type CustomColumnType<RecordType> = ColumnType<RecordType> & {
   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
@@ -136,6 +136,9 @@ export const columnChildrenMap = {
   align: HorizontalAlignmentControl,
   tempHide: stateComp<boolean>(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') && (
             <>
               <Divider style={{ margin: '12px 0' }} />
-              {controlItem({}, (
-                <div>
-                  <b>{"Link Style"}</b>
-                </div>
-              ))}
+              <SectionHeading>Link Style</SectionHeading>
               {comp.children.linkColor.propertyView({
                 label: trans('text') // trans('style.background'),
               })}
@@ -302,11 +306,7 @@ const ColumnPropertyView = React.memo(({
             </>
           )}
           <Divider style={{ margin: '12px 0' }} />
-          {controlItem({}, (
-            <div>
-              <b>{"Column Style"}</b>
-            </div>
-          ))}
+          <SectionHeading>Column Style</SectionHeading>
           {comp.children.background.propertyView({
             label: trans('style.background'),
           })}
@@ -348,6 +348,14 @@ const ColumnPropertyView = React.memo(({
           })}
           {comp.children.textOverflow.getPropertyView()}
           {comp.children.cellColor.getPropertyView()}
+          <Divider style={{ margin: '12px 0' }} />
+          <SectionHeading>Identifiers</SectionHeading>
+          {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
@@ -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
@@ -108,6 +108,8 @@ function ResizeableTableComp<RecordType extends object>(
         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<RecordType extends object>(
         ) => {
           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
@@ -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<TableContainerProps> = ({
@@ -126,7 +134,9 @@ export const TableContainer: React.FC<TableContainerProps> = ({
   containerRef,
   showVerticalScrollbar,
   showHorizontalScrollbar,
-  virtual
+  virtual,
+  className,
+  dataTestId
 }) => {
   return (
     <MainContainer 
@@ -135,6 +145,8 @@ export const TableContainer: React.FC<TableContainerProps> = ({
       $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
@@ -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}
 		  >
 			<EmptyContent text={trans("table.emptyColumns")} />
 		  </TableContainer>
@@ -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}
 			>
 			
 				<TableRenderer<any>
diff --git 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<T extends MultiBaseComp<TableChildrenType>
                 tooltip: trans("table.dynamicColumnConfigDesc"),
             })}
           </Section>
+
+          <Section name={trans("prop.component")}>
+            {comp.children.className.propertyView({ label: trans("prop.className") })}
+            {comp.children.dataTestId.propertyView({ label: trans("prop.dataTestId") })}
+          </Section>
         </>
       )}
 
diff --git 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<RecordType> = ColumnType<RecordType> & {
   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(
