DataTable edit & filter button props updated

components/lib/datatable/BaseDataTable.vue

@@ -278,10 +278,26 @@ export default {
             type: Object,
             default() {
                 return {
-                    addRule: { severity: 'info', text: true, size: 'small' },
+                    filter: { severity: 'secondary', text: true, rounded: true },
-                    removeRule: { severity: 'danger', text: true, size: 'small' },
+                    inline: {
-                    apply: { size: 'small' },
+                        clear: { severity: 'secondary', text: true, rounded: true }
-                    clear: { outlined: true, size: 'small' }
+                    },
+                    popover: {
+                        addRule: { severity: 'info', text: true, size: 'small' },
+                        removeRule: { severity: 'danger', text: true, size: 'small' },
+                        apply: { size: 'small' },
+                        clear: { outlined: true, size: 'small' }
+                    }
+                };
+            }
+        },
+        editButtonProps: {
+            type: Object,
+            default() {
+                return {
+                    init: { severity: 'secondary', text: true, rounded: true },
+                    save: { severity: 'secondary', text: true, rounded: true },
+                    cancel: { severity: 'secondary', text: true, rounded: true }
                 };
             }
         }

components/lib/datatable/BodyCell.vue

@@ -83,15 +83,45 @@
             </button>
         </template>
         <template v-else-if="editMode === 'row' && columnProp('rowEditor')">
-            <button v-if="!d_editing" v-ripple :class="cx('rowEditorInitButton')" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPT('rowEditorInitButton')" data-pc-group-section="rowactionbutton">
+            <Button
-                <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="cx('rowEditorInitIcon')" v-bind="getColumnPT('rowEditorInitIcon')" />
+                v-if="!d_editing"
-            </button>
+                :class="cx('rowEditorInitButton')"
-            <button v-if="d_editing" v-ripple :class="cx('rowEditorSaveButton')" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPT('rowEditorSaveButton')" data-pc-group-section="rowactionbutton">
+                :aria-label="initButtonAriaLabel"
-                <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="cx('rowEditorSaveIcon')" v-bind="getColumnPT('rowEditorSaveIcon')" />
+                :unstyled="unstyled"
-            </button>
+                @click="onRowEditInit"
-            <button v-if="d_editing" v-ripple :class="cx('rowEditorCancelButton')" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPT('rowEditorCancelButton')" data-pc-group-section="rowactionbutton">
+                v-bind="{ ...getColumnPT('rowEditorInitButton'), ...editButtonProps.init }"
-                <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="cx('rowEditorCancelIcon')" v-bind="getColumnPT('rowEditorCancelIcon')" />
+                data-pc-group-section="rowactionbutton"
-            </button>
+            >
+                <template #icon="slotProps">
+                    <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="[cx('rowEditorInitIcon'), slotProps.class]" v-bind="getColumnPT('rowEditorInitIcon')" />
+                </template>
+            </Button>
+            <Button
+                v-if="d_editing"
+                :class="cx('rowEditorSaveButton')"
+                :aria-label="saveButtonAriaLabel"
+                :unstyled="unstyled"
+                @click="onRowEditSave"
+                v-bind="{ ...getColumnPT('rowEditorSaveButton'), ...editButtonProps.save }"
+                data-pc-group-section="rowactionbutton"
+            >
+                <template #icon="slotProps">
+                    <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="[cx('rowEditorSaveIcon'), slotProps.class]" v-bind="getColumnPT('rowEditorSaveIcon')" />
+                </template>
+            </Button>
+            <Button
+                v-if="d_editing"
+                :class="cx('rowEditorCancelButton')"
+                :aria-label="cancelButtonAriaLabel"
+                :unstyled="unstyled"
+                @click="onRowEditCancel"
+                v-bind="{ ...getColumnPT('rowEditorCancelButton'), ...editButtonProps.cancel }"
+                data-pc-group-section="rowactionbutton"
+            >
+                <template #icon="slotProps">
+                    <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="[cx('rowEditorCancelIcon'), slotProps.class]" v-bind="getColumnPT('rowEditorCancelIcon')" />
+                </template>
+            </Button>
         </template>
         <template v-else>{{ resolveFieldData() }}</template>
     </td>
