primevue 3.20.0 → 3.22.0

package/datatable/datatable.esm.js

@@ -1,17 +1,17 @@
 import { FilterOperator, FilterService, FilterMatchMode } from 'primevue/api';
 import Paginator from 'primevue/paginator';
-import { DomHandler, ObjectUtils, ZIndexUtils, ConnectedOverlayScrollHandler, UniqueComponentId } from 'primevue/utils';
+import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils, ConnectedOverlayScrollHandler } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
 import OverlayEventBus from 'primevue/overlayeventbus';
-import { openBlock, createElementBlock, normalizeClass, withKeys, withModifiers, createElementVNode, resolveComponent, resolveDirective, normalizeStyle, createBlock, resolveDynamicComponent, toDisplayString, createCommentVNode, Fragment, withDirectives, createTextVNode, renderList, createVNode, withCtx, Transition, renderSlot, createSlots, mergeProps } from 'vue';
 import Ripple from 'primevue/ripple';
-import Dropdown from 'primevue/dropdown';
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, withKeys, withModifiers, resolveComponent, resolveDirective, normalizeStyle, createBlock, resolveDynamicComponent, toDisplayString, createCommentVNode, Fragment, withDirectives, createTextVNode, renderList, mergeProps, createVNode, withCtx, Transition, renderSlot, createSlots } from 'vue';
 import Button from 'primevue/button';
+import Dropdown from 'primevue/dropdown';
+import FocusTrap from 'primevue/focustrap';
 import Portal from 'primevue/portal';
 
 var script$a = {
-    name: 'RowRadioButton',
-    inheritAttrs: false,
+    name: 'RowCheckbox',
     emits: ['change'],
     props: {
         value: null,
@@ -24,57 +24,82 @@ var script$a = {
     },
     methods: {
         onClick(event) {
-            if (!this.disabled) {
-                if (!this.checked) {
-                    this.$emit('change', {
-                        originalEvent: event,
-                        data: this.value
-                    });
-                }
+            if (!this.$attrs.disabled) {
+                this.$emit('change', {
+                    originalEvent: event,
+                    data: this.value
+                });
+
+                DomHandler.focus(this.$refs.input);
             }
+
+            event.preventDefault();
         },
         onFocus() {
             this.focused = true;
         },
         onBlur() {
             this.focused = false;
+        },
+        onKeydown(event) {
+            switch (event.code) {
+                case 'Space': {
+                    this.onClick(event);
+
+                    break;
+                }
+            }
+        }
+    },
+    computed: {
+        checkboxAriaLabel() {
+            return this.$primevue.config.locale.aria ? (this.checked ? this.$primevue.config.locale.aria.selectRow : this.$primevue.config.locale.aria.unselectRow) : undefined;
         }
     }
 };
 
-const _hoisted_1$a = ["aria-checked"];
-const _hoisted_2$7 = /*#__PURE__*/createElementVNode("div", { class: "p-radiobutton-icon" }, null, -1);
-const _hoisted_3$6 = [
-  _hoisted_2$7
-];
+const _hoisted_1$a = { class: "p-hidden-accessible" };
+const _hoisted_2$9 = ["checked", "disabled", "tabindex", "aria-label"];
 
 function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
-    class: normalizeClass(['p-radiobutton p-component', { 'p-radiobutton-focused': $data.focused }]),
-    onClick: _cache[0] || (_cache[0] = (...args) => ($options.onClick && $options.onClick(...args))),
-    tabindex: "0",
-    onFocus: _cache[1] || (_cache[1] = $event => ($options.onFocus($event))),
-    onBlur: _cache[2] || (_cache[2] = $event => ($options.onBlur($event))),
-    onKeydown: _cache[3] || (_cache[3] = withKeys(withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"]))
+    class: normalizeClass(['p-checkbox p-component', { 'p-checkbox-focused': $data.focused }]),
+    onClick: _cache[3] || (_cache[3] = (...args) => ($options.onClick && $options.onClick(...args)))
   }, [
+    createElementVNode("div", _hoisted_1$a, [
+      createElementVNode("input", {
+        ref: "input",
+        type: "checkbox",
+        checked: $props.checked,
+        disabled: _ctx.$attrs.disabled,
+        tabindex: _ctx.$attrs.disabled ? null : '0',
+        "aria-label": $options.checkboxAriaLabel,
+        onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
+        onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event))),
+        onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
+      }, null, 40, _hoisted_2$9)
+    ]),
     createElementVNode("div", {
       ref: "box",
-      class: normalizeClass(['p-radiobutton-box p-component', { 'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused }]),
-      role: "radio",
-      "aria-checked": $props.checked
-    }, _hoisted_3$6, 10, _hoisted_1$a)
-  ], 34))
+      class: normalizeClass(['p-checkbox-box p-component', { 'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused }])
+    }, [
+      createElementVNode("span", {
+        class: normalizeClass(['p-checkbox-icon', { 'pi pi-check': $props.checked }])
+      }, null, 2)
+    ], 2)
+  ], 2))
 }
 
 script$a.render = render$a;
 
 var script$9 = {
-    name: 'RowCheckbox',
+    name: 'RowRadioButton',
     inheritAttrs: false,
     emits: ['change'],
     props: {
         value: null,
-        checked: null
+        checked: null,
+        name: null
     },
     data() {
         return {
@@ -83,12 +108,15 @@ var script$9 = {
     },
     methods: {
         onClick(event) {
-            if (!this.$attrs.disabled) {
-                this.focused = true;
-                this.$emit('change', {
-                    originalEvent: event,
-                    data: this.value
-                });
+            if (!this.disabled) {
+                if (!this.checked) {
+                    this.$emit('change', {
+                        originalEvent: event,
+                        data: this.value
+                    });
+
+                    DomHandler.focus(this.$refs.input);
+                }
             }
         },
         onFocus() {
@@ -100,27 +128,35 @@ var script$9 = {
     }
 };
 
-const _hoisted_1$9 = ["aria-checked", "tabindex"];
+const _hoisted_1$9 = { class: "p-hidden-accessible" };
+const _hoisted_2$8 = ["checked", "disabled", "name"];
+const _hoisted_3$6 = /*#__PURE__*/createElementVNode("div", { class: "p-radiobutton-icon" }, null, -1);
+const _hoisted_4$5 = [
+  _hoisted_3$6
+];
 
 function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
-    class: normalizeClass(['p-checkbox p-component', { 'p-checkbox-focused': $data.focused }]),
-    onClick: _cache[3] || (_cache[3] = withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["stop","prevent"]))
+    class: normalizeClass(['p-radiobutton p-component', { 'p-radiobutton-focused': $data.focused }]),
+    onClick: _cache[3] || (_cache[3] = (...args) => ($options.onClick && $options.onClick(...args)))
   }, [
+    createElementVNode("div", _hoisted_1$9, [
+      createElementVNode("input", {
+        ref: "input",
+        type: "radio",
+        checked: $props.checked,
+        disabled: _ctx.$attrs.disabled,
+        name: $props.name,
+        tabindex: "0",
+        onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
+        onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event))),
+        onKeydown: _cache[2] || (_cache[2] = withKeys(withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"]))
+      }, null, 40, _hoisted_2$8)
+    ]),
     createElementVNode("div", {
       ref: "box",
-      class: normalizeClass(['p-checkbox-box p-component', { 'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused }]),
-      role: "checkbox",
-      "aria-checked": $props.checked,
-      tabindex: _ctx.$attrs.disabled ? null : '0',
-      onKeydown: _cache[0] || (_cache[0] = withKeys(withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"])),
-      onFocus: _cache[1] || (_cache[1] = $event => ($options.onFocus($event))),
-      onBlur: _cache[2] || (_cache[2] = $event => ($options.onBlur($event)))
-    }, [
-      createElementVNode("span", {
-        class: normalizeClass(['p-checkbox-icon', { 'pi pi-check': $props.checked }])
-      }, null, 2)
-    ], 42, _hoisted_1$9)
+      class: normalizeClass(['p-radiobutton-box p-component', { 'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused }])
+    }, _hoisted_4$5, 2)
   ], 2))
 }
 
@@ -177,6 +213,14 @@ var script$8 = {
         virtualScrollerContentProps: {
             type: Object,
             default: null
+        },
+        ariaControls: {
+            type: String,
+            default: null
+        },
+        name: {
+            type: String,
+            default: null
         }
     },
     documentEditListener: null,
@@ -185,7 +229,8 @@ var script$8 = {
     data() {
         return {
             d_editing: this.editing,
-            styleObject: {}
+            styleObject: {},
+            isRowExpanded: false
         };
     },
     watch: {
@@ -226,6 +271,7 @@ var script$8 = {
             return ObjectUtils.resolveFieldData(this.rowData, this.field);
         },
         toggleRow(event) {
+            this.isRowExpanded = !this.isRowExpanded;
             this.$emit('row-toggle', {
                 originalEvent: event,
                 data: this.rowData
@@ -309,17 +355,17 @@ var script$8 = {
         },
         onKeyDown(event) {
             if (this.editMode === 'cell') {
-                switch (event.which) {
-                    case 13:
+                switch (event.code) {
+                    case 'Enter':
                         this.completeEdit(event, 'enter');
                         break;
 
-                    case 27:
+                    case 'Escape':
                         this.switchCellToViewMode();
                         this.$emit('cell-edit-cancel', { originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex });
                         break;
 
-                    case 9:
+                    case 'Tab':
                         this.completeEdit(event, 'tab');
 
                         if (event.shiftKey) this.moveToPreviousCell(event);
@@ -497,11 +543,23 @@ var script$8 = {
                     field: this.field
                 })
             );
+        },
+        expandButtonAriaLabel() {
+            return this.$primevue.config.locale.aria ? (this.isRowExpanded ? this.$primevue.config.locale.aria.expandRow : this.$primevue.config.locale.aria.collapseRow) : undefined;
+        },
+        initButtonAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.editRow : undefined;
+        },
+        saveButtonAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.saveEdit : undefined;
+        },
+        cancelButtonAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.cancelEdit : undefined;
         }
     },
     components: {
-        DTRadioButton: script$a,
-        DTCheckbox: script$9
+        DTRadioButton: script$9,
+        DTCheckbox: script$a
     },
     directives: {
         ripple: Ripple
@@ -512,17 +570,21 @@ const _hoisted_1$8 = {
   key: 0,
   class: "p-column-title"
 };
-const _hoisted_2$6 = /*#__PURE__*/createElementVNode("span", { class: "p-row-editor-init-icon pi pi-fw pi-pencil" }, null, -1);
-const _hoisted_3$5 = [
-  _hoisted_2$6
-];
-const _hoisted_4$4 = /*#__PURE__*/createElementVNode("span", { class: "p-row-editor-save-icon pi pi-fw pi-check" }, null, -1);
+const _hoisted_2$7 = ["aria-expanded", "aria-controls", "aria-label"];
+const _hoisted_3$5 = ["aria-label"];
+const _hoisted_4$4 = /*#__PURE__*/createElementVNode("span", { class: "p-row-editor-init-icon pi pi-fw pi-pencil" }, null, -1);
 const _hoisted_5$3 = [
   _hoisted_4$4
 ];
-const _hoisted_6$3 = /*#__PURE__*/createElementVNode("span", { class: "p-row-editor-cancel-icon pi pi-fw pi-times" }, null, -1);
-const _hoisted_7$1 = [
-  _hoisted_6$3
+const _hoisted_6$3 = ["aria-label"];
+const _hoisted_7$2 = /*#__PURE__*/createElementVNode("span", { class: "p-row-editor-save-icon pi pi-fw pi-check" }, null, -1);
+const _hoisted_8$1 = [
+  _hoisted_7$2
+];
+const _hoisted_9$1 = ["aria-label"];
+const _hoisted_10$1 = /*#__PURE__*/createElementVNode("span", { class: "p-row-editor-cancel-icon pi pi-fw pi-times" }, null, -1);
+const _hoisted_11$1 = [
+  _hoisted_10$1
 ];
 
 function render$8(_ctx, _cache, $props, $setup, $data, $options) {
@@ -592,16 +654,18 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                       ? (openBlock(), createBlock(_component_DTRadioButton, {
                           key: 0,
                           value: $props.rowData,
+                          name: $props.name,
                           checked: $props.selected,
                           onChange: _cache[0] || (_cache[0] = $event => ($options.toggleRowWithRadio($event, $props.rowIndex)))
-                        }, null, 8, ["value", "checked"]))
+                        }, null, 8, ["value", "name", "checked"]))
                       : ($options.columnProp('selectionMode') === 'multiple')
                         ? (openBlock(), createBlock(_component_DTCheckbox, {
                             key: 1,
                             value: $props.rowData,
                             checked: $props.selected,
+                            "aria-selected": $props.selected ? true : undefined,
                             onChange: _cache[1] || (_cache[1] = $event => ($options.toggleRowWithCheckbox($event, $props.rowIndex)))
-                          }, null, 8, ["value", "checked"]))
+                          }, null, 8, ["value", "checked", "aria-selected"]))
                         : createCommentVNode("", true)
                   ], 64))
                 : ($options.columnProp('rowReorder'))
@@ -613,13 +677,16 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                     ? withDirectives((openBlock(), createElementBlock("button", {
                         key: 6,
                         class: "p-row-toggler p-link",
-                        onClick: _cache[2] || (_cache[2] = (...args) => ($options.toggleRow && $options.toggleRow(...args))),
-                        type: "button"
+                        type: "button",
+                        "aria-expanded": $data.isRowExpanded,
+                        "aria-controls": $props.ariaControls,
+                        "aria-label": $options.expandButtonAriaLabel,
+                        onClick: _cache[2] || (_cache[2] = (...args) => ($options.toggleRow && $options.toggleRow(...args)))
                       }, [
                         createElementVNode("span", {
                           class: normalizeClass($props.rowTogglerIcon)
                         }, null, 2)
-                      ])), [
+                      ], 8, _hoisted_2$7)), [
                         [_directive_ripple]
                       ])
                     : ($props.editMode === 'row' && $options.columnProp('rowEditor'))
