Refactor #3924 - For TreeTable
Tuğçe Küçükoğlu
parent
6b9c617700
commit
f541096d33
|
|
@ -221,6 +221,12 @@ const TreeTableProps = [
|
|||
type: 'string',
|
||||
default: 'null',
|
||||
description: 'Defines the responsive mode, currently only option is scroll.'
|
||||
},
|
||||
{
|
||||
name: 'pt',
|
||||
type: 'any',
|
||||
default: 'null',
|
||||
description: 'Uses to pass attributes to DOM elements inside the component.'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@ import { ToastPassThroughOptions } from '../toast';
|
|||
import { ToolbarPassThroughOptions } from '../toolbar';
|
||||
import { TreePassThroughOptions } from '../tree';
|
||||
import { TreeSelectPassThroughOptions } from '../treeselect';
|
||||
import { TreeTablePassThroughOptions } from '../treetable';
|
||||
import { DefaultPTOptions } from '../ts-helpers';
|
||||
import { VirtualScrollerPassThroughOptions } from '../virtualscroller';
|
||||
|
||||
|
|
@ -179,6 +180,7 @@ interface PrimeVuePTOptions {
|
|||
toolbar?: DefaultPTOptions<ToolbarPassThroughOptions>;
|
||||
tree?: DefaultPTOptions<TreePassThroughOptions>;
|
||||
treeselect?: DefaultPTOptions<TreeSelectPassThroughOptions>;
|
||||
treetable?: DefaultPTOptions<TreeTablePassThroughOptions>;
|
||||
virtualscroller?: DefaultPTOptions<VirtualScrollerPassThroughOptions>;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,11 +19,11 @@
|
|||
<span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
|
||||
<div class="p-column-header-content" v-bind="getColumnPTOptions('headerContent')">
|
||||
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
|
||||
<span v-if="columnProp('header')" class="p-column-title" v-bind="{ ...getColumnPTOptions('headerTitle') }">{{ columnProp('header') }}</span>
|
||||
<span v-if="columnProp('sortable')" v-bind="{ ...getColumnPTOptions('sort') }">
|
||||
<span v-if="columnProp('header')" class="p-column-title" v-bind="getColumnPTOptions('headerTitle')">{{ columnProp('header') }}</span>
|
||||
<span v-if="columnProp('sortable')" v-bind="getColumnPTOptions('sort')">
|
||||
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" class="p-sortable-column-icon" />
|
||||
</span>
|
||||
<span v-if="isMultiSorted()" class="p-sortable-column-badge" v-bind="{ ...getColumnPTOptions('sortBadge') }">{{ getBadgeValue() }}</span>
|
||||
<span v-if="isMultiSorted()" class="p-sortable-column-badge" v-bind="getColumnPTOptions('sortBadge')">{{ getBadgeValue() }}</span>
|
||||
<DTHeaderCheckbox
|
||||
v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'"
|
||||
:checked="allRowsSelected"
|
||||
|
|
|
|||
|
|
@ -1,27 +1,28 @@
|
|||
<template>
|
||||
<td :style="containerStyle" :class="containerClass" role="cell">
|
||||
<button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1">
|
||||
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
|
||||
<button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPTOptions('rowToggler')">
|
||||
<component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" class="p-tree-toggler-icon" />
|
||||
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" class="p-tree-toggler-icon" />
|
||||
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" class="p-tree-toggler-icon" />
|
||||
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" class="p-tree-toggler-icon" v-bind="getColumnPTOptions('rowTogglerIcon')" />
|
||||
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" class="p-tree-toggler-icon" v-bind="getColumnPTOptions('rowTogglerIcon')" />
|
||||
</button>
|
||||
<div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox">
|
||||
<div class="p-hidden-accessible">
|
||||
<input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" />
|
||||
<div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox" v-bind="getColumnPTOptions('checkboxWrapper')">
|
||||
<div class="p-hidden-accessible" v-bind="getColumnPTOptions('hiddenInputWrapper')">
|
||||
<input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" v-bind="getColumnPTOptions('hiddenInput')" />
|
||||
</div>
|
||||
<div ref="checkboxEl" :class="checkboxClass">
|
||||
<div ref="checkboxEl" :class="checkboxClass" v-bind="getColumnCheckboxPTOptions('checkbox')">
|
||||
<component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
|
||||
<component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" class="p-checkbox-icon" />
|
||||
<component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" class="p-checkbox-icon" v-bind="getColumnCheckboxPTOptions('checkboxIcon')" />
|
||||
</div>
|
||||
</div>
|
||||
<component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />
|
||||
<template v-else>
|
||||
<span>{{ resolveFieldData(node.data, columnProp('field')) }}</span>
|
||||
<span v-bind="getColumnPTOptions('cellContent')">{{ resolveFieldData(node.data, columnProp('field')) }}</span>
|
||||
</template>
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import CheckIcon from 'primevue/icons/check';
|
||||
import ChevronDownIcon from 'primevue/icons/chevrondown';
|
||||
import ChevronRightIcon from 'primevue/icons/chevronright';
|
||||
|
|
@ -31,6 +32,7 @@ import { DomHandler, ObjectUtils } from 'primevue/utils';
|
|||
|
||||
export default {
|
||||
name: 'BodyCell',
|
||||
extends: BaseComponent,
|
||||
emits: ['node-toggle', 'checkbox-toggle'],
|
||||
props: {
|
||||
node: {
|
||||
|
|
@ -97,6 +99,32 @@ export default {
|
|||
columnProp(prop) {
|
||||
return ObjectUtils.getVNodeProp(this.column, prop);
|
||||
},
|
||||
getColumnPTOptions(key) {
|
||||
return this.ptmo(this.getColumnProp(), key, {
|
||||
props: this.column.props,
|
||||
parent: {
|
||||
props: this.$props,
|
||||
state: this.$data
|
||||
}
|
||||
});
|
||||
},
|
||||
getColumnCheckboxPTOptions(key) {
|
||||
return this.ptmo(this.getColumnProp(), key, {
|
||||
props: this.column.props,
|
||||
parent: {
|
||||
props: this.$props,
|
||||
state: this.$data
|
||||
},
|
||||
context: {
|
||||
checked: this.checked,
|
||||
focused: this.checkboxFocused,
|
||||
partialChecked: this.partialChecked
|
||||
}
|
||||
});
|
||||
},
|
||||
getColumnProp() {
|
||||
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo
|
||||
},
|
||||
updateStickyPosition() {
|
||||
if (this.columnProp('frozen')) {
|
||||
let align = this.columnProp('alignFrozen');
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
<template>
|
||||
<td :style="containerStyle" :class="containerClass">
|
||||
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('footerCell') }">
|
||||
<component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
|
||||
{{ columnProp('footer') }}
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { DomHandler, ObjectUtils } from 'primevue/utils';
|
||||
|
||||
export default {
|
||||
name: 'FooterCell',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
column: {
|
||||
type: Object,
|
||||
|
|
@ -35,6 +37,18 @@ export default {
|
|||
columnProp(prop) {
|
||||
return ObjectUtils.getVNodeProp(this.column, prop);
|
||||
},
|
||||
getColumnPTOptions(key) {
|
||||
return this.ptmo(this.getColumnProp(), key, {
|
||||
props: this.column.props,
|
||||
parent: {
|
||||
props: this.$props,
|
||||
state: this.$data
|
||||
}
|
||||
});
|
||||
},
|
||||
getColumnProp() {
|
||||
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
|
||||
},
|
||||
updateStickyPosition() {
|
||||
if (this.columnProp('frozen')) {
|
||||
let align = this.columnProp('alignFrozen');
|
||||
|
|
|
|||
|
|
@ -1,16 +1,26 @@
|
|||
<template>
|
||||
<th :style="[containerStyle]" :class="containerClass" @click="onClick" @keydown="onKeyDown" :tabindex="columnProp('sortable') ? '0' : null" :aria-sort="ariaSort" role="columnheader">
|
||||
<span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart"></span>
|
||||
<th
|
||||
:style="[containerStyle]"
|
||||
:class="containerClass"
|
||||
@click="onClick"
|
||||
@keydown="onKeyDown"
|
||||
:tabindex="columnProp('sortable') ? '0' : null"
|
||||
:aria-sort="ariaSort"
|
||||
role="columnheader"
|
||||
v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('headerCell') }"
|
||||
>
|
||||
<span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
|
||||
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
|
||||
<span v-if="columnProp('header')" class="p-column-title">{{ columnProp('header') }}</span>
|
||||
<span v-if="columnProp('sortable')">
|
||||
<span v-if="columnProp('header')" class="p-column-title" v-bind="getColumnPTOptions('headerTitle')">{{ columnProp('header') }}</span>
|
||||
<span v-if="columnProp('sortable')" v-bind="getColumnPTOptions('sort')">
|
||||
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" class="p-sortable-column-icon" />
|
||||
</span>
|
||||
<span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getMultiSortMetaIndex() + 1 }}</span>
|
||||
<span v-if="isMultiSorted()" class="p-sortable-column-badge" v-bind="getColumnPTOptions('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
|
||||
</th>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import SortAltIcon from 'primevue/icons/sortalt';
|
||||
import SortAmountDownIcon from 'primevue/icons/sortamountdown';
|
||||
import SortAmountUpAltIcon from 'primevue/icons/sortamountupalt';
|
||||
|
|
@ -18,6 +28,7 @@ import { DomHandler, ObjectUtils } from 'primevue/utils';
|
|||
|
||||
export default {
|
||||
name: 'HeaderCell',
|
||||
extends: BaseComponent,
|
||||
emits: ['column-click', 'column-resizestart'],
|
||||
props: {
|
||||
column: {
|
||||
|
|
@ -64,6 +75,18 @@ export default {
|
|||
columnProp(prop) {
|
||||
return ObjectUtils.getVNodeProp(this.column, prop);
|
||||
},
|
||||
getColumnPTOptions(key) {
|
||||
return this.ptmo(this.getColumnProp(), key, {
|
||||
props: this.column.props,
|
||||
parent: {
|
||||
props: this.$props,
|
||||
state: this.$data
|
||||
}
|
||||
});
|
||||
},
|
||||
getColumnProp() {
|
||||
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
|
||||
},
|
||||
updateStickyPosition() {
|
||||
if (this.columnProp('frozen')) {
|
||||
let align = this.columnProp('alignFrozen');
|
||||
|
|
|
|||
|
|
@ -8,9 +8,20 @@
|
|||
*
|
||||
*/
|
||||
import { VNode } from 'vue';
|
||||
import { PaginatorPassThroughOptionType } from '../paginator';
|
||||
import { TreeNode } from '../tree';
|
||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||
|
||||
export declare type TreeTablePassThroughOptionType = TreeTablePassThroughAttributes | ((options: TreeTablePassThroughMethodOptions) => TreeTablePassThroughAttributes) | null | undefined;
|
||||
|
||||
/**
|
||||
* Custom passthrough(pt) option method.
|
||||
*/
|
||||
export interface TreeTablePassThroughMethodOptions {
|
||||
props: TreeTableProps;
|
||||
state: TreeTableState;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom treetable filter metadata.
|
||||
*/
|
||||
|
|
@ -153,6 +164,152 @@ export interface TreeTableSelectionKeys {
|
|||
[key: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom passthrough(pt) options.
|
||||
* @see {@link TreeTableProps.pt}
|
||||
*/
|
||||
export interface TreeTablePassThroughOptions {
|
||||
/**
|
||||
* Uses to pass attributes to the root's DOM element.
|
||||
*/
|
||||
root?: TreeTablePassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the loading wrapper's DOM element.
|
||||
*/
|
||||
loadingWrapper?: TreeTablePassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the loading overlay's DOM element.
|
||||
*/
|
||||
loadingOverlay?: TreeTablePassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the loading icon's DOM element.
|
||||
*/
|
||||
loadingIcon?: TreeTablePassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header's DOM element.
|
||||
*/
|
||||
header?: TreeTablePassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the Paginator component.
|
||||
* @see {@link PaginatorPassThroughOptionType}
|
||||
*/
|
||||
paginator?: PaginatorPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the wrapper's DOM element.
|
||||
*/
|
||||
wrapper?: TreeTablePassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the table's DOM element.
|
||||
*/
|
||||
table?: TreeTablePassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the thead's DOM element.
|
||||
*/
|
||||
thead?: TreeTablePassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header row's DOM element.
|
||||
*/
|
||||
headerRow?: TreeTablePassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header cell's DOM element.
|
||||
*/
|
||||
headerCell?: TreeTablePassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the tbody's DOM element.
|
||||
*/
|
||||
tbody?: TreeTablePassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the empty message's DOM element.
|
||||
*/
|
||||
emptyMessage?: TreeTablePassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the body cell's DOM element.
|
||||
*/
|
||||
bodyCell?: TreeTablePassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the tfoot's DOM element.
|
||||
*/
|
||||
tfoot?: TreeTablePassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the footer row's DOM element.
|
||||
*/
|
||||
footerRow?: TreeTablePassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the footer's DOM element.
|
||||
*/
|
||||
footer?: TreeTablePassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the resize helper's DOM element.
|
||||
*/
|
||||
resizeHelper?: TreeTablePassThroughOptionType;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom passthrough attributes for each DOM elements
|
||||
*/
|
||||
export interface TreeTablePassThroughAttributes {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines current inline state in TreeTable component.
|
||||
*/
|
||||
export interface TreeTableState {
|
||||
/**
|
||||
* Current index of first record as a number.
|
||||
*/
|
||||
d_first: number;
|
||||
/**
|
||||
* Current number of rows to display in new page as a number.
|
||||
*/
|
||||
d_rows: number;
|
||||
/**
|
||||
* Current sort field.
|
||||
*/
|
||||
d_sortField: string | ((item: any) => string) | undefined;
|
||||
/**
|
||||
* Current order to sort the data by default.
|
||||
*/
|
||||
d_sortOrder: number;
|
||||
/**
|
||||
* Current sortmeta objects to sort the data.
|
||||
*/
|
||||
d_multiSortMeta: TreeTableSortMeta[];
|
||||
/**
|
||||
* Current group sortmeta objects to sort the data.
|
||||
*/
|
||||
d_groupRowsSortMeta: TreeTableSortMeta;
|
||||
/**
|
||||
* Current keys of selected rows.
|
||||
*/
|
||||
d_selectionKeys: any[];
|
||||
/**
|
||||
* Current keys of rows in expanded state.
|
||||
*/
|
||||
d_expandedRowKeys: any[];
|
||||
/**
|
||||
* Current order of the columns.
|
||||
*/
|
||||
d_columnOrder: string[];
|
||||
/**
|
||||
* Current keys of editing rows.
|
||||
*/
|
||||
d_editingRowKeys: any;
|
||||
/**
|
||||
* Current editing meta data.
|
||||
*/
|
||||
d_editingMeta: object;
|
||||
/**
|
||||
* Current filters object.
|
||||
*/
|
||||
d_filters: TreeTableFilterMeta;
|
||||
/**
|
||||
* Current editing as a boolean.
|
||||
* @defaultValue false
|
||||
*/
|
||||
d_editing: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid properties in TreeTable component.
|
||||
*/
|
||||
|
|
@ -356,6 +513,11 @@ export interface TreeTableProps {
|
|||
* Props to pass to the table element.
|
||||
*/
|
||||
tableProps?: any | undefined;
|
||||
/**
|
||||
* Uses to pass attributes to DOM elements inside the component.
|
||||
* @type {TreeTablePassThroughOptions}
|
||||
*/
|
||||
pt?: TreeTablePassThroughOptions;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div :class="containerClass" data-scrollselectors=".p-treetable-scrollable-body" role="table">
|
||||
<div v-if="loading" class="p-treetable-loading">
|
||||
<div class="p-treetable-loading-overlay p-component-overlay">
|
||||
<div :class="containerClass" data-scrollselectors=".p-treetable-scrollable-body" role="table" v-bind="ptm('root')">
|
||||
<div v-if="loading" class="p-treetable-loading" v-bind="ptm('loadingWrapper')">
|
||||
<div class="p-treetable-loading-overlay p-component-overlay" v-bind="ptm('loadingOverlay')">
|
||||
<slot name="loadingicon">
|
||||
<component :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-treetable-loading-icon', loadingIcon]" />
|
||||
<component :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-treetable-loading-icon', loadingIcon]" v-bind="ptm('loadingIcon')" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$slots.header" class="p-treetable-header">
|
||||
<div v-if="$slots.header" class="p-treetable-header" v-bind="ptm('header')">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<TTPaginator
|
||||
|
|
@ -22,6 +22,7 @@
|
|||
class="p-paginator-top"
|
||||
@page="onPage($event)"
|
||||
:alwaysShow="alwaysShowPaginator"
|
||||
:pt="ptm('paginator')"
|
||||
>
|
||||
<template v-if="$slots.paginatorstart" #start>
|
||||
<slot name="paginatorstart"></slot>
|
||||
|
|
@ -42,10 +43,10 @@
|
|||
<slot name="paginatorlastpagelinkicon"></slot>
|
||||
</template>
|
||||
</TTPaginator>
|
||||
<div class="p-treetable-wrapper" :style="{ maxHeight: scrollHeight }">
|
||||
<table ref="table" role="table" v-bind="tableProps">
|
||||
<thead class="p-treetable-thead" role="rowgroup">
|
||||
<tr role="row">
|
||||
<div class="p-treetable-wrapper" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
|
||||
<table ref="table" role="table" v-bind="{ ...tableProps, ...ptm('table') }">
|
||||
<thead class="p-treetable-thead" role="rowgroup" v-bind="ptm('thead')">
|
||||
<tr role="row" v-bind="ptm('headerRow')">
|
||||
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
|
||||
<TTHeaderCell
|
||||
v-if="!columnProp(col, 'hidden')"
|
||||
|
|
@ -57,18 +58,19 @@
|
|||
:sortMode="sortMode"
|
||||
@column-click="onColumnHeaderClick"
|
||||
@column-resizestart="onColumnResizeStart"
|
||||
:pt="pt"
|
||||
></TTHeaderCell>
|
||||
</template>
|
||||
</tr>
|
||||
<tr v-if="hasColumnFilter()">
|
||||
<tr v-if="hasColumnFilter()" 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')" :class="getFilterColumnHeaderClass(col)" :style="[columnProp(col, 'style'), columnProp(col, 'filterHeaderStyle')]">
|
||||
<th v-if="!columnProp(col, 'hidden')" :class="getFilterColumnHeaderClass(col)" :style="[columnProp(col, 'style'), columnProp(col, 'filterHeaderStyle')]" v-bind="ptm('headerCell')">
|
||||
<component v-if="col.children && col.children.filter" :is="col.children.filter" :column="col" />
|
||||
</th>
|
||||
</template>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="p-treetable-tbody" role="rowgroup">
|
||||
<tbody class="p-treetable-tbody" role="rowgroup" v-bind="ptm('tbody')">
|
||||
<template v-if="!empty">
|
||||
<TTRow
|
||||
v-for="(node, index) of dataToRender"
|
||||
|
|
@ -87,18 +89,19 @@
|
|||
@node-toggle="onNodeToggle"
|
||||
@node-click="onNodeClick"
|
||||
@checkbox-change="onCheckboxChange"
|
||||
:pt="pt"
|
||||
></TTRow>
|
||||
</template>
|
||||
<tr v-else class="p-treetable-emptymessage">
|
||||
<td :colspan="columns.length">
|
||||
<tr v-else class="p-treetable-emptymessage" v-bind="ptm('emptyMessage')">
|
||||
<td :colspan="columns.length" v-bind="ptm('bodyCell')">
|
||||
<slot name="empty"></slot>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot v-if="hasFooter" class="p-treetable-tfoot" role="rowgroup">
|
||||
<tr role="row">
|
||||
<tfoot v-if="hasFooter" class="p-treetable-tfoot" role="rowgroup" v-bind="ptm('tfoot')">
|
||||
<tr role="row" v-bind="ptm('footerRow')">
|
||||
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
|
||||
<TTFooterCell v-if="!columnProp(col, 'hidden')" :column="col"></TTFooterCell>
|
||||
<TTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :pt="pt"></TTFooterCell>
|
||||
</template>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
|
@ -116,6 +119,7 @@
|
|||
class="p-paginator-bottom"
|
||||
@page="onPage($event)"
|
||||
:alwaysShow="alwaysShowPaginator"
|
||||
:pt="pt"
|
||||
>
|
||||
<template v-if="$slots.paginatorstart" #start>
|
||||
<slot name="paginatorstart"></slot>
|
||||
|
|
@ -136,15 +140,16 @@
|
|||
<slot name="paginatorlastpagelinkicon"></slot>
|
||||
</template>
|
||||
</TTPaginator>
|
||||
<div v-if="$slots.footer" class="p-treetable-footer">
|
||||
<div v-if="$slots.footer" class="p-treetable-footer" v-bind="ptm('footer')">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
<div ref="resizeHelper" class="p-column-resizer-helper p-highlight" style="display: none"></div>
|
||||
<div ref="resizeHelper" class="p-column-resizer-helper p-highlight" style="display: none" v-bind="ptm('resizeHelper')"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FilterService } from 'primevue/api';
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import SpinnerIcon from 'primevue/icons/spinner';
|
||||
import Paginator from 'primevue/paginator';
|
||||
import { DomHandler, ObjectUtils } from 'primevue/utils';
|
||||
|
|
@ -154,6 +159,7 @@ import TreeTableRow from './TreeTableRow.vue';
|
|||
|
||||
export default {
|
||||
name: 'TreeTable',
|
||||
extends: BaseComponent,
|
||||
emits: [
|
||||
'node-expand',
|
||||
'node-collapse',
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
@click="onClick"
|
||||
@keydown="onKeyDown"
|
||||
@touchend="onTouchEnd"
|
||||
v-bind="ptm('row')"
|
||||
>
|
||||
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
|
||||
<TTBodyCell
|
||||
|
|
@ -30,6 +31,7 @@
|
|||
:templates="templates"
|
||||
@node-toggle="$emit('node-toggle', $event)"
|
||||
@checkbox-toggle="toggleCheckbox"
|
||||
:pt="pt"
|
||||
></TTBodyCell>
|
||||
</template>
|
||||
</tr>
|
||||
|
|
@ -51,16 +53,19 @@
|
|||
@node-toggle="$emit('node-toggle', $event)"
|
||||
@node-click="$emit('node-click', $event)"
|
||||
@checkbox-change="onCheckboxChange"
|
||||
:pt="pt"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { DomHandler, ObjectUtils } from 'primevue/utils';
|
||||
import BodyCell from './BodyCell.vue';
|
||||
|
||||
export default {
|
||||
name: 'TreeTableRow',
|
||||
extends: BaseComponent,
|
||||
emits: ['node-click', 'node-toggle', 'checkbox-change', 'nodeClick', 'nodeToggle', 'checkboxChange'],
|
||||
props: {
|
||||
node: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue