vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3965 - For DataTable & Column & ColumnGroup & Row

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-06-02 09:52:13 +03:00
parent ea9062ae3a
commit 2669fd5925
16 changed files with 1127 additions and 920 deletions
Download patch file Download diff file Expand all files Collapse all files

626
components/lib/datatable/DataTable.vue
View file

@ -1,15 +1,15 @@
<template>
<div :class="containerClass" data-scrollselectors=".p-datatable-wrapper" v-bind="ptm('root')">
<div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" v-bind="ptm('root')" data-pc-name="datatable">
<slot></slot>
<div v-if="loading" class="p-datatable-loading-overlay p-component-overlay" v-bind="ptm('loadingOverlay')">
<div v-if="loading" :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
<slot v-if="$slots.loading" name="loading"></slot>
<template v-else>
<component v-if="$slots.loadingicon" :is="$slots.loadingicon" class="p-datatable-loading-icon" />
<i v-else-if="loadingIcon" :class="['p-datatable-loading-icon pi-spin', loadingIcon]" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else spin class="p-datatable-loading-icon" v-bind="ptm('loadingIcon')" />
<component v-if="$slots.loadingicon" :is="$slots.loadingicon" :class="cx('loadingIcon')" />
<i v-else-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else spin :class="cx('loadingIcon')" v-bind="ptm('loadingIcon')" />
</template>
</div>
<div v-if="$slots.header" class="p-datatable-header" v-bind="ptm('header')">
<div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
<slot name="header"></slot>
</div>
<DTPaginator
@ -21,10 +21,11 @@
:template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate"
class="p-paginator-top"
:class="cx('paginator')"
@page="onPage($event)"
:alwaysShow="alwaysShowPaginator"
:pt="ptm('paginator')"
data-pc-section="paginator"
>
<template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot>
@ -45,7 +46,7 @@
<slot name="paginatorlastpagelinkicon"></slot>
</template>
</DTPaginator>
<div class="p-datatable-wrapper" :style="{ maxHeight: virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')">
<div :class="cx('wrapper')" :style="{ maxHeight: virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')">
<DTVirtualScroller
ref="virtualScroller"
v-bind="virtualScrollerOptions"
@ -59,9 +60,10 @@
autoSize
:showSpacer="false"
:pt="ptm('virtualScroller')"
data-pc-section="virtualscroller"
>
<template #content="slotProps">
<table ref="table" role="table" :class="tableStyleClass" :style="[tableStyle, slotProps.spacerStyle]" v-bind="{ ...tableProps, ...ptm('table') }">
<table ref="table" role="table" :class="[cx('table'), tableClass]" :style="[tableStyle, slotProps.spacerStyle]" v-bind="{ ...tableProps, ...ptm('table') }">
<DTTableHeader
:columnGroup="headerColumnGroup"
:columns="slotProps.columns"
@ -98,7 +100,6 @@
ref="frozenBodyRef"
:value="frozenValue"
:frozenRow="true"
class="p-datatable-frozen-tbody"
:columns="slotProps.columns"
:first="d_first"
:dataKey="dataKey"
@ -208,8 +209,8 @@
/>
<tbody
v-if="hasSpacerStyle(slotProps.spacerStyle)"
:class="cx('virtualScrollerSpacer')"
:style="{ height: `calc(${slotProps.spacerStyle.height} - ${slotProps.rows.length * slotProps.itemSize}px)` }"
class="p-datatable-virtualscroller-spacer"
v-bind="ptm('virtualScrollerSpacer')"
></tbody>
<DTTableFooter :columnGroup="footerColumnGroup" :columns="slotProps.columns" :pt="pt" />
@ -217,7 +218,7 @@
</template>
</DTVirtualScroller>
</div>
<div v-if="$slots.footer" class="p-datatable-footer" v-bind="ptm('footer')">
<div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
<slot name="footer"></slot>
</div>
<DTPaginator
@ -229,10 +230,11 @@
:template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate"
class="p-paginator-bottom"
:class="cx('paginator')"
@page="onPage($event)"
:alwaysShow="alwaysShowPaginator"
:pt="ptm('paginator')"
data-pc-section="paginator"
>
<template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot>
@ -253,11 +255,11 @@
<slot name="paginatorlastpagelinkicon"></slot>
</template>
</DTPaginator>
<div ref="resizeHelper" class="p-column-resizer-helper" style="display: none" v-bind="ptm('resizeHelper')"></div>
<span v-if="reorderableColumns" ref="reorderIndicatorUp" class="p-datatable-reorder-indicator-up" style="position: absolute; display: none" v-bind="ptm('reorderIndicatorUp')">
<div ref="resizeHelper" :class="cx('resizeHelper')" style="display: none" v-bind="ptm('resizeHelper')"></div>
<span v-if="reorderableColumns" ref="reorderIndicatorUp" :class="cx('reorderIndicatorUp')" style="position: absolute; display: none" v-bind="ptm('reorderIndicatorUp')">
<component :is="$slots.reorderindicatorupicon || 'ArrowDownIcon'" />
</span>
<span v-if="reorderableColumns" ref="reorderIndicatorDown" class="p-datatable-reorder-indicator-down" style="position: absolute; display: none" v-bind="ptm('reorderIndicatorDown')">
<span v-if="reorderableColumns" ref="reorderIndicatorDown" :class="cx('reorderIndicatorDown')" style="position: absolute; display: none" v-bind="ptm('reorderIndicatorDown')">
<component :is="$slots.reorderindicatordownicon || 'ArrowUpIcon'" />
</span>
</div>
@ -265,20 +267,20 @@
<script>
import { FilterMatchMode, FilterOperator, FilterService } from 'primevue/api';
import BaseComponent from 'primevue/basecomponent';
import ArrowDownIcon from 'primevue/icons/arrowdown';
import ArrowUpIcon from 'primevue/icons/arrowup';
import SpinnerIcon from 'primevue/icons/spinner';
import Paginator from 'primevue/paginator';
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
import VirtualScroller from 'primevue/virtualscroller';
import BaseDataTable from './BaseDataTable.vue';
import TableBody from './TableBody.vue';
import TableFooter from './TableFooter.vue';
import TableHeader from './TableHeader.vue';
export default {
name: 'DataTable',
extends: BaseComponent,
extends: BaseDataTable,
emits: [
'value-change',
'update:first',
@ -319,264 +321,6 @@ export default {
'row-edit-save',
'row-edit-cancel'
],
props: {
value: {
type: Array,
default: null
},
dataKey: {
type: [String, Function],
default: null
},
rows: {
type: Number,
default: 0
},
first: {
type: Number,
default: 0
},
totalRecords: {
type: Number,
default: 0
},
paginator: {
type: Boolean,
default: false
},
paginatorPosition: {
type: String,
default: 'bottom'
},
alwaysShowPaginator: {
type: Boolean,
default: true
},
paginatorTemplate: {
type: [Object, String],
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
},
pageLinkSize: {
type: Number,
default: 5
},
rowsPerPageOptions: {
type: Array,
default: null
},
currentPageReportTemplate: {
type: String,
default: '({currentPage} of {totalPages})'
},
lazy: {
type: Boolean,
default: false
},
loading: {
type: Boolean,
default: false
},
loadingIcon: {
type: String,
default: undefined
},
sortField: {
type: [String, Function],
default: null
},
sortOrder: {
type: Number,
default: null
},
defaultSortOrder: {
type: Number,
default: 1
},
multiSortMeta: {
type: Array,
default: null
},
sortMode: {
type: String,
default: 'single'
},
removableSort: {
type: Boolean,
default: false
},
filters: {
type: Object,
default: null
},
filterDisplay: {
type: String,
default: null
},
globalFilterFields: {
type: Array,
default: null
},
filterLocale: {
type: String,
default: undefined
},
selection: {
type: [Array, Object],
default: null
},
selectionMode: {
type: String,
default: null
},
compareSelectionBy: {
type: String,
default: 'deepEquals'
},
metaKeySelection: {
type: Boolean,
default: true
},
contextMenu: {
type: Boolean,
default: false
},
contextMenuSelection: {
type: Object,
default: null
},
selectAll: {
type: Boolean,
default: null
},
rowHover: {
type: Boolean,
default: false
},
csvSeparator: {
type: String,
default: ','
},
exportFilename: {
type: String,
default: 'download'
},
exportFunction: {
type: Function,
default: null
},
resizableColumns: {
type: Boolean,
default: false
},
columnResizeMode: {
type: String,
default: 'fit'
},
reorderableColumns: {
type: Boolean,
default: false
},
expandedRows: {
type: Array,
default: null
},
expandedRowIcon: {
type: String,
default: undefined
},
collapsedRowIcon: {
type: String,
default: undefined
},
rowGroupMode: {
type: String,
default: null
},
groupRowsBy: {
type: [Array, String, Function],
default: null
},
expandableRowGroups: {
type: Boolean,
default: false
},
expandedRowGroups: {
type: Array,
default: null
},
stateStorage: {
type: String,
default: 'session'
},
stateKey: {
type: String,
default: null
},
editMode: {
type: String,
default: null
},
editingRows: {
type: Array,
default: null
},
rowClass: {
type: null,
default: null
},
rowStyle: {
type: null,
default: null
},
scrollable: {
type: Boolean,
default: false
},
virtualScrollerOptions: {
type: Object,
default: null
},
scrollHeight: {
type: String,
default: null
},
frozenValue: {
type: Array,
default: null
},
responsiveLayout: {
type: String,
default: 'scroll'
},
breakpoint: {
type: String,
default: '960px'
},
showGridlines: {
type: Boolean,
default: false
},
stripedRows: {
type: Boolean,
default: false
},
tableStyle: {
type: null,
default: null
},
tableClass: {
type: String,
default: null
},
tableProps: {
type: null,
default: null
},
filterInputProps: {
type: null,
default: null
}
},
data() {
return {
d_first: this.first,
@ -714,11 +458,11 @@ export default {
const columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
if (
DomHandler.hasClass(targetNode, 'p-sortable-column') ||
DomHandler.hasClass(targetNode, 'p-column-title') ||
DomHandler.hasClass(targetNode, 'p-column-header-content') ||
DomHandler.hasClass(targetNode, 'p-sortable-column-icon') ||
DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')
DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headerTitle' ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headerContent' ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sortIcon' ||
DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sortIcon'
) {
DomHandler.clearSelection();
@ -930,7 +674,7 @@ export default {
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"]');
const focusedItem = DomHandler.findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
if (DomHandler.isClickable(event.target)) {
return;
@ -1010,7 +754,7 @@ export default {
if (focusedItem) {
focusedItem.tabIndex = '-1';
DomHandler.find(body, 'tr.p-selectable-row')[index].tabIndex = '0';
DomHandler.find(body, 'tr[data-p-selectable-row="true"]')[index].tabIndex = '0';
}
},
onRowDblClick(e) {
@ -1166,11 +910,11 @@ export default {
},
onTabKey(event, rowIndex) {
const body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
const rows = DomHandler.find(body, 'tr.p-selectable-row');
const rows = DomHandler.find(body, 'tr[data-p-selectable-row="true"]');
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"]');
const firstSelectedRow = DomHandler.findSingle(body, 'tr[data-p-highlight="true"]');
const focusedItem = DomHandler.findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
if (firstSelectedRow) {
firstSelectedRow.tabIndex = '0';
@ -1185,7 +929,7 @@ export default {
let nextRow = row.nextElementSibling;
if (nextRow) {
if (DomHandler.hasClass(nextRow, 'p-selectable-row')) return nextRow;
if (DomHandler.getAttribute(nextRow, 'data-p-selectable-row') === true) return nextRow;
else return this.findNextSelectableRow(nextRow);
} else {
return null;
@ -1195,19 +939,19 @@ export default {
let prevRow = row.previousElementSibling;
if (prevRow) {
if (DomHandler.hasClass(prevRow, 'p-selectable-row')) return prevRow;
if (DomHandler.getAttribute(prevRow, 'data-p-selectable-row') === true) return prevRow;
else return this.findPrevSelectableRow(prevRow);
} else {
return null;
}
},
findFirstSelectableRow() {
const firstRow = DomHandler.findSingle(this.$refs.table, '.p-selectable-row');
const firstRow = DomHandler.findSingle(this.$refs.table, 'tr[data-p-selectable-row="true"]');
return firstRow;
},
findLastSelectableRow() {
const rows = DomHandler.find(this.$refs.table, '.p-selectable-row');
const rows = DomHandler.find(this.$refs.table, 'tr[data-p-selectable-row="true"]');
return rows ? rows[rows.length - 1] : null;
},
@ -1511,7 +1255,7 @@ export default {
resizeTableCells(newColumnWidth, nextColumnWidth) {
let colIndex = DomHandler.index(this.resizeColumnElement);
let widths = [];
let headers = DomHandler.find(this.$refs.table, '.p-datatable-thead > tr > th');
let headers = DomHandler.find(this.$refs.table, 'thead[data-pc-section="thead"] > tr > th');
headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
@ -1519,16 +1263,16 @@ export default {
this.createStyleElement();
let innerHTML = '';
let selector = `.p-datatable[${this.attributeSelector}] > .p-datatable-wrapper ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
let selector = `[data-pc-name="datatable"][${this.attributeSelector}] > [data-pc-section="wrapper"] ${this.virtualScrollerDisabled ? '' : '> [data-pc-section="virtualscroller"]'} > table[data-pc-section="table"]`;
widths.forEach((width, index) => {
let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
let style = `width: ${colWidth}px !important; max-width: ${colWidth}px !important`;
innerHTML += `
${selector} > .p-datatable-thead > tr > th:nth-child(${index + 1}),
${selector} > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
${selector} > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
${selector} > thead[data-pc-section="thead"] > tr > th:nth-child(${index + 1}),
${selector} > tbody[data-pc-section="tbody"] > tr > td:nth-child(${index + 1}),
${selector} > tfoot[data-pc-section="tfoot"] > tr > td:nth-child(${index + 1}) {
${style}
}
`;
@ -1570,7 +1314,7 @@ export default {
const column = e.column;
if (this.reorderableColumns && this.columnProp(column, 'reorderableColumn') !== false) {
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-column-resizer')) event.currentTarget.draggable = false;
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.getAttribute(event.target, '[data-pc-section="columnresizer"]')) event.currentTarget.draggable = false;
else event.currentTarget.draggable = true;
}
},
@ -1682,7 +1426,7 @@ export default {
return null;
},
onRowMouseDown(event) {
if (DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) event.currentTarget.draggable = true;
if (DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon') event.currentTarget.draggable = true;
else event.currentTarget.draggable = false;
},
onRowDragStart(e) {
@ -1937,7 +1681,7 @@ export default {
},
saveColumnWidths(state) {
let widths = [];
let headers = DomHandler.find(this.$el, '.p-datatable-thead > tr > th');
let headers = DomHandler.find(this.$el, 'thead[data-pc-section="thead"] > tr > th');
headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
state.columnWidths = widths.join(',');
@ -1960,15 +1704,15 @@ export default {
this.createStyleElement();
let innerHTML = '';
let selector = `.p-datatable[${this.attributeSelector}] > .p-datatable-wrapper ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
let selector = `[data-pc-name="datatable"][${this.attributeSelector}] > [data-pc-section="wrapper"] ${this.virtualScrollerDisabled ? '' : '> [data-pc-section="virtualscroller"]'} > table[data-pc-section="table"]`;
widths.forEach((width, index) => {
let style = `width: ${width}px !important; max-width: ${width}px !important`;
innerHTML += `
${selector} > .p-datatable-thead > tr > th:nth-child(${index + 1}),
${selector} > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
${selector} > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
${selector} > thead[data-pc-section="thead"] > tr > th:nth-child(${index + 1}),
${selector} > tbody[data-pc-section="tbody"] > tr > td:nth-child(${index + 1}),
${selector} > tfoot[data-pc-section="tfoot"] > tr > td:nth-child(${index + 1}) {
${style}
}
`;
@ -2177,35 +1921,6 @@ export default {
}
},
computed: {
containerClass() {
return [
'p-datatable p-component',
{
'p-datatable-hoverable-rows': this.rowHover || this.selectionMode,
'p-datatable-resizable': this.resizableColumns,
'p-datatable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
'p-datatable-scrollable': this.scrollable,
'p-datatable-flex-scrollable': this.scrollable && this.scrollHeight === 'flex',
'p-datatable-responsive-stack': this.responsiveLayout === 'stack',
'p-datatable-responsive-scroll': this.responsiveLayout === 'scroll',
'p-datatable-striped': this.stripedRows,
'p-datatable-gridlines': this.showGridlines,
'p-datatable-grouped-header': this.headerColumnGroup != null,
'p-datatable-grouped-footer': this.footerColumnGroup != null
}
];
},
tableStyleClass() {
return [
'p-datatable-table',
{
'p-datatable-scrollable-table': this.scrollable,
'p-datatable-resizable-table': this.resizableColumns,
'p-datatable-resizable-table-fit': this.resizableColumns && this.columnResizeMode === 'fit'
},
this.tableClass
];
},
columns() {
let children = this.getChildren();
@ -2332,252 +2047,3 @@ export default {
}
};
</script>
<style>
.p-datatable {
position: relative;
}
.p-datatable > .p-datatable-wrapper {
overflow: auto;
}
.p-datatable-table {
border-spacing: 0px;
width: 100%;
}
.p-datatable .p-sortable-column {
cursor: pointer;
user-select: none;
}
.p-datatable .p-sortable-column .p-column-title,
.p-datatable .p-sortable-column .p-sortable-column-icon,
.p-datatable .p-sortable-column .p-sortable-column-badge {
vertical-align: middle;
}
.p-datatable .p-sortable-column .p-sortable-column-badge {
display: inline-flex;
align-items: center;
justify-content: center;
}
.p-datatable-hoverable-rows .p-selectable-row {
cursor: pointer;
}
/* Scrollable */
.p-datatable-scrollable > .p-datatable-wrapper {
position: relative;
}
.p-datatable-scrollable-table > .p-datatable-thead {
position: sticky;
top: 0;
z-index: 1;
}
.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
position: sticky;
z-index: 1;
}
.p-datatable-scrollable-table > .p-datatable-tfoot {
position: sticky;
bottom: 0;
z-index: 1;
}
.p-datatable-scrollable .p-frozen-column {
position: sticky;
background: inherit;
}
.p-datatable-scrollable th.p-frozen-column {
z-index: 1;
}
.p-datatable-flex-scrollable {
display: flex;
flex-direction: column;
height: 100%;
}
.p-datatable-flex-scrollable > .p-datatable-wrapper {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
.p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {
position: sticky;
z-index: 1;
}
/* Resizable */
.p-datatable-resizable-table > .p-datatable-thead > tr > th,
.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
.p-datatable-resizable-table > .p-datatable-tbody > tr > td {
overflow: hidden;
white-space: nowrap;
}
.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {
background-clip: padding-box;
position: relative;
}
.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {
display: none;
}
.p-datatable .p-column-resizer {
display: block;
position: absolute !important;
top: 0;
right: 0;
margin: 0;
width: 0.5rem;
height: 100%;
padding: 0px;
cursor: col-resize;
border: 1px solid transparent;
}
.p-datatable .p-column-header-content {
display: flex;
align-items: center;
}
.p-datatable .p-column-resizer-helper {
width: 1px;
position: absolute;
z-index: 10;
display: none;
}
.p-datatable .p-row-editor-init,
.p-datatable .p-row-editor-save,
.p-datatable .p-row-editor-cancel {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Expand */
.p-datatable .p-row-toggler {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Reorder */
.p-datatable-reorder-indicator-up,
.p-datatable-reorder-indicator-down {
position: absolute;
display: none;
}
.p-reorderable-column,
.p-datatable-reorderablerow-handle {
cursor: move;
}
/* Loader */
.p-datatable .p-datatable-loading-overlay {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
/* Filter */
.p-column-filter-row {
display: flex;
align-items: center;
width: 100%;
}
.p-column-filter-menu {
display: inline-flex;
margin-left: auto;
}
.p-column-filter-row .p-column-filter-element {
flex: 1 1 auto;
width: 1%;
}
.p-column-filter-menu-button,
.p-column-filter-clear-button {
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-column-filter-overlay {
position: absolute;
top: 0;
left: 0;
}
.p-column-filter-row-items {
margin: 0;
padding: 0;
list-style: none;
}
.p-column-filter-row-item {
cursor: pointer;
}
.p-column-filter-add-button,
.p-column-filter-remove-button {
justify-content: center;
}
.p-column-filter-add-button .p-button-label,
.p-column-filter-remove-button .p-button-label {
flex-grow: 0;
}
.p-column-filter-buttonbar {
display: flex;
align-items: center;
justify-content: space-between;
}
.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {
width: auto;
}
/* Responsive */
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
display: none;
}
/* VirtualScroller */
.p-datatable-virtualscroller-spacer {
display: flex;
}
.p-datatable .p-virtualscroller .p-virtualscroller-loading {
transform: none !important;
min-height: 0;
position: sticky;
top: 0;
left: 0;
}
</style>