@@ -628,9 +695,10 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                             ? withDirectives((openBlock(), createElementBlock("button", {
                                 key: 0,
                                 class: "p-row-editor-init p-link",
-                                onClick: _cache[3] || (_cache[3] = (...args) => ($options.onRowEditInit && $options.onRowEditInit(...args))),
-                                type: "button"
-                              }, _hoisted_3$5)), [
+                                type: "button",
+                                "aria-label": $options.initButtonAriaLabel,
+                                onClick: _cache[3] || (_cache[3] = (...args) => ($options.onRowEditInit && $options.onRowEditInit(...args)))
+                              }, _hoisted_5$3, 8, _hoisted_3$5)), [
                                 [_directive_ripple]
                               ])
                             : createCommentVNode("", true),
@@ -638,9 +706,10 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                             ? withDirectives((openBlock(), createElementBlock("button", {
                                 key: 1,
                                 class: "p-row-editor-save p-link",
-                                onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args))),
-                                type: "button"
-                              }, _hoisted_5$3)), [
+                                type: "button",
+                                "aria-label": $options.saveButtonAriaLabel,
+                                onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args)))
+                              }, _hoisted_8$1, 8, _hoisted_6$3)), [
                                 [_directive_ripple]
                               ])
                             : createCommentVNode("", true),
@@ -648,9 +717,10 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                             ? withDirectives((openBlock(), createElementBlock("button", {
                                 key: 2,
                                 class: "p-row-editor-cancel p-link",
-                                onClick: _cache[5] || (_cache[5] = (...args) => ($options.onRowEditCancel && $options.onRowEditCancel(...args))),
-                                type: "button"
-                              }, _hoisted_7$1)), [
+                                type: "button",
+                                "aria-label": $options.cancelButtonAriaLabel,
+                                onClick: _cache[5] || (_cache[5] = (...args) => ($options.onRowEditCancel && $options.onRowEditCancel(...args)))
+                              }, _hoisted_11$1, 8, _hoisted_9$1)), [
                                 [_directive_ripple]
                               ])
                             : createCommentVNode("", true)
