aloha-vue 1.2.165 → 1.2.166

package/docs/src/views/PageTable/PageTableComplex/PageTableComplexExample/PageTableComplexExample.js

@@ -173,15 +173,15 @@ export default {
         },
         {
           type: "button",
-          text: "Click me",
-          title: "Click me title",
+          text: "Click me Click me Click me Click me",
           isHidden: false,
           callback: this.clickMe,
-          class: "aloha a_dropdown__item",
           disabled: false,
           extraCallback: ({ row }) => ({
             aloha: row.aloha,
           }),
+          iconLeft: "Export",
+          isHiddenCallback: ({ rowIndex }) => rowIndex > 5,
         },
         {
           type: "divider",

package/docs/src/views/PageTable/PageTableComplex/PageTableComplexSlotRowActions/PageTableComplexSlotRowActions.js

@@ -183,7 +183,6 @@ export default {
           title: "Click me title",
           isHidden: false,
           callback: this.clickMe,
-          class: "aloha a_dropdown__item",
           disabled: false,
           extraCallback: ({ row }) => ({
             aloha: row.aloha,

package/docs/src/views/PageTable/PageTableComplex/PageTableComplexSlotRowActions/PageTableComplexSlotRowActions.pug

@@ -3,6 +3,7 @@ aloha-example(
   :code-js="codeJs"
   header="_A_TABLE_GROUP_COMPLEX_HEADER_"
   description="_A_TABLE_GROUP_COMPLEX_DESCRIPTION_"
+  :props="['dropdown']"
 )
   div
     div
@@ -11,6 +12,7 @@ aloha-example(
       )
     a-table(
       ref="aloha"
+      column-actions-view="dropdown"
       :column-actions-width="250"
       :column-actions-width-min="150"
       :columns="columns"

package/package.json

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

package/src/AGroupButtonDropdown/AGroupButtonDropdown.js

@@ -23,6 +23,11 @@ export default {
       required: false,
       default: () => groupButtonDropdownPluginOptions.value.propsDefault.actionsClasses,
     },
+    actionsIds: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     disabled: {
       type: Boolean,
       required: false,
@@ -96,6 +101,7 @@ export default {
             hasDropdownActions: this.hasDropdownActions,
             dropdownAttributes: this.dropdownAttributes,
             actionsClasses: this.actionsClasses,
+            actionsIds: this.actionsIds,
             isLast: itemIndex === this.actionsGrouped.buttons.length - 1,
             hasDividerBeforeDropdown: this.hasDividerBeforeDropdown,
           }, this.$slots);

package/src/AGroupButtonDropdown/AGroupButtonDropdownItem/AGroupButtonDropdownItem.js

@@ -15,6 +15,10 @@ export default {
       type: Array,
       required: true,
     },
+    actionsIds: {
+      type: Array,
+      required: true,
+    },
     actionsDropdown: {
       type: Array,
       required: true,
@@ -62,10 +66,12 @@ export default {
       }, [
         ...this.data.children.map(action => {
           const CLASS = action.classButton ? action.classButton : this.actionsClasses[action.actionNotDividerIndex];
+          const ID = action.id ? action.id : this.actionsIds[action.actionNotDividerIndex];
           const DISABLED = this.disabled || action.disabled;
           if (action.type === "button") {
             return h(AButton, {
               ...action,
+              id: ID,
               class: CLASS,
               classButton: undefined,
               disabled: DISABLED,
@@ -78,6 +84,7 @@ export default {
           if (action.type === "link") {
             return h(ALink, {
               ...action,
+              id: ID,
               classButton: undefined,
               disabled: DISABLED,
               class: CLASS,
@@ -90,6 +97,7 @@ export default {
             action.slotName &&
             this.$slots[action.slotName]) {
             return this.$slots[action.slotName]({
+              id: ID,
               class: CLASS,
               action: action,
             });

package/src/ATable/ATable.js

@@ -15,6 +15,7 @@ import ATableTopPanel from "./ATableTopPanel/ATableTopPanel";
 import ATableTr from "./ATableTr/ATableTr";
 import ATranslation from "../ATranslation/ATranslation";
 
+import ColumnActionAPI from "./compositionAPI/ColumnActionAPI";
 import ColumnsAPI from "./compositionAPI/ColumnsAPI";
 import ColumnsGroupedAPI from "./compositionAPI/ColumnsGroupedAPI";
 import ColumnsOrderingAPI from "./compositionAPI/ColumnsOrderingAPI";
@@ -65,12 +66,29 @@ export default {
     columnActionsWidth: {
       type: Number,
       required: false,
-      default: 170,
+      default: undefined,
+    },
+    columnActionsWidthDefaults: {
+      type: Object,
+      required: false,
+      default: () => ({
+        default: 170,
+        min: 50,
+        onePlusDropdown: 320,
+        onePlusDropdownMin: 200,
+        btnGroupMaxWidth: 180,
+      }),
     },
     columnActionsWidthMin: {
       type: Number,
       required: false,
-      default: 50,
+      default: undefined,
+    },
+    columnActionsView: {
+      type: String,
+      required: false,
+      default: "dropdown",
+      validator: value => ["onePlusDropdown", "onePlusDropdownEmptyPlace", "dropdown"].indexOf(value) !== -1,
     },
     columns: {
       type: Array,
@@ -444,8 +462,6 @@ export default {
   provide() {
     return {
       changeModelColumnsVisible: this.changeModelColumnsVisible,
-      columnActionsWidthLocal: computed(() => this.columnActionsWidth),
-      columnActionsWidthMin: computed(() => this.columnActionsWidthMin),
       columns: computed(() => this.columns),
       columnsDefaultValue: computed(() => this.columnsDefaultValue),
       columnWidthDefault: computed(() => this.columnWidthDefault),
@@ -558,6 +574,15 @@ export default {
       usePaginationLocal,
     });
 
+    const {
+      columnActionsBtnGroupMaxWidthStyle,
+      columnActionsWidthLocal,
+      columnActionsWidthMinLocal,
+      isColumnActionWide,
+    } = ColumnActionAPI(props, {
+      rowsLocal,
+    });
+
     const {
       aTableRef,
       changeModelIsTableWithoutScroll,
@@ -565,6 +590,8 @@ export default {
       columnsVisibleAdditionalSpaceForOneGrow,
       onWatchMobileScrollControl,
     } = ScrollControlAPI(props, context, {
+      columnActionsWidth: columnActionsWidthLocal,
+      columnActionsWidthMin: columnActionsWidthMinLocal,
       columnsOrdered,
       columnsScrollInvisible,
       indexFirstScrollInvisibleColumn,
@@ -686,12 +713,20 @@ export default {
       closePreviewAll();
     });
 
+    watch(isColumnActionWide, (newValue, oldValue) => {
+      if (newValue === oldValue) {
+        checkVisibleColumns();
+      }
+    });
+
     provide("changeModelIsTableWithoutScroll", changeModelIsTableWithoutScroll);
     provide("changeModelSort", changeModelSort);
     provide("columnsOrdered", columnsOrdered);
     provide("columnsFilteredForRender", columnsFilteredForRender);
     provide("columnsScrollInvisible", columnsScrollInvisible);
     provide("columnsVisibleAdditionalSpaceForOneGrow", columnsVisibleAdditionalSpaceForOneGrow);
+    provide("columnActionsWidthLocal", columnActionsWidthLocal);
+    provide("columnActionsWidthMinLocal", columnActionsWidthMinLocal);
     provide("currentMultipleActions", currentMultipleActions);
     provide("hasPreview", hasPreview);
     provide("indexFirstScrollInvisibleColumn", indexFirstScrollInvisibleColumn);
@@ -727,6 +762,7 @@ export default {
       closeMultipleActionsActive,
       closePreview,
       closePreviewAll,
+      columnActionsBtnGroupMaxWidthStyle,
       columnsFilteredForRender,
       columnsOrdered,
       countAllRowsLocal,
@@ -910,6 +946,8 @@ export default {
                     key: ROW_ID,
                     allVisibleMobileColumns: this.allVisibleMobileColumns,
                     areAllRowsSelected: this.areAllRowsSelected,
+                    columnActionsBtnGroupMaxWidthStyle: this.columnActionsBtnGroupMaxWidthStyle,
+                    columnActionsView: this.columnActionsView,
                     countVisibleMobileColumns: this.countVisibleMobileColumns,
                     disabledPreview: this.disabledPreview,
                     disabledPreviewRowCallback: this.disabledPreviewRowCallback,
@@ -953,6 +991,8 @@ export default {
                   key: ROW_ID,
                   allVisibleMobileColumns: this.allVisibleMobileColumns,
                   areAllRowsSelected: this.areAllRowsSelected,
+                  columnActionsBtnGroupMaxWidthStyle: this.columnActionsBtnGroupMaxWidthStyle,
+                  columnActionsView: this.columnActionsView,
                   countVisibleMobileColumns: this.countVisibleMobileColumns,
                   disabledPreview: this.disabledPreview,
                   disabledPreviewRowCallback: this.disabledPreviewRowCallback,

package/src/ATable/ATableHeaderThAction/compositionAPI/StylesThTdAction.js

@@ -4,7 +4,7 @@ import {
 } from "vue";
 
 export default function StylesThTdAction() {
-  const columnActionsWidthMin = inject("columnActionsWidthMin");
+  const columnActionsWidthMinLocal = inject("columnActionsWidthMinLocal");
   const modelIsTableWithoutScroll = inject("modelIsTableWithoutScroll");
 
   const stylesThTd = computed(() => {
@@ -13,7 +13,7 @@ export default function StylesThTdAction() {
     }
 
     return {
-      style: `width: ${ columnActionsWidthMin.value }px;`,
+      style: `width: ${ columnActionsWidthMinLocal.value }px;`,
     };
   });
 

package/src/ATable/ATableTdAction/ATableTdAction.js

@@ -3,6 +3,7 @@ import {
 } from "vue";
 
 import ADropdown from "../../ADropdown/ADropdown";
+import AGroupButtonDropdown from "../../AGroupButtonDropdown/AGroupButtonDropdown";
 import AIcon from "../../AIcon/AIcon";
 import ATableListItem from "../ATableListItem/ATableListItem";
 
@@ -14,11 +15,19 @@ import StylesThTdAction from "../ATableHeaderThAction/compositionAPI/StylesThTdA
 export default {
   name: "ATableTdAction",
   components: {
-    ADropdown,
     AIcon,
     ATableListItem,
   },
   props: {
+    columnActionsBtnGroupMaxWidthStyle: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    columnActionsView: {
+      type: String,
+      required: true,
+    },
     disabledRowActions: {
       type: Boolean,
       required: false,
@@ -52,6 +61,7 @@ export default {
   setup(props) {
     const {
       buttonActionsId,
+      buttonFirstActionId,
       isRowActionsDropdownVisible,
       rowActionsFiltered,
     } = RowActionsAPI(props);
@@ -72,6 +82,7 @@ export default {
 
     return {
       buttonActionsId,
+      buttonFirstActionId,
       columnsScrollInvisibleText,
       countColumnsScrollInvisible,
       isColumnsScrollInvisibleDropdownVisible,
@@ -99,7 +110,7 @@ export default {
         ],
       }, [
         this.isColumnsScrollInvisibleDropdownVisible && h(ADropdown, {
-          buttonClass: "a_btn a_btn_link",
+          buttonClass: "a_btn a_btn_link a_text_nowrap",
           buttonIconLeft: "Plus",
           buttonIconClass: "a_table__cell_action__additional_icon",
           buttonTitle: "_A_TABLE_DROPDOWN_HIDE_FIELDS_TITLE_{{count}}_",
@@ -140,7 +151,8 @@ export default {
         }),
         this.isRowActionsDropdownVisible || this.$slots.rowActions ?
           h("div", {
-            class: "a_table__cell_action__group"
+            class: "a_table__cell_action__group",
+            style: this.columnActionsBtnGroupMaxWidthStyle,
           }, [
             this.$slots.rowActions ?
               this.$slots.rowActions({
@@ -150,21 +162,47 @@ export default {
                 isFooter: this.isFooter,
               }) :
               "",
-            this.isRowActionsDropdownVisible && h(ADropdown, {
-              id: this.buttonActionsId,
-              actions: this.rowActionsFiltered,
-              buttonClass: "a_btn a_btn_secondary a_table__cell_action__btn",
-              buttonIconLeft: "OptionVertical",
-              buttonTextScreenReader: "_A_TABLE_DROPDOWN_ACTIONS_TITLE_{{rowNumber}}_",
-              buttonTitle: "_A_TABLE_DROPDOWN_ACTIONS_TITLE_{{rowNumber}}_",
-              disabled: this.disabledRowActions,
-              extra: {
-                rowNumber: this.rowNumber,
-              },
-              hasCaret: false,
-              inBody: true,
-              placement: "bottom-end",
-            }, this.$slots),
+            this.isRowActionsDropdownVisible ?
+              this.columnActionsView === "dropdown" ?
+                h(ADropdown, {
+                  id: this.buttonActionsId,
+                  actions: this.rowActionsFiltered,
+                  buttonClass: "a_btn a_btn_secondary a_table__cell_action__btn",
+                  buttonIconLeft: "OptionVertical",
+                  buttonTextScreenReader: "_A_TABLE_DROPDOWN_ACTIONS_TITLE_{{rowNumber}}_",
+                  buttonTitle: "_A_TABLE_DROPDOWN_ACTIONS_TITLE_{{rowNumber}}_",
+                  disabled: this.disabledRowActions,
+                  extra: {
+                    rowNumber: this.rowNumber,
+                  },
+                  hasCaret: false,
+                  inBody: true,
+                  placement: "bottom-end",
+                }, this.$slots) :
+                h(AGroupButtonDropdown, {
+                  actions: this.rowActionsFiltered,
+                  dropdownAttributes: {
+                    id: this.buttonActionsId,
+                    buttonClass: "a_btn a_btn_secondary a_table__cell_action__btn",
+                    buttonIconLeft: "ChevronDown",
+                    buttonTextScreenReader: "_A_TABLE_DROPDOWN_ACTIONS_TITLE_{{rowNumber}}_",
+                    buttonTitle: "_A_TABLE_DROPDOWN_ACTIONS_TITLE_{{rowNumber}}_",
+                    extra: {
+                      rowNumber: this.rowNumber,
+                    },
+                    hasCaret: false,
+                    inBody: true,
+                    placement: "bottom-end",
+                  },
+                  disabled: this.disabledRowActions,
+                  hasDividerBeforeDropdown: false,
+                  indexFirstDropdownAction: 1,
+                  indexFirstDropdownActionMobile: 0,
+                  minDropdownActions: 1,
+                  actionsClasses: ["a_btn a_btn_primary a_text_truncate"],
+                  actionsIds: [this.buttonFirstActionId],
+                }, this.$slots) :
+              "",
           ]) :
           "",
       ]),

package/src/ATable/ATableTr/ATableTr.js

@@ -30,6 +30,15 @@ export default {
       type: Boolean,
       required: true,
     },
+    columnActionsBtnGroupMaxWidthStyle: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    columnActionsView: {
+      type: String,
+      required: true,
+    },
     countVisibleMobileColumns: {
       type: Number,
       required: true,
@@ -232,6 +241,8 @@ export default {
 
     const ACTIONS = this.isActionColumnVisible &&
       h(ATableTdAction, {
+        columnActionsBtnGroupMaxWidthStyle: this.columnActionsBtnGroupMaxWidthStyle,
+        columnActionsView: this.columnActionsView,
         disabledRowActions: this.disabledRowActions,
         row: this.row,
         rowIndex: this.rowIndex,
@@ -299,6 +310,8 @@ export default {
             key: row[this.keyId] || rowIndex,
             allVisibleMobileColumns: this.allVisibleMobileColumns,
             areAllRowsSelected: this.areAllRowsSelected,
+            columnActionsBtnGroupMaxWidthStyle: this.columnActionsBtnGroupMaxWidthStyle,
+            columnActionsView: this.columnActionsView,
             countVisibleMobileColumns: this.countVisibleMobileColumns,
             disabledPreview: this.disabledPreviewRow,
             disabledRowActions: this.disabledRowActions,

package/src/ATable/compositionAPI/ColumnActionAPI.js

@@ -0,0 +1,102 @@
+import {
+  computed,
+  ref,
+  toRef,
+} from "vue";
+
+import {
+  isRowActionVisible,
+} from "../utils/utils";
+import {
+  isUndefined,
+} from "lodash-es";
+
+export default function ColumnActionAPI(props, {
+  rowsLocal = ref([]),
+}) {
+  const columnActionsView = toRef(props, "columnActionsView");
+  const columnActionsWidth = toRef(props, "columnActionsWidth");
+  const columnActionsWidthDefaults = toRef(props, "columnActionsWidthDefaults");
+  const columnActionsWidthMin = toRef(props, "columnActionsWidthMin");
+  const rowActions = toRef(props, "rowActions");
+
+  const shouldChangeActionWidth = computed(() => {
+    return columnActionsView.value === "onePlusDropdown";
+  });
+
+  const hasMinOneActionInRows = computed(() => {
+    let hasAction = false;
+    outerLoop: for (let rowIndex = 0; rowIndex < rowsLocal.value.length; rowIndex++) {
+      const row = rowsLocal.value[rowIndex];
+      for (let actionIndex = 0; actionIndex < rowActions.value.length; actionIndex++) {
+        const rowAction = rowActions.value[actionIndex];
+        if (isRowActionVisible({
+          rowAction,
+          row,
+          rowIndex,
+        }) && rowAction.type !== "divider") {
+          hasAction = true;
+          break outerLoop;
+        }
+      }
+    }
+
+    return hasAction;
+  });
+
+  const isColumnActionWide = computed(() => {
+    if (!rowActions.value.length || !shouldChangeActionWidth.value) {
+      return false;
+    }
+    return hasMinOneActionInRows.value;
+  });
+
+  const columnActionsWidthLocal = computed(() => {
+    if (!isUndefined(columnActionsWidth.value)) {
+      return columnActionsWidth.value;
+    }
+
+    if (!isColumnActionWide.value) {
+      return columnActionsWidthDefaults.value.default;
+    }
+
+    if (columnActionsView.value === "onePlusDropdown") {
+      return columnActionsWidthDefaults.value.onePlusDropdown;
+    }
+
+    return columnActionsWidthDefaults.value.default;
+  });
+
+  const columnActionsWidthMinLocal = computed(() => {
+    if (!isUndefined(columnActionsWidthMin.value)) {
+      return columnActionsWidth.value;
+    }
+
+    if (!isColumnActionWide.value) {
+      return columnActionsWidthDefaults.value.min;
+    }
+
+    if (columnActionsView.value === "onePlusDropdown") {
+      return columnActionsWidthDefaults.value.onePlusDropdownMin;
+    }
+
+    return columnActionsWidthDefaults.value.min;
+  });
+
+  const columnActionsBtnGroupMaxWidthStyle = computed(() => {
+    const MAX_WIDTH = columnActionsWidthDefaults.value.btnGroupMaxWidth;
+    if (columnActionsView.value !== "dropdown" &&
+      !isUndefined(MAX_WIDTH)) {
+      return `max-width: ${ MAX_WIDTH }px`;
+    }
+
+    return undefined;
+  });
+
+  return {
+    columnActionsBtnGroupMaxWidthStyle,
+    columnActionsWidthLocal,
+    columnActionsWidthMinLocal,
+    isColumnActionWide,
+  };
+}

package/src/ATable/compositionAPI/RowActionsAPI.js

@@ -4,6 +4,9 @@ import {
   toRef,
 } from "vue";
 
+import {
+  isRowActionVisible,
+} from "../utils/utils";
 import {
   cloneDeep,
   endsWith,
@@ -16,6 +19,7 @@ import {
 } from "lodash-es";
 
 export default function RowActionsAPI(props) {
+  const columnActionsView = toRef(props, "columnActionsView");
   const row = toRef(props, "row");
   const rowIndex = toRef(props, "rowIndex");
   const isFooter = toRef(props, "isFooter");
@@ -23,23 +27,14 @@ export default function RowActionsAPI(props) {
   const rowActions = inject("rowActions");
   const tableId = inject("tableId");
 
+  const buttonFirstActionId = computed(() => {
+    return `${ tableId.value }_action_${ rowIndex.value }_first`;
+  });
+
   const buttonActionsId = computed(() => {
     return `${ tableId.value }_action_${ rowIndex.value }`;
   });
 
-  const isRowActionVisible = ({ rowAction }) => {
-    if (rowAction.isHidden) {
-      return false;
-    }
-    if (isFunction(rowAction.isHiddenCallback)) {
-      return !rowAction.isHiddenCallback({
-        row: row.value,
-        rowIndex: rowIndex.value,
-      });
-    }
-    return true;
-  };
-
   const getRowActionText = ({ rowAction }) => {
     if (rowAction.text) {
       return rowAction.text;
@@ -219,8 +214,13 @@ export default function RowActionsAPI(props) {
 
   const rowActionsFiltered = computed(() => {
     const ROW_ACTIONS = [];
+    let rowActionIndexVisible = 0;
     forEach(cloneDeep(rowActions.value), rowAction => {
-      if (isRowActionVisible({ rowAction })) {
+      if (isRowActionVisible({
+        rowAction,
+        row: row.value,
+        rowIndex: rowIndex.value,
+      })) {
         if (rowAction.type !== "divider") {
           const TEXT = getRowActionText({ rowAction });
           if (TEXT) {
@@ -233,6 +233,8 @@ export default function RowActionsAPI(props) {
           const TITLE = getRowActionTitle({ rowAction });
           if (TITLE) {
             rowAction.title = TITLE;
+          } else if (TEXT) {
+            rowAction.title = TEXT;
           }
           const DISABLED = getRowActionDisabled({ rowAction });
           if (DISABLED) {
@@ -263,18 +265,24 @@ export default function RowActionsAPI(props) {
             }
           }
           if (isFunction(rowAction.callback)) {
+            let buttonId = buttonActionsId.value;
+            if (columnActionsView.value !== "dropdown" && rowActionIndexVisible === 0) {
+              buttonId = buttonFirstActionId.value;
+            }
+
             const CALLBACK_DEFAULT = rowAction.callback;
             rowAction.callback = () => CALLBACK_DEFAULT({
               row: row.value,
               rowIndex: rowIndex.value,
-              id: buttonActionsId.value,
-              ids: [buttonActionsId.value, tableId.value],
+              id: buttonId,
+              ids: [buttonId, tableId.value],
               rowAction,
             });
           }
           replacePropertiesByRowAction(rowAction);
         }
 
+        rowActionIndexVisible++;
         ROW_ACTIONS.push(rowAction);
       }
     });
@@ -288,6 +296,7 @@ export default function RowActionsAPI(props) {
 
   return {
     buttonActionsId,
+    buttonFirstActionId,
     isRowActionsDropdownVisible,
     rowActionsFiltered,
   };

package/src/ATable/compositionAPI/ScrollControlAPI.js

@@ -17,6 +17,8 @@ import {
 } from "lodash-es";
 
 export default function ScrollControlAPI(props, { emit }, {
+  columnActionsWidth = computed(() => 0),
+  columnActionsWidthMin = computed(() => 0),
   columnsOrdered = computed(() => []),
   columnsScrollInvisible = ref([]),
   indexFirstScrollInvisibleColumn = ref(undefined),
@@ -26,8 +28,6 @@ export default function ScrollControlAPI(props, { emit }, {
   modelIsTableWithoutScroll = ref(false),
 }) {
   const columnWidthDefault = toRef(props, "columnWidthDefault");
-  const columnActionsWidth = toRef(props, "columnActionsWidth");
-  const columnActionsWidthMin = toRef(props, "columnActionsWidthMin");
   const isActionColumnVisible = toRef(props, "isActionColumnVisible");
   const isSimpleTable = toRef(props, "isSimpleTable");
 

package/src/ATable/utils/utils.js

@@ -1,4 +1,4 @@
-import { get, isNil } from "lodash-es";
+import { get, isFunction, isNil } from "lodash-es";
 
 export function getModelColumnsVisibleDefault(columns) {
   const MODEL_COLUMNS_VISIBLE = {};
@@ -86,3 +86,18 @@ export function getRowIdOrIndex({ row, rowIndex, keyId }) {
 
   return rowIndex;
 }
+
+export function isRowActionVisible({ rowAction, row, rowIndex }) {
+  if (rowAction.isHidden) {
+    return false;
+  }
+
+  if (isFunction(rowAction.isHiddenCallback)) {
+    return !rowAction.isHiddenCallback({
+      row,
+      rowIndex,
+    });
+  }
+
+  return true;
+}

package/src/styles/components/ATable.scss

@@ -344,6 +344,9 @@
   > * + * {
     margin-left: 0.5rem;
   }
+  .aloha_group_btn_dropdown .a_btn_group {
+    width: 100%;
+  }
 }
 .a_table__cell_action_sticky {
   position: sticky;