added tooltip option for table header

raheeliftikhar5 · raheeliftikhar5 · commit a739e2e4e503 · 2024-08-01T01:35:01.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDropdownComp.tsx
@@ -52,10 +52,9 @@ export const ColumnDropdownComp = (function () {
       );
 
       return (
-
         <Dropdown
           trigger={["click"]}
-          placement="bottom"
+          placement="bottomRight"
           menu={{items}}
           dropdownRender={() => menu}
         >
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
@@ -86,6 +86,7 @@ export type CellColorViewType = (param: {
 export const columnChildrenMap = {
   // column title
   title: StringControl,
+  tooltip: StringControl,
   showTitle: withDefault(BoolControl, true),
   // a custom column or a data column
   isCustom: valueComp<boolean>(false),
@@ -207,6 +208,9 @@ export class ColumnComp extends ColumnInitComp {
           label: trans("table.columnTitle"),
           placeholder: this.children.dataIndex.getView(),
         })}
+        {this.children.tooltip.propertyView({
+          label: trans("labelProp.tooltip"),
+        })}
         <Dropdown
           showSearch={true}
           defaultValue={columnValue}
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx
@@ -18,6 +18,8 @@ import { JSONObject, JSONValue } from "util/jsonTypes";
 import { StatusType } from "./column/columnTypeComps/columnStatusComp";
 import { ColumnListComp, tableDataRowExample } from "./column/tableColumnListComp";
 import { TableColumnLinkStyleType, TableColumnStyleType } from "comps/controls/styleControlConstants";
+import Tooltip from "antd/es/tooltip";
+import InfoCircleOutlined from "@ant-design/icons/InfoCircleOutlined";
 
 export const COLUMN_CHILDREN_KEY = "children";
 export const OB_ROW_ORI_INDEX = "__ob_origin_index";
@@ -240,11 +242,15 @@ export function getColumnsAggr(
   });
 }
 
-function renderTitle(props: { title: string; editable: boolean }) {
-  const { title, editable } = props;
+function renderTitle(props: { title: string; tooltip: string; editable: boolean }) {
+  const { title, tooltip, editable } = props;
   return (
     <div>
-      {title}
+      <Tooltip title={tooltip}>
+        <span style={{borderBottom: tooltip ? '1px dotted' : ''}}>
+          {title}
+        </span>
+      </Tooltip>
       {editable && <EditableIcon style={{ verticalAlign: "baseline", marginLeft: "4px" }} />}
     </div>
   );
@@ -331,7 +337,7 @@ export function columnsToAntdFormat(
       text: string;
       status: StatusType;
     }[];
-    const title = renderTitle({ title: column.title, editable: column.editable });
+    const title = renderTitle({ title: column.title, tooltip: column.tooltip, editable: column.editable });
    
     return {
       title: column.showTitle ? title : '',