@@ -813,7 +883,9 @@ var script$7 = {
     },
     data() {
         return {
-            rowGroupHeaderStyleObject: {}
+            rowGroupHeaderStyleObject: {},
+            tabindexArray: [],
+            isARowSelected: false
         };
     },
     watch: {
@@ -1131,6 +1203,13 @@ var script$7 = {
             const contentRef = this.getVirtualScrollerProp('contentRef');
 
             contentRef && contentRef(el);
+        },
+        setRowTabindex(index) {
+            if (this.selection === null && (this.selectionMode === 'single' || this.selectionMode === 'multiple')) {
+                return index === 0 ? 0 : -1;
+            }
+
+            return -1;
         }
     },
     computed: {
@@ -1152,6 +1231,12 @@ var script$7 = {
         },
         bodyStyle() {
             return this.getVirtualScrollerProp('contentStyle');
+        },
+        expandedRowId() {
+            return UniqueComponentId();
+        },
+        nameAttributeSelector() {
+            return UniqueComponentId();
         }
     },
     components: {
@@ -1160,15 +1245,16 @@ var script$7 = {
 };
 
 const _hoisted_1$7 = ["colspan"];
-const _hoisted_2$5 = ["onClick"];
-const _hoisted_3$4 = ["onClick", "onDblclick", "onContextmenu", "onKeydown", "tabindex", "onDragstart", "onDragover"];
-const _hoisted_4$3 = ["colspan"];
-const _hoisted_5$2 = {
+const _hoisted_2$6 = ["onClick"];
+const _hoisted_3$4 = ["tabindex", "aria-selected", "onClick", "onDblclick", "onContextmenu", "onKeydown", "onDragstart", "onDragover"];
+const _hoisted_4$3 = ["id"];
+const _hoisted_5$2 = ["colspan"];
+const _hoisted_6$2 = {
   key: 1,
   class: "p-datatable-emptymessage",
   role: "row"
 };
-const _hoisted_6$2 = ["colspan"];
+const _hoisted_7$1 = ["colspan"];
 
 function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_DTBodyCell = resolveComponent("DTBodyCell");
@@ -1204,7 +1290,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                           createElementVNode("span", {
                             class: normalizeClass($options.rowGroupTogglerIcon(rowData))
                           }, null, 2)
-                        ], 8, _hoisted_2$5))
+                        ], 8, _hoisted_2$6))
                       : createCommentVNode("", true),
                     (openBlock(), createBlock(resolveDynamicComponent($props.templates['groupheader']), {
                       data: rowData,
@@ -1218,19 +1304,20 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                   key: $options.getRowKey(rowData, $options.getRowIndex(index)),
                   class: normalizeClass($options.getRowClass(rowData)),
                   style: normalizeStyle($props.rowStyle),
+                  tabindex: $options.setRowTabindex(index),
+                  role: "row",
+                  "aria-selected": $props.selectionMode ? $options.isSelected(rowData) : null,
                   onClick: $event => ($options.onRowClick($event, rowData, $options.getRowIndex(index))),
                   onDblclick: $event => ($options.onRowDblClick($event, rowData, $options.getRowIndex(index))),
                   onContextmenu: $event => ($options.onRowRightClick($event, rowData, $options.getRowIndex(index))),
                   onTouchend: _cache[9] || (_cache[9] = $event => ($options.onRowTouchEnd($event))),
                   onKeydown: $event => ($options.onRowKeyDown($event, rowData, $options.getRowIndex(index))),
-                  tabindex: $props.selectionMode || $props.contextMenu ? '0' : null,
                   onMousedown: _cache[10] || (_cache[10] = $event => ($options.onRowMouseDown($event))),
                   onDragstart: $event => ($options.onRowDragStart($event, $options.getRowIndex(index))),
                   onDragover: $event => ($options.onRowDragOver($event, $options.getRowIndex(index))),
                   onDragleave: _cache[11] || (_cache[11] = $event => ($options.onRowDragLeave($event))),
                   onDragend: _cache[12] || (_cache[12] = $event => ($options.onRowDragEnd($event))),
-                  onDrop: _cache[13] || (_cache[13] = $event => ($options.onRowDrop($event))),
-                  role: "row"
+                  onDrop: _cache[13] || (_cache[13] = $event => ($options.onRowDrop($event)))
                 }, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, (col, i) => {
                     return (openBlock(), createElementBlock(Fragment, {
@@ -1249,7 +1336,11 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                             rowspan: $props.rowGroupMode === 'rowspan' ? $options.calculateRowGroupSize($props.value, col, $options.getRowIndex(index)) : null,
                             editMode: $props.editMode,
                             editing: $props.editMode === 'row' && $options.isRowEditing(rowData),
+                            editingMeta: $props.editingMeta,
                             responsiveLayout: $props.responsiveLayout,
+                            virtualScrollerContentProps: $props.virtualScrollerContentProps,
+                            ariaControls: $options.expandedRowId + '_' + index + '_expansion',
+                            name: $options.nameAttributeSelector,
                             onRadioChange: _cache[0] || (_cache[0] = $event => ($options.onRadioChange($event))),
                             onCheckboxChange: _cache[1] || (_cache[1] = $event => ($options.onCheckboxChange($event))),
                             onRowToggle: _cache[2] || (_cache[2] = $event => ($options.onRowToggle($event))),
@@ -1259,10 +1350,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                             onRowEditInit: _cache[6] || (_cache[6] = $event => ($options.onRowEditInit($event))),
                             onRowEditSave: _cache[7] || (_cache[7] = $event => ($options.onRowEditSave($event))),
                             onRowEditCancel: _cache[8] || (_cache[8] = $event => ($options.onRowEditCancel($event))),
-                            editingMeta: $props.editingMeta,
-                            onEditingMetaChange: $options.onEditingMetaChange,
-                            virtualScrollerContentProps: $props.virtualScrollerContentProps
-                          }, null, 8, ["rowData", "column", "rowIndex", "index", "selected", "rowTogglerIcon", "frozenRow", "rowspan", "editMode", "editing", "responsiveLayout", "editingMeta", "onEditingMetaChange", "virtualScrollerContentProps"]))
+                            onEditingMetaChange: $options.onEditingMetaChange
+                          }, null, 8, ["rowData", "column", "rowIndex", "index", "selected", "rowTogglerIcon", "frozenRow", "rowspan", "editMode", "editing", "editingMeta", "responsiveLayout", "virtualScrollerContentProps", "ariaControls", "name", "onEditingMetaChange"]))
                         : createCommentVNode("", true)
                     ], 64))
                   }), 128))
@@ -1271,6 +1360,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
             ($props.templates['expansion'] && $props.expandedRows && $options.isRowExpanded(rowData))
               ? (openBlock(), createElementBlock("tr", {
                   key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_expansion',
+                  id: $options.expandedRowId + '_' + index + '_expansion',
                   class: "p-datatable-row-expansion",
                   role: "row"
                 }, [
@@ -1279,8 +1369,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                       data: rowData,
                       index: $options.getRowIndex(index)
                     }, null, 8, ["data", "index"]))
-                  ], 8, _hoisted_4$3)
-                ]))
+                  ], 8, _hoisted_5$2)
+                ], 8, _hoisted_4$3))
               : createCommentVNode("", true),
             ($props.templates['groupfooter'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupFooter($props.value, rowData, $options.getRowIndex(index)))
               ? (openBlock(), createElementBlock("tr", {
@@ -1296,12 +1386,12 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
               : createCommentVNode("", true)
           ], 64))
         }), 128))
-      : (openBlock(), createElementBlock("tr", _hoisted_5$2, [
+      : (openBlock(), createElementBlock("tr", _hoisted_6$2, [
           createElementVNode("td", { colspan: $options.columnsLength }, [
             ($props.templates.empty)
               ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.empty), { key: 0 }))
               : createCommentVNode("", true)
-          ], 8, _hoisted_6$2)
+          ], 8, _hoisted_7$1)
         ]))
   ], 4))
 }
@@ -1476,7 +1566,7 @@ const _hoisted_1$5 = {
   class: "p-datatable-tfoot",
   role: "rowgroup"
 };
