aloha-vue 1.2.201 → 1.2.203

package/docs/src/views/PageTable/PageTableSimple/PageTableSimple.js

@@ -1,5 +1,8 @@
 import AlohaPage from "../../../global/components/AlohaPage/AlohaPage.vue";
+import PageTableSimpleColumnsGroupedExample from "./PageTableSimpleColumnsGroupedExample/PageTableSimpleColumnsGroupedExample.vue";
 import PageTableSimpleExample from "./PageTableSimpleExample/PageTableSimpleExample.vue";
+import PageTableSimpleIsSimpleTableExample from "./PageTableSimpleIsSimpleTableExample/PageTableSimpleIsSimpleTableExample.vue";
+import PageTableSimpleMobileSlotsExample from "./PageTableSimpleMobileSlotsExample/PageTableSimpleMobileSlotsExample.vue";
 
 import PageTitleAPI from "./compositionAPI/PageTitleAPI";
 
@@ -7,7 +10,10 @@ export default {
   name: "PageTableSimple",
   components: {
     AlohaPage,
+    PageTableSimpleColumnsGroupedExample,
     PageTableSimpleExample,
+    PageTableSimpleIsSimpleTableExample,
+    PageTableSimpleMobileSlotsExample,
   },
   setup() {
     const {

package/docs/src/views/PageTable/PageTableSimple/PageTableSimple.pug

@@ -6,3 +6,9 @@ aloha-page(
   )
     page-table-simple-example
 
+    page-table-simple-is-simple-table-example
+
+    page-table-simple-columns-grouped-example
+
+    page-table-simple-mobile-slots-example
+

package/docs/src/views/PageTable/PageTableSimple/PageTableSimpleColumnsGroupedExample/PageTableSimpleColumnsGroupedExample.js

@@ -0,0 +1,107 @@
+import {
+  ref,
+} from "vue";
+
+import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
+import ATable from "../../../../../../src/ATable/ATable";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+import {
+  times,
+} from "lodash-es";
+
+export default {
+  name: "PageTableSimpleColumnsGroupedExample",
+  components: {
+    AlohaExample,
+    ATable,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const columnsGrouped = [
+      {
+        id: "column5",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_7_",
+      },
+      {
+        id: "column1",
+        keyLabel: "id",
+        label: "_A_TABLE_COLUMN_1_",
+        group: ["Group 1", "Group 1.3"],
+        width: 500,
+      },
+      {
+        id: "column6",
+        keyLabel: "id",
+        label: "_A_TABLE_COLUMN_2_",
+        group: ["Group 1", "Group 1.1", "Group 1.1.1"],
+      },
+      {
+        id: "column7",
+        keyLabel: "id",
+        label: "_A_TABLE_COLUMN_3_",
+        group: ["Group 1.1", "Group 1.1.2", "Group 1"],
+      },
+      {
+        id: "column2",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_4_",
+        group: ["Group 1", "Group 1.2"],
+      },
+      {
+        id: "column9",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_7_",
+      },
+      {
+        id: "column3",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_5_",
+        group: ["Group 2", "Group 2.1"],
+      },
+      {
+        id: "column4",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_6_",
+        group: ["_A_TABLE_COLUMN_6_", "Group 2.2"],
+      },
+      {
+        id: "column6",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_8_",
+      },
+    ];
+
+    const data = ref([]);
+
+    const setData = () => {
+      const DATA = [];
+      times(20, item => {
+        DATA.push({
+          id: item,
+          aloha: `aloha ${ item }`,
+        });
+      });
+      data.value = DATA;
+    };
+
+    setData();
+
+    return {
+      codeHtml,
+      codeJs,
+      columnsGrouped,
+      data,
+    };
+  },
+};

package/docs/src/views/PageTable/PageTableSimple/PageTableSimpleColumnsGroupedExample/PageTableSimpleColumnsGroupedExample.pug

@@ -0,0 +1,16 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_TABLE_GROUP_SIMPLE_COLUMNS_GROUPED_HEADER_"
+  description="_A_TABLE_GROUP_SIMPLE_COLUMNS_GROUPED_DESCRIPTION_"
+  :props="['is-simple-table', 'has-mobile']"
+)
+  div
+    a-table(
+      :columns="columnsGrouped"
+      :data="data"
+      label="_A_TABLE_GROUP_SIMPLE_COLUMNS_GROUPED_LABEL_"
+      key-id="id"
+      :is-simple-table="true"
+      :has-mobile="false"
+    )

package/docs/src/views/PageTable/PageTableSimple/PageTableSimpleColumnsGroupedExample/PageTableSimpleColumnsGroupedExample.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageTableSimpleColumnsGroupedExample.pug"></template>
+<script src="./PageTableSimpleColumnsGroupedExample.js"></script>

package/docs/src/views/PageTable/PageTableSimple/PageTableSimpleColumnsGroupedExample/compositionAPI/HtmlAPI.js

@@ -0,0 +1,13 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-table
+  :columns="columns"
+  :data="data"
+  label="_A_TABLE_GROUP_SIMPLE_LABEL_"
+  key-id="id"
+>
+</a-table>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageTable/PageTableSimple/PageTableSimpleColumnsGroupedExample/compositionAPI/JsAPI.js

@@ -0,0 +1,94 @@
+export default function JsAPI() {
+  const codeJs = `import {
+  ref,
+} from "vue";
+
+import ATable from "aloha-vue/src/ATable/ATable";
+    
+export default {
+  name: "PageTableSimpleExample",
+  components: {
+    ATable,
+  },
+  setup() {
+     const columnsGrouped = [
+      {
+        id: "column5",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_7_",
+      },
+      {
+        id: "column1",
+        keyLabel: "id",
+        label: "_A_TABLE_COLUMN_1_",
+        group: ["Group 1", "Group 1.3"],
+        width: 500,
+      },
+      {
+        id: "column6",
+        keyLabel: "id",
+        label: "_A_TABLE_COLUMN_2_",
+        group: ["Group 1", "Group 1.1", "Group 1.1.1"],
+      },
+      {
+        id: "column7",
+        keyLabel: "id",
+        label: "_A_TABLE_COLUMN_3_",
+        group: ["Group 1.1", "Group 1.1.2", "Group 1"],
+      },
+      {
+        id: "column2",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_4_",
+        group: ["Group 1", "Group 1.2"],
+      },
+      {
+        id: "column9",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_7_",
+      },
+      {
+        id: "column3",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_5_",
+        group: ["Group 2", "Group 2.1"],
+      },
+      {
+        id: "column4",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_6_",
+        group: ["_A_TABLE_COLUMN_6_", "Group 2.2"],
+      },
+      {
+        id: "column6",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_8_",
+      },
+    ];
+
+    const data = ref([]);
+
+    const setData = () => {
+      const DATA = [];
+      times(20, item => {
+        DATA.push({
+          id: item,
+          aloha: \`aloha \${ item }\`,
+        });
+      });
+      data.value = DATA;
+    };
+
+    setData();
+    
+    return {
+      columnsGrouped,
+      data,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/PageTable/PageTableSimple/PageTableSimpleExample/PageTableSimpleExample.js

@@ -55,61 +55,6 @@ export default {
       },
     ];
 
-    const columnsGrouped = [
-      {
-        id: "column5",
-        keyLabel: "aloha",
-        label: "_A_TABLE_COLUMN_7_",
-      },
-      {
-        id: "column1",
-        keyLabel: "id",
-        label: "_A_TABLE_COLUMN_1_",
-        group: ["Group 1", "Group 1.3"],
-        width: 500,
-      },
-      {
-        id: "column6",
-        keyLabel: "id",
-        label: "_A_TABLE_COLUMN_2_",
-        group: ["Group 1", "Group 1.1", "Group 1.1.1"],
-      },
-      {
-        id: "column7",
-        keyLabel: "id",
-        label: "_A_TABLE_COLUMN_3_",
-        group: ["Group 1.1", "Group 1.1.2", "Group 1"],
-      },
-      {
-        id: "column2",
-        keyLabel: "aloha",
-        label: "_A_TABLE_COLUMN_4_",
-        group: ["Group 1", "Group 1.2"],
-      },
-      {
-        id: "column9",
-        keyLabel: "aloha",
-        label: "_A_TABLE_COLUMN_7_",
-      },
-      {
-        id: "column3",
-        keyLabel: "aloha",
-        label: "_A_TABLE_COLUMN_5_",
-        group: ["Group 2", "Group 2.1"],
-      },
-      {
-        id: "column4",
-        keyLabel: "aloha",
-        label: "_A_TABLE_COLUMN_6_",
-        group: ["_A_TABLE_COLUMN_6_", "Group 2.2"],
-      },
-      {
-        id: "column6",
-        keyLabel: "aloha",
-        label: "_A_TABLE_COLUMN_8_",
-      },
-    ];
-
     const data = ref([]);
 
     const setData = () => {
@@ -129,7 +74,6 @@ export default {
       codeHtml,
       codeJs,
       columns,
-      columnsGrouped,
       data,
     };
   },

package/docs/src/views/PageTable/PageTableSimple/PageTableSimpleExample/PageTableSimpleExample.pug

@@ -11,10 +11,3 @@ aloha-example(
       label="_A_TABLE_GROUP_SIMPLE_LABEL_"
       key-id="id"
     )
-    a-table(
-      :columns="columnsGrouped"
-      :data="data"
-      label="_A_TABLE_GROUP_SIMPLE_LABEL_"
-      key-id="id"
-      :is-simple-table="true"
-    )

package/docs/src/views/PageTable/PageTableSimple/PageTableSimpleIsSimpleTableExample/PageTableSimpleIsSimpleTableExample.js

@@ -0,0 +1,80 @@
+import {
+  ref,
+} from "vue";
+
+import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
+import ATable from "../../../../../../src/ATable/ATable";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+import {
+  times,
+} from "lodash-es";
+
+export default {
+  name: "PageTableSimpleIsSimpleTableExample",
+  components: {
+    AlohaExample,
+    ATable,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const columns = [
+      {
+        id: "column1",
+        keyLabel: "id",
+        label: "_A_TABLE_COLUMN_1_",
+      },
+      {
+        id: "column2",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_2_",
+      },
+      {
+        id: "column3",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_3_",
+      },
+      {
+        id: "column4",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_4_",
+      },
+      {
+        id: "column5",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_5_",
+      },
+    ];
+
+    const data = ref([]);
+
+    const setData = () => {
+      const DATA = [];
+      times(20, item => {
+        DATA.push({
+          id: item,
+          aloha: `aloha ${ item }`,
+        });
+      });
+      data.value = DATA;
+    };
+
+    setData();
+
+    return {
+      codeHtml,
+      codeJs,
+      columns,
+      data,
+    };
+  },
+};

package/docs/src/views/PageTable/PageTableSimple/PageTableSimpleIsSimpleTableExample/PageTableSimpleIsSimpleTableExample.pug

@@ -0,0 +1,15 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_TABLE_GROUP_SIMPLE_IS_SIMPLE_TABLE_HEADER_"
+  description="_A_TABLE_GROUP_SIMPLE_IS_SIMPLE_TABLE_DESCRIPTION_"
+  props="is-simple-table"
+)
+  div
+    a-table(
+      :columns="columns"
+      :data="data"
+      :is-simple-table="true"
+      key-id="id"
+      label="_A_TABLE_GROUP_SIMPLE_IS_SIMPLE_TABLE_LABEL_"
+    )

package/docs/src/views/PageTable/PageTableSimple/PageTableSimpleIsSimpleTableExample/PageTableSimpleIsSimpleTableExample.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageTableSimpleIsSimpleTableExample.pug"></template>
+<script src="./PageTableSimpleIsSimpleTableExample.js"></script>

package/docs/src/views/PageTable/PageTableSimple/PageTableSimpleIsSimpleTableExample/compositionAPI/HtmlAPI.js

@@ -0,0 +1,13 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-table
+  :columns="columns"
+  :data="data"
+  label="_A_TABLE_GROUP_SIMPLE_LABEL_"
+  key-id="id"
+>
+</a-table>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageTable/PageTableSimple/PageTableSimpleIsSimpleTableExample/compositionAPI/JsAPI.js

@@ -0,0 +1,67 @@
+export default function JsAPI() {
+  const codeJs = `import {
+  ref,
+} from "vue";
+
+import ATable from "aloha-vue/src/ATable/ATable";
+    
+export default {
+  name: "PageTableSimpleExample",
+  components: {
+    ATable,
+  },
+  setup() {
+     const columns = [
+      {
+        id: "column1",
+        keyLabel: "id",
+        label: "_A_TABLE_COLUMN_1_",
+      },
+      {
+        id: "column2",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_2_",
+      },
+      {
+        id: "column3",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_3_",
+      },
+      {
+        id: "column4",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_4_",
+      },
+      {
+        id: "column5",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_5_",
+      },
+    ];
+
+    const data = ref([]);
+
+    const setData = () => {
+      const DATA = [];
+      times(20, item => {
+        DATA.push({
+          id: item,
+          aloha: \`aloha \${ item }\`,
+        });
+      });
+      data.value = DATA;
+    };
+
+    setData();
+    
+    return {
+      columns,
+      data,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/PageTable/PageTableSimple/PageTableSimpleMobileSlotsExample/PageTableSimpleMobileSlotsExample.js

@@ -0,0 +1,80 @@
+import {
+  ref,
+} from "vue";
+
+import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
+import ATable from "../../../../../../src/ATable/ATable";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+import {
+  times,
+} from "lodash-es";
+
+export default {
+  name: "PageTableSimpleMobileSlotsExample",
+  components: {
+    AlohaExample,
+    ATable,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const columns = [
+      {
+        id: "column1",
+        keyLabel: "id",
+        label: "_A_TABLE_COLUMN_1_",
+      },
+      {
+        id: "column2",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_2_",
+      },
+      {
+        id: "column3",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_3_",
+      },
+      {
+        id: "column4",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_4_",
+      },
+      {
+        id: "column5",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_5_",
+      },
+    ];
+
+    const data = ref([]);
+
+    const setData = () => {
+      const DATA = [];
+      times(20, item => {
+        DATA.push({
+          id: item,
+          aloha: `aloha ${ item }`,
+        });
+      });
+      data.value = DATA;
+    };
+
+    setData();
+
+    return {
+      codeHtml,
+      codeJs,
+      columns,
+      data,
+    };
+  },
+};

package/docs/src/views/PageTable/PageTableSimple/PageTableSimpleMobileSlotsExample/PageTableSimpleMobileSlotsExample.pug

@@ -0,0 +1,29 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_TABLE_GROUP_SIMPLE_MOBILE_SLOTS_HEADER_"
+  description="_A_TABLE_GROUP_SIMPLE_MOBILE_SLOTS_DESCRIPTION_"
+  props="is-simple-table"
+  :slots="['rowMobilePrepend', 'rowMobileAppend']"
+)
+  div
+    a-table(
+      :columns="columns"
+      :data="data"
+      :is-simple-table="true"
+      key-id="id"
+      label="_A_TABLE_GROUP_SIMPLE_MOBILE_SLOTS_LABEL_"
+    )
+      template(
+        v-slot:rowMobilePrepend="{ row, rowIndex, isFooter }"
+      )
+        span(
+          style="width: 100px;"
+        ) Aloha
+
+      template(
+        v-slot:rowMobileAppend="{ row, rowIndex, isFooter }"
+      )
+        span(
+          style="width: 100px;"
+        ) Aloha

package/docs/src/views/PageTable/PageTableSimple/PageTableSimpleMobileSlotsExample/PageTableSimpleMobileSlotsExample.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageTableSimpleMobileSlotsExample.pug"></template>
+<script src="./PageTableSimpleMobileSlotsExample.js"></script>

package/docs/src/views/PageTable/PageTableSimple/PageTableSimpleMobileSlotsExample/compositionAPI/HtmlAPI.js

@@ -0,0 +1,13 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-table
+  :columns="columns"
+  :data="data"
+  label="_A_TABLE_GROUP_SIMPLE_LABEL_"
+  key-id="id"
+>
+</a-table>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageTable/PageTableSimple/PageTableSimpleMobileSlotsExample/compositionAPI/JsAPI.js

@@ -0,0 +1,67 @@
+export default function JsAPI() {
+  const codeJs = `import {
+  ref,
+} from "vue";
+
+import ATable from "aloha-vue/src/ATable/ATable";
+    
+export default {
+  name: "PageTableSimpleExample",
+  components: {
+    ATable,
+  },
+  setup() {
+     const columns = [
+      {
+        id: "column1",
+        keyLabel: "id",
+        label: "_A_TABLE_COLUMN_1_",
+      },
+      {
+        id: "column2",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_2_",
+      },
+      {
+        id: "column3",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_3_",
+      },
+      {
+        id: "column4",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_4_",
+      },
+      {
+        id: "column5",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_5_",
+      },
+    ];
+
+    const data = ref([]);
+
+    const setData = () => {
+      const DATA = [];
+      times(20, item => {
+        DATA.push({
+          id: item,
+          aloha: \`aloha \${ item }\`,
+        });
+      });
+      data.value = DATA;
+    };
+
+    setData();
+    
+    return {
+      columns,
+      data,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.2.201",
+  "version": "1.2.203",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/ATable/ATable.js

@@ -174,6 +174,11 @@ export default {
       required: false,
       default: undefined,
     },
+    hasMobile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     hasScrollClass: {
       type: Boolean,
       required: false,
@@ -840,7 +845,7 @@ export default {
     return h("div", {
       ref: "tableGrandparentRef",
       class: ["a_table__grandparent", {
-        a_table_mobile: !this.isSimpleTable && this.isMobile,
+        a_table_mobile: this.isMobile,
         a_table__grandparent_without_scroll: !this.hasScrollClass,
       }],
     }, [

package/src/ATable/ATableGroupedHeader/ATableGroupedHeader.js

@@ -91,6 +91,10 @@ export default {
     };
   },
   render() {
+    if (this.isMobile) {
+      return null;
+    }
+
     return h("div", {
       ref: "root",
       role: "rowgroup",

package/src/ATable/ATableTd/compositionAPI/LinkAPI.js

@@ -28,6 +28,12 @@ export default function LinkAPI(props) {
       const TO = cloneDeep(column.value.to);
       const PARAMS = TO.params || {};
       const QUERY = TO.query || {};
+      if (column.value.to.nameDynamic && !column.value.to.name) {
+        const NAME = get(row.value, column.value.to.nameDynamic);
+        if (NAME) {
+          TO.name = NAME;
+        }
+      }
       if (column.value.to.paramsDynamic) {
         let hasParamsDynamicError = false;
         forEach(column.value.to.paramsDynamic, (value, key) => {

package/src/ATable/ATableTr/ATableTr.js

@@ -255,9 +255,27 @@ export default {
       }, this.$slots);
 
     const CHILDREN = this.isMobile ?
-      h("dl", {
-        class: "a_table_mobile__dl",
-      }, tds) :
+      h("div", {
+        class: "a_table_mobile__dl__wrapper",
+      }, [
+        this.$slots.rowMobilePrepend ?
+          this.$slots.rowMobilePrepend({
+            row: this.row,
+            rowIndex: this.rowIndex,
+            isFooter: this.isFooter,
+          }) :
+          "",
+        h("dl", {
+          class: "a_table_mobile__dl",
+        }, tds),
+        this.$slots.rowMobileAppend ?
+          this.$slots.rowMobileAppend({
+            row: this.row,
+            rowIndex: this.rowIndex,
+            isFooter: this.isFooter,
+          }) :
+          "",
+      ]) :
       tds;
 
     return [

package/src/ATable/compositionAPI/RowActionsAPI.js

@@ -144,6 +144,12 @@ export default function RowActionsAPI(props) {
       const TO = cloneDeep(rowAction.to);
       const PARAMS = TO.params || {};
       const QUERY = TO.query || {};
+      if (rowAction.to.nameDynamic && !rowAction.to.name) {
+        const NAME = get(row.value, rowAction.to.nameDynamic);
+        if (NAME) {
+          TO.name = NAME;
+        }
+      }
       if (rowAction.to.paramsDynamic) {
         let hasParamsDynamicError = false;
         forEach(rowAction.to.paramsDynamic, (value, key) => {

package/src/ATable/compositionAPI/SimpleTableAPI.js

@@ -6,6 +6,7 @@ import {
 import AMobileAPI from "../../compositionAPI/AMobileAPI";
 
 export default function SimpleTableAPI(props) {
+  const hasMobile = toRef(props, "hasMobile");
   const isActionColumnVisible = toRef(props, "isActionColumnVisible");
   const isActionIconVisible = toRef(props, "isActionColumnVisible");
   const isColumnsDnd = toRef(props, "isColumnsDnd");
@@ -37,8 +38,11 @@ export default function SimpleTableAPI(props) {
   });
 
   const isMobile = computed(() => {
-    return !!(!isSimpleTable.value &&
-      !isTree.value && 
+    if (!hasMobile.value) {
+      return false;
+    }
+
+    return !!(!isTree.value &&
       isMobileWidth.value);
   });
 

package/src/styles/components/ATable.scss

@@ -517,7 +517,14 @@
   }
 }
 
+.a_table_mobile__dl__wrapper {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
 .a_table_mobile__dl {
+  width: 100%;
   display: flex;
   flex-wrap: wrap;
   margin: 0;
@@ -620,6 +627,13 @@
     border-right: var(--a_table_th_border_vertical_width) solid var(--a_table_th_border_vertical_color);
   }
 }
+.a_table_mobile {
+  .a_table_bordered {
+    .a_table__body__row {
+      border-left: var(--a_table_td_border_vertical_width) solid var(--a_table_td_border_vertical_color);
+    }
+  }
+}
 .a_table_bordered,
 .a_table_inner_bordered {
   .a_table__td {
@@ -646,18 +660,21 @@
     border-bottom: var(--a_table_th_border_horizontal_width) solid var(--a_table_th_border_horizontal_color);
   }
 }
-.a_table_simple.a_table_bordered {
-  .a_table__td:last-child {
-    border-right: var(--a_table_td_border_vertical_width) solid var(--a_table_td_border_vertical_color);
-  }
-  .a_table__th:last-child {
-    border-right: var(--a_table_td_border_vertical_width) solid var(--a_table_td_border_vertical_color);
-  }
-  .a_table__body__row,
-  .a_table__head__row {
-    border-right: none;
+.a_table__grandparent:not(.a_table_mobile) {
+  .a_table_simple.a_table_bordered {
+    .a_table__td:last-child {
+      border-right: var(--a_table_td_border_vertical_width) solid var(--a_table_td_border_vertical_color);
+    }
+    .a_table__th:last-child {
+      border-right: var(--a_table_td_border_vertical_width) solid var(--a_table_td_border_vertical_color);
+    }
+    .a_table__body__row,
+    .a_table__head__row {
+      border-right: none;
+    }
   }
 }
+
 .a_table__grandparent_without_scroll {
   .a_table__parent {
     overflow-x: unset;