flameresttable 1.0.61 → 1.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flameresttable",
-  "version": "1.0.61",
+  "version": "1.0.63",
   "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">
+      <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,22 +32,24 @@
       </div>
 
 
-      <template v-for="column in Table.columns">
+      <template v-for="(column, key, index) in Table.columns">
         <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">
+          class="  col-span-1 align-middle border-r border-r-slate-100 px-2" :style="'grid-column:' + (index + 2)">
           <span>{{ column.Table.titleCustom !== null ? (column as any).Table.titleCustom(column) : column.Table.title !==
             '' ?
             column.Table.title : column.title !== '' ? column.title :
               column.name }}</span>
         </div>
       </template>
-      <div v-if="opts.Edit.can" class=" col-span-1 border-r border-r-slate-100 px-2">
-        <button class="bg-green-600 invisible">
+      <div v-if="opts.Edit.can" class=" col-span-1 border-r border-r-slate-100 px-2"
+        :style="'grid-column:' + (columnCount() - 1)">
+        <button class=" bg-green-600 invisible">
 
         </button>
       </div>
-      <div v-if="opts.Remove.can" class=" col-span-1 border-r border-r-slate-100 px-2">
+      <div v-if="opts.Remove.can" class=" col-span-1 border-r border-r-slate-100 px-2"
+        :style="'grid-column:' + (columnCount())">
         <button class="bg-green-600 invisible">
 
         </button>
@@ -55,12 +57,13 @@
       <!--</div>-->
 
       <!-- СТРОКИ-->
-      <template v-for="(row) in (Table.Rows.rows)">
+      <template v-for="(  row  ) in   (Table.Rows.rows)  ">
         <template v-if="true">
 
           <!-- ЧЕКБОКСЫ -->
           <!-- 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)">
@@ -68,12 +71,12 @@
             </label>
           </div>
 
-          <template v-for="column in Table.columns">
+          <template v-for="  (column, key, index)   in   Table.columns  ">
             <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>
@@ -81,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>
@@ -90,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>
@@ -123,7 +126,7 @@
         <slot name="header" />
 
         <!-- КОЛОНКИ ТАБЛИЦЫ-->
-        <label v-for="column in ColumnNames" v-show="Table.columns[column].Popup.isShow" :key="'c' + column"
+        <label v-for="  column   in   ColumnNames  " v-show="Table.columns[column].Popup.isShow" :key="'c' + column"
           class="flex items-stretch justify-center w-full my-1 ml-2">
 
           <!-- Заголовок -->
@@ -150,7 +153,7 @@
           <div v-if="Table.columns[column].Popup.popupType === 'selector'"
             class="flex-1 mr-5 w-full flex flex-col self-stretch"><select v-model="Table.columns[column].Popup.model"
               class="h-full self-stretch py-1 px-2 w-full outline-none border border-slate-100">
-              <option v-for="(selectorVal, selectorKey) in Table.columns[column].Popup.Selector.values"
+              <option v-for="(  selectorVal, selectorKey  ) in   Table.columns[column].Popup.Selector.values  "
                 :key="'sel_' + selectorKey"
                 :value="getSelector(Table.columns[column].Popup.Selector.values, selectorKey, selectorVal)[1]">{{
                   getSelector(Table.columns[column].Popup.Selector.values, selectorKey, selectorVal)[0] }}</option>
@@ -455,7 +458,6 @@ export default defineComponent({
 <style scoped lang="scss">
 .grid-container {
   display: grid;
-  grid-template-columns: repeat(var(--column-count), 1fr);
 }
 
 .no-wrap-cell {