-const _hoisted_2$4 = {
+const _hoisted_2$5 = {
   key: 0,
   role: "row"
 };
@@ -1487,7 +1577,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   return ($options.hasFooter)
     ? (openBlock(), createElementBlock("tfoot", _hoisted_1$5, [
         (!$props.columnGroup)
-          ? (openBlock(), createElementBlock("tr", _hoisted_2$4, [
+          ? (openBlock(), createElementBlock("tr", _hoisted_2$5, [
               (openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, (col, i) => {
                 return (openBlock(), createElementBlock(Fragment, {
                   key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
@@ -1527,63 +1617,6 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
 script$5.render = render$5;
 
 var script$4 = {
-    name: 'HeaderCheckbox',
-    inheritAttrs: false,
-    emits: ['change'],
-    props: {
-        checked: null
-    },
-    data() {
-        return {
-            focused: false
-        };
-    },
-    methods: {
-        onClick(event) {
-            if (!this.$attrs.disabled) {
-                this.focused = true;
-                this.$emit('change', {
-                    originalEvent: event,
-                    checked: !this.checked
-                });
-            }
-        },
-        onFocus() {
-            this.focused = true;
-        },
-        onBlur() {
-            this.focused = false;
-        }
-    }
-};
-
-const _hoisted_1$4 = ["aria-checked", "tabindex"];
-
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", {
-    class: normalizeClass(['p-checkbox p-component', { 'p-checkbox-focused': $data.focused, 'p-disabled': _ctx.$attrs.disabled }]),
-    onClick: _cache[2] || (_cache[2] = (...args) => ($options.onClick && $options.onClick(...args))),
-    onKeydown: _cache[3] || (_cache[3] = withKeys(withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"]))
-  }, [
-    createElementVNode("div", {
-      ref: "box",
-      class: normalizeClass(['p-checkbox-box p-component', { 'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused }]),
-      role: "checkbox",
-      "aria-checked": $props.checked,
-      tabindex: _ctx.$attrs.disabled ? null : '0',
-      onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
-      onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event)))
-    }, [
-      createElementVNode("span", {
-        class: normalizeClass(['p-checkbox-icon', { 'pi pi-check': $props.checked }])
-      }, null, 2)
-    ], 42, _hoisted_1$4)
-  ], 34))
-}
-
-script$4.render = render$4;
-
-var script$3 = {
     name: 'ColumnFilter',
     emits: ['filter-change', 'filter-apply', 'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
     props: {
@@ -1655,6 +1688,10 @@ var script$3 = {
         filterMenuStyle: {
             type: null,
             default: null
+        },
+        filterInputProps: {
+            type: null,
+            default: null
         }
     },
     data() {
@@ -1740,36 +1777,18 @@ var script$3 = {
             this.overlayVisible = !this.overlayVisible;
         },
         onToggleButtonKeyDown(event) {
-            switch (event.key) {
-                case 'Escape':
-                case 'Tab':
-                    this.overlayVisible = false;
+            switch (event.code) {
+                case 'Enter':
+                case 'Space':
+                    this.toggleMenu();
+                    event.preventDefault();
                     break;
 
-                case 'ArrowDown':
-                    if (this.overlayVisible) {
-                        let focusable = DomHandler.getFocusableElements(this.overlay);
-
-                        if (focusable) {
-                            focusable[0].focus();
-                        }
-
-                        event.preventDefault();
-                    } else if (event.altKey) {
-                        this.overlayVisible = true;
-                        event.preventDefault();
-                    }
-
+                case 'Escape':
+                    this.overlayVisible = false;
                     break;
             }
         },
-        onEscape() {
-            this.overlayVisible = false;
-
-            if (this.$refs.icon) {
-                this.$refs.icon.focus();
-            }
-        },
         onRowMatchModeChange(matchMode) {
             let _filters = { ...this.filters };
 
@@ -1782,7 +1801,7 @@ var script$3 = {
         onRowMatchModeKeyDown(event) {
             let item = event.target;
 
-            switch (event.key) {
+            switch (event.code) {
                 case 'ArrowDown':
                     var nextItem = this.findNextItem(item);
 
@@ -1868,11 +1887,13 @@ var script$3 = {
         findPrevItem(item) {
             let prevItem = item.previousElementSibling;
 
-            if (prevItem) DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.findPrevItem(prevItem) : prevItem;
+            if (prevItem) return DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.findPrevItem(prevItem) : prevItem;
             else return item.parentElement.lastElementChild;
         },
         hide() {
             this.overlayVisible = false;
+
+            DomHandler.focus(this.$refs.icon);
         },
         onContentClick(event) {
             this.selfClick = true;
@@ -2005,6 +2026,9 @@ var script$3 = {
         showMenuButton() {
             return this.showMenu && (this.display === 'row' ? this.type !== 'boolean' : true);
         },
+        overlayId() {
+            return UniqueComponentId();
+        },
         matchModes() {
             return (
                 this.matchModeOptions ||
@@ -2023,7 +2047,7 @@ var script$3 = {
             ];
         },
         noFilterLabel() {
-            return this.$primevue.config.locale.noFilter;
+            return this.$primevue.config.locale ? this.$primevue.config.locale.noFilter : undefined;
         },
         isShowOperator() {
             return this.showOperator && this.filters[this.field].operator;
@@ -2038,41 +2062,50 @@ var script$3 = {
             return this.fieldConstraints.length > 1;
         },
         removeRuleButtonLabel() {
-            return this.$primevue.config.locale.removeRule;
+            return this.$primevue.config.locale ? this.$primevue.config.locale.removeRule : undefined;
         },
         addRuleButtonLabel() {
-            return this.$primevue.config.locale.addRule;
+            return this.$primevue.config.locale ? this.$primevue.config.locale.addRule : undefined;
         },
         isShowAddConstraint() {
             return this.showAddButton && this.filters[this.field].operator && this.fieldConstraints && this.fieldConstraints.length < this.maxConstraints;
         },
         clearButtonLabel() {
-            return this.$primevue.config.locale.clear;
+            return this.$primevue.config.locale ? this.$primevue.config.locale.clear : undefined;
         },
         applyButtonLabel() {
-            return this.$primevue.config.locale.apply;
+            return this.$primevue.config.locale ? this.$primevue.config.locale.apply : undefined;
+        },
+        filterMenuButtonAriaLabel() {
+            return this.$primevue.config.locale ? (this.overlayVisible ? this.$primevue.config.locale.showFilterMenu : this.$primevue.config.locale.hideFilterMenu) : undefined;
+        },
+        filterOperatorAriaLabel() {
+            return this.$primevue.config.locale ? this.$primevue.config.locale.filterOperator : undefined;
+        },
+        filterConstraintAriaLabel() {
+            return this.$primevue.config.locale ? this.$primevue.config.locale.filterConstraint : undefined;
         }
     },
     components: {
         CFDropdown: Dropdown,
         CFButton: Button,
         Portal: Portal
+    },
+    directives: {
+        focustrap: FocusTrap
     }
 };
 
-const _hoisted_1$3 = {
-  key: 0,
-  class: "p-fluid p-column-filter-element"
-};
-const _hoisted_2$3 = ["aria-expanded"];
-const _hoisted_3$3 = /*#__PURE__*/createElementVNode("span", { class: "pi pi-filter-icon pi-filter" }, null, -1);
-const _hoisted_4$2 = [
-  _hoisted_3$3
+const _hoisted_1$4 = ["aria-label", "aria-expanded", "aria-controls"];
+const _hoisted_2$4 = /*#__PURE__*/createElementVNode("span", { class: "pi pi-filter-icon pi-filter" }, null, -1);
+const _hoisted_3$3 = [
+  _hoisted_2$4
 ];
-const _hoisted_5$1 = /*#__PURE__*/createElementVNode("span", { class: "pi pi-filter-slash" }, null, -1);
-const _hoisted_6$1 = [
-  _hoisted_5$1
+const _hoisted_4$2 = /*#__PURE__*/createElementVNode("span", { class: "pi pi-filter-slash" }, null, -1);
+const _hoisted_5$1 = [
+  _hoisted_4$2
 ];
+const _hoisted_6$1 = ["id", "aria-modal"];
 const _hoisted_7 = {
   key: 0,
   class: "p-column-filter-row-items"
@@ -2090,22 +2123,26 @@ const _hoisted_12 = {
 };
 const _hoisted_13 = { class: "p-column-filter-buttonbar" };
 
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CFDropdown = resolveComponent("CFDropdown");
   const _component_CFButton = resolveComponent("CFButton");
   const _component_Portal = resolveComponent("Portal");
+  const _directive_focustrap = resolveDirective("focustrap");
 
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass($options.containerClass)
   }, [
     ($props.display === 'row')
-      ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
+      ? (openBlock(), createElementBlock("div", mergeProps({
+          key: 0,
+          class: "p-fluid p-column-filter-element"
+        }, $props.filterInputProps), [
           (openBlock(), createBlock(resolveDynamicComponent($props.filterElement), {
             field: $props.field,
             filterModel: $props.filters[$props.field],
             filterCallback: $options.filterCallback
           }, null, 8, ["field", "filterModel", "filterCallback"]))
-        ]))
+        ], 16))
       : createCommentVNode("", true),
     ($options.showMenuButton)
       ? (openBlock(), createElementBlock("button", {
@@ -2113,11 +2150,13 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
           ref: "icon",
           type: "button",
           class: normalizeClass(["p-column-filter-menu-button p-link", { 'p-column-filter-menu-button-open': $data.overlayVisible, 'p-column-filter-menu-button-active': $options.hasFilter() }]),
+          "aria-label": $options.filterMenuButtonAriaLabel,
           "aria-haspopup": "true",
           "aria-expanded": $data.overlayVisible,
+          "aria-controls": $options.overlayId,
           onClick: _cache[0] || (_cache[0] = $event => ($options.toggleMenu())),
           onKeydown: _cache[1] || (_cache[1] = $event => ($options.onToggleButtonKeyDown($event)))
-        }, _hoisted_4$2, 42, _hoisted_2$3))
+        }, _hoisted_3$3, 42, _hoisted_1$4))
       : createCommentVNode("", true),
     ($props.showClearButton && $props.display === 'row')
       ? (openBlock(), createElementBlock("button", {
@@ -2125,7 +2164,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
           class: normalizeClass([{ 'p-hidden-space': !$options.hasRowFilter() }, "p-column-filter-clear-button p-link"]),
           type: "button",
           onClick: _cache[2] || (_cache[2] = $event => ($options.clearFilter()))
-        }, _hoisted_6$1, 2))
+        }, _hoisted_5$1, 2))
       : createCommentVNode("", true),
     createVNode(_component_Portal, null, {
       default: withCtx(() => [
@@ -2137,13 +2176,16 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
         }, {
           default: withCtx(() => [
             ($data.overlayVisible)
-              ? (openBlock(), createElementBlock("div", {
+              ? withDirectives((openBlock(), createElementBlock("div", {
                   key: 0,
                   ref: $options.overlayRef,
+                  id: $options.overlayId,
+                  "aria-modal": $data.overlayVisible,
+                  role: "dialog",
                   class: normalizeClass($options.overlayClass),
-                  onKeydown: _cache[11] || (_cache[11] = withKeys((...args) => ($options.onEscape && $options.onEscape(...args)), ["escape"])),
-                  onClick: _cache[12] || (_cache[12] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
-                  onMousedown: _cache[13] || (_cache[13] = (...args) => ($options.onContentMouseDown && $options.onContentMouseDown(...args)))
+                  onKeydown: _cache[10] || (_cache[10] = withKeys((...args) => ($options.hide && $options.hide(...args)), ["escape"])),
+                  onClick: _cache[11] || (_cache[11] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
+                  onMousedown: _cache[12] || (_cache[12] = (...args) => ($options.onContentMouseDown && $options.onContentMouseDown(...args)))
                 }, [
                   (openBlock(), createBlock(resolveDynamicComponent($props.filterHeaderTemplate), {
                     field: $props.field,
@@ -2180,11 +2222,12 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
                               createVNode(_component_CFDropdown, {
                                 options: $options.operatorOptions,
                                 modelValue: $options.operator,
-                                "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => ($options.onOperatorChange($event))),
+                                "aria-label": $options.filterOperatorAriaLabel,
                                 class: "p-column-filter-operator-dropdown",
                                 optionLabel: "label",
-                                optionValue: "value"
-                              }, null, 8, ["options", "modelValue"])
+                                optionValue: "value",
+                                "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => ($options.onOperatorChange($event)))
+                              }, null, 8, ["options", "modelValue", "aria-label"])
                             ]))
                           : createCommentVNode("", true),
                         createElementVNode("div", _hoisted_11, [
@@ -2198,11 +2241,12 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
                                     key: 0,
                                     options: $options.matchModes,
                                     modelValue: fieldConstraint.matchMode,
+                                    class: "p-column-filter-matchmode-dropdown",
                                     optionLabel: "label",
                                     optionValue: "value",
-                                    "onUpdate:modelValue": $event => ($options.onMenuMatchModeChange($event, i)),
-                                    class: "p-column-filter-matchmode-dropdown"
-                                  }, null, 8, ["options", "modelValue", "onUpdate:modelValue"]))
+                                    "aria-label": $options.filterConstraintAriaLabel,
+                                    "onUpdate:modelValue": $event => ($options.onMenuMatchModeChange($event, i))
+                                  }, null, 8, ["options", "modelValue", "aria-label", "onUpdate:modelValue"]))
                                 : createCommentVNode("", true),
                               ($props.display === 'menu')
                                 ? (openBlock(), createBlock(resolveDynamicComponent($props.filterElement), {
@@ -2244,9 +2288,9 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
                                 key: 0,
                                 type: "button",
                                 class: "p-button-outlined p-button-sm",
-                                onClick: _cache[9] || (_cache[9] = $event => ($options.clearFilter())),
-                                label: $options.clearButtonLabel
-                              }, null, 8, ["label"]))
+                                label: $options.clearButtonLabel,
+                                onClick: $options.clearFilter
+                              }, null, 8, ["label", "onClick"]))
                             : (openBlock(), createBlock(resolveDynamicComponent($props.filterClearTemplate), {
                                 key: 1,
                                 field: $props.field,
@@ -2260,8 +2304,8 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
                                       key: 0,
                                       type: "button",
                                       class: "p-button-sm",
-                                      onClick: _cache[10] || (_cache[10] = $event => ($options.applyFilter())),
-                                      label: $options.applyButtonLabel
+                                      label: $options.applyButtonLabel,
+                                      onClick: _cache[9] || (_cache[9] = $event => ($options.applyFilter()))
                                     }, null, 8, ["label"]))
                                   : (openBlock(), createBlock(resolveDynamicComponent($props.filterApplyTemplate), {
                                       key: 1,
@@ -2278,7 +2322,9 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
                     filterModel: $props.filters[$props.field],
                     filterCallback: $options.filterCallback
                   }, null, 8, ["field", "filterModel", "filterCallback"]))
-                ], 34))
+                ], 42, _hoisted_6$1)), [
+                  [_directive_focustrap, { autoFocus: true }]
+                ])
               : createCommentVNode("", true)
           ]),
           _: 1
@@ -2289,6 +2335,77 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2))
 }
 
+script$4.render = render$4;
+
+var script$3 = {
+    name: 'HeaderCheckbox',
+    emits: ['change'],
+    props: {
+        checked: null,
+        disabled: null
+    },
+    data() {
+        return {
+            focused: false
+        };
+    },
+    methods: {
+        onClick(event) {
+            if (!this.disabled) {
+                this.$emit('change', {
+                    originalEvent: event,
+                    checked: !this.checked
+                });
+
+                DomHandler.focus(this.$refs.input);
+            }
+        },
+        onFocus() {
+            this.focused = true;
+        },
+        onBlur() {
+            this.focused = false;
+        }
+    },
+    computed: {
+        headerCheckboxAriaLabel() {
+            return this.$primevue.config.locale.aria ? (this.checked ? this.$primevue.config.locale.aria.selectAll : this.$primevue.config.locale.aria.unselectAll) : undefined;
+        }
+    }
+};
+
+const _hoisted_1$3 = { class: "p-hidden-accessible" };
+const _hoisted_2$3 = ["checked", "disabled", "tabindex", "aria-label"];
+
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(['p-checkbox p-component', { 'p-checkbox-focused': $data.focused, 'p-disabled': $props.disabled }]),
+    onClick: _cache[2] || (_cache[2] = (...args) => ($options.onClick && $options.onClick(...args))),
+    onKeydown: _cache[3] || (_cache[3] = withKeys(withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"]))
+  }, [
+    createElementVNode("div", _hoisted_1$3, [
+      createElementVNode("input", {
+        ref: "input",
+        type: "checkbox",
+        checked: $props.checked,
+        disabled: $props.disabled,
+        tabindex: $props.disabled ? null : '0',
+        "aria-label": $options.headerCheckboxAriaLabel,
+        onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
+        onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event)))
+      }, null, 40, _hoisted_2$3)
+    ]),
+    createElementVNode("div", {
+      ref: "box",
+      class: normalizeClass(['p-checkbox-box p-component', { 'p-highlight': $props.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }])
+    }, [
+      createElementVNode("span", {
+        class: normalizeClass(['p-checkbox-icon', { 'pi pi-check': $props.checked }])
+      }, null, 2)
+    ], 2)
+  ], 34))
+}
+
 script$3.render = render$3;
 
 var script$2 = {
@@ -2371,6 +2488,10 @@ var script$2 = {
         reorderableColumns: {
             type: Boolean,
             default: false
+        },
+        filterInputProps: {
+            type: null,
+            default: null
         }
     },
     data() {
@@ -2396,8 +2517,9 @@ var script$2 = {
             this.$emit('column-click', { originalEvent: event, column: this.column });
         },
         onKeyDown(event) {
-            if (event.which === 13 && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
+            if ((event.code === 'Enter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
                 this.$emit('column-click', { originalEvent: event, column: this.column });
+                event.preventDefault();
             }
         },
         onMouseDown(event) {
@@ -2529,8 +2651,8 @@ var script$2 = {
         }
     },
     components: {
-        DTHeaderCheckbox: script$4,
-        DTColumnFilter: script$3
+        DTHeaderCheckbox: script$3,
+        DTColumnFilter: script$4
     }
 };
 
@@ -2553,17 +2675,17 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     style: normalizeStyle($options.containerStyle),
     class: normalizeClass($options.containerClass),
     tabindex: $options.columnProp('sortable') ? '0' : null,
-    role: "cell",
+    role: "columnheader",
+    colspan: $options.columnProp('colspan'),
+    rowspan: $options.columnProp('rowspan'),
+    "aria-sort": $options.ariaSort,
     onClick: _cache[8] || (_cache[8] = (...args) => ($options.onClick && $options.onClick(...args))),
     onKeydown: _cache[9] || (_cache[9] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
     onMousedown: _cache[10] || (_cache[10] = (...args) => ($options.onMouseDown && $options.onMouseDown(...args))),
     onDragstart: _cache[11] || (_cache[11] = (...args) => ($options.onDragStart && $options.onDragStart(...args))),
     onDragover: _cache[12] || (_cache[12] = (...args) => ($options.onDragOver && $options.onDragOver(...args))),
     onDragleave: _cache[13] || (_cache[13] = (...args) => ($options.onDragLeave && $options.onDragLeave(...args))),
-    onDrop: _cache[14] || (_cache[14] = (...args) => ($options.onDrop && $options.onDrop(...args))),
-    colspan: $options.columnProp('colspan'),
-    rowspan: $options.columnProp('rowspan'),
-    "aria-sort": $options.ariaSort
+    onDrop: _cache[14] || (_cache[14] = (...args) => ($options.onDrop && $options.onDrop(...args)))
   }, [
     ($props.resizableColumns && !$options.columnProp('frozen'))
       ? (openBlock(), createElementBlock("span", {
@@ -2613,6 +2735,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
             filterApplyTemplate: $props.column.children && $props.column.children.filterapply,
             filters: $props.filters,
             filtersStore: $props.filtersStore,
+            filterInputProps: $props.filterInputProps,
             onFilterChange: _cache[1] || (_cache[1] = $event => (_ctx.$emit('filter-change', $event))),
             onFilterApply: _cache[2] || (_cache[2] = $event => (_ctx.$emit('filter-apply'))),
             filterMenuStyle: $options.columnProp('filterMenuStyle'),
@@ -2629,7 +2752,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
             onConstraintAdd: _cache[5] || (_cache[5] = $event => (_ctx.$emit('constraint-add', $event))),
             onConstraintRemove: _cache[6] || (_cache[6] = $event => (_ctx.$emit('constraint-remove', $event))),
             onApplyClick: _cache[7] || (_cache[7] = $event => (_ctx.$emit('apply-click', $event)))
-          }, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filters", "filtersStore", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints"]))
+          }, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filters", "filtersStore", "filterInputProps", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints"]))
         : createCommentVNode("", true)
     ])
   ], 46, _hoisted_1$2))
@@ -2721,6 +2844,10 @@ var script$1 = {
         reorderableColumns: {
             type: Boolean,
             default: false
+        },
+        filterInputProps: {
+            type: null,
+            default: null
         }
     },
     methods: {
@@ -2772,8 +2899,8 @@ var script$1 = {
     },
     components: {
         DTHeaderCell: script$2,
-        DTHeaderCheckbox: script$4,
-        DTColumnFilter: script$3
+        DTHeaderCheckbox: script$3,
+        DTColumnFilter: script$4
     }
 };
 
@@ -2825,6 +2952,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                       filters: $props.filters,
                       filterDisplay: $props.filterDisplay,
                       filtersStore: $props.filtersStore,
+                      filterInputProps: $props.filterInputProps,
                       onFilterChange: _cache[8] || (_cache[8] = $event => (_ctx.$emit('filter-change', $event))),
                       onFilterApply: _cache[9] || (_cache[9] = $event => (_ctx.$emit('filter-apply'))),
                       onOperatorChange: _cache[10] || (_cache[10] = $event => (_ctx.$emit('operator-change', $event))),
@@ -2832,7 +2960,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                       onConstraintAdd: _cache[12] || (_cache[12] = $event => (_ctx.$emit('constraint-add', $event))),
                       onConstraintRemove: _cache[13] || (_cache[13] = $event => (_ctx.$emit('constraint-remove', $event))),
                       onApplyClick: _cache[14] || (_cache[14] = $event => (_ctx.$emit('apply-click', $event)))
-                    }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore"]))
+                    }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore", "filterInputProps"]))
                   : createCommentVNode("", true)
               ], 64))
             }), 128))
