flameresttable 1.0.26 → 1.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flameresttable",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "main": "./src/plugin.ts",
   "repository": {
     "type": "git",

package/src/Table/FlameTable.ts

@@ -307,4 +307,25 @@ export default class FlameTable<T> {
     return result;
   }
 
+  /**
+   * Выгрузить существующие колонки в CSV
+   * @param filename 
+   * @param arr 
+   */
+  public exportSelectedToCSV(filename: string = "table.csv", arr: any = null) {
+
+    arr = arr ?? this.getSelectedRows();
+
+    const array = [Object.keys(arr[0])].concat(arr);
+    const csv = array.map(row => Object.values(row).map(val => `"${val}"`).join(';')).join('\n');
+
+    const csvData = new Blob([csv], { type: 'text/csv' });
+    const csvURL = URL.createObjectURL(csvData);
+    const link = document.createElement('a');
+    link.href = csvURL;
+    link.download = filename;
+    link.click();
+
+  }
+
 }

package/src/Table/Table.vue

@@ -8,7 +8,7 @@
     <div class="flex items-center justify-between">
       <slot name="defaultButtons">
         <div v-show="$props.opts?.Add.can"
-          class="flex cursor-pointer justify-center items-center text-white bg-blue-600 font-medium rounded text-sm px-4 text-center hover:bg-blue-700 .focus:ring-4.focus:ring-blue-200.dark:focus:ring-blue-900"
+          class="flex mr-3 cursor-pointer justify-center items-center text-white bg-blue-600 font-medium rounded text-sm px-4 text-center hover:bg-blue-700 .focus:ring-4.focus:ring-blue-200.dark:focus:ring-blue-900"
           @click="add()">
           <div class="text-xl">
             +
@@ -17,6 +17,16 @@
             {{ $props.opts?.Add.buttonTitle }}
           </div>
         </div>
+        <div v-show="$props.opts?.Export.CSV.can"
+          class="flex mr-3 cursor-pointer justify-center items-center text-white bg-blue-600 font-medium rounded text-sm px-4 text-center hover:bg-blue-700 .focus:ring-4.focus:ring-blue-200.dark:focus:ring-blue-900"
+          @click="Table.exportSelectedToCSV()">
+          <div class="text-xl">
+            +
+          </div>
+          <div class="ml-2">
+            {{ $props.opts?.Export.CSV.buttonTitle }}
+          </div>
+        </div>
       </slot>
       <slot name="otherButtons" />
 
@@ -451,7 +461,7 @@ export default defineComponent({
   color: rgb(55, 53, 47);
   font-size: 14px;
   line-height: 16.8px;
-  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Roboto", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
   border: 1px solid rgb(233, 233, 231);
 }
 

package/src/Table/TableOpts.ts

@@ -71,6 +71,13 @@ export default class TableOpts {
 
   }
 
+  public Export = {
+    CSV: {
+      can: false,
+      buttonTitle: "Export to CSV",
+    }
+  }
+
   public Add = {
     can: true,
     buttonTitle: "Добавить",