show/hide column title in table

Author: raheeliftikhar5

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

@@ -27,7 +27,6 @@ import { ColorControl } from "comps/controls/colorControl";
 import { JSONValue } from "util/jsonTypes";
 import styled from "styled-components";
 import { TextOverflowControl } from "comps/controls/textOverflowControl";
-import { TableColumnLinkStyle, styleControl } from "@lowcoder-ee/index.sdk";
 import { default as Divider } from "antd/es/divider";
 export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
 export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
@@ -86,6 +85,7 @@ export type CellColorViewType = (param: {
 export const columnChildrenMap = {
   // column title
   title: StringControl,
+  showTitle: withDefault(BoolControl, true),
   // a custom column or a data column
   isCustom: valueComp<boolean>(false),
   // If it is a data column, it must be the name of the column and cannot be duplicated as a react key
@@ -149,6 +149,13 @@ export class ColumnComp extends ColumnInitComp {
         )
       );
     }
+    if(action.type === CompActionTypes.CHANGE_VALUE) {
+      const title = comp.children.title.unevaledValue;
+      const dataIndex = comp.children.dataIndex.getView();
+      if(!Boolean(title)) {
+        comp.children.title.dispatchChangeValueAction(dataIndex);
+      }
+    }
     return comp;
   }
 
@@ -180,9 +187,14 @@ export class ColumnComp extends ColumnInitComp {
       <>
         {this.children.title.propertyView({
           label: trans("table.columnTitle"),
+          placeholder: this.children.dataIndex.getView(),
         })}
         {/* FIXME: cast type currently, return type of withContext should be corrected later */}
         {this.children.render.getPropertyView()}
+        {this.children.showTitle.propertyView({
+          label: trans("table.showTitle"),
+          tooltip: trans("table.showTitleTooltip"),
+        })}
         {ColumnTypeCompMap[columnType].canBeEditable() &&
           this.children.editable.propertyView({ label: trans("table.editable") })}
         {this.children.sortable.propertyView({
@@ -311,6 +323,7 @@ export function newPrimaryColumn(
   title?: string,
   isTag?: boolean
 ): ConstructorToDataType<typeof ColumnComp> {
+  console.log('newPrimaryColumn', title);
   return {
     title: title ?? key,
     dataIndex: key,

client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx

@@ -101,7 +101,6 @@ export class ColumnListComp extends ColumnListTmpComp {
     dynamicColumn: boolean;
     data: Array<JSONObject>;
   }) {
-    console.log("dataChangedAction", param);
     return customAction<ActionDataType>(
       {
         type: "dataChanged",

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

@@ -311,7 +311,7 @@ export function columnsToAntdFormat(
     }[];
     const title = renderTitle({ title: column.title, editable: column.editable });
     return {
-      title: title,
+      title: column.showTitle ? title : '',
       titleText: column.title,
       dataIndex: column.dataIndex,
       align: column.align,

client/packages/lowcoder/src/i18n/locales/de.ts

@@ -1124,7 +1124,9 @@ export const de = {
       "columnValueTooltip": "\\'{{currentCell}}\\': Aktuelle Zelldaten\n \\'{{currentRow}}\\': Aktuelle Zeilendaten\n \\'{{currentIndex}}\\': Aktueller Datenindex (beginnend bei 0)\n Beispiel: \\'{{currentCell * 5}}\\' Show 5 Times the Original Value Data.",
       "imageSrc": "Bildquelle",
       "imageSize": "Bildgröße",
-      "columnTitle": "Titel",
+      "columnTitle": "Titel anzeigen",
+      "showTitle": "Show Title",
+      "showTitleTooltip": "Spaltentitel im Tabellenkopf ein-/ausblenden",
       "sortable": "Sortierbar",
       "align": "Ausrichtung",
       "fixedColumn": "Feste Säule",

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1229,6 +1229,8 @@ export const en = {
     "imageSrc": "Image Source",
     "imageSize": "Image Size",
     "columnTitle": "Title",
+    "showTitle": "Show Title",
+    "showTitleTooltip": "Show/Hide column title in table header",
     "sortable": "Sortable",
     "align": "Alignment",
     "fixedColumn": "Fixed Column",

client/packages/lowcoder/src/i18n/locales/zh.ts

@@ -1200,6 +1200,8 @@ table: {
     imageSrc: "图片链接",
     imageSize: "图片尺寸",
     columnTitle: "标题",
+    showTitle: "显示标题",
+    showTitleTooltip: "显示/隐藏表标题中的列标题",
     sortable: "可排序",
     align: "对齐方式",
     fixedColumn: "固定列",