@@ -2853,8 +2981,8 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                             ? (openBlock(), createBlock(_component_DTHeaderCheckbox, {
                                 key: 0,
                                 checked: $props.allRowsSelected,
-                                onChange: _cache[15] || (_cache[15] = $event => (_ctx.$emit('checkbox-change', $event))),
-                                disabled: $props.empty
+                                disabled: $props.empty,
+                                onChange: _cache[15] || (_cache[15] = $event => (_ctx.$emit('checkbox-change', $event)))
                               }, null, 8, ["checked", "disabled"]))
                             : createCommentVNode("", true),
                           (col.children && col.children.filter)
@@ -2871,6 +2999,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                 filterApplyTemplate: col.children && col.children.filterapply,
                                 filters: $props.filters,
                                 filtersStore: $props.filtersStore,
+                                filterInputProps: $props.filterInputProps,
                                 onFilterChange: _cache[16] || (_cache[16] = $event => (_ctx.$emit('filter-change', $event))),
                                 onFilterApply: _cache[17] || (_cache[17] = $event => (_ctx.$emit('filter-apply'))),
                                 filterMenuStyle: $options.columnProp(col, 'filterMenuStyle'),
@@ -2887,7 +3016,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                 onConstraintAdd: _cache[20] || (_cache[20] = $event => (_ctx.$emit('constraint-add', $event))),
                                 onConstraintRemove: _cache[21] || (_cache[21] = $event => (_ctx.$emit('constraint-remove', $event))),
                                 onApplyClick: _cache[22] || (_cache[22] = $event => (_ctx.$emit('apply-click', $event)))
