Fixing Table Column Display Selector & Naming

Author: FalkWolsky

client/packages/lowcoder-design/src/icons/index.ts

@@ -180,7 +180,7 @@ export { ReactComponent as LeftOpen } from "./icon-left-comp-open.svg";
 export { ReactComponent as LeftClose } from "./icon-left-comp-close.svg";
 export { ReactComponent as MaterialUploadIcon } from "./icon-material-upload.svg";
 export { ReactComponent as UndoIcon } from "./icon-undo.svg";
-
+ 
 export { ReactComponent as ManualIcon } from "./icon-manual.svg";
 export { ReactComponent as WarnIcon } from "./icon-warn.svg";
 export { ReactComponent as SyncManualIcon } from "./icon-sync-manual.svg";
@@ -197,7 +197,8 @@ export { ReactComponent as TableUnCheckedIcon } from "./icon-table-boolean-false
 export { ReactComponent as FileFolderIcon } from "./icon-editor-folder.svg";
 export { ReactComponent as ExpandIcon } from "./icon-expand.svg";
 export { ReactComponent as CompressIcon } from "./icon-compress.svg";
-export { ReactComponent as TableCellsIcon } from "./icon-table-cells.svg"; // Added By Aqib Mirza
+export { ReactComponent as TableCellsIcon } from "./icon-table-cells.svg";
+export { ReactComponent as TableColumnVisibilityIcon } from "./remix/layout-column-line.svg";
 
 // Style Props
 export { ReactComponent as WidthIcon } from "./icon-width.svg";

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

@@ -28,7 +28,7 @@ import {
   LinkButton,
   pageItemRender,
   RefreshIcon,
-  SettingIcon,
+  TableColumnVisibilityIcon,
   SuspensionBox,
   TacoButton,
   TacoInput,
@@ -97,14 +97,15 @@ const getStyle = (
       }
 
       .column-setting {
+        width: 20px;
         cursor: pointer;
 
         * {
-          ${style.toolbarText !== defaultTheme.textDark ? `stroke: ${style.toolbarText}` : null}
+          ${style.toolbarText && style.toolbarText !== defaultTheme.textDark ? `fill: ${style.toolbarText}` : `fill: #8b8fa3`} 
         }
 
         &:hover * {
-          stroke: ${theme?.primary};
+          fill: ${theme?.primary};
         }
       }
     }
@@ -799,7 +800,7 @@ export function TableToolbar(props: {
               visible={settingVisible}
               setVisible={setSettingVisible}
               content={<ColumnSetting columns={visibleColumns} setVisible={setSettingVisible} />}
-              Icon={SettingIcon}
+              Icon={TableColumnVisibilityIcon}
               iconClassName="column-setting"
             />
           )}

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

@@ -1850,7 +1850,7 @@ export const en = {
     "showDownload": "Show Download Button",
     "columnSeparator": "Column Separator",
     "columnSeparatorTooltip": "Column Separator (\"delimiter\") in downloaded CSV file. \n\nRecommendations:\n- Comma (,)\n- Semicolon (;)\n- Pipe (|)\n- Tab (\\t)",
-    "columnSetting": "Show Column Setting Button",
+    "columnSetting": "Show Columns Visibility Button",
     "searchText": "Search Text",
     "searchTextTooltip": "Search and Filter the Data Presented in the Table",
     "showQuickJumper": "Show Quick Jumper",
@@ -1979,9 +1979,9 @@ export const en = {
     "cellColor": "Conditional cell color",
     "cellColorDesc": "Conditionally Set the Cell Color Based on the Cell Value Using CurrentCell. For Example: '{{ currentCell == 3 ? \"green\" : \"red\" }}'",
     "saveChangesNotBind": "No Event Handler Configured for Saving Changes. Please Bind at Least One Event Handler Before Click.",
-    "dynamicColumn": "Use Dynamic Column Setting",
-    "dynamicColumnConfig": "Column Setting",
-    "dynamicColumnConfigDesc": "Dynamic Column Settings. Accepts an Array of Column Names. All Columns Are Visible by Default. Example: [\"id\", \"name\"]",
+    "dynamicColumn": "Use Dynamic Column Visibility",
+    "dynamicColumnConfig": "Visible Columns",
+    "dynamicColumnConfigDesc": "Dynamic Column Visibility. Accepts an Array of Column Names. All Columns Are Visible by Default. Example: [\"id\", \"name\"]",
     "position": "Position",
     "showDataLoadSpinner": "Show Spinner During Data Loading",
     "showValue": "Show Value",