vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

DataTable: new `filterButtonProp` property

pull/5507/head
tugcekucukoglu 2024-03-26 15:37:21 +03:00
parent 1cbaf36aa0
commit a0c3e47afd
6 changed files with 84 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/lib/datatable/BaseDataTable.vue
View File

@ -273,6 +273,17 @@ export default {
filterInputProps: {
type: null,
default: null
},
filterButtonProps: {
type: Object,
default() {
return {
addRule: { severity: 'info', text: true, size: 'small' },
removeRule: { severity: 'danger', text: true, size: 'small' },
apply: { size: 'small' },
clear: { outlined: true, size: 'small' }
};
}
}
},
style: DataTableStyle,

26
components/lib/datatable/ColumnFilter.vue
View File

@ -94,9 +94,7 @@
@click="removeConstraint(i)"
:label="removeRuleButtonLabel"
:unstyled="unstyled"
text
severity="danger"
size="small"
v-bind="filterButtonProps.removeRule"
:pt="getColumnPT('filterRemoveButton')"
>
<template #icon="iconProps">
@ -114,9 +112,7 @@
:class="cx('filterAddRuleButton')"
@click="addConstraint()"
:unstyled="unstyled"
text
severity="info"
size="small"
v-bind="filterButtonProps.addRule"
:pt="getColumnPT('filterAddRuleButton')"
>
<template #icon="iconProps">
@ -132,13 +128,21 @@
:label="clearButtonLabel"
@click="clearFilter"
:unstyled="unstyled"
size="small"
outlined
v-bind="filterButtonProps.clear"
:pt="getColumnPT('filterClearButton')"
></CFButton>
<component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
<template v-if="showApplyButton">
<CFButton v-if="!filterApplyTemplate" type="button" :class="cx('filterApplyButton')" :label="applyButtonLabel" @click="applyFilter()" :unstyled="unstyled" size="small" :pt="getColumnPT('filterApplyButton')"></CFButton>
<CFButton
v-if="!filterApplyTemplate"
type="button"
:class="cx('filterApplyButton')"
:label="applyButtonLabel"
@click="applyFilter()"
:unstyled="unstyled"
v-bind="filterButtonProps.apply"
:pt="getColumnPT('filterApplyButton')"
></CFButton>
<component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
</template>
</div>
@ -275,6 +279,10 @@ export default {
type: null,
default: null
},
filterButtonProps: {
type: null,
default: null
},
column: null
},
data() {

33
components/lib/datatable/DataTable.d.ts vendored
View File

@ -9,6 +9,7 @@
*/
import { InputHTMLAttributes, TableHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonProps } from '../button';
import { ColumnPassThroughOptionType } from '../column';
import { ColumnGroupPassThroughOptionType } from '../columngroup';
import { PaginatorPassThroughOptionType } from '../paginator';
@ -159,6 +160,28 @@ export interface DataTableExportCSVOptions {
selectionOnly: boolean;
}
/**
* Custom datatable filter button props options.
*/
export interface DataTableFilterButtonPropsOptions {
/**
* Add rule button props
*/
addRule: ButtonProps | undefined;
/**
* Remove rule button props
*/
removeRule: ButtonProps | undefined;
/**
* Apply button props
*/
apply: ButtonProps | undefined;
/**
* Apply button props
*/
clear: ButtonProps | undefined;
}
/**
* Custom sort event.
* @see {@link DataTableEmits.sort}
@ -1130,6 +1153,16 @@ export interface DataTableProps {
* Used to pass all properties of the HTMLInputElement to the focusable filter input element inside the component.
*/
filterInputProps?: InputHTMLAttributes | undefined;
/**
* Used to pass all filter button property object
* @defaultValue {
addRule: { severity: 'info', text: true, size: 'small' },
removeRule: { severity: 'danger', text: true, size: 'small' },
apply: { size: 'small' },
clear: { outlined: true, size: 'small' }
}
*/
filterButtonProps?: DataTableFilterButtonPropsOptions | undefined;
/**
* Used to pass attributes to DOM elements inside the component.
* @type {DataTablePassThroughOptions}

12
components/lib/datatable/DataTable.vue
View File

@ -86,6 +86,7 @@
:filters="d_filters"
:filtersStore="filters"
:filterDisplay="filterDisplay"
:filterButtonProps="headerFilterButtonProps"
:filterInputProps="filterInputProps"
:first="d_first"
@column-click="onColumnHeaderClick($event)"
@ -2069,6 +2070,17 @@ export default {
groupRowSortField() {
return this.sortMode === 'single' ? this.sortField : this.d_groupRowsSortMeta ? this.d_groupRowsSortMeta.field : null;
},
headerFilterButtonProps() {
return {
...{
addRule: { severity: 'info', text: true, size: 'small' },
removeRule: { severity: 'danger', text: true, size: 'small' },
apply: { size: 'small' },
clear: { outlined: true, size: 'small' }
},
...this.filterButtonProps
};
},
virtualScrollerDisabled() {
return ObjectUtils.isEmpty(this.virtualScrollerOptions) || !this.scrollable;
}

5
components/lib/datatable/HeaderCell.vue
View File

@ -58,6 +58,7 @@
:filters="filters"
:filtersStore="filtersStore"
:filterInputProps="filterInputProps"
:filterButtonProps="filterButtonProps"
@filter-change="$emit('filter-change', $event)"
@filter-apply="$emit('filter-apply')"
:filterMenuStyle="columnProp('filterMenuStyle')"
@ -182,6 +183,10 @@ export default {
filterInputProps: {
type: null,
default: null
},
filterButtonProps: {
type: null,
default: null
}
},
data() {

6
components/lib/datatable/TableHeader.vue
View File

@ -29,6 +29,7 @@
:filterDisplay="filterDisplay"
:filtersStore="filtersStore"
:filterInputProps="filterInputProps"
:filterButtonProps="filterButtonProps"
:first="first"
@filter-change="$emit('filter-change', $event)"
@filter-apply="$emit('filter-apply')"
@ -69,6 +70,7 @@
:filters="filters"
:filtersStore="filtersStore"
:filterInputProps="filterInputProps"
:filterButtonProps="filterButtonProps"
@filter-change="$emit('filter-change', $event)"
@filter-apply="$emit('filter-apply')"
:filterMenuStyle="columnProp(col, 'filterMenuStyle')"
@ -231,6 +233,10 @@ export default {
filterInputProps: {
type: null,
default: null
},
filterButtonProps: {
type: null,
default: null
}
},
provide() {