314 lines
13 KiB
Vue
Executable File
314 lines
13 KiB
Vue
Executable File
<template>
|
|
<thead :class="cx('thead')" role="rowgroup" v-bind="columnGroup ? { ...ptm('thead'), ...getColumnGroupPTOptions('root') } : ptm('thead')" data-pc-section="thead">
|
|
<template v-if="!columnGroup">
|
|
<tr role="row" v-bind="ptm('headerRow')">
|
|
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
|
|
<DTHeaderCell
|
|
v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
|
|
:column="col"
|
|
@column-click="$emit('column-click', $event)"
|
|
@column-mousedown="$emit('column-mousedown', $event)"
|
|
@column-dragstart="$emit('column-dragstart', $event)"
|
|
@column-dragover="$emit('column-dragover', $event)"
|
|
@column-dragleave="$emit('column-dragleave', $event)"
|
|
@column-drop="$emit('column-drop', $event)"
|
|
:groupRowsBy="groupRowsBy"
|
|
:groupRowSortField="groupRowSortField"
|
|
:reorderableColumns="reorderableColumns"
|
|
:resizableColumns="resizableColumns"
|
|
@column-resizestart="$emit('column-resizestart', $event)"
|
|
:sortMode="sortMode"
|
|
:sortField="sortField"
|
|
:sortOrder="sortOrder"
|
|
:multiSortMeta="multiSortMeta"
|
|
:allRowsSelected="allRowsSelected"
|
|
:empty="empty"
|
|
@checkbox-change="$emit('checkbox-change', $event)"
|
|
:filters="filters"
|
|
:filterDisplay="filterDisplay"
|
|
:filtersStore="filtersStore"
|
|
:filterInputProps="filterInputProps"
|
|
@filter-change="$emit('filter-change', $event)"
|
|
@filter-apply="$emit('filter-apply')"
|
|
@operator-change="$emit('operator-change', $event)"
|
|
@matchmode-change="$emit('matchmode-change', $event)"
|
|
@constraint-add="$emit('constraint-add', $event)"
|
|
@constraint-remove="$emit('constraint-remove', $event)"
|
|
@apply-click="$emit('apply-click', $event)"
|
|
:headerCheckboxIconTemplate="headerCheckboxIconTemplate"
|
|
:pt="pt"
|
|
/>
|
|
</template>
|
|
</tr>
|
|
<tr v-if="filterDisplay === 'row'" role="row" v-bind="ptm('headerRow')">
|
|
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
|
|
<th
|
|
v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
|
|
:style="getFilterColumnHeaderStyle(col)"
|
|
:class="getFilterColumnHeaderClass(col)"
|
|
v-bind="{ ...getColumnPTOptions(col, 'root'), ...getColumnPTOptions(col, 'headerCell') }"
|
|
>
|
|
<DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" :disabled="empty" @change="$emit('checkbox-change', $event)" :column="col" :pt="pt" />
|
|
<DTColumnFilter
|
|
v-if="col.children && col.children.filter"
|
|
:field="columnProp(col, 'filterField') || columnProp(col, 'field')"
|
|
:type="columnProp(col, 'dataType')"
|
|
display="row"
|
|
:showMenu="columnProp(col, 'showFilterMenu')"
|
|
:filterElement="col.children && col.children.filter"
|
|
:filterHeaderTemplate="col.children && col.children.filterheader"
|
|
:filterFooterTemplate="col.children && col.children.filterfooter"
|
|
:filterClearTemplate="col.children && col.children.filterclear"
|
|
:filterApplyTemplate="col.children && col.children.filterapply"
|
|
:filterIconTemplate="col.children && col.children.filtericon"
|
|
:filterAddIconTemplate="col.children && col.children.filteraddicon"
|
|
:filterRemoveIconTemplate="col.children && col.children.filterremoveicon"
|
|
:filterClearIconTemplate="col.children && col.children.filterclearicon"
|
|
:filters="filters"
|
|
:filtersStore="filtersStore"
|
|
:filterInputProps="filterInputProps"
|
|
@filter-change="$emit('filter-change', $event)"
|
|
@filter-apply="$emit('filter-apply')"
|
|
:filterMenuStyle="columnProp(col, 'filterMenuStyle')"
|
|
:filterMenuClass="columnProp(col, 'filterMenuClass')"
|
|
:showOperator="columnProp(col, 'showFilterOperator')"
|
|
:showClearButton="columnProp(col, 'showClearButton')"
|
|
:showApplyButton="columnProp(col, 'showApplyButton')"
|
|
:showMatchModes="columnProp(col, 'showFilterMatchModes')"
|
|
:showAddButton="columnProp(col, 'showAddButton')"
|
|
:matchModeOptions="columnProp(col, 'filterMatchModeOptions')"
|
|
:maxConstraints="columnProp(col, 'maxConstraints')"
|
|
@operator-change="$emit('operator-change', $event)"
|
|
@matchmode-change="$emit('matchmode-change', $event)"
|
|
@constraint-add="$emit('constraint-add', $event)"
|
|
@constraint-remove="$emit('constraint-remove', $event)"
|
|
@apply-click="$emit('apply-click', $event)"
|
|
:pt="pt"
|
|
:column="col"
|
|
/>
|
|
</th>
|
|
</template>
|
|
</tr>
|
|
</template>
|
|
<template v-else>
|
|
<tr v-for="(row, i) of getHeaderRows()" :key="i" role="row" v-bind="{ ...ptm('headerRow'), ...getRowPTOptions(row, 'root') }">
|
|
<template v-for="(col, j) of getHeaderColumns(row)" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || j">
|
|
<DTHeaderCell
|
|
v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field')) && typeof col.children !== 'string'"
|
|
:column="col"
|
|
@column-click="$emit('column-click', $event)"
|
|
@column-mousedown="$emit('column-mousedown', $event)"
|
|
:groupRowsBy="groupRowsBy"
|
|
:groupRowSortField="groupRowSortField"
|
|
:sortMode="sortMode"
|
|
:sortField="sortField"
|
|
:sortOrder="sortOrder"
|
|
:multiSortMeta="multiSortMeta"
|
|
:allRowsSelected="allRowsSelected"
|
|
:empty="empty"
|
|
@checkbox-change="$emit('checkbox-change', $event)"
|
|
:filters="filters"
|
|
:filterDisplay="filterDisplay"
|
|
:filtersStore="filtersStore"
|
|
@filter-change="$emit('filter-change', $event)"
|
|
@filter-apply="$emit('filter-apply')"
|
|
@operator-change="$emit('operator-change', $event)"
|
|
@matchmode-change="$emit('matchmode-change', $event)"
|
|
@constraint-add="$emit('constraint-add', $event)"
|
|
@constraint-remove="$emit('constraint-remove', $event)"
|
|
@apply-click="$emit('apply-click', $event)"
|
|
:headerCheckboxIconTemplate="headerCheckboxIconTemplate"
|
|
:pt="pt"
|
|
/>
|
|
</template>
|
|
</tr>
|
|
</template>
|
|
</thead>
|
|
</template>
|
|
|
|
<script>
|
|
import BaseComponent from 'primevue/basecomponent';
|
|
import { ObjectUtils } from 'primevue/utils';
|
|
import ColumnFilter from './ColumnFilter.vue';
|
|
import HeaderCell from './HeaderCell.vue';
|
|
import HeaderCheckbox from './HeaderCheckbox.vue';
|
|
|
|
export default {
|
|
name: 'TableHeader',
|
|
extends: BaseComponent,
|
|
emits: [
|
|
'column-click',
|
|
'column-mousedown',
|
|
'column-dragstart',
|
|
'column-dragover',
|
|
'column-dragleave',
|
|
'column-drop',
|
|
'column-resizestart',
|
|
'checkbox-change',
|
|
'filter-change',
|
|
'filter-apply',
|
|
'operator-change',
|
|
'matchmode-change',
|
|
'constraint-add',
|
|
'constraint-remove',
|
|
'filter-clear',
|
|
'apply-click'
|
|
],
|
|
props: {
|
|
columnGroup: {
|
|
type: null,
|
|
default: null
|
|
},
|
|
columns: {
|
|
type: null,
|
|
default: null
|
|
},
|
|
rowGroupMode: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
groupRowsBy: {
|
|
type: [Array, String, Function],
|
|
default: null
|
|
},
|
|
resizableColumns: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
allRowsSelected: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
empty: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
sortMode: {
|
|
type: String,
|
|
default: 'single'
|
|
},
|
|
groupRowSortField: {
|
|
type: [String, Function],
|
|
default: null
|
|
},
|
|
sortField: {
|
|
type: [String, Function],
|
|
default: null
|
|
},
|
|
sortOrder: {
|
|
type: Number,
|
|
default: null
|
|
},
|
|
multiSortMeta: {
|
|
type: Array,
|
|
default: null
|
|
},
|
|
filterDisplay: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
filters: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
filtersStore: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
reorderableColumns: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
filterInputProps: {
|
|
type: null,
|
|
default: null
|
|
},
|
|
headerCheckboxIconTemplate: {
|
|
type: Function,
|
|
default: null
|
|
}
|
|
},
|
|
methods: {
|
|
columnProp(col, prop) {
|
|
return ObjectUtils.getVNodeProp(col, prop);
|
|
},
|
|
getColumnGroupPTOptions(key) {
|
|
return this.ptmo(this.getColumnGroupProps(), key, {
|
|
props: this.getColumnGroupProps(),
|
|
parent: {
|
|
props: this.$props,
|
|
state: this.$data
|
|
}
|
|
});
|
|
},
|
|
getColumnGroupProps() {
|
|
return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo
|
|
},
|
|
getRowPTOptions(row, key) {
|
|
return this.ptmo(this.getRowProp(row), key, {
|
|
props: row.props,
|
|
parent: {
|
|
props: this.$props,
|
|
state: this.$data
|
|
}
|
|
});
|
|
},
|
|
getRowProp(row) {
|
|
return row.props && row.props.pt ? row.props.pt : undefined; //@todo
|
|
},
|
|
getColumnPTOptions(column, key) {
|
|
return this.ptmo(this.getColumnProp(column), key, {
|
|
props: column.props,
|
|
parent: {
|
|
props: this.$props,
|
|
state: this.$data
|
|
}
|
|
});
|
|
},
|
|
getColumnProp(column) {
|
|
return column.props && column.props.pt ? column.props.pt : undefined; //@todo
|
|
},
|
|
getFilterColumnHeaderClass(column) {
|
|
return [this.cx('headerCell', { column }), this.columnProp(column, 'filterHeaderClass'), this.columnProp(column, 'class')];
|
|
},
|
|
getFilterColumnHeaderStyle(column) {
|
|
return [this.columnProp(column, 'filterHeaderStyle'), this.columnProp(column, 'style')];
|
|
},
|
|
getHeaderRows() {
|
|
let rows = [];
|
|
|
|
let columnGroup = this.columnGroup;
|
|
|
|
if (columnGroup.children && columnGroup.children.default) {
|
|
for (let child of columnGroup.children.default()) {
|
|
if (child.type.name === 'Row') {
|
|
rows.push(child);
|
|
} else if (child.children && child.children instanceof Array) {
|
|
rows = child.children;
|
|
}
|
|
}
|
|
|
|
return rows;
|
|
}
|
|
},
|
|
getHeaderColumns(row) {
|
|
let cols = [];
|
|
|
|
if (row.children && row.children.default) {
|
|
row.children.default().forEach((child) => {
|
|
if (child.children && child.children instanceof Array) cols = [...cols, ...child.children];
|
|
else if (child.type.name === 'Column') cols.push(child);
|
|
});
|
|
|
|
return cols;
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
DTHeaderCell: HeaderCell,
|
|
DTHeaderCheckbox: HeaderCheckbox,
|
|
DTColumnFilter: ColumnFilter
|
|
}
|
|
};
|
|
</script>
|