flameresttable 1.0.62 → 1.0.64

package/package.json

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

package/src/Table/Table.vue

@@ -24,7 +24,7 @@
       <!--<div>-->
 
       <!-- ЧЕКБОКСЫ -->
-      <div class="w-[21px] align-middle col-span-1" :style="'grid-column:' + 0">
+      <div class="w-[21px] align-middle col-span-1" :style="'grid-column:' + 1">
         <label class="checkbox" v-if="Table.opts.rowSelectors">
           <input type='checkbox' @change="CheckboxSelectionChanged($event, true)">
           <span class='indicator'></span>
@@ -32,7 +32,7 @@
       </div>
 
 
-      <template v-for="(column, key, index) in Table.columns">
+      <template v-for="(column, index) in columnsArray">
         <div v-if="column.Table.isShow" :key="'cheader_' + column.name"
           :class="' defaultHeader ' + column.Table.classesHeader"
           class="  col-span-1 align-middle border-r border-r-slate-100 px-2" :style="'grid-column:' + (index + 2)">
@@ -62,7 +62,8 @@
 
           <!-- ЧЕКБОКСЫ -->
           <!-- class="defaultRow cursor-pointer hover:bg-slate-100" -->
-          <div class="col-span-1 align-middle w-[21px]" :key="'chkbox_row_' + (row as any).id">
+          <div class="col-span-1 align-middle w-[21px]" :key="'chkbox_row_' + (row as any).id"
+            :style="'grid-column:' + 1">
             <label class="checkbox" v-if="Table.opts.rowSelectors">
               <input type='checkbox' v-model="Table.RowsParams[(row as any)[primaryKey]].selected"
                 @change="CheckboxSelectionChanged($event, false)">
@@ -70,12 +71,12 @@
             </label>
           </div>
 
-          <template v-for="  column   in   Table.columns  ">
+          <template v-for="  (column, index)   in   columnsArray  ">
             <div v-if="column.Table.isShow" :key="'tc_' + column.name + '_row_' + (row as any).id"
               :class="' defaultCell ' + column.Table.classes"
               class=" col-span-1 align-middle border-r border-r-slate-100 px-2 last:border-r-0 last:pr-0"
               @click="columnClick(row, column)"
-              :style="(column.Table.width === null ? '' : 'width:' + column.Table.width + 'px')">
+              :style="'grid-column:' + (index + 2) + ';' + (column.Table.width === null ? '' : 'width:' + column.Table.width + 'px;')">
 
               <span v-if="!column.Table.isRawValue">{{
                 column.Table.value(row, column) }}</span>
@@ -83,7 +84,7 @@
             </div>
           </template>
           <div v-if="opts.Edit.can" class=" col-span-1 border-r border-r-slate-100 px-2 text-center"
-            :key="'edit_' + 'row_' + (row as any).id">
+            :style="'grid-column:' + (columnCount() - 1)" :key="'edit_' + 'row_' + (row as any).id">
             <button class="mobile:hidden px-2 py-1 bg-green-600 text-white my-1" @click="edit(row)">
               Изменить
             </button>
@@ -92,7 +93,7 @@
             </button>
           </div>
           <div v-if="opts.Remove.can" class=" col-span-1 border-r border-r-slate-100 px-2 text-center"
-            :key="'delete_' + 'row_' + (row as any).id">
+            :key="'delete_' + 'row_' + (row as any).id" :style="'grid-column:' + (columnCount())">
             <button class="mobile:hidden px-2 py-1 bg-gray-600 opacity-30 text-white my-1" @click="deleteRow(row)">
               Удалить
             </button>
@@ -404,6 +405,15 @@ export default defineComponent({
     }
 
   },
+
+  computed: {
+
+    columnsArray: function () {
+      return Object.keys(this.Table.columns).filter(r => this.Table.columns[r].Table.isShow).map(key => this.Table.columns[key])
+    }
+
+  },
+
   methods: {
     fileGetData(thisArr: any, getSource: boolean = true) {
 
@@ -445,7 +455,9 @@ export default defineComponent({
         for (const key in this.Table.RowsParams) {
           this.Table.RowsParams[key].selected = event.target.checked
         }
-    }
+    },
+
+
   },
 
 })