-                              }, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filters", "filtersStore", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints"]))
+                              }, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filters", "filtersStore", "filterInputProps", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints"]))
                             : createCommentVNode("", true)
                         ], 6))
                       : createCommentVNode("", true)
@@ -3239,6 +3368,14 @@ var script = {
         tableClass: {
             type: String,
             default: null
+        },
+        tableProps: {
+            type: null,
+            default: null
+        },
+        filterInputProps: {
+            type: null,
+            default: null
         }
     },
     data() {
@@ -3592,6 +3729,9 @@ var script = {
         },
         onRowClick(e) {
             const event = e.originalEvent;
+            const index = e.index;
+            const body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
+            const focusedItem = DomHandler.findSingle(body, 'tr.p-selectable-row[tabindex="0"]');
 
             if (DomHandler.isClickable(event.target)) {
                 return;
@@ -3668,6 +3808,11 @@ var script = {
             }
 
             this.rowTouched = false;
+
+            if (focusedItem) {
+                focusedItem.tabIndex = '-1';
+                DomHandler.find(body, 'tr.p-selectable-row')[index].tabIndex = '0';
+            }
         },
         onRowDblClick(e) {
             const event = e.originalEvent;
@@ -3688,44 +3833,153 @@ var script = {
         onRowTouchEnd() {
             this.rowTouched = true;
         },
-        onRowKeyDown(e) {
+        onRowKeyDown(e, slotProps) {
             const event = e.originalEvent;
             const rowData = e.data;
             const rowIndex = e.index;
+            const metaKey = event.metaKey || event.ctrlKey;
 
             if (this.selectionMode) {
                 const row = event.target;
 
-                switch (event.which) {
-                    //down arrow
-                    case 40:
-                        var nextRow = this.findNextSelectableRow(row);
+                switch (event.code) {
+                    case 'ArrowDown':
+                        this.onArrowDownKey(event, row, rowIndex, slotProps);
+                        break;
 
-                        if (nextRow) {
-                            nextRow.focus();
-                        }
+                    case 'ArrowUp':
+                        this.onArrowUpKey(event, row, rowIndex, slotProps);
+                        break;
 
-                        event.preventDefault();
+                    case 'Home':
+                        this.onHomeKey(event, row, rowIndex, slotProps);
                         break;
 
-                    //up arrow
-                    case 38:
-                        var prevRow = this.findPrevSelectableRow(row);
+                    case 'End':
+                        this.onEndKey(event, row, rowIndex, slotProps);
+                        break;
 
-                        if (prevRow) {
-                            prevRow.focus();
-                        }
+                    case 'Enter':
+                        this.onEnterKey(event, rowData, rowIndex);
+                        break;
+
+                    case 'Space':
+                        this.onSpaceKey(event, rowData, rowIndex, slotProps);
+                        break;
 
-                        event.preventDefault();
+                    case 'Tab':
+                        this.onTabKey(event, rowIndex);
                         break;
 
-                    //enter
-                    case 13:
-                        this.onRowClick({ originalEvent: event, data: rowData, index: rowIndex });
+                    default:
+                        if (event.code === 'KeyA' && metaKey) {
+                            const data = this.dataToRender(slotProps.rows);
+
+                            this.$emit('update:selection', data);
+                        }
+
                         break;
                 }
             }
         },
+        onArrowDownKey(event, row, rowIndex, slotProps) {
+            const nextRow = this.findNextSelectableRow(row);
+
+            nextRow && this.focusRowChange(row, nextRow);
+
+            if (event.shiftKey) {
+                const data = this.dataToRender(slotProps.rows);
+                const nextRowIndex = rowIndex + 1 >= data.length ? data.length - 1 : rowIndex + 1;
+
+                this.onRowClick({ originalEvent: event, data: data[nextRowIndex], index: nextRowIndex });
+            }
+
+            event.preventDefault();
+        },
+        onArrowUpKey(event, row, rowIndex, slotProps) {
+            const prevRow = this.findPrevSelectableRow(row);
+
+            prevRow && this.focusRowChange(row, prevRow);
+
+            if (event.shiftKey) {
+                const data = this.dataToRender(slotProps.rows);
+                const prevRowIndex = rowIndex - 1 <= 0 ? 0 : rowIndex - 1;
+
+                this.onRowClick({ originalEvent: event, data: data[prevRowIndex], index: prevRowIndex });
+            }
+
+            event.preventDefault();
+        },
+        onHomeKey(event, row, rowIndex, slotProps) {
+            const firstRow = this.findFirstSelectableRow();
+
+            firstRow && this.focusRowChange(row, firstRow);
+
+            if (event.ctrlKey && event.shiftKey) {
+                const data = this.dataToRender(slotProps.rows);
+
+                this.$emit('update:selection', data.slice(0, rowIndex + 1));
+            }
+
+            event.preventDefault();
+        },
+        onEndKey(event, row, rowIndex, slotProps) {
+            const lastRow = this.findLastSelectableRow();
+
+            lastRow && this.focusRowChange(row, lastRow);
+
+            if (event.ctrlKey && event.shiftKey) {
+                const data = this.dataToRender(slotProps.rows);
+
+                this.$emit('update:selection', data.slice(rowIndex, data.length));
+            }
+
+            event.preventDefault();
+        },
+        onEnterKey(event, rowData, rowIndex) {
+            this.onRowClick({ originalEvent: event, data: rowData, index: rowIndex });
+            event.preventDefault();
+        },
+        onSpaceKey(event, rowData, rowIndex, slotProps) {
+            this.onEnterKey(event, rowData, rowIndex);
+
+            if (event.shiftKey && this.selection !== null) {
+                const data = this.dataToRender(slotProps.rows);
+                let index;
+
+                if (this.selection.length > 0) {
+                    let firstSelectedRowIndex, lastSelectedRowIndex;
+
+                    firstSelectedRowIndex = ObjectUtils.findIndexInList(this.selection[0], data);
+                    lastSelectedRowIndex = ObjectUtils.findIndexInList(this.selection[this.selection.length - 1], data);
+
+                    index = rowIndex <= firstSelectedRowIndex ? lastSelectedRowIndex : firstSelectedRowIndex;
+                } else {
+                    index = ObjectUtils.findIndexInList(this.selection, data);
+                }
+
+                const _selection = index !== rowIndex ? data.slice(Math.min(index, rowIndex), Math.max(index, rowIndex) + 1) : rowData;
+
+                this.$emit('update:selection', _selection);
+            }
+        },
+        onTabKey(event, rowIndex) {
+            const body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
+            const rows = DomHandler.find(body, 'tr.p-selectable-row');
+
+            if (event.code === 'Tab' && rows && rows.length > 0) {
+                const firstSelectedRow = DomHandler.findSingle(body, 'tr.p-highlight');
+                const focusedItem = DomHandler.findSingle(body, 'tr.p-selectable-row[tabindex="0"]');
+
+                if (firstSelectedRow) {
+                    firstSelectedRow.tabIndex = '0';
+                    focusedItem !== firstSelectedRow && (focusedItem.tabIndex = '-1');
+                } else {
+                    rows[0].tabIndex = '0';
+                    focusedItem !== rows[0] && (rows[rowIndex].tabIndex = '-1');
+                }
+            }
+        },
         findNextSelectableRow(row) {
             let nextRow = row.nextElementSibling;
 
@@ -3746,6 +4000,21 @@ var script = {
                 return null;
             }
         },
+        findFirstSelectableRow() {
+            const firstRow = DomHandler.findSingle(this.$refs.table, '.p-selectable-row');
+
+            return firstRow;
+        },
+        findLastSelectableRow() {
+            const rows = DomHandler.find(this.$refs.table, '.p-selectable-row');
+
+            return rows ? rows[rows.length - 1] : null;
+        },
+        focusRowChange(firstFocusableRow, currentFocusedRow) {
+            firstFocusableRow.tabIndex = '-1';
+            currentFocusedRow.tabIndex = '0';
+            DomHandler.focus(currentFocusedRow);
+        },
         toggleRowWithRadio(event) {
             const rowData = event.data;
 
@@ -4951,12 +5220,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         showSpacer: false
       }), {
         content: withCtx((slotProps) => [
-          createElementVNode("table", {
+          createElementVNode("table", mergeProps({
             ref: "table",
             role: "table",
-            class: normalizeClass([$props.tableClass, 'p-datatable-table']),
-            style: normalizeStyle([$props.tableStyle, slotProps.spacerStyle])
-          }, [
+            class: [$props.tableClass, 'p-datatable-table'],
+            style: [$props.tableStyle, slotProps.spacerStyle]
+          }, $props.tableProps), [
             createVNode(_component_DTTableHeader, {
               columnGroup: $options.headerColumnGroup,
               columns: slotProps.columns,
@@ -4974,6 +5243,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               filters: $data.d_filters,
               filtersStore: $props.filters,
               filterDisplay: $props.filterDisplay,
+              filterInputProps: $props.filterInputProps,
               onColumnClick: _cache[1] || (_cache[1] = $event => ($options.onColumnHeaderClick($event))),
               onColumnMousedown: _cache[2] || (_cache[2] = $event => ($options.onColumnHeaderMouseDown($event))),
               onFilterChange: $options.onFilterChange,
@@ -4984,7 +5254,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               onColumnDrop: _cache[6] || (_cache[6] = $event => ($options.onColumnHeaderDrop($event))),
               onColumnResizestart: _cache[7] || (_cache[7] = $event => ($options.onColumnResizeStart($event))),
               onCheckboxChange: _cache[8] || (_cache[8] = $event => ($options.toggleRowsWithCheckbox($event)))
-            }, null, 8, ["columnGroup", "columns", "rowGroupMode", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "allRowsSelected", "empty", "sortMode", "sortField", "sortOrder", "multiSortMeta", "filters", "filtersStore", "filterDisplay", "onFilterChange", "onFilterApply"]),
+            }, null, 8, ["columnGroup", "columns", "rowGroupMode", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "allRowsSelected", "empty", "sortMode", "sortField", "sortOrder", "multiSortMeta", "filters", "filtersStore", "filterDisplay", "filterInputProps", "onFilterChange", "onFilterApply"]),
             ($props.frozenValue)
               ? (openBlock(), createBlock(_component_DTTableBody, {
                   key: 0,
@@ -5016,6 +5286,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   editingRowKeys: $data.d_editingRowKeys,
                   templates: _ctx.$slots,
                   responsiveLayout: $props.responsiveLayout,
+                  isVirtualScrollerDisabled: true,
                   onRowgroupToggle: $options.toggleRowGroup,
                   onRowClick: _cache[9] || (_cache[9] = $event => ($options.onRowClick($event))),
                   onRowDblclick: _cache[10] || (_cache[10] = $event => ($options.onRowDblClick($event))),
@@ -5038,8 +5309,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   onRowEditSave: _cache[24] || (_cache[24] = $event => ($options.onRowEditSave($event))),
                   onRowEditCancel: _cache[25] || (_cache[25] = $event => ($options.onRowEditCancel($event))),
                   editingMeta: $data.d_editingMeta,
-                  onEditingMetaChange: $options.onEditingMetaChange,
-                  isVirtualScrollerDisabled: true
+                  onEditingMetaChange: $options.onEditingMetaChange
                 }, null, 8, ["value", "columns", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]))
               : createCommentVNode("", true),
             createVNode(_component_DTTableBody, {
@@ -5071,12 +5341,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               editingRowKeys: $data.d_editingRowKeys,
               templates: _ctx.$slots,
               responsiveLayout: $props.responsiveLayout,
+              virtualScrollerContentProps: slotProps,
+              isVirtualScrollerDisabled: $options.virtualScrollerDisabled,
               onRowgroupToggle: $options.toggleRowGroup,
               onRowClick: _cache[26] || (_cache[26] = $event => ($options.onRowClick($event))),
               onRowDblclick: _cache[27] || (_cache[27] = $event => ($options.onRowDblClick($event))),
               onRowRightclick: _cache[28] || (_cache[28] = $event => ($options.onRowRightClick($event))),
               onRowTouchend: $options.onRowTouchEnd,
-              onRowKeydown: $options.onRowKeyDown,
+              onRowKeydown: $event => ($options.onRowKeyDown($event, slotProps)),
               onRowMousedown: $options.onRowMouseDown,
               onRowDragstart: _cache[29] || (_cache[29] = $event => ($options.onRowDragStart($event))),
               onRowDragover: _cache[30] || (_cache[30] = $event => ($options.onRowDragOver($event))),
@@ -5093,15 +5365,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               onRowEditSave: _cache[41] || (_cache[41] = $event => ($options.onRowEditSave($event))),
               onRowEditCancel: _cache[42] || (_cache[42] = $event => ($options.onRowEditCancel($event))),
               editingMeta: $data.d_editingMeta,
-              onEditingMetaChange: $options.onEditingMetaChange,
-              virtualScrollerContentProps: slotProps,
-              isVirtualScrollerDisabled: $options.virtualScrollerDisabled
-            }, null, 8, ["value", "class", "columns", "empty", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange", "virtualScrollerContentProps", "isVirtualScrollerDisabled"]),
+              onEditingMetaChange: $options.onEditingMetaChange
+            }, null, 8, ["value", "class", "columns", "empty", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "responsiveLayout", "virtualScrollerContentProps", "isVirtualScrollerDisabled", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]),
             createVNode(_component_DTTableFooter, {
               columnGroup: $options.footerColumnGroup,
               columns: slotProps.columns
             }, null, 8, ["columnGroup", "columns"])
-          ], 6)
+          ], 16)
         ]),
         _: 1
       }, 16, ["items", "columns", "style", "disabled"])
@@ -5182,7 +5452,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-datatable {\n    position: relative;\n}\n.p-datatable table {\n    border-collapse: collapse;\n    min-width: 100%;\n    table-layout: fixed;\n}\n.p-datatable .p-sortable-column {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n.p-datatable .p-sortable-column .p-column-title,\n.p-datatable .p-sortable-column .p-sortable-column-icon,\n.p-datatable .p-sortable-column .p-sortable-column-badge {\n    vertical-align: middle;\n}\n.p-datatable .p-sortable-column .p-sortable-column-badge {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-datatable-responsive-scroll > .p-datatable-wrapper {\n    overflow-x: auto;\n}\n.p-datatable-responsive-scroll > .p-datatable-wrapper > table,\n.p-datatable-auto-layout > .p-datatable-wrapper > table {\n    table-layout: auto;\n}\n.p-datatable-hoverable-rows .p-selectable-row {\n    cursor: pointer;\n}\n\n/* Scrollable */\n.p-datatable-scrollable .p-datatable-wrapper {\n    position: relative;\n    overflow: auto;\n}\n.p-datatable-scrollable .p-datatable-thead,\n.p-datatable-scrollable .p-datatable-tbody,\n.p-datatable-scrollable .p-datatable-tfoot {\n    display: block;\n}\n.p-datatable-scrollable .p-datatable-thead > tr,\n.p-datatable-scrollable .p-datatable-tbody > tr,\n.p-datatable-scrollable .p-datatable-tfoot > tr {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-wrap: nowrap;\n        flex-wrap: nowrap;\n    width: 100%;\n}\n.p-datatable-scrollable .p-datatable-thead > tr > th,\n.p-datatable-scrollable .p-datatable-tbody > tr > td,\n.p-datatable-scrollable .p-datatable-tfoot > tr > td {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 0px;\n            flex: 1 1 0;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-datatable-scrollable .p-datatable-thead {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n}\n.p-datatable-scrollable .p-datatable-frozen-tbody {\n    position: sticky;\n    z-index: 1;\n}\n.p-datatable-scrollable .p-datatable-tfoot {\n    position: sticky;\n    bottom: 0;\n    z-index: 1;\n}\n.p-datatable-scrollable .p-frozen-column {\n    position: sticky;\n    background: inherit;\n}\n.p-datatable-scrollable th.p-frozen-column {\n    z-index: 1;\n}\n.p-datatable-scrollable-both .p-datatable-thead > tr > th,\n.p-datatable-scrollable-both .p-datatable-tbody > tr > td,\n.p-datatable-scrollable-both .p-datatable-tfoot > tr > td,\n.p-datatable-scrollable-horizontal .p-datatable-thead > tr > th .p-datatable-scrollable-horizontal .p-datatable-tbody > tr > td,\n.p-datatable-scrollable-horizontal .p-datatable-tfoot > tr > td {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 0 auto;\n            flex: 1 0 auto;\n}\n.p-datatable-flex-scrollable {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    height: 100%;\n}\n.p-datatable-flex-scrollable .p-datatable-wrapper {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    height: 100%;\n}\n.p-datatable-scrollable .p-rowgroup-header {\n    position: sticky;\n    z-index: 1;\n}\n.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead,\n.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot {\n    display: table;\n    border-collapse: collapse;\n    width: 100%;\n    table-layout: fixed;\n}\n.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead > tr,\n.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot > tr {\n    display: table-row;\n}\n.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead > tr > th,\n.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot > tr > td {\n    display: table-cell;\n}\n.p-datatable-scrollable .p-virtualscroller > .p-datatable-table {\n    display: inline-block; /* For Safari */\n}\n\n/* Resizable */\n.p-datatable-resizable > .p-datatable-wrapper {\n    overflow-x: auto;\n}\n.p-datatable-resizable .p-datatable-thead > tr > th,\n.p-datatable-resizable .p-datatable-tfoot > tr > td,\n.p-datatable-resizable .p-datatable-tbody > tr > td {\n    overflow: hidden;\n    white-space: nowrap;\n}\n.p-datatable-resizable .p-resizable-column:not(.p-frozen-column) {\n    background-clip: padding-box;\n    position: relative;\n}\n.p-datatable-resizable-fit .p-resizable-column:last-child .p-column-resizer {\n    display: none;\n}\n.p-datatable .p-column-resizer {\n    display: block;\n    position: absolute !important;\n    top: 0;\n    right: 0;\n    margin: 0;\n    width: 0.5rem;\n    height: 100%;\n    padding: 0px;\n    cursor: col-resize;\n    border: 1px solid transparent;\n}\n.p-datatable .p-column-header-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-datatable .p-column-resizer-helper {\n    width: 1px;\n    position: absolute;\n    z-index: 10;\n    display: none;\n}\n.p-datatable .p-row-editor-init,\n.p-datatable .p-row-editor-save,\n.p-datatable .p-row-editor-cancel {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Expand */\n.p-datatable .p-row-toggler {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Reorder */\n.p-datatable-reorder-indicator-up,\n.p-datatable-reorder-indicator-down {\n    position: absolute;\n    display: none;\n}\n.p-reorderable-column,\n.p-datatable-reorderablerow-handle {\n    cursor: move;\n}\n\n/* Loader */\n.p-datatable .p-datatable-loading-overlay {\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    z-index: 2;\n}\n\n/* Filter */\n.p-column-filter-row {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    width: 100%;\n}\n.p-column-filter-menu {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    margin-left: auto;\n}\n.p-column-filter-row .p-column-filter-element {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    width: 1%;\n}\n.p-column-filter-menu-button,\n.p-column-filter-clear-button {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    cursor: pointer;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-column-filter-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-column-filter-row-items {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-column-filter-row-item {\n    cursor: pointer;\n}\n.p-column-filter-add-button,\n.p-column-filter-remove-button {\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-column-filter-add-button .p-button-label,\n.p-column-filter-remove-button .p-button-label {\n    -webkit-box-flex: 0;\n        -ms-flex-positive: 0;\n            flex-grow: 0;\n}\n.p-column-filter-buttonbar {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n            justify-content: space-between;\n}\n.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {\n    width: auto;\n}\n\n/* Responsive */\n.p-datatable .p-datatable-tbody > tr > td > .p-column-title {\n    display: none;\n}\n\n/* VirtualScroller */\n.p-datatable .p-virtualscroller-loading {\n    -webkit-transform: none !important;\n            transform: none !important;\n    min-height: 0;\n    position: sticky;\n    top: 0;\n    left: 0;\n}\n";
+var css_248z = "\n.p-datatable {\n    position: relative;\n}\n.p-datatable table {\n    border-collapse: collapse;\n    min-width: 100%;\n    table-layout: fixed;\n}\n.p-datatable .p-sortable-column {\n    cursor: pointer;\n    user-select: none;\n}\n.p-datatable .p-sortable-column .p-column-title,\n.p-datatable .p-sortable-column .p-sortable-column-icon,\n.p-datatable .p-sortable-column .p-sortable-column-badge {\n    vertical-align: middle;\n}\n.p-datatable .p-sortable-column .p-sortable-column-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-datatable-responsive-scroll > .p-datatable-wrapper {\n    overflow-x: auto;\n}\n.p-datatable-responsive-scroll > .p-datatable-wrapper > table,\n.p-datatable-auto-layout > .p-datatable-wrapper > table {\n    table-layout: auto;\n}\n.p-datatable-hoverable-rows .p-selectable-row {\n    cursor: pointer;\n}\n\n/* Scrollable */\n.p-datatable-scrollable .p-datatable-wrapper {\n    position: relative;\n    overflow: auto;\n}\n.p-datatable-scrollable .p-datatable-thead,\n.p-datatable-scrollable .p-datatable-tbody,\n.p-datatable-scrollable .p-datatable-tfoot {\n    display: block;\n}\n.p-datatable-scrollable .p-datatable-thead > tr,\n.p-datatable-scrollable .p-datatable-tbody > tr,\n.p-datatable-scrollable .p-datatable-tfoot > tr {\n    display: flex;\n    flex-wrap: nowrap;\n    width: 100%;\n}\n.p-datatable-scrollable .p-datatable-thead > tr > th,\n.p-datatable-scrollable .p-datatable-tbody > tr > td,\n.p-datatable-scrollable .p-datatable-tfoot > tr > td {\n    display: flex;\n    flex: 1 1 0;\n    align-items: center;\n}\n.p-datatable-scrollable .p-datatable-thead {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n}\n.p-datatable-scrollable .p-datatable-frozen-tbody {\n    position: sticky;\n    z-index: 1;\n}\n.p-datatable-scrollable .p-datatable-tfoot {\n    position: sticky;\n    bottom: 0;\n    z-index: 1;\n}\n.p-datatable-scrollable .p-frozen-column {\n    position: sticky;\n    background: inherit;\n}\n.p-datatable-scrollable th.p-frozen-column {\n    z-index: 1;\n}\n.p-datatable-scrollable-both .p-datatable-thead > tr > th,\n.p-datatable-scrollable-both .p-datatable-tbody > tr > td,\n.p-datatable-scrollable-both .p-datatable-tfoot > tr > td,\n.p-datatable-scrollable-horizontal .p-datatable-thead > tr > th .p-datatable-scrollable-horizontal .p-datatable-tbody > tr > td,\n.p-datatable-scrollable-horizontal .p-datatable-tfoot > tr > td {\n    flex: 1 0 auto;\n}\n.p-datatable-flex-scrollable {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n.p-datatable-flex-scrollable .p-datatable-wrapper {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    height: 100%;\n}\n.p-datatable-scrollable .p-rowgroup-header {\n    position: sticky;\n    z-index: 1;\n}\n.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead,\n.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot {\n    display: table;\n    border-collapse: collapse;\n    width: 100%;\n    table-layout: fixed;\n}\n.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead > tr,\n.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot > tr {\n    display: table-row;\n}\n.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead > tr > th,\n.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot > tr > td {\n    display: table-cell;\n}\n.p-datatable-scrollable .p-virtualscroller > .p-datatable-table {\n    display: inline-block; /* For Safari */\n}\n\n/* Resizable */\n.p-datatable-resizable > .p-datatable-wrapper {\n    overflow-x: auto;\n}\n.p-datatable-resizable .p-datatable-thead > tr > th,\n.p-datatable-resizable .p-datatable-tfoot > tr > td,\n.p-datatable-resizable .p-datatable-tbody > tr > td {\n    overflow: hidden;\n    white-space: nowrap;\n}\n.p-datatable-resizable .p-resizable-column:not(.p-frozen-column) {\n    background-clip: padding-box;\n    position: relative;\n}\n.p-datatable-resizable-fit .p-resizable-column:last-child .p-column-resizer {\n    display: none;\n}\n.p-datatable .p-column-resizer {\n    display: block;\n    position: absolute !important;\n    top: 0;\n    right: 0;\n    margin: 0;\n    width: 0.5rem;\n    height: 100%;\n    padding: 0px;\n    cursor: col-resize;\n    border: 1px solid transparent;\n}\n.p-datatable .p-column-header-content {\n    display: flex;\n    align-items: center;\n}\n.p-datatable .p-column-resizer-helper {\n    width: 1px;\n    position: absolute;\n    z-index: 10;\n    display: none;\n}\n.p-datatable .p-row-editor-init,\n.p-datatable .p-row-editor-save,\n.p-datatable .p-row-editor-cancel {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Expand */\n.p-datatable .p-row-toggler {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Reorder */\n.p-datatable-reorder-indicator-up,\n.p-datatable-reorder-indicator-down {\n    position: absolute;\n    display: none;\n}\n.p-reorderable-column,\n.p-datatable-reorderablerow-handle {\n    cursor: move;\n}\n\n/* Loader */\n.p-datatable .p-datatable-loading-overlay {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n}\n\n/* Filter */\n.p-column-filter-row {\n    display: flex;\n    align-items: center;\n    width: 100%;\n}\n.p-column-filter-menu {\n    display: inline-flex;\n    margin-left: auto;\n}\n.p-column-filter-row .p-column-filter-element {\n    flex: 1 1 auto;\n    width: 1%;\n}\n.p-column-filter-menu-button,\n.p-column-filter-clear-button {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-column-filter-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-column-filter-row-items {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-column-filter-row-item {\n    cursor: pointer;\n}\n.p-column-filter-add-button,\n.p-column-filter-remove-button {\n    justify-content: center;\n}\n.p-column-filter-add-button .p-button-label,\n.p-column-filter-remove-button .p-button-label {\n    flex-grow: 0;\n}\n.p-column-filter-buttonbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {\n    width: auto;\n}\n\n/* Responsive */\n.p-datatable .p-datatable-tbody > tr > td > .p-column-title {\n    display: none;\n}\n\n/* VirtualScroller */\n.p-datatable .p-virtualscroller-loading {\n    transform: none !important;\n    min-height: 0;\n    position: sticky;\n    top: 0;\n    left: 0;\n}\n";
 styleInject(css_248z);
 
 script.render = render;