Refactor #5592 - For DataTable
tugcekucukoglu
parent
3596026387
commit
c2d1c57edf
|
|
@ -139,13 +139,13 @@ export interface ColumnPassThroughOptions {
|
|||
*/
|
||||
columnResizer?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the header content's DOM element.
|
||||
* Used to pass attributes to the column header content's DOM element.
|
||||
*/
|
||||
headerContent?: ColumnPassThroughOptionType;
|
||||
columnHeaderContent?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the header title's DOM element.
|
||||
*/
|
||||
headerTitle?: ColumnPassThroughOptionType;
|
||||
columnTitle?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the sort's DOM element.
|
||||
*/
|
||||
|
|
@ -165,23 +165,23 @@ export interface ColumnPassThroughOptions {
|
|||
/**
|
||||
* Used to pass attributes to the column filter's DOM element.
|
||||
*/
|
||||
columnFilter?: ColumnPassThroughOptionType;
|
||||
filter?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the filter input's DOM element.
|
||||
* Used to pass attributes to the filter element container's DOM element.
|
||||
*/
|
||||
filterInput?: ColumnPassThroughOptionType;
|
||||
filterElementContainer?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the filter menu button's DOM element.
|
||||
* Used to pass attributes to the column filter button's DOM element.
|
||||
*/
|
||||
filterMenuButton?: ColumnPassThroughOptionType;
|
||||
columnFilterButton?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the filter menu icon's DOM element.
|
||||
*/
|
||||
filterMenuIcon?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the header filter clear button's DOM element.
|
||||
* Used to pass attributes to the column filter clear button's DOM element.
|
||||
*/
|
||||
headerFilterClearButton?: ColumnPassThroughOptionType;
|
||||
columnFilterClearButton?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the filter clear icon's DOM element.
|
||||
*/
|
||||
|
|
@ -191,17 +191,17 @@ export interface ColumnPassThroughOptions {
|
|||
*/
|
||||
filterOverlay?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the filter row items' DOM element.
|
||||
* Used to pass attributes to the filter constraint list's DOM element.
|
||||
*/
|
||||
filterRowItems?: ColumnPassThroughOptionType;
|
||||
filterConstraintList?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the filter row item's DOM element.
|
||||
* Used to pass attributes to the filter constraint's DOM element.
|
||||
*/
|
||||
filterRowItem?: ColumnPassThroughOptionType;
|
||||
filterConstraint?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the filter separator's DOM element.
|
||||
* Used to pass attributes to the filter constraint separator's DOM element.
|
||||
*/
|
||||
filterSeparator?: ColumnPassThroughOptionType;
|
||||
filterConstraintSeparator?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the filter operator's DOM element.
|
||||
*/
|
||||
|
|
@ -212,18 +212,18 @@ export interface ColumnPassThroughOptions {
|
|||
*/
|
||||
filterOperatorDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the filter constraints' DOM element.
|
||||
* Used to pass attributes to the filter rule list' DOM element.
|
||||
*/
|
||||
filterConstraints?: ColumnPassThroughOptionType;
|
||||
filterRuleList?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the filter constraint's DOM element.
|
||||
* Used to pass attributes to the filter rule's DOM element.
|
||||
*/
|
||||
filterConstraint?: ColumnPassThroughOptionType;
|
||||
filterRule?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the Select component.
|
||||
* @see {@link SelectPassThroughOptionType}
|
||||
*/
|
||||
filterMatchModeDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
|
||||
filterConstraintDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the filter remove button container's DOM element.
|
||||
*/
|
||||
|
|
@ -232,16 +232,16 @@ export interface ColumnPassThroughOptions {
|
|||
* Used to pass attributes to the Button component.
|
||||
* @see {@link ButtonPassThroughOptions}
|
||||
*/
|
||||
filterRemoveButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
|
||||
filterRemoveRuleButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the filter add rule's DOM element.
|
||||
* Used to pass attributes to the filter add button container's DOM element.
|
||||
*/
|
||||
filterAddRule?: ColumnPassThroughOptionType;
|
||||
filterAddButtonContainer?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the Button component.
|
||||
* @see {@link ButtonPassThroughOptions}
|
||||
*/
|
||||
filterAddRuleButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
|
||||
filterAddButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the filter buttonbar's DOM element.
|
||||
*/
|
||||
|
|
@ -256,22 +256,22 @@ export interface ColumnPassThroughOptions {
|
|||
* @see {@link ButtonPassThroughOptions}
|
||||
*/
|
||||
filterApplyButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the row toggler button's DOM element.
|
||||
*/
|
||||
rowToggleButton?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the row toggler icon's DOM element.
|
||||
*/
|
||||
rowToggleIcon?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the body cell's DOM element.
|
||||
*/
|
||||
bodyCell?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the rowgroup toggler's DOM element.
|
||||
* Used to pass attributes to the reorderable row handle's DOM element.
|
||||
*/
|
||||
rowGroupToggler?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the rowgroup toggler icon's DOM element.
|
||||
*/
|
||||
rowGroupTogglerIcon?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the column title's DOM element.
|
||||
*/
|
||||
columnTitle?: ColumnPassThroughOptionType;
|
||||
reorderableRowHandle?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the radiobutton's DOM element.
|
||||
*/
|
||||
|
|
@ -280,38 +280,18 @@ export interface ColumnPassThroughOptions {
|
|||
* Used to pass attributes to the checkbox's DOM element.
|
||||
*/
|
||||
rowCheckbox?: CheckboxPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the rowtoggler's DOM element.
|
||||
*/
|
||||
rowToggler?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the rowtoggler icon's DOM element.
|
||||
*/
|
||||
rowTogglerIcon?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the row editor init button's DOM element.
|
||||
*/
|
||||
rowEditorInitButton?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the row editor init icon's DOM element.
|
||||
*/
|
||||
rowEditorInitIcon?: ColumnPassThroughOptionType;
|
||||
rowEditorInit?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the row editor save button's DOM element.
|
||||
*/
|
||||
rowEditorSaveButton?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the row editor save icon's DOM element.
|
||||
*/
|
||||
rowEditorSaveIcon?: ColumnPassThroughOptionType;
|
||||
rowEditorSave?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the row editor cancel button's DOM element.
|
||||
*/
|
||||
rowEditorCancelButton?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the row editor cancel icon's DOM element.
|
||||
*/
|
||||
rowEditorCancelIcon?: ColumnPassThroughOptionType;
|
||||
rowEditorCancel?: ColumnPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the footer cell's DOM element.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -57,9 +57,9 @@
|
|||
/>
|
||||
</template>
|
||||
<template v-else-if="columnProp('rowReorder')">
|
||||
<component v-if="column.children && column.children.rowreordericon" :is="column.children.rowreordericon" :class="cx('rowReorderIcon')" />
|
||||
<i v-else-if="columnProp('rowReorderIcon')" :class="[cx('rowReorderIcon'), columnProp('rowReorderIcon')]" v-bind="getColumnPT('rowReorderIcon')" />
|
||||
<BarsIcon v-else :class="cx('rowReorderIcon')" v-bind="getColumnPT('rowReorderIcon')" />
|
||||
<component v-if="column.children && column.children.rowreordericon" :is="column.children.rowreordericon" :class="cx('reorderableRowHandle')" />
|
||||
<i v-else-if="columnProp('rowReorderIcon')" :class="[cx('reorderableRowHandle'), columnProp('rowReorderIcon')]" v-bind="getColumnPT('reorderableRowHandle')" />
|
||||
<BarsIcon v-else :class="cx('reorderableRowHandle')" v-bind="getColumnPT('reorderableRowHandle')" />
|
||||
</template>
|
||||
<template v-else-if="columnProp('expander')">
|
||||
<button
|
||||
|
|
@ -85,41 +85,41 @@
|
|||
<template v-else-if="editMode === 'row' && columnProp('rowEditor')">
|
||||
<Button
|
||||
v-if="!d_editing"
|
||||
:class="cx('rowEditorInitButton')"
|
||||
:class="cx('rowEditorInit')"
|
||||
:aria-label="initButtonAriaLabel"
|
||||
:unstyled="unstyled"
|
||||
@click="onRowEditInit"
|
||||
v-bind="{ ...getColumnPT('rowEditorInitButton'), ...editButtonProps.init }"
|
||||
v-bind="{ ...getColumnPT('rowEditorInit'), ...editButtonProps.init }"
|
||||
data-pc-group-section="rowactionbutton"
|
||||
>
|
||||
<template #icon="slotProps">
|
||||
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="[cx('rowEditorInitIcon'), slotProps.class]" v-bind="getColumnPT('rowEditorInitIcon')" />
|
||||
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorInit')['icon']" />
|
||||
</template>
|
||||
</Button>
|
||||
<Button
|
||||
v-if="d_editing"
|
||||
:class="cx('rowEditorSaveButton')"
|
||||
:class="cx('rowEditorSave')"
|
||||
:aria-label="saveButtonAriaLabel"
|
||||
:unstyled="unstyled"
|
||||
@click="onRowEditSave"
|
||||
v-bind="{ ...getColumnPT('rowEditorSaveButton'), ...editButtonProps.save }"
|
||||
v-bind="{ ...getColumnPT('rowEditorSave'), ...editButtonProps.save }"
|
||||
data-pc-group-section="rowactionbutton"
|
||||
>
|
||||
<template #icon="slotProps">
|
||||
<component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="[cx('rowEditorSaveIcon'), slotProps.class]" v-bind="getColumnPT('rowEditorSaveIcon')" />
|
||||
<component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorSave')['icon']" />
|
||||
</template>
|
||||
</Button>
|
||||
<Button
|
||||
v-if="d_editing"
|
||||
:class="cx('rowEditorCancelButton')"
|
||||
:class="cx('rowEditorCancel')"
|
||||
:aria-label="cancelButtonAriaLabel"
|
||||
:unstyled="unstyled"
|
||||
@click="onRowEditCancel"
|
||||
v-bind="{ ...getColumnPT('rowEditorCancelButton'), ...editButtonProps.cancel }"
|
||||
v-bind="{ ...getColumnPT('rowEditorCancel'), ...editButtonProps.cancel }"
|
||||
data-pc-group-section="rowactionbutton"
|
||||
>
|
||||
<template #icon="slotProps">
|
||||
<component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="[cx('rowEditorCancelIcon'), slotProps.class]" v-bind="getColumnPT('rowEditorCancelIcon')" />
|
||||
<component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorCancel')['icon']" />
|
||||
</template>
|
||||
</Button>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
<template v-if="!empty">
|
||||
<tr v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader" :class="cx('rowGroupHeader')" :style="rowGroupHeaderStyle" role="row" v-bind="ptm('rowGroupHeader')">
|
||||
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupHeaderCell') }">
|
||||
<button v-if="expandableRowGroups" :class="cx('rowGroupToggler')" @click="onRowGroupToggle" type="button" v-bind="ptm('rowGroupToggler')">
|
||||
<button v-if="expandableRowGroups" :class="cx('rowToggleButton')" @click="onRowGroupToggle" type="button" v-bind="ptm('rowToggleButton')">
|
||||
<component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded" />
|
||||
<template v-else>
|
||||
<span v-if="isRowGroupExpanded && expandedRowIcon" :class="[cx('rowGroupTogglerIcon'), expandedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" />
|
||||
<ChevronDownIcon v-else-if="isRowGroupExpanded && !expandedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" />
|
||||
<span v-else-if="!isRowGroupExpanded && collapsedRowIcon" :class="[cx('rowGroupTogglerIcon'), collapsedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" />
|
||||
<ChevronRightIcon v-else-if="!isRowGroupExpanded && !collapsedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" />
|
||||
<span v-if="isRowGroupExpanded && expandedRowIcon" :class="[cx('rowToggleIcon'), expandedRowIcon]" v-bind="ptm('rowToggleIcon')" />
|
||||
<ChevronDownIcon v-else-if="isRowGroupExpanded && !expandedRowIcon" :class="cx('rowToggleIcon')" v-bind="ptm('rowToggleIcon')" />
|
||||
<span v-else-if="!isRowGroupExpanded && collapsedRowIcon" :class="[cx('rowToggleIcon'), collapsedRowIcon]" v-bind="ptm('rowToggleIcon')" />
|
||||
<ChevronRightIcon v-else-if="!isRowGroupExpanded && !collapsedRowIcon" :class="cx('rowToggleIcon')" v-bind="ptm('rowToggleIcon')" />
|
||||
</template>
|
||||
</button>
|
||||
<component :is="templates['groupheader']" :data="rowData" :index="rowIndex" />
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<div :class="cx('columnFilter')" v-bind="getColumnPT('columnFilter')">
|
||||
<div v-if="display === 'row'" :class="cx('filterInput')" v-bind="{ ...filterInputProps, ...getColumnPT('filterInput') }">
|
||||
<div :class="cx('filter')" v-bind="getColumnPT('filter')">
|
||||
<div v-if="display === 'row'" :class="cx('filterElementContainer')" v-bind="{ ...filterInputProps, ...getColumnPT('filterElementContainer') }">
|
||||
<component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
|
||||
</div>
|
||||
<Button
|
||||
v-if="showMenuButton"
|
||||
ref="icon"
|
||||
:aria-label="filterMenuButtonAriaLabel"
|
||||
:aria-label="columnFilterButtonAriaLabel"
|
||||
aria-haspopup="true"
|
||||
:aria-expanded="overlayVisible"
|
||||
:aria-controls="overlayId"
|
||||
:class="cx('filterMenuButton')"
|
||||
:class="cx('columnFilterButton')"
|
||||
:unstyled="unstyled"
|
||||
@click="toggleMenu($event)"
|
||||
@keydown="onToggleButtonKeyDown($event)"
|
||||
v-bind="{ ...getColumnPT('filterMenuButton', ptmFilterMenuParams), ...filterButtonProps.filter }"
|
||||
v-bind="{ ...getColumnPT('columnFilterButton', ptmFilterMenuParams), ...filterButtonProps.filter }"
|
||||
>
|
||||
<template #icon="slotProps">
|
||||
<component :is="filterIconTemplate || 'FilterIcon'" :class="slotProps.class" v-bind="getColumnPT('filterMenuIcon')" />
|
||||
|
|
@ -22,10 +22,10 @@
|
|||
</Button>
|
||||
<Button
|
||||
v-if="showClearButton && display === 'row' && hasRowFilter()"
|
||||
:class="cx('headerFilterClearButton')"
|
||||
:class="cx('columnFilterClearButton')"
|
||||
:unstyled="unstyled"
|
||||
@click="clearFilter()"
|
||||
v-bind="{ ...getColumnPT('headerFilterClearButton', ptmHeaderFilterClearParams), ...filterButtonProps.inline.clear }"
|
||||
v-bind="{ ...getColumnPT('columnFilterClearButton', ptmHeaderFilterClearParams), ...filterButtonProps.inline.clear }"
|
||||
>
|
||||
<template #icon="slotProps">
|
||||
<component :is="filterClearIconTemplate || 'FilterSlashIcon'" :class="slotProps.class" v-bind="getColumnPT('filterClearIcon')" />
|
||||
|
|
@ -48,21 +48,21 @@
|
|||
>
|
||||
<component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
|
||||
<template v-if="display === 'row'">
|
||||
<ul :class="cx('filterRowItems')" v-bind="getColumnPT('filterRowItems')">
|
||||
<ul :class="cx('filterConstraintList')" v-bind="getColumnPT('filterConstraintList')">
|
||||
<li
|
||||
v-for="(matchMode, i) of matchModes"
|
||||
:key="matchMode.label"
|
||||
:class="cx('filterRowItem', { matchMode })"
|
||||
:class="cx('filterConstraint', { matchMode })"
|
||||
@click="onRowMatchModeChange(matchMode.value)"
|
||||
@keydown="onRowMatchModeKeyDown($event)"
|
||||
@keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
|
||||
:tabindex="i === 0 ? '0' : null"
|
||||
v-bind="getColumnPT('filterRowItem', ptmFilterRowItemOptions(matchMode))"
|
||||
v-bind="getColumnPT('filterConstraint', ptmFilterConstraintOptions(matchMode))"
|
||||
>
|
||||
{{ matchMode.label }}
|
||||
</li>
|
||||
<li :class="cx('filterSeparator')" v-bind="getColumnPT('filterSeparator')"></li>
|
||||
<li :class="cx('filterRowItem')" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="getColumnPT('filterRowItem')">
|
||||
<li :class="cx('filterConstraintSeparator')" v-bind="getColumnPT('filterConstraintSeparator')"></li>
|
||||
<li :class="cx('filterConstraint')" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="getColumnPT('filterConstraint')">
|
||||
{{ noFilterLabel }}
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -81,52 +81,43 @@
|
|||
:pt="getColumnPT('filterOperatorDropdown')"
|
||||
></Select>
|
||||
</div>
|
||||
<div :class="cx('filterConstraints')" v-bind="getColumnPT('filterConstraints')">
|
||||
<div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" :class="cx('filterConstraint')" v-bind="getColumnPT('filterConstraint')">
|
||||
<div :class="cx('filterRuleList')" v-bind="getColumnPT('filterRuleList')">
|
||||
<div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" :class="cx('filterRule')" v-bind="getColumnPT('filterRule')">
|
||||
<Select
|
||||
v-if="isShowMatchModes"
|
||||
:options="matchModes"
|
||||
:modelValue="fieldConstraint.matchMode"
|
||||
:class="cx('filterMatchModeDropdown')"
|
||||
:class="cx('filterConstraintDropdown')"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
:aria-label="filterConstraintAriaLabel"
|
||||
:aria-label="filterRuleAriaLabel"
|
||||
@update:modelValue="onMenuMatchModeChange($event, i)"
|
||||
:unstyled="unstyled"
|
||||
:pt="getColumnPT('filterMatchModeDropdown')"
|
||||
:pt="getColumnPT('filterConstraintDropdown')"
|
||||
></Select>
|
||||
<component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" />
|
||||
<div v-bind="getColumnPT('filterRemove')">
|
||||
<Button
|
||||
v-if="showRemoveIcon"
|
||||
type="button"
|
||||
:class="cx('filterRemoveButton')"
|
||||
:class="cx('filterRemoveRuleButton')"
|
||||
@click="removeConstraint(i)"
|
||||
:label="removeRuleButtonLabel"
|
||||
:unstyled="unstyled"
|
||||
v-bind="filterButtonProps.popover.removeRule"
|
||||
:pt="getColumnPT('filterRemoveButton')"
|
||||
:pt="getColumnPT('filterRemoveRuleButton')"
|
||||
>
|
||||
<template #icon="iconProps">
|
||||
<component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('filterRemoveButton')['icon']" />
|
||||
<component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('filterRemoveRuleButton')['icon']" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isShowAddConstraint" :class="cx('filterAddRule')" v-bind="getColumnPT('filterAddRule')">
|
||||
<Button
|
||||
type="button"
|
||||
:label="addRuleButtonLabel"
|
||||
iconPos="left"
|
||||
:class="cx('filterAddRuleButton')"
|
||||
@click="addConstraint()"
|
||||
:unstyled="unstyled"
|
||||
v-bind="filterButtonProps.popover.addRule"
|
||||
:pt="getColumnPT('filterAddRuleButton')"
|
||||
>
|
||||
<div v-if="isShowAddConstraint" v-bind="getColumnPT('filterAddButtonContainer')">
|
||||
<Button type="button" :label="addRuleButtonLabel" iconPos="left" :class="cx('filterAddButton')" @click="addConstraint()" :unstyled="unstyled" v-bind="filterButtonProps.popover.addRule" :pt="getColumnPT('filterAddButton')">
|
||||
<template #icon="iconProps">
|
||||
<component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('filterAddRuleButton')['icon']" />
|
||||
<component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('filterAddButton')['icon']" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -353,7 +344,7 @@ export default {
|
|||
getColumnProp() {
|
||||
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
|
||||
},
|
||||
ptmFilterRowItemOptions(matchMode) {
|
||||
ptmFilterConstraintOptions(matchMode) {
|
||||
return {
|
||||
context: {
|
||||
highlighted: matchMode && this.isRowMatchModeSelected(matchMode.value)
|
||||
|
|
@ -516,19 +507,19 @@ export default {
|
|||
findNextItem(item) {
|
||||
let nextItem = item.nextElementSibling;
|
||||
|
||||
if (nextItem) return DomHandler.getAttribute(nextItem, 'data-pc-section') === 'filterseparator' ? this.findNextItem(nextItem) : nextItem;
|
||||
if (nextItem) return DomHandler.getAttribute(nextItem, 'data-pc-section') === 'filterconstraintseparator' ? this.findNextItem(nextItem) : nextItem;
|
||||
else return item.parentElement.firstElementChild;
|
||||
},
|
||||
findPrevItem(item) {
|
||||
let prevItem = item.previousElementSibling;
|
||||
|
||||
if (prevItem) return DomHandler.getAttribute(prevItem, 'data-pc-section') === 'filterseparator' ? this.findPrevItem(prevItem) : prevItem;
|
||||
if (prevItem) return DomHandler.getAttribute(prevItem, 'data-pc-section') === 'filterconstraintseparator' ? this.findPrevItem(prevItem) : prevItem;
|
||||
else return item.parentElement.lastElementChild;
|
||||
},
|
||||
hide() {
|
||||
this.overlayVisible = false;
|
||||
|
||||
DomHandler.focus(this.$refs.icon.$el);
|
||||
this.showMenuButton && DomHandler.focus(this.$refs.icon.$el);
|
||||
},
|
||||
onContentClick(event) {
|
||||
this.selfClick = true;
|
||||
|
|
@ -695,13 +686,13 @@ export default {
|
|||
applyButtonLabel() {
|
||||
return this.$primevue.config.locale ? this.$primevue.config.locale.apply : undefined;
|
||||
},
|
||||
filterMenuButtonAriaLabel() {
|
||||
columnFilterButtonAriaLabel() {
|
||||
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() {
|
||||
filterRuleAriaLabel() {
|
||||
return this.$primevue.config.locale ? this.$primevue.config.locale.filterConstraint : undefined;
|
||||
},
|
||||
ptmHeaderFilterClearParams() {
|
||||
|
|
|
|||
|
|
@ -658,9 +658,9 @@ export interface DataTablePassThroughOptions {
|
|||
*/
|
||||
root?: DataTablePassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the loading overlay's DOM element.
|
||||
* Used to pass attributes to the overlay's DOM element.
|
||||
*/
|
||||
loadingOverlay?: DataTablePassThroughOptionType;
|
||||
overlay?: DataTablePassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the loading icon's DOM element.
|
||||
*/
|
||||
|
|
@ -675,9 +675,9 @@ export interface DataTablePassThroughOptions {
|
|||
*/
|
||||
paginator?: PaginatorPassThroughOptionType<DataTableSharedPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the wrapper's DOM element.
|
||||
* Used to pass attributes to the table container's DOM element.
|
||||
*/
|
||||
wrapper?: DataTablePassThroughOptionType;
|
||||
tableContainer?: DataTablePassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the VirtualScroller component.
|
||||
* @see {@link VirtualScrollerPassThroughOptionType}
|
||||
|
|
@ -708,11 +708,11 @@ export interface DataTablePassThroughOptions {
|
|||
*/
|
||||
tbody?: DataTablePassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the rowgroup header's DOM element.
|
||||
* Used to pass attributes to the rowg roup header's DOM element.
|
||||
*/
|
||||
rowGroupHeader?: DataTablePassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the rowgroup header cell's DOM element.
|
||||
* Used to pass attributes to the row group header cell's DOM element.
|
||||
*/
|
||||
rowGroupHeaderCell?: DataTablePassThroughOptionType;
|
||||
/**
|
||||
|
|
@ -728,11 +728,11 @@ export interface DataTablePassThroughOptions {
|
|||
*/
|
||||
rowExpansionCell?: DataTablePassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the rowgroup footer's DOM element.
|
||||
* Used to pass attributes to the row group footer's DOM element.
|
||||
*/
|
||||
rowGroupFooter?: DataTablePassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the rowgroup footer cell's DOM element.
|
||||
* Used to pass attributes to the row group footer cell's DOM element.
|
||||
*/
|
||||
rowGroupFooterCell?: DataTablePassThroughOptionType;
|
||||
/**
|
||||
|
|
@ -752,17 +752,17 @@ export interface DataTablePassThroughOptions {
|
|||
*/
|
||||
footerRow?: DataTablePassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the resize helper's DOM element.
|
||||
* Used to pass attributes to the column resize indicator's DOM element.
|
||||
*/
|
||||
resizeHelper?: DataTablePassThroughOptionType;
|
||||
columnResizeIndicator?: DataTablePassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the reorder indicator up's DOM element.
|
||||
* Used to pass attributes to the row reorder indicator up's DOM element.
|
||||
*/
|
||||
reorderIndicatorUp?: DataTablePassThroughOptionType;
|
||||
rowReorderIndicatorUp?: DataTablePassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the reorder indicator down's DOM element.
|
||||
* Used to pass attributes to the row reorder indicator down's DOM element.
|
||||
*/
|
||||
reorderIndicatorDown?: DataTablePassThroughOptionType;
|
||||
rowReorderIndicatorDown?: DataTablePassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the ColumnGroup helper components.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" v-bind="ptmi('root')">
|
||||
<slot></slot>
|
||||
<div v-if="loading" :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
|
||||
<div v-if="loading" :class="cx('overlay')" v-bind="ptm('overlay')">
|
||||
<slot v-if="$slots.loading" name="loading"></slot>
|
||||
<template v-else>
|
||||
<component v-if="$slots.loadingicon" :is="$slots.loadingicon" :class="cx('loadingIcon')" />
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
|
||||
</template>
|
||||
</DTPaginator>
|
||||
<div :class="cx('wrapper')" :style="[sx('wrapper'), { maxHeight: virtualScrollerDisabled ? scrollHeight : '' }]" v-bind="ptm('wrapper')">
|
||||
<div :class="cx('tableContainer')" :style="[sx('tableContainer'), { maxHeight: virtualScrollerDisabled ? scrollHeight : '' }]" v-bind="ptm('tableContainer')">
|
||||
<DTVirtualScroller
|
||||
ref="virtualScroller"
|
||||
v-bind="virtualScrollerOptions"
|
||||
|
|
@ -271,11 +271,11 @@
|
|||
<slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
|
||||
</template>
|
||||
</DTPaginator>
|
||||
<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')">
|
||||
<div ref="resizeHelper" :class="cx('columnResizeIndicator')" style="display: none" v-bind="ptm('columnResizeIndicator')"></div>
|
||||
<span v-if="reorderableColumns" ref="reorderIndicatorUp" :class="cx('rowReorderIndicatorUp')" style="position: absolute; display: none" v-bind="ptm('rowReorderIndicatorUp')">
|
||||
<component :is="$slots.reorderindicatorupicon || 'ArrowDownIcon'" />
|
||||
</span>
|
||||
<span v-if="reorderableColumns" ref="reorderIndicatorDown" :class="cx('reorderIndicatorDown')" style="position: absolute; display: none" v-bind="ptm('reorderIndicatorDown')">
|
||||
<span v-if="reorderableColumns" ref="reorderIndicatorDown" :class="cx('rowReorderIndicatorDown')" style="position: absolute; display: none" v-bind="ptm('rowReorderIndicatorDown')">
|
||||
<component :is="$slots.reorderindicatordownicon || 'ArrowUpIcon'" />
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -488,12 +488,12 @@ export default {
|
|||
|
||||
if (
|
||||
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') === 'columntitle' ||
|
||||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'columnheadercontent' ||
|
||||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' ||
|
||||
DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' ||
|
||||
DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' ||
|
||||
(targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="filtermenubutton"]') && !DomHandler.isClickable(event.target))
|
||||
(targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="columnfilterbutton"]') && !DomHandler.isClickable(event.target))
|
||||
) {
|
||||
DomHandler.clearSelection();
|
||||
|
||||
|
|
@ -1307,7 +1307,7 @@ export default {
|
|||
this.createStyleElement();
|
||||
|
||||
let innerHTML = '';
|
||||
let selector = `[data-pc-name="datatable"][${this.attributeSelector}] > [data-pc-section="wrapper"] ${this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]'} > table[data-pc-section="table"]`;
|
||||
let selector = `[data-pc-name="datatable"][${this.attributeSelector}] > [data-pc-section="tablecontainer"] ${this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]'} > table[data-pc-section="table"]`;
|
||||
|
||||
widths.forEach((width, index) => {
|
||||
let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
|
||||
|
|
@ -1501,7 +1501,7 @@ export default {
|
|||
return null;
|
||||
},
|
||||
onRowMouseDown(event) {
|
||||
if (DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon' || DomHandler.getAttribute(event.target.parentElement, 'data-pc-section') === 'rowreordericon') event.currentTarget.draggable = true;
|
||||
if (DomHandler.getAttribute(event.target, 'data-pc-section') === 'reorderablerowhandle' || DomHandler.getAttribute(event.target.parentElement, 'data-pc-section') === 'reorderablerowhandle') event.currentTarget.draggable = true;
|
||||
else event.currentTarget.draggable = false;
|
||||
},
|
||||
onRowDragStart(e) {
|
||||
|
|
@ -1774,7 +1774,7 @@ export default {
|
|||
this.createStyleElement();
|
||||
|
||||
let innerHTML = '';
|
||||
let selector = `[data-pc-name="datatable"][${this.attributeSelector}] > [data-pc-section="wrapper"] ${this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]'} > table[data-pc-section="table"]`;
|
||||
let selector = `[data-pc-name="datatable"][${this.attributeSelector}] > [data-pc-section="tablecontainer"] ${this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]'} > table[data-pc-section="table"]`;
|
||||
|
||||
widths.forEach((width, index) => {
|
||||
let style = `width: ${width}px !important; max-width: ${width}px !important`;
|
||||
|
|
@ -1918,7 +1918,7 @@ export default {
|
|||
DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
|
||||
document.head.appendChild(this.responsiveStyleElement);
|
||||
|
||||
let tableSelector = `.p-datatable-wrapper ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
|
||||
let tableSelector = `.p-datatable-table-container ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
|
||||
let selector = `.p-datatable[${this.attributeSelector}] > ${tableSelector}`;
|
||||
let gridLinesSelector = `.p-datatable[${this.attributeSelector}].p-datatable-gridlines > ${tableSelector}`;
|
||||
let innerHTML = `
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@
|
|||
:data-p-reorderable-column="reorderableColumns"
|
||||
>
|
||||
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
|
||||
<div :class="cx('headerContent')" v-bind="getColumnPT('headerContent')">
|
||||
<div :class="cx('columnHeaderContent')" v-bind="getColumnPT('columnHeaderContent')">
|
||||
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
|
||||
<span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPT('headerTitle')">{{ columnProp('header') }}</span>
|
||||
<span v-if="columnProp('header')" :class="cx('columnTitle')" v-bind="getColumnPT('columnTitle')">{{ columnProp('header') }}</span>
|
||||
<span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
|
||||
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" />
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -595,11 +595,11 @@ const classes = {
|
|||
'p-datatable-lg': props.size === 'large'
|
||||
}
|
||||
],
|
||||
loadingOverlay: 'p-datatable-mask p-component-overlay',
|
||||
overlay: 'p-datatable-mask p-component-overlay',
|
||||
loadingIcon: 'p-datatable-loading-icon',
|
||||
header: 'p-datatable-header',
|
||||
paginator: ({ position }) => 'p-datatable-paginator-' + position,
|
||||
wrapper: 'p-datatable-table-container',
|
||||
tableContainer: 'p-datatable-table-container',
|
||||
table: ({ props }) => [
|
||||
'p-datatable-table',
|
||||
{
|
||||
|
|
@ -626,20 +626,20 @@ const classes = {
|
|||
}
|
||||
],
|
||||
columnResizer: 'p-datatable-column-resizer',
|
||||
headerContent: 'p-datatable-column-header-content',
|
||||
headerTitle: 'p-datatable-column-title',
|
||||
columnHeaderContent: 'p-datatable-column-header-content',
|
||||
columnTitle: 'p-datatable-column-title',
|
||||
sortIcon: 'p-datatable-sort-icon',
|
||||
sortBadge: 'p-datatable-sort-badge',
|
||||
columnFilter: ({ props }) => [
|
||||
filter: ({ props }) => [
|
||||
'p-datatable-filter',
|
||||
{
|
||||
'p-datatable-inline-filter': props.display === 'row',
|
||||
'p-datatable-popover-filter': props.display === 'menu'
|
||||
}
|
||||
],
|
||||
filterInput: 'p-datatable-filter-element-container',
|
||||
filterMenuButton: 'p-datatable-column-filter-button',
|
||||
headerFilterClearButton: 'p-datatable-column-filter-clear-button',
|
||||
filterElementContainer: 'p-datatable-filter-element-container',
|
||||
columnFilterButton: 'p-datatable-column-filter-button',
|
||||
columnFilterClearButton: 'p-datatable-column-filter-clear-button',
|
||||
filterOverlay: ({ instance, props }) => [
|
||||
'p-datatable-filter-overlay p-component',
|
||||
{
|
||||
|
|
@ -647,29 +647,28 @@ const classes = {
|
|||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||
}
|
||||
],
|
||||
filterRowItems: 'p-datatable-filter-constraint-list',
|
||||
filterRowItem: ({ instance, matchMode }) => [
|
||||
filterConstraintList: 'p-datatable-filter-constraint-list',
|
||||
filterConstraint: ({ instance, matchMode }) => [
|
||||
'p-datatable-filter-constraint',
|
||||
{
|
||||
'p-datatable-filter-constraint-selected': matchMode && instance.isRowMatchModeSelected(matchMode.value)
|
||||
}
|
||||
],
|
||||
filterSeparator: 'p-datatable-filter-constraint-separator',
|
||||
filterConstraintSeparator: 'p-datatable-filter-constraint-separator',
|
||||
filterOperator: 'p-datatable-filter-operator',
|
||||
filterOperatorDropdown: 'p-datatable-filter-operator-dropdown',
|
||||
filterConstraints: 'p-datatable-filter-rule-list',
|
||||
filterConstraint: 'p-datatable-filter-rule',
|
||||
filterMatchModeDropdown: 'p-datatable-filter-constraint-dropdown',
|
||||
filterRemoveButton: 'p-datatable-filter-remove-rule-button',
|
||||
filterAddRule: 'p-datatable-filter-add-rule-button', //TODO: Remove
|
||||
filterAddRuleButton: 'p-column-filter-add-button',
|
||||
filterRule: 'p-datatable-filter-rule',
|
||||
filterConstraintDropdown: 'p-datatable-filter-constraint-dropdown',
|
||||
filterRemoveRuleButton: 'p-datatable-filter-remove-rule-button',
|
||||
filterAddButton: 'p-column-filter-add-button',
|
||||
filterButtonbar: 'p-datatable-filter-buttonbar',
|
||||
filterClearButton: 'p-datatable-filter-clear-button',
|
||||
filterApplyButton: 'p-datatable-filter-apply-button',
|
||||
tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'),
|
||||
rowgroupHeader: 'p-datatable-row-group-header',
|
||||
rowGroupToggler: 'p-datatable-row-toggle-button',
|
||||
rowGroupTogglerIcon: 'p-datatable-row-toggle-icon',
|
||||
rowGroupHeader: 'p-datatable-row-group-header',
|
||||
rowToggleButton: 'p-datatable-row-toggle-button',
|
||||
rowToggleIcon: 'p-datatable-row-toggle-icon',
|
||||
row: ({ instance, props, index, columnSelectionMode }) => {
|
||||
let rowStyleClass = [];
|
||||
|
||||
|
|
@ -694,23 +693,17 @@ const classes = {
|
|||
return rowStyleClass;
|
||||
},
|
||||
rowExpansion: 'p-datatable-row-expansion',
|
||||
rowgroupFooter: 'p-datatable-row-group-footer',
|
||||
rowGroupFooter: 'p-datatable-row-group-footer',
|
||||
emptyMessage: 'p-datatable-empty-message',
|
||||
bodyCell: ({ instance }) => [
|
||||
{
|
||||
'p-datatable-frozen-column': instance.columnProp('frozen')
|
||||
}
|
||||
],
|
||||
columnTitle: 'p-column-title', //TODO: Remove due to stacked mode
|
||||
rowReorderIcon: 'p-datatable-reorderable-row-handle',
|
||||
rowToggler: 'p-datatable-row-toggle-button',
|
||||
rowTogglerIcon: 'p-datatable-row-toggle-icon',
|
||||
rowEditorInitButton: 'p-datatable-row-editor-init',
|
||||
rowEditorInitIcon: 'p-row-editor-init-icon', //TODO: Remove
|
||||
rowEditorSaveButton: 'p-datatable-row-editor-save',
|
||||
rowEditorSaveIcon: 'p-row-editor-save-icon', //TODO: Remove
|
||||
rowEditorCancelButton: 'p-datatable-row-editor-cancel',
|
||||
rowEditorCancelIcon: 'p-row-editor-cancel-icon', //TODO: Remove
|
||||
reorderableRowHandle: 'p-datatable-reorderable-row-handle',
|
||||
rowEditorInit: 'p-datatable-row-editor-init',
|
||||
rowEditorSave: 'p-datatable-row-editor-save',
|
||||
rowEditorCancel: 'p-datatable-row-editor-cancel',
|
||||
tfoot: 'p-datatable-tfoot',
|
||||
footerCell: ({ instance }) => [
|
||||
{
|
||||
|
|
@ -719,13 +712,13 @@ const classes = {
|
|||
],
|
||||
virtualScrollerSpacer: 'p-datatable-virtualscroller-spacer',
|
||||
footer: 'p-datatable-footer',
|
||||
resizeHelper: 'p-datatable-column-resize-indicator',
|
||||
reorderIndicatorUp: 'p-datatable-row-reorder-indicator-up',
|
||||
reorderIndicatorDown: 'p-datatable-row-reorder-indicator-down'
|
||||
columnResizeIndicator: 'p-datatable-column-resize-indicator',
|
||||
rowReorderIndicatorUp: 'p-datatable-row-reorder-indicator-up',
|
||||
rowReorderIndicatorDown: 'p-datatable-row-reorder-indicator-down'
|
||||
};
|
||||
|
||||
const inlineStyles = {
|
||||
wrapper: { overflow: 'auto' },
|
||||
tableContainer: { overflow: 'auto' },
|
||||
thead: { position: 'sticky' },
|
||||
tfoot: { position: 'sticky' }
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue