added column separator option for downloaded table's csv

raheeliftikhar5 · raheeliftikhar5 · commit e76fd45399d7 · 2024-08-01T19:44:01.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx
@@ -97,6 +97,7 @@ export class TableImplComp extends TableInitComp implements IContainer {
       data: (this as any).exposingValues["displayData"],
       filename: fileName,
       fileType: "csv",
+      delimiter: this.children.toolbar.children.columnSeparator.getView(),
     });
   }
 
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
@@ -8,7 +8,7 @@ import { BoolControl } from "comps/controls/boolControl";
 import { StringControl } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { TableToolbarStyleType } from "comps/controls/styleControlConstants";
-import { stateComp } from "comps/generators";
+import { stateComp, withDefault } from "comps/generators";
 import { genRandomKey } from "comps/utils/idGenerator";
 import { ThemeContext } from "comps/utils/themeContext";
 import { trans } from "i18n";
@@ -560,6 +560,7 @@ export const TableToolbarComp = (function () {
     // searchText: StringControl,
     filter: stateComp<TableFilter>({ stackType: "and", filters: [] }),
     position: dropdownControl(positionOptions, "below"),
+    columnSeparator: withDefault(StringControl, ','),
   };
 
   return new ControlNodeCompBuilder(childrenMap, (props, dispatch) => {
@@ -588,6 +589,10 @@ export const TableToolbarComp = (function () {
       children.showFilter.propertyView({ label: trans("table.showFilter") }),
       children.showRefresh.propertyView({ label: trans("table.showRefresh") }),
       children.showDownload.propertyView({ label: trans("table.showDownload") }),
+      children.showDownload.getView() && children.columnSeparator.propertyView({
+        label: trans("table.columnSeparator"),
+        tooltip: trans("table.columnSeparatorTooltip"),
+      }),
       children.columnSetting.propertyView({ label: trans("table.columnSetting") }),
       /* children.searchText.propertyView({
         label: trans("table.searchText"),
diff --git a/client/packages/lowcoder/src/i18n/locales/de.ts b/client/packages/lowcoder/src/i18n/locales/de.ts
@@ -1381,6 +1381,8 @@ export const de: typeof en = {
       "showFilter": "Schaltfläche Filter anzeigen",
       "showRefresh": "Schaltfläche \"Aktualisieren\" anzeigen",
       "showDownload": "Download-Schaltfläche anzeigen",
+      "columnSeparator": "Spaltentrennzeichen",
+      "columnSeparatorTooltip": "Spaltentrennzeichen („Trennzeichen“) in der heruntergeladenen CSV-Datei. \n\nEmpfehlungen:\n- Komma (,)\n- Semikolon (;)\n- Pipe (|)\n- Tabulator (\\t)",
       "columnSetting": "Schaltfläche Spalteneinstellung anzeigen",
       "searchText": "Text suchen",
       "searchTextTooltip": "Suche und Filterung der in der Tabelle dargestellten Daten",
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1836,6 +1836,8 @@ export const en = {
     "showFilter": "Show Filter Button",
     "showRefresh": "Show Refresh Button",
     "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",
     "searchText": "Search Text",
     "searchTextTooltip": "Search and Filter the Data Presented in the Table",
diff --git a/client/packages/lowcoder/src/i18n/locales/pt.ts b/client/packages/lowcoder/src/i18n/locales/pt.ts
@@ -1903,6 +1903,8 @@ export const pt: typeof en = {
         "showFilter": "Mostrar Botão de Filtro",
         "showRefresh": "Mostrar Botão de Atualização",
         "showDownload": "Mostrar Botão de Download",
+        "columnSeparator": "Separador de colunas",
+        "columnSeparatorTooltip": "Separador de colunas (\"delimitador\") no arquivo CSV baixado. \n\nRecomendações:\n- Vírgula (,)\n- Ponto e vírgula (;)\n- Barra vertical (|)\n- Tabulação (\\t)",
         "columnSetting": "Mostrar Botão de Configuração de Coluna",
         "searchText": "Texto de Busca",
         "searchTextTooltip": "Pesquisar e filtrar os dados apresentados na tabela",
diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -1403,6 +1403,8 @@ export const zh: typeof en = {
         showFilter: "显示筛选按钮",
         showRefresh: "显示刷新按钮",
         showDownload: "显示下载按钮",
+        columnSeparator: "柱分离器",
+        columnSeparatorTooltip: "下载的 CSV 文件中的列分隔符（\“分隔符\”）。 \n\n建议：\n- 逗号 (,)\n- 分号 (;)\n- 竖线 (|)\n- 制表符 (\\t)",
         columnSetting: "显示列设置按钮",
         searchText: "搜索文本",
         searchTextTooltip: "搜索和筛选在表格中呈现的数据",
diff --git a/client/packages/lowcoder/src/util/fileUtils.ts b/client/packages/lowcoder/src/util/fileUtils.ts
@@ -31,9 +31,10 @@ interface SaveDataAsFileParams {
   filename: string;
   fileType: "empty" | "txt" | "json" | "csv" | "xlsx" | string;
   dataType?: "url" | "base64";
+  delimiter?: string;
 }
 
-export async function saveDataAsFile({ data, filename, fileType, dataType }: SaveDataAsFileParams) {
+export async function saveDataAsFile({ data, filename, fileType, dataType, delimiter }: SaveDataAsFileParams) {
   if (dataType === "url") {
     return saveAs(data, filename, { autoBom: true });
   }
@@ -72,11 +73,15 @@ export async function saveDataAsFile({ data, filename, fileType, dataType }: Sav
       } else {
         wb = XLSX.read(data, { type: "string" });
       }
-      blobData = XLSX.write(wb, {
+      let writeOptions: any = {
         bookType: finalFileType,
         bookSST: false, // whether to generate Shared String Table? setting true will slow down the generating speed, but more compatible for lower versioned iOS devices
         type: "buffer",
-      });
+      }
+      if (finalFileType === 'csv' && delimiter) {
+        writeOptions['FS'] = delimiter;
+      }
+      blobData = XLSX.write(wb, writeOptions);
       break;
   }
   const blob = new Blob([blobData], {

Original file line number	Diff line number	Diff line change
`@@ -97,6 +97,7 @@ export class TableImplComp extends TableInitComp implements IContainer {`
`97`	`97`	`data: (this as any).exposingValues["displayData"],`
`98`	`98`	`filename: fileName,`
`99`	`99`	`fileType: "csv",`
	`100`	`+ delimiter: this.children.toolbar.children.columnSeparator.getView(),`
`100`	`101`	`});`
`101`	`102`	`}`
`102`	`103`