@@ -99,6 +129,7 @@
 
 <script>
 import BaseComponent from 'primevue/basecomponent';
+import Button from 'primevue/button';
 import BarsIcon from 'primevue/icons/bars';
 import CheckIcon from 'primevue/icons/check';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
@@ -181,6 +212,10 @@ export default {
         collapsedRowIcon: {
             type: String,
             default: null
+        },
+        editButtonProps: {
+            type: Object,
+            default: null
         }
     },
     documentEditListener: null,
@@ -532,12 +567,13 @@ export default {
     components: {
         DTRadioButton: RowRadioButton,
         DTCheckbox: RowCheckbox,
-        ChevronDownIcon: ChevronDownIcon,
+        Button,
-        ChevronRightIcon: ChevronRightIcon,
+        ChevronDownIcon,
-        BarsIcon: BarsIcon,
+        ChevronRightIcon,
-        PencilIcon: PencilIcon,
+        BarsIcon,
-        CheckIcon: CheckIcon,
+        PencilIcon,
-        TimesIcon: TimesIcon
+        CheckIcon,
+        TimesIcon
     },
     directives: {
         ripple: Ripple

components/lib/datatable/BodyRow.vue

@@ -59,6 +59,7 @@
                     :isRowExpanded="d_rowExpanded"
                     :expandedRowIcon="expandedRowIcon"
                     :collapsedRowIcon="collapsedRowIcon"
+                    :editButtonProps="editButtonProps"
                     @radio-change="onRadioChange"
                     @checkbox-change="onCheckboxChange"
                     @row-toggle="onRowToggle"
@@ -253,6 +254,10 @@ export default {
             type: String,
             default: 'stack'
         },
+        editButtonProps: {
+            type: Object,
+            default: null
+        },
         virtualScrollerContentProps: {
             type: Object,
             default: null

components/lib/datatable/ColumnFilter.vue

@@ -3,24 +3,34 @@
         <div v-if="display === 'row'" :class="cx('filterInput')" v-bind="{ ...filterInputProps, ...getColumnPT('filterInput') }">
             <component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
         </div>
-        <button
+        <Button
             v-if="showMenuButton"
             ref="icon"
-            type="button"
             :aria-label="filterMenuButtonAriaLabel"
             aria-haspopup="true"
             :aria-expanded="overlayVisible"
             :aria-controls="overlayId"
             :class="cx('filterMenuButton')"
+            :unstyled="unstyled"
             @click="toggleMenu($event)"
             @keydown="onToggleButtonKeyDown($event)"
-            v-bind="getColumnPT('filterMenuButton', ptmFilterMenuParams)"
+            v-bind="{ ...getColumnPT('filterMenuButton', ptmFilterMenuParams), ...filterButtonProps.filter }"
         >
-            <component :is="filterIconTemplate || 'FilterIcon'" v-bind="getColumnPT('filterMenuIcon')" />
+            <template #icon="slotProps">
-        </button>
+                <component :is="filterIconTemplate || 'FilterIcon'" :class="slotProps.class" v-bind="getColumnPT('filterMenuIcon')" />
-        <button v-if="showClearButton && display === 'row'" :class="cx('headerFilterClearButton')" type="button" @click="clearFilter()" v-bind="getColumnPT('headerFilterClearButton', ptmHeaderFilterClearParams)">
+            </template>
-            <component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPT('filterClearIcon')" />
+        </Button>
-        </button>
+        <Button
+            v-if="showClearButton && display === 'row' && hasRowFilter()"
+            :class="cx('headerFilterClearButton')"
+            :unstyled="unstyled"
+            @click="clearFilter()"
+            v-bind="{ ...getColumnPT('headerFilterClearButton', ptmHeaderFilterClearParams), ...filterButtonProps.inline.clear }"
+        >
+            <template #icon="slotProps">
+                <component :is="filterClearIconTemplate || 'FilterSlashIcon'" :class="slotProps.class" v-bind="getColumnPT('filterClearIcon')" />
+            </template>
+        </Button>
         <Portal>
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="getColumnPT('transition')">
                 <div
@@ -59,7 +69,7 @@
                     </template>
                     <template v-else>
                         <div v-if="isShowOperator" :class="cx('filterOperator')" v-bind="getColumnPT('filterOperator')">
-                            <CFSelect
+                            <Select
                                 :options="operatorOptions"
                                 :modelValue="operator"
                                 :aria-label="filterOperatorAriaLabel"
@@ -69,11 +79,11 @@
                                 @update:modelValue="onOperatorChange($event)"
                                 :unstyled="unstyled"
                                 :pt="getColumnPT('filterOperatorDropdown')"
-                            ></CFSelect>
+                            ></Select>
                         </div>
                         <div :class="cx('filterConstraints')" v-bind="getColumnPT('filterConstraints')">
                             <div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" :class="cx('filterConstraint')" v-bind="getColumnPT('filterConstraint')">
-                                <CFSelect
+                                <Select
                                     v-if="isShowMatchModes"
                                     :options="matchModes"
                                     :modelValue="fieldConstraint.matchMode"
@@ -84,65 +94,65 @@
                                     @update:modelValue="onMenuMatchModeChange($event, i)"
                                     :unstyled="unstyled"
                                     :pt="getColumnPT('filterMatchModeDropdown')"
-                                ></CFSelect>
+                                ></Select>
                                 <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" />
                                 <div v-bind="getColumnPT('filterRemove')">
-                                    <CFButton
+                                    <Button
                                         v-if="showRemoveIcon"
                                         type="button"
                                         :class="cx('filterRemoveButton')"
                                         @click="removeConstraint(i)"
                                         :label="removeRuleButtonLabel"
                                         :unstyled="unstyled"
-                                        v-bind="filterButtonProps.removeRule"
+                                        v-bind="filterButtonProps.popover.removeRule"
                                         :pt="getColumnPT('filterRemoveButton')"
                                     >
                                         <template #icon="iconProps">
                                             <component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('filterRemoveButton')['icon']" />
                                         </template>
-                                    </CFButton>
+                                    </Button>
                                 </div>
                             </div>
                         </div>
                         <div v-if="isShowAddConstraint" :class="cx('filterAddRule')" v-bind="getColumnPT('filterAddRule')">
-                            <CFButton
+                            <Button
                                 type="button"
                                 :label="addRuleButtonLabel"
                                 iconPos="left"
                                 :class="cx('filterAddRuleButton')"
                                 @click="addConstraint()"
                                 :unstyled="unstyled"
-                                v-bind="filterButtonProps.addRule"
+                                v-bind="filterButtonProps.popover.addRule"
                                 :pt="getColumnPT('filterAddRuleButton')"
                             >
                                 <template #icon="iconProps">
                                     <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('filterAddRuleButton')['icon']" />
                                 </template>
-                            </CFButton>
+                            </Button>
                         </div>
                         <div :class="cx('filterButtonbar')" v-bind="getColumnPT('filterButtonbar')">
-                            <CFButton
+                            <Button
                                 v-if="!filterClearTemplate && showClearButton"
                                 type="button"
                                 :class="cx('filterClearButton')"
                                 :label="clearButtonLabel"
                                 @click="clearFilter"
                                 :unstyled="unstyled"
-                                v-bind="filterButtonProps.clear"
+                                v-bind="filterButtonProps.popover.clear"
                                 :pt="getColumnPT('filterClearButton')"
-                            ></CFButton>
+                            ></Button>
                             <component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
                             <template v-if="showApplyButton">
-                                <CFButton
+                                <Button
                                     v-if="!filterApplyTemplate"
                                     type="button"
                                     :class="cx('filterApplyButton')"
                                     :label="applyButtonLabel"
                                     @click="applyFilter()"
                                     :unstyled="unstyled"
-                                    v-bind="filterButtonProps.apply"
+                                    v-bind="filterButtonProps.popover.apply"
                                     :pt="getColumnPT('filterApplyButton')"
-                                ></CFButton>
+                                ></Button>
                                 <component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
                             </template>
                         </div>
@@ -518,7 +528,7 @@ export default {
         hide() {
             this.overlayVisible = false;
 
-            DomHandler.focus(this.$refs.icon);
+            DomHandler.focus(this.$refs.icon.$el);
         },
         onContentClick(event) {
             this.selfClick = true;
@@ -538,7 +548,7 @@ export default {
 
             ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
             DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
-            DomHandler.absolutePosition(this.overlay, this.$refs.icon);
+            DomHandler.absolutePosition(this.overlay, this.$refs.icon.$el);
             this.bindOutsideClickListener();
             this.bindScrollListener();
             this.bindResizeListener();
@@ -575,7 +585,7 @@ export default {
             return !this.isTargetClicked(target) && this.overlay && !(this.overlay.isSameNode(target) || this.overlay.contains(target));
         },
         isTargetClicked(target) {
-            return this.$refs.icon && (this.$refs.icon.isSameNode(target) || this.$refs.icon.contains(target));
+            return this.$refs.icon && (this.$refs.icon.$el.isSameNode(target) || this.$refs.icon.$el.contains(target));
         },
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
@@ -599,7 +609,7 @@ export default {
         },
         bindScrollListener() {
             if (!this.scrollHandler) {
-                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.icon, () => {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.icon.$el, () => {
                     if (this.overlayVisible) {
                         this.hide();
                     }
@@ -711,13 +721,13 @@ export default {
         }
     },
     components: {
-        CFSelect: Select,
+        Select,
-        CFButton: Button,
+        Button,
-        Portal: Portal,
+        Portal,
-        FilterSlashIcon: FilterSlashIcon,
+        FilterSlashIcon,
-        FilterIcon: FilterIcon,
+        FilterIcon,
-        TrashIcon: TrashIcon,
+        TrashIcon,
-        PlusIcon: PlusIcon
+        PlusIcon
     },
     directives: {
         focustrap: FocusTrap

components/lib/datatable/DataTable.d.ts

@@ -161,9 +161,19 @@ export interface DataTableExportCSVOptions {
 }
 
 /**
- * Custom datatable filter button props options.
+ * Custom datatable filter inline button props options.
  */
-export interface DataTableFilterButtonPropsOptions {
+export interface DataTableFilterButtonInlinePropsOptions {
+    /**
+     * Apply button props
+     */
+    clear: ButtonProps | undefined;
+}
+
+/**
+ * Custom datatable filter popover button props options.
+ */
+export interface DataTableFilterButtonPopoverPropsOptions {
     /**
      * Add rule button props
      */
@@ -182,6 +192,42 @@ export interface DataTableFilterButtonPropsOptions {
     clear: ButtonProps | undefined;
 }
 
+/**
+ * Custom datatable filter buttons' props options.
+ */
+export interface DataTableFilterButtonPropsOptions {
+    /**
+     * Filter button props
+     */
+    filter: ButtonProps | undefined;
+    /**
+     * Inline filter buttons' options
+     */
+    inline: DataTableFilterButtonInlinePropsOptions | undefined;
+    /**
+     * Popover filter buttons' options
+     */
+    popover: DataTableFilterButtonPopoverPropsOptions | undefined;
+}
+
+/**
+ * Custom datatable edit buttons' props options.
+ */
+export interface DataTableEditButtonPropsOptions {
+    /**
+     * Init button props
+     */
+    init: ButtonProps | undefined;
+    /**
+     * Save button props
+     */
+    save: ButtonProps | undefined;
+    /**
+     * Cancel button props
+     */
+    cancel: ButtonProps | undefined;
+}
+
 /**
  * Custom sort event.
  * @see {@link DataTableEmits.sort}
@@ -1156,13 +1202,28 @@ export interface DataTableProps {
     /**
      * Used to pass all filter button property object
      * @defaultValue {
-            addRule: { severity: 'info', text: true, size: 'small' },
+            filter: { severity: 'secondary', text: true, rounded: true },
-            removeRule: { severity: 'danger', text: true, size: 'small' },
+            inline: {
-            apply: { size: 'small' },
+                clear: { severity: 'secondary', text: true, rounded: true }
-            clear: { outlined: true, size: 'small' }
+            },
+            popover: {
+                addRule: { severity: 'info', text: true, size: 'small' },
+                removeRule: { severity: 'danger', text: true, size: 'small' },
+                apply: { size: 'small' },
+                clear: { outlined: true, size: 'small' }
+            }
         }
      */
     filterButtonProps?: DataTableFilterButtonPropsOptions | undefined;
+    /**
+     * Used to pass all edit button property object
+     * @defaultValue {
+            init: { severity: 'secondary', text: true, rounded: true },
+            save: { severity: 'secondary', text: true, rounded: true },
+            cancel: { severity: 'secondary', text: true, rounded: true }
+        }
+     */
+    editButtonProps?: DataTableEditButtonPropsOptions | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

components/lib/datatable/DataTable.vue

@@ -131,6 +131,7 @@
                             :editingRowKeys="d_editingRowKeys"
                             :templates="$slots"
                             :responsiveLayout="responsiveLayout"
+                            :editButtonProps="rowEditButtonProps"
                             :isVirtualScrollerDisabled="true"
                             @rowgroup-toggle="toggleRowGroup"
                             @row-click="onRowClick($event)"
@@ -187,6 +188,7 @@
                             :editingRowKeys="d_editingRowKeys"
                             :templates="$slots"
                             :responsiveLayout="responsiveLayout"
+                            :editButtonProps="rowEditButtonProps"
                             :virtualScrollerContentProps="slotProps"
                             :isVirtualScrollerDisabled="virtualScrollerDisabled"
                             @rowgroup-toggle="toggleRowGroup"
@@ -2072,13 +2074,29 @@ export default {
         },
         headerFilterButtonProps() {
             return {
-                ...{
+                filter: { severity: 'secondary', text: true, rounded: true },
+                ...this.filterButtonProps,
+                inline: {
+                    clear: { severity: 'secondary', text: true, rounded: true },
+                    ...this.filterButtonProps.inline
+                },
+                popover: {
                     addRule: { severity: 'info', text: true, size: 'small' },
                     removeRule: { severity: 'danger', text: true, size: 'small' },
                     apply: { size: 'small' },
-                    clear: { outlined: true, size: 'small' }
+                    clear: { outlined: true, size: 'small' },
+                    ...this.filterButtonProps.popover
+                }
+            };
+        },
+        rowEditButtonProps() {
+            return {
+                ...{
+                    init: { severity: 'secondary', text: true, rounded: true },
+                    save: { severity: 'secondary', text: true, rounded: true },
+                    cancel: { severity: 'secondary', text: true, rounded: true }
                 },
-                ...this.filterButtonProps
+                ...this.editButtonProps
             };
         },
         virtualScrollerDisabled() {

components/lib/datatable/TableBody.vue

@@ -31,6 +31,7 @@
                     :editingRows="editingRows"
                     :editingRowKeys="editingRowKeys"
                     :templates="templates"
+                    :editButtonProps="editButtonProps"
                     :responsiveLayout="responsiveLayout"
                     :virtualScrollerContentProps="virtualScrollerContentProps"
                     :isVirtualScrollerDisabled="isVirtualScrollerDisabled"
@@ -211,6 +212,10 @@ export default {
             type: Boolean,
             default: false
         },
+        editButtonProps: {
+            type: Object,
+            default: null
+        },
         responsiveLayout: {
             type: String,
             default: 'stack'

doc/common/apidoc/index.json

@@ -16185,7 +16185,9 @@
                             "optional": true,
                             "readonly": false,
                             "type": "DefaultPassThrough<CalendarPassThroughOptions>",
-                            "default": ""
+                            "default": "",
+                            "description": "",
+                            "deprecated": "since v4. Use the new structure of DatePicker instead."
                         },
                         {
                             "name": "card",
@@ -16234,7 +16236,9 @@
                             "optional": true,
                             "readonly": false,
                             "type": "DefaultPassThrough<ChipsPassThroughOptions>",
-                            "default": ""
+                            "default": "",
+                            "description": "",
+                            "deprecated": "since v4. Use the new structure of InputChips instead."
                         },
                         {
                             "name": "colorpicker",
@@ -16339,7 +16343,9 @@
                             "optional": true,
                             "readonly": false,
                             "type": "DefaultPassThrough<DropdownPassThroughOptions<any>>",
-                            "default": ""
+                            "default": "",
+                            "description": "",
+                            "deprecated": "since v4. Use the new structure of Select instead."
                         },
                         {
                             "name": "dynamicdialog",
@@ -16423,7 +16429,9 @@
                             "optional": true,
                             "readonly": false,
                             "type": "DefaultPassThrough<InputSwitchPassThroughOptions>",
-                            "default": ""
+                            "default": "",
+                            "description": "",
+                            "deprecated": "since v4. Use the new structure of ToggleSwitch instead."
                         },
                         {
                             "name": "inputtext",
@@ -16500,7 +16508,9 @@
                             "optional": true,
                             "readonly": false,
                             "type": "DefaultPassThrough<OverlayPanelPassThroughOptions>",
-                            "default": ""
+                            "default": "",
+                            "description": "",
+                            "deprecated": "since v4. Use the new structure of Popover instead."
                         },
                         {
                             "name": "paginator",
@@ -16598,7 +16608,9 @@
                             "optional": true,
                             "readonly": false,
                             "type": "DefaultPassThrough<SidebarPassThroughOptions>",
-                            "default": ""
+                            "default": "",
+                            "description": "",
+                            "deprecated": "since v4. Use the new structure of Drawer instead."
                         },
                         {
                             "name": "skeleton",
@@ -19652,8 +19664,23 @@
                     ],
                     "methods": []
                 },
-                "DataTableFilterButtonPropsOptions": {
+                "DataTableFilterButtonInlinePropsOptions": {
-                    "description": "Custom datatable filter button props options.",
+                    "description": "Custom datatable filter inline button props options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "clear",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | ButtonProps",
+                            "default": "",
+                            "description": "Apply button props"
+                        }
+                    ],
+                    "methods": []
+                },
+                "DataTableFilterButtonPopoverPropsOptions": {
+                    "description": "Custom datatable filter popover button props options.",
                     "relatedProp": "",
                     "props": [
                         {
@@ -19691,6 +19718,68 @@
                     ],
                     "methods": []
                 },
+                "DataTableFilterButtonPropsOptions": {
+                    "description": "Custom datatable filter buttons' props options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "filter",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | ButtonProps",
+                            "default": "",
+                            "description": "Filter button props"
+                        },
+                        {
+                            "name": "inline",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | DataTableFilterButtonInlinePropsOptions",
+                            "default": "",
+                            "description": "Inline filter buttons' options"
+                        },
+                        {
+                            "name": "popover",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | DataTableFilterButtonPopoverPropsOptions",
+                            "default": "",
+                            "description": "Popover filter buttons' options"
+                        }
+                    ],
+                    "methods": []
+                },
+                "DataTableEditButtonPropsOptions": {
+                    "description": "Custom datatable edit buttons' props options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "init",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | ButtonProps",
+                            "default": "",
+                            "description": "Init button props"
+                        },
+                        {
+                            "name": "save",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | ButtonProps",
+                            "default": "",
+                            "description": "Save button props"
+                        },
+                        {
+                            "name": "cancel",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | ButtonProps",
+                            "default": "",
+                            "description": "Cancel button props"
+                        }
+                    ],
+                    "methods": []
+                },
                 "DataTableSortEvent": {
                     "description": "Custom sort event.",
                     "relatedProp": "DataTableEmits.sort",
@@ -21681,6 +21770,14 @@
                             "default": "",
                             "description": "Used to pass all filter button property object"
                         },
+                        {
+                            "name": "editButtonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTableEditButtonPropsOptions",
+                            "default": "",
+                            "description": "Used to pass all edit button property object"
+                        },
                         {
                             "name": "dt",
                             "optional": true,
@@ -59271,14 +59368,6 @@
                             "default": "false",
                             "description": "When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css."
                         },
-                        {
-                            "name": "orientation",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "\"horizontal\" | \"vertical\"",
-                            "default": "horizontal",
-                            "description": "Specifies the layout of the component, valid values are 'horizontal' and 'vertical'."
-                        },
                         {
                             "name": "scrollable",
                             "optional": true,