Refactor #3965 - For DataTable & Column & ColumnGroup & Row
Tuğçe Küçükoğlu
parent
ea9062ae3a
commit
2669fd5925
|
|
@ -0,0 +1,191 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
|
||||
export default {
|
||||
name: 'BaseColumn',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
columnKey: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
field: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
},
|
||||
sortField: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
},
|
||||
filterField: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
},
|
||||
dataType: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
sortable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
header: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
footer: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
style: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
class: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
headerStyle: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
headerClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
bodyStyle: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
bodyClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
footerStyle: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
footerClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
showFilterMenu: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showFilterOperator: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showClearButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showApplyButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showFilterMatchModes: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showAddButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
filterMatchModeOptions: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
maxConstraints: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
excludeGlobalFilter: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
filterHeaderClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
filterHeaderStyle: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
filterMenuClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
filterMenuStyle: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
selectionMode: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
expander: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
colspan: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
rowspan: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
rowReorder: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
rowReorderIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
reorderableColumn: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
rowEditor: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
frozen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
alignFrozen: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
exportable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
exportHeader: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
exportFooter: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
filterMatchMode: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
hidden: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,187 +1,9 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import BaseColumn from './BaseColumn.vue';
|
||||
|
||||
export default {
|
||||
name: 'Column',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
columnKey: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
field: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
},
|
||||
sortField: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
},
|
||||
filterField: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
},
|
||||
dataType: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
sortable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
header: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
footer: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
style: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
class: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
headerStyle: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
headerClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
bodyStyle: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
bodyClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
footerStyle: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
footerClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
showFilterMenu: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showFilterOperator: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showClearButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showApplyButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showFilterMatchModes: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showAddButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
filterMatchModeOptions: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
maxConstraints: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
excludeGlobalFilter: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
filterHeaderClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
filterHeaderStyle: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
filterMenuClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
filterMenuStyle: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
selectionMode: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
expander: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
colspan: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
rowspan: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
rowReorder: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
rowReorderIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
reorderableColumn: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
rowEditor: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
frozen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
alignFrozen: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
exportable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
exportHeader: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
exportFooter: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
filterMatchMode: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
hidden: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
extends: BaseColumn,
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
|
||||
export default {
|
||||
name: 'BaseColumnGroup',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import BaseColumnGroup from './BaseColumnGroup.vue';
|
||||
|
||||
export default {
|
||||
name: 'ColumnGroup',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
extends: BaseColumnGroup,
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,741 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.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-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;
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ instance, props }) => [
|
||||
'p-datatable p-component',
|
||||
{
|
||||
'p-datatable-hoverable-rows': props.rowHover || props.selectionMode,
|
||||
'p-datatable-resizable': props.resizableColumns,
|
||||
'p-datatable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
|
||||
'p-datatable-scrollable': props.scrollable,
|
||||
'p-datatable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
|
||||
'p-datatable-responsive-stack': props.responsiveLayout === 'stack',
|
||||
'p-datatable-responsive-scroll': props.responsiveLayout === 'scroll',
|
||||
'p-datatable-striped': props.stripedRows,
|
||||
'p-datatable-gridlines': props.showGridlines,
|
||||
'p-datatable-grouped-header': instance.headerColumnGroup != null,
|
||||
'p-datatable-grouped-footer': instance.footerColumnGroup != null
|
||||
}
|
||||
],
|
||||
loadingOverlay: 'p-datatable-loading-overlay p-component-overlay',
|
||||
loadingIcon: 'p-datatable-loading-icon',
|
||||
header: 'p-datatable-header',
|
||||
paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
|
||||
wrapper: 'p-datatable-wrapper',
|
||||
table: ({ props }) => [
|
||||
'p-datatable-table',
|
||||
{
|
||||
'p-datatable-scrollable-table': props.scrollable,
|
||||
'p-datatable-resizable-table': props.resizableColumns,
|
||||
'p-datatable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
|
||||
}
|
||||
],
|
||||
//tablehead
|
||||
thead: 'p-datatable-thead',
|
||||
// headercell
|
||||
headerCell: ({ instance, props, column }) =>
|
||||
column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== columnProp(column, 'field'))
|
||||
? [
|
||||
'p-filter-column',
|
||||
{
|
||||
'p-frozen-column': instance.columnProp(column, 'frozen')
|
||||
}
|
||||
]
|
||||
: [
|
||||
{
|
||||
'p-sortable-column': instance.columnProp('sortable'),
|
||||
'p-resizable-column': instance.resizableColumns,
|
||||
'p-highlight': instance.isColumnSorted(),
|
||||
'p-filter-column': props.filterColumn,
|
||||
'p-frozen-column': instance.columnProp('frozen'),
|
||||
'p-reorderable-column': props.reorderableColumns
|
||||
}
|
||||
],
|
||||
columnResizer: 'p-column-resizer',
|
||||
headerContent: 'p-column-header-content',
|
||||
headerTitle: 'p-column-title',
|
||||
sortIcon: 'p-sortable-column-icon',
|
||||
sortBadge: 'p-sortable-column-badge',
|
||||
//headercheckbox
|
||||
headerCheckboxWrapper: ({ instance }) => [
|
||||
'p-checkbox p-component',
|
||||
{
|
||||
'p-checkbox-focused': instance.focused,
|
||||
'p-disabled': instance.disabled
|
||||
}
|
||||
],
|
||||
hiddenHeaderInputWrapper: 'p-hidden-accessible',
|
||||
headerCheckbox: ({ instance }) => [
|
||||
'p-checkbox-box p-component',
|
||||
{
|
||||
'p-highlight': instance.checked,
|
||||
'p-disabled': instance.disabled,
|
||||
'p-focus': instance.focused
|
||||
}
|
||||
],
|
||||
headerCheckboxIcon: 'p-checkbox-icon',
|
||||
// columnfilter
|
||||
columnFilter: ({ props }) => [
|
||||
'p-column-filter p-fluid',
|
||||
{
|
||||
'p-column-filter-row': props.display === 'row',
|
||||
'p-column-filter-menu': props.display === 'menu'
|
||||
}
|
||||
],
|
||||
filterInput: 'p-fluid p-column-filter-element',
|
||||
filterMenuButton: ({ instance }) => [
|
||||
'p-column-filter-menu-button p-link',
|
||||
{
|
||||
'p-column-filter-menu-button-open': instance.overlayVisible,
|
||||
'p-column-filter-menu-button-active': instance.hasFilter()
|
||||
}
|
||||
],
|
||||
headerFilterClearButton: ({ instance }) => [
|
||||
'p-column-filter-clear-button p-link',
|
||||
{
|
||||
'p-hidden-space': !instance.hasRowFilter()
|
||||
}
|
||||
],
|
||||
filterOverlay: ({ instance, props }) => [
|
||||
{
|
||||
'p-column-filter-overlay p-component p-fluid': true,
|
||||
'p-column-filter-overlay-menu': props.display === 'menu',
|
||||
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||
}
|
||||
],
|
||||
filterRowItems: 'p-column-filter-row-items',
|
||||
filterRowItem: ({ instance, matchMode }) => [
|
||||
'p-column-filter-row-item',
|
||||
{
|
||||
'p-highlight': matchMode && instance.isRowMatchModeSelected(matchMode.value)
|
||||
}
|
||||
],
|
||||
filterSeparator: 'p-column-filter-separator',
|
||||
filterOperator: 'p-column-filter-operator',
|
||||
filterOperatorDropdown: 'p-column-filter-operator-dropdown',
|
||||
filterConstraints: 'p-column-filter-constraints',
|
||||
filterConstraint: 'p-column-filter-constraint',
|
||||
filterMatchModeDropdown: 'p-column-filter-matchmode-dropdown',
|
||||
filterRemoveButton: 'p-column-filter-remove-button p-button-text p-button-danger p-button-sm',
|
||||
filterAddRule: 'p-column-filter-add-rule',
|
||||
filterAddRuleButton: 'p-column-filter-add-button p-button-text p-button-sm',
|
||||
filterButtonbar: 'p-column-filter-buttonbar',
|
||||
filterClearButton: 'p-button-outlined p-button-sm',
|
||||
filterApplyButton: 'p-button-sm',
|
||||
//tablebody
|
||||
tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'),
|
||||
rowgroupHeader: 'p-rowgroup-header',
|
||||
rowGroupToggler: 'p-row-toggler p-link',
|
||||
rowGroupTogglerIcon: 'p-row-toggler-icon',
|
||||
row: ({ instance, props, rowData }) => {
|
||||
let rowStyleClass = [];
|
||||
|
||||
if (props.selectionMode) {
|
||||
rowStyleClass.push('p-selectable-row');
|
||||
}
|
||||
|
||||
if (props.selection) {
|
||||
rowStyleClass.push({
|
||||
'p-highlight': instance.isSelected(rowData)
|
||||
});
|
||||
}
|
||||
|
||||
if (props.contextMenuSelection) {
|
||||
rowStyleClass.push({
|
||||
'p-highlight-contextmenu': instance.isSelectedWithContextMenu(rowData)
|
||||
});
|
||||
}
|
||||
|
||||
return rowStyleClass;
|
||||
},
|
||||
rowExpansion: 'p-datatable-row-expansion',
|
||||
rowgroupFooter: 'p-rowgroup-footer',
|
||||
emptyMessage: 'p-datatable-emptymessage',
|
||||
//bodycell
|
||||
bodyCell: ({ instance }) => [
|
||||
{
|
||||
'p-selection-column': instance.columnProp('selectionMode') != null,
|
||||
'p-editable-column': instance.isEditable(),
|
||||
'p-cell-editing': instance.d_editing,
|
||||
'p-frozen-column': instance.columnProp('frozen')
|
||||
}
|
||||
],
|
||||
columnTitle: 'p-column-title',
|
||||
rowReorderIcon: 'p-datatable-reorderablerow-handle',
|
||||
rowToggler: 'p-row-toggler p-link',
|
||||
rowTogglerIcon: 'p-row-toggler-icon',
|
||||
rowEditorInitButton: 'p-row-editor-init p-link',
|
||||
rowEditorInitIcon: 'p-row-editor-init-icon',
|
||||
rowEditorSaveButton: 'p-row-editor-save p-link',
|
||||
rowEditorSaveIcon: 'p-row-editor-save-icon',
|
||||
rowEditorCancelButton: 'p-row-editor-cancel p-link',
|
||||
rowEditorCancelIcon: 'p-row-editor-cancel-icon',
|
||||
//rowcheckbox
|
||||
checkboxWrapper: ({ instance }) => [
|
||||
'p-checkbox p-component',
|
||||
{
|
||||
'p-checkbox-focused': instance.focused
|
||||
}
|
||||
],
|
||||
hiddenInputWrapper: 'p-hidden-accessible',
|
||||
checkbox: ({ instance }) => [
|
||||
'p-checkbox-box p-component',
|
||||
{
|
||||
'p-highlight': instance.checked,
|
||||
'p-disabled': instance.$attrs.disabled,
|
||||
'p-focus': instance.focused
|
||||
}
|
||||
],
|
||||
checkboxIcon: 'p-checkbox-icon',
|
||||
//rowradiobutton
|
||||
radiobuttonWrapper: ({ instance }) => [
|
||||
'p-radiobutton p-component',
|
||||
{
|
||||
'p-radiobutton-focused': instance.focused
|
||||
}
|
||||
],
|
||||
radiobutton: ({ instance }) => [
|
||||
'p-radiobutton-box p-component',
|
||||
{
|
||||
'p-highlight': instance.checked,
|
||||
'p-disabled': instance.$attrs.disabled,
|
||||
'p-focus': instance.focused
|
||||
}
|
||||
],
|
||||
radiobuttonIcon: 'p-radiobutton-icon',
|
||||
//tablefooter
|
||||
tfoot: 'p-datatable-tfoot',
|
||||
//footercell
|
||||
footerCell: ({ instance }) => [
|
||||
{
|
||||
'p-frozen-column': instance.columnProp('frozen')
|
||||
}
|
||||
],
|
||||
//datatable
|
||||
virtualScrollerSpacer: 'p-datatable-virtualscroller-spacer',
|
||||
footer: 'p-datatable-footer',
|
||||
resizeHelper: 'p-column-resizer-helper',
|
||||
reorderIndicatorUp: 'p-datatable-reorder-indicator-up',
|
||||
reorderIndicatorDown: 'p-datatable-reorder-indicator-down'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { id: 'primevue_datatable_style', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseDataTable',
|
||||
extends: BaseComponent,
|
||||
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
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -2,8 +2,20 @@
|
|||
<td v-if="loading" :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }">
|
||||
<component :is="column.children.loading" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :loadingOptions="loadingOptions" />
|
||||
</td>
|
||||
<td v-else :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown" role="cell" v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }">
|
||||
<span v-if="responsiveLayout === 'stack'" class="p-column-title" v-bind="getColumnPTOptions(column, 'columnTitle')">{{ columnProp('header') }}</span>
|
||||
<td
|
||||
v-else
|
||||
:style="containerStyle"
|
||||
:class="containerClass"
|
||||
@click="onClick"
|
||||
@keydown="onKeyDown"
|
||||
role="cell"
|
||||
v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }"
|
||||
:data-p-selection-column="columnProp('selectionMode') != null"
|
||||
:data-p-editable-column="isEditable()"
|
||||
:data-p-cell-editing="d_editing"
|
||||
:data-p-frozen-column="columnProp('frozen')"
|
||||
>
|
||||
<span v-if="responsiveLayout === 'stack'" :class="cx('columnTitle')" v-bind="getColumnPTOptions(column, 'columnTitle')">{{ columnProp('header') }}</span>
|
||||
<component v-if="column.children && column.children.body && !d_editing" :is="column.children.body" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :editorInitCallback="editorInitCallback" />
|
||||
<component
|
||||
v-else-if="column.children && column.children.editor && d_editing"
|
||||
|
|
@ -31,28 +43,30 @@
|
|||
/>
|
||||
</template>
|
||||
<template v-else-if="columnProp('rowReorder')">
|
||||
<component :is="column.children && column.children.rowreordericon ? column.children.rowreordericon : columnProp('rowReorderIcon') ? 'i' : 'BarsIcon'" :class="['p-datatable-reorderablerow-handle', columnProp('rowReorderIcon')]" />
|
||||
<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')]" />
|
||||
<BarsIcon v-else :class="cx('rowReorderIcon')" data-pc-section="rowreordericon" />
|
||||
</template>
|
||||
<template v-else-if="columnProp('expander')">
|
||||
<button v-ripple class="p-row-toggler p-link" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow" v-bind="getColumnPTOptions(column, 'rowToggler')">
|
||||
<button v-ripple :class="cx('rowToggler')" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow" v-bind="getColumnPTOptions(column, 'rowToggler')">
|
||||
<component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :rowExpanded="isRowExpanded" />
|
||||
<template v-else>
|
||||
<span v-if="isRowExpanded && expandedRowIcon" :class="['p-row-toggler-icon', expandedRowIcon]" />
|
||||
<ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
|
||||
<span v-else-if="!isRowExpanded && collapsedRowIcon" :class="['p-row-toggler-icon', collapsedRowIcon]" />
|
||||
<ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
|
||||
<span v-if="isRowExpanded && expandedRowIcon" :class="[cx('rowTogglerIcon'), expandedRowIcon]" />
|
||||
<ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
|
||||
<span v-else-if="!isRowExpanded && collapsedRowIcon" :class="[cx('rowTogglerIcon'), collapsedRowIcon]" />
|
||||
<ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
|
||||
</template>
|
||||
</button>
|
||||
</template>
|
||||
<template v-else-if="editMode === 'row' && columnProp('rowEditor')">
|
||||
<button v-if="!d_editing" v-ripple class="p-row-editor-init p-link" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPTOptions(column, 'rowEditorInitButton')">
|
||||
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" class="p-row-editor-init-icon" v-bind="getColumnPTOptions(column, 'rowEditorInitIcon')" />
|
||||
<button v-if="!d_editing" v-ripple :class="cx('rowEditorInitButton')" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPTOptions(column, 'rowEditorInitButton')">
|
||||
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="cx('rowEditorInitIcon')" v-bind="getColumnPTOptions(column, 'rowEditorInitIcon')" />
|
||||
</button>
|
||||
<button v-if="d_editing" v-ripple class="p-row-editor-save p-link" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPTOptions(column, 'rowEditorEditButton')">
|
||||
<component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" class="p-row-editor-save-icon" v-bind="getColumnPTOptions(column, 'rowEditorEditIcon')" />
|
||||
<button v-if="d_editing" v-ripple :class="cx('rowEditorSaveButton')" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPTOptions(column, 'rowEditorSaveButton')">
|
||||
<component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="cx('rowEditorSaveIcon')" v-bind="getColumnPTOptions(column, 'rowEditorSaveIcon')" />
|
||||
</button>
|
||||
<button v-if="d_editing" v-ripple class="p-row-editor-cancel p-link" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPTOptions(column, 'rowEditorCancelButton')">
|
||||
<component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" class="p-row-editor-cancel-icon" v-bind="getColumnPTOptions(column, 'rowEditorCancelIcon')" />
|
||||
<button v-if="d_editing" v-ripple :class="cx('rowEditorCancelButton')" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPTOptions(column, 'rowEditorCancelButton')">
|
||||
<component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="cx('rowEditorCancelIcon')" v-bind="getColumnPTOptions(column, 'rowEditorCancelIcon')" />
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>{{ resolveFieldData() }}</template>
|
||||
|
|
@ -331,7 +345,7 @@ export default {
|
|||
if (element) {
|
||||
let cell = element;
|
||||
|
||||
while (cell && !DomHandler.hasClass(cell, 'p-cell-editing')) {
|
||||
while (cell && !DomHandler.getAttribute(cell, 'data-p-cell-editing')) {
|
||||
cell = cell.parentElement;
|
||||
}
|
||||
|
||||
|
|
@ -352,7 +366,7 @@ export default {
|
|||
}
|
||||
|
||||
if (prevCell) {
|
||||
if (DomHandler.hasClass(prevCell, 'p-editable-column')) return prevCell;
|
||||
if (DomHandler.getAttribute(prevCell, 'data-p-editable-column')) return prevCell;
|
||||
else return this.findPreviousEditableColumn(prevCell);
|
||||
} else {
|
||||
return null;
|
||||
|
|
@ -370,7 +384,7 @@ export default {
|
|||
}
|
||||
|
||||
if (nextCell) {
|
||||
if (DomHandler.hasClass(nextCell, 'p-editable-column')) return nextCell;
|
||||
if (DomHandler.getAttribute(nextCell, 'data-p-editable-column')) return nextCell;
|
||||
else return this.findNextEditableColumn(nextCell);
|
||||
} else {
|
||||
return null;
|
||||
|
|
@ -443,16 +457,7 @@ export default {
|
|||
return this.columnProp('field');
|
||||
},
|
||||
containerClass() {
|
||||
return [
|
||||
this.columnProp('bodyClass'),
|
||||
this.columnProp('class'),
|
||||
{
|
||||
'p-selection-column': this.columnProp('selectionMode') != null,
|
||||
'p-editable-column': this.isEditable(),
|
||||
'p-cell-editing': this.d_editing,
|
||||
'p-frozen-column': this.columnProp('frozen')
|
||||
}
|
||||
];
|
||||
return [this.columnProp('bodyClass'), this.columnProp('class'), this.cx('bodyCell')];
|
||||
},
|
||||
containerStyle() {
|
||||
let bodyStyle = this.columnProp('bodyStyle');
|
||||
|
|
|
|||
|
|
@ -1,25 +1,24 @@
|
|||
<template>
|
||||
<div :class="containerClass" v-bind="getColumnPTOptions('columnFilter')">
|
||||
<div v-if="display === 'row'" class="p-fluid p-column-filter-element" v-bind="{ ...filterInputProps, ...getColumnPTOptions('filterInput') }">
|
||||
<div :class="cx('columnFilter')" v-bind="getColumnPTOptions('columnFilter')">
|
||||
<div v-if="display === 'row'" :class="cx('filterInput')" v-bind="{ ...filterInputProps, ...getColumnPTOptions('filterInput') }">
|
||||
<component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
|
||||
</div>
|
||||
<button
|
||||
v-if="showMenuButton"
|
||||
ref="icon"
|
||||
type="button"
|
||||
class="p-column-filter-menu-button p-link"
|
||||
:aria-label="filterMenuButtonAriaLabel"
|
||||
aria-haspopup="true"
|
||||
:aria-expanded="overlayVisible"
|
||||
:aria-controls="overlayId"
|
||||
:class="{ 'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter() }"
|
||||
@click="toggleMenu()"
|
||||
:class="cx('filterMenuButton')"
|
||||
@click="toggleMenu($event)"
|
||||
@keydown="onToggleButtonKeyDown($event)"
|
||||
v-bind="getColumnPTOptions('filterMenuButton')"
|
||||
>
|
||||
<component :is="filterIconTemplate || 'FilterIcon'" />
|
||||
</button>
|
||||
<button v-if="showClearButton && display === 'row'" :class="['p-column-filter-clear-button p-link', { 'p-hidden-space': !hasRowFilter() }]" type="button" @click="clearFilter()" v-bind="getColumnPTOptions('headerFilterClearButton')">
|
||||
<button v-if="showClearButton && display === 'row'" :class="cx('headerFilterClearButton')" type="button" @click="clearFilter()" v-bind="getColumnPTOptions('headerFilterClearButton')">
|
||||
<component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPTOptions('filterClearIcon')" />
|
||||
</button>
|
||||
<Portal>
|
||||
|
|
@ -31,7 +30,7 @@
|
|||
v-focustrap="{ autoFocus: true }"
|
||||
:aria-modal="overlayVisible"
|
||||
role="dialog"
|
||||
:class="overlayClass"
|
||||
:class="[cx('filterOverlay'), filterMenuclass]"
|
||||
@keydown.escape="hide"
|
||||
@click="onContentClick"
|
||||
@mousedown="onContentMouseDown"
|
||||
|
|
@ -39,61 +38,63 @@
|
|||
>
|
||||
<component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
|
||||
<template v-if="display === 'row'">
|
||||
<ul class="p-column-filter-row-items" v-bind="getColumnPTOptions('filterRowItems')">
|
||||
<ul :class="cx('filterRowItems')" v-bind="getColumnPTOptions('filterRowItems')">
|
||||
<li
|
||||
v-for="(matchMode, i) of matchModes"
|
||||
:key="matchMode.label"
|
||||
class="p-column-filter-row-item"
|
||||
:class="cx('filterRowItem', { matchMode })"
|
||||
@click="onRowMatchModeChange(matchMode.value)"
|
||||
@keydown="onRowMatchModeKeyDown($event)"
|
||||
@keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
|
||||
:class="{ 'p-highlight': isRowMatchModeSelected(matchMode.value) }"
|
||||
:tabindex="i === 0 ? '0' : null"
|
||||
v-bind="getColumnPTOptions('filterRowItem')"
|
||||
>
|
||||
{{ matchMode.label }}
|
||||
</li>
|
||||
<li class="p-column-filter-separator" v-bind="getColumnPTOptions('filterInput')"></li>
|
||||
<li class="p-column-filter-row-item" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="getColumnPTOptions('filterRowItem')">
|
||||
<li :class="cx('filterSeparator')" v-bind="getColumnPTOptions('filterSeparator')"></li>
|
||||
<li :class="cx('filterRowItem')" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="getColumnPTOptions('filterRowItem')">
|
||||
{{ noFilterLabel }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div v-if="isShowOperator" class="p-column-filter-operator" v-bind="getColumnPTOptions('filterOperator')">
|
||||
<div v-if="isShowOperator" :class="cx('filterOperator')" v-bind="getColumnPTOptions('filterOperator')">
|
||||
<CFDropdown
|
||||
:options="operatorOptions"
|
||||
:modelValue="operator"
|
||||
:aria-label="filterOperatorAriaLabel"
|
||||
class="p-column-filter-operator-dropdown"
|
||||
:class="cx('filterOperatorDropdown')"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
@update:modelValue="onOperatorChange($event)"
|
||||
:pt="getColumnPTOptions('filterOperatorDropdown')"
|
||||
data-pc-section="filteroperatordropdown"
|
||||
></CFDropdown>
|
||||
</div>
|
||||
<div class="p-column-filter-constraints" v-bind="getColumnPTOptions('filterConstraints')">
|
||||
<div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" class="p-column-filter-constraint" v-bind="getColumnPTOptions('filterConstraint')">
|
||||
<div :class="cx('filterConstraints')" v-bind="getColumnPTOptions('filterConstraints')">
|
||||
<div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" :class="cx('filterConstraint')" v-bind="getColumnPTOptions('filterConstraint')">
|
||||
<CFDropdown
|
||||
v-if="isShowMatchModes"
|
||||
:options="matchModes"
|
||||
:modelValue="fieldConstraint.matchMode"
|
||||
class="p-column-filter-matchmode-dropdown"
|
||||
:class="cx('filterMatchModeDropdown')"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
:aria-label="filterConstraintAriaLabel"
|
||||
@update:modelValue="onMenuMatchModeChange($event, i)"
|
||||
:pt="getColumnPTOptions('filterMatchModeDropdown')"
|
||||
data-pc-section="filtermatchmodedropdown"
|
||||
></CFDropdown>
|
||||
<component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
|
||||
<div v-bind="getColumnPTOptions('filterRemove')">
|
||||
<CFButton
|
||||
v-if="showRemoveIcon"
|
||||
type="button"
|
||||
class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm"
|
||||
:class="cx('filterRemoveButton')"
|
||||
@click="removeConstraint(i)"
|
||||
:label="removeRuleButtonLabel"
|
||||
:pt="getColumnPTOptions('filterRemoveButton')"
|
||||
data-pc-section="filterremovebutton"
|
||||
>
|
||||
<template #icon="iconProps">
|
||||
<component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPTOptions('filterRemoveButton')['icon']" />
|
||||
|
|
@ -102,18 +103,34 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isShowAddConstraint" class="p-column-filter-add-rule" v-bind="getColumnPTOptions('filterAddRule')">
|
||||
<CFButton type="button" :label="addRuleButtonLabel" iconPos="left" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()" :pt="getColumnPTOptions('filterAddRuleButton')">
|
||||
<div v-if="isShowAddConstraint" :class="cx('filterAddRule')" v-bind="getColumnPTOptions('filterAddRule')">
|
||||
<CFButton type="button" :label="addRuleButtonLabel" iconPos="left" :class="cx('filterAddRuleButton')" @click="addConstraint()" :pt="getColumnPTOptions('filterAddRuleButton')" data-pc-section="filteraddrulebutton">
|
||||
<template #icon="iconProps">
|
||||
<component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPTOptions('filterAddRuleButton')['icon']" />
|
||||
</template>
|
||||
</CFButton>
|
||||
</div>
|
||||
<div class="p-column-filter-buttonbar" v-bind="getColumnPTOptions('filterButtonbar')">
|
||||
<CFButton v-if="!filterClearTemplate && showClearButton" type="button" class="p-button-outlined p-button-sm" :label="clearButtonLabel" @click="clearFilter" :pt="getColumnPTOptions('filterClearButton')"></CFButton>
|
||||
<div :class="cx('filterButtonbar')" v-bind="getColumnPTOptions('filterButtonbar')">
|
||||
<CFButton
|
||||
v-if="!filterClearTemplate && showClearButton"
|
||||
type="button"
|
||||
:class="cx('filterClearButton')"
|
||||
:label="clearButtonLabel"
|
||||
@click="clearFilter"
|
||||
:pt="getColumnPTOptions('filterClearButton')"
|
||||
data-pc-section="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="p-button-sm" :label="applyButtonLabel" @click="applyFilter()" v-bind="getColumnPTOptions('filterApplyButton')"></CFButton>
|
||||
<CFButton
|
||||
v-if="!filterApplyTemplate"
|
||||
type="button"
|
||||
:class="cx('filterApplyButton')"
|
||||
:label="applyButtonLabel"
|
||||
@click="applyFilter()"
|
||||
v-bind="getColumnPTOptions('filterApplyButton')"
|
||||
data-pc-section="filterapplybutton"
|
||||
></CFButton>
|
||||
<component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -341,15 +358,17 @@ export default {
|
|||
|
||||
return true;
|
||||
},
|
||||
toggleMenu() {
|
||||
toggleMenu(event) {
|
||||
this.overlayVisible = !this.overlayVisible;
|
||||
|
||||
event.preventDefault();
|
||||
},
|
||||
onToggleButtonKeyDown(event) {
|
||||
switch (event.code) {
|
||||
case 'Enter':
|
||||
case 'Space':
|
||||
this.toggleMenu();
|
||||
event.preventDefault();
|
||||
this.toggleMenu(event);
|
||||
|
||||
break;
|
||||
|
||||
case 'Escape':
|
||||
|
|
@ -449,13 +468,13 @@ export default {
|
|||
findNextItem(item) {
|
||||
let nextItem = item.nextElementSibling;
|
||||
|
||||
if (nextItem) return DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? this.findNextItem(nextItem) : nextItem;
|
||||
if (nextItem) return DomHandler.getAttribute(nextItem, 'data-pc-section') === 'filterseparator' ? this.findNextItem(nextItem) : nextItem;
|
||||
else return item.parentElement.firstElementChild;
|
||||
},
|
||||
findPrevItem(item) {
|
||||
let prevItem = item.previousElementSibling;
|
||||
|
||||
if (prevItem) return DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.findPrevItem(prevItem) : prevItem;
|
||||
if (prevItem) return DomHandler.getAttribute(prevItem, 'data-pc-section') === 'filterseparator' ? this.findPrevItem(prevItem) : prevItem;
|
||||
else return item.parentElement.lastElementChild;
|
||||
},
|
||||
hide() {
|
||||
|
|
@ -480,6 +499,7 @@ export default {
|
|||
}
|
||||
|
||||
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
|
||||
DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
|
||||
DomHandler.absolutePosition(this.overlay, this.$refs.icon);
|
||||
this.bindOutsideClickListener();
|
||||
this.bindScrollListener();
|
||||
|
|
@ -571,26 +591,6 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return [
|
||||
'p-column-filter p-fluid',
|
||||
{
|
||||
'p-column-filter-row': this.display === 'row',
|
||||
'p-column-filter-menu': this.display === 'menu'
|
||||
}
|
||||
];
|
||||
},
|
||||
overlayClass() {
|
||||
return [
|
||||
this.filterMenuClass,
|
||||
{
|
||||
'p-column-filter-overlay p-component p-fluid': true,
|
||||
'p-column-filter-overlay-menu': this.display === 'menu',
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}
|
||||
];
|
||||
},
|
||||
showMenuButton() {
|
||||
return this.showMenu && (this.display === 'row' ? this.type !== 'boolean' : true);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -77,13 +77,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return [
|
||||
this.columnProp('footerClass'),
|
||||
this.columnProp('class'),
|
||||
{
|
||||
'p-frozen-column': this.columnProp('frozen')
|
||||
}
|
||||
];
|
||||
return [this.columnProp('footerClass'), this.columnProp('class'), this.cx('footerCell')];
|
||||
},
|
||||
containerStyle() {
|
||||
let bodyStyle = this.columnProp('footerStyle');
|
||||
|
|
|
|||
|
|
@ -15,15 +15,21 @@
|
|||
@dragleave="onDragLeave"
|
||||
@drop="onDrop"
|
||||
v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('headerCell') }"
|
||||
:data-p-sortable-column="columnProp('sortable')"
|
||||
:data-p-resizable-column="resizableColumns"
|
||||
:data-p-highlight="isColumnSorted()"
|
||||
:data-p-filter-column="filterColumn"
|
||||
:data-p-frozen-column="columnProp('frozen')"
|
||||
:data-p-reorderable-column="reorderableColumns"
|
||||
>
|
||||
<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')">
|
||||
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
|
||||
<div :class="cx('headerContent')" 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('header')" :class="cx('headerTitle')" 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" />
|
||||
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" />
|
||||
</span>
|
||||
<span v-if="isMultiSorted()" class="p-sortable-column-badge" v-bind="getColumnPTOptions('sortBadge')">{{ getBadgeValue() }}</span>
|
||||
<span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPTOptions('sortBadge')">{{ getBadgeValue() }}</span>
|
||||
<DTHeaderCheckbox
|
||||
v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'"
|
||||
:checked="allRowsSelected"
|
||||
|
|
@ -209,7 +215,7 @@ export default {
|
|||
this.$emit('column-click', { originalEvent: event, column: this.column });
|
||||
},
|
||||
onKeyDown(event) {
|
||||
if ((event.code === 'Enter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
|
||||
if ((event.code === 'Enter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) {
|
||||
this.$emit('column-click', { originalEvent: event, column: this.column });
|
||||
event.preventDefault();
|
||||
}
|
||||
|
|
@ -286,18 +292,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return [
|
||||
this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'),
|
||||
this.columnProp('class'),
|
||||
{
|
||||
'p-sortable-column': this.columnProp('sortable'),
|
||||
'p-resizable-column': this.resizableColumns,
|
||||
'p-highlight': this.isColumnSorted(),
|
||||
'p-filter-column': this.filterColumn,
|
||||
'p-frozen-column': this.columnProp('frozen'),
|
||||
'p-reorderable-column': this.reorderableColumns
|
||||
}
|
||||
];
|
||||
return [this.cx('headerCell'), this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'), this.columnProp('class')];
|
||||
},
|
||||
containerStyle() {
|
||||
let headerStyle = this.filterColumn ? this.columnProp('filterHeaderStyle') : this.columnProp('headerStyle');
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused, 'p-disabled': disabled }]" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPTOptions('headerCheckboxWrapper')">
|
||||
<div class="p-hidden-accessible" v-bind="getColumnPTOptions('hiddenHeaderInputWrapper')">
|
||||
<div :class="cx('headerCheckboxWrapper')" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPTOptions('headerCheckboxWrapper')">
|
||||
<div :class="cx('hiddenHeaderInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPTOptions('hiddenHeaderInputWrapper')" :data-p-hidden-accessible="true">
|
||||
<input
|
||||
ref="input"
|
||||
type="checkbox"
|
||||
|
|
@ -13,9 +13,9 @@
|
|||
v-bind="getColumnPTOptions('hiddenHeaderInput')"
|
||||
/>
|
||||
</div>
|
||||
<div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]" v-bind="getColumnPTOptions('headerCheckbox')">
|
||||
<component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="checked" class="p-checkbox-icon" />
|
||||
<CheckIcon v-else-if="!headerCheckboxIconTemplate && !!checked" class="p-checkbox-icon" v-bind="getColumnPTOptions('headerCheckboxIcon')" />
|
||||
<div ref="box" :class="cx('headerCheckbox')" v-bind="getColumnPTOptions('headerCheckbox')">
|
||||
<component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="checked" :class="cx('headerCheckboxIcon')" />
|
||||
<CheckIcon v-else-if="!headerCheckboxIconTemplate && !!checked" :class="cx('headerCheckboxIcon')" v-bind="getColumnPTOptions('headerCheckboxIcon')" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused }]" @click="onClick" v-bind="getColumnPTOptions('checkboxWrapper')">
|
||||
<div class="p-hidden-accessible" v-bind="getColumnPTOptions('hiddenInputWrapper')">
|
||||
<div :class="cx('checkboxWrapper')" @click="onClick" v-bind="getColumnPTOptions('checkboxWrapper')">
|
||||
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPTOptions('hiddenInputWrapper')" :data-p-hidden-accessible="true">
|
||||
<input
|
||||
ref="input"
|
||||
type="checkbox"
|
||||
|
|
@ -14,9 +14,9 @@
|
|||
v-bind="getColumnPTOptions('hiddenInput')"
|
||||
/>
|
||||
</div>
|
||||
<div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]" v-bind="getColumnPTOptions('checkbox')">
|
||||
<component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="checked" class="p-checkbox-icon" />
|
||||
<CheckIcon v-else-if="!rowCheckboxIconTemplate && !!checked" class="p-checkbox-icon" v-bind="getColumnPTOptions('checkboxIcon')" />
|
||||
<div ref="box" :class="cx('checkbox')" v-bind="getColumnPTOptions('checkbox')">
|
||||
<component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="checked" :class="cx('checkboxIcon')" />
|
||||
<CheckIcon v-else-if="!rowCheckboxIconTemplate && !!checked" :class="cx('checkboxIcon')" v-bind="getColumnPTOptions('checkboxIcon')" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div :class="['p-radiobutton p-component', { 'p-radiobutton-focused': focused }]" @click="onClick" v-bind="getColumnPTOptions('radiobuttonWrapper')">
|
||||
<div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
|
||||
<div :class="cx('radiobuttonWrapper')" @click="onClick" v-bind="getColumnPTOptions('radiobuttonWrapper')">
|
||||
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPTOptions('hiddenInputWrapper')" :data-p-hidden-accessible="true">
|
||||
<input ref="input" type="radio" :checked="checked" :disabled="$attrs.disabled" :name="name" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick" v-bind="getColumnPTOptions('hiddenInput')" />
|
||||
</div>
|
||||
<div ref="box" :class="['p-radiobutton-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]" v-bind="getColumnPTOptions('radiobutton')">
|
||||
<div class="p-radiobutton-icon" v-bind="getColumnPTOptions('radiobuttonIcon')"></div>
|
||||
<div ref="box" :class="cx('radiobutton')" v-bind="getColumnPTOptions('radiobutton')">
|
||||
<div :class="cx('radiobuttonIcon')" v-bind="getColumnPTOptions('radiobuttonIcon')"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<template>
|
||||
<tbody :ref="bodyRef" class="p-datatable-tbody" role="rowgroup" :style="bodyStyle" v-bind="ptm('tbody')">
|
||||
<tbody :ref="bodyRef" :class="cx('tbody')" role="rowgroup" :style="bodyStyle" v-bind="ptm('tbody')">
|
||||
<template v-if="!empty">
|
||||
<template v-for="(rowData, index) of value">
|
||||
<tr
|
||||
v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(index))"
|
||||
:key="getRowKey(rowData, getRowIndex(index)) + '_subheader'"
|
||||
class="p-rowgroup-header"
|
||||
:class="cx('rowgroupHeader')"
|
||||
:style="rowGroupHeaderStyle"
|
||||
role="row"
|
||||
v-bind="ptm('rowgroupHeader')"
|
||||
>
|
||||
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
|
||||
<button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="getColumnPTOptions('rowGroupToggler')">
|
||||
<button v-if="expandableRowGroups" :class="cx('rowGroupToggler')" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="getColumnPTOptions('rowGroupToggler')">
|
||||
<component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded(rowData)" />
|
||||
<template v-else>
|
||||
<span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="['p-row-toggler-icon', expandedRowIcon]" />
|
||||
<ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
|
||||
<span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="['p-row-toggler-icon', collapsedRowIcon]" />
|
||||
<ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
|
||||
<span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="[cx('rowGroupTogglerIcon'), expandedRowIcon]" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
|
||||
<ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
|
||||
<span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="[cx('rowGroupTogglerIcon'), collapsedRowIcon]" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
|
||||
<ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
|
||||
</template>
|
||||
</button>
|
||||
<component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" />
|
||||
|
|
@ -43,6 +43,9 @@
|
|||
@dragend="onRowDragEnd($event)"
|
||||
@drop="onRowDrop($event)"
|
||||
v-bind="ptm('row')"
|
||||
:data-p-selectable-row="selectionMode ? true : false"
|
||||
:data-p-highlight="selection && isSelected(rowData)"
|
||||
:data-p-highlight-contextmenu="contextMenuSelection && isSelectedWithContextMenu(rowData)"
|
||||
>
|
||||
<template v-for="(col, i) of columns">
|
||||
<DTBodyCell
|
||||
|
|
@ -83,7 +86,7 @@
|
|||
v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)"
|
||||
:key="getRowKey(rowData, getRowIndex(index)) + '_expansion'"
|
||||
:id="expandedRowId + '_' + index + '_expansion'"
|
||||
class="p-datatable-row-expansion"
|
||||
:class="cx('rowExpansion')"
|
||||
role="row"
|
||||
v-bind="ptm('rowExpansion')"
|
||||
>
|
||||
|
|
@ -94,7 +97,7 @@
|
|||
<tr
|
||||
v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(index))"
|
||||
:key="getRowKey(rowData, getRowIndex(index)) + '_subfooter'"
|
||||
class="p-rowgroup-footer"
|
||||
:class="cx('rowgroupFooter')"
|
||||
role="row"
|
||||
v-bind="ptm('rowgroupFooter')"
|
||||
>
|
||||
|
|
@ -104,7 +107,7 @@
|
|||
</tr>
|
||||
</template>
|
||||
</template>
|
||||
<tr v-else class="p-datatable-emptymessage" role="row" v-bind="ptm('emptyMessage')">
|
||||
<tr v-else :class="cx('emptyMessage')" role="row" v-bind="ptm('emptyMessage')">
|
||||
<td :colspan="columnsLength" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
|
||||
<component v-if="templates.empty" :is="templates.empty" />
|
||||
</td>
|
||||
|
|
@ -341,22 +344,6 @@ export default {
|
|||
getRowClass(rowData) {
|
||||
let rowStyleClass = [];
|
||||
|
||||
if (this.selectionMode) {
|
||||
rowStyleClass.push('p-selectable-row');
|
||||
}
|
||||
|
||||
if (this.selection) {
|
||||
rowStyleClass.push({
|
||||
'p-highlight': this.isSelected(rowData)
|
||||
});
|
||||
}
|
||||
|
||||
if (this.contextMenuSelection) {
|
||||
rowStyleClass.push({
|
||||
'p-highlight-contextmenu': this.isSelectedWithContextMenu(rowData)
|
||||
});
|
||||
}
|
||||
|
||||
if (this.rowClass) {
|
||||
let rowClassValue = this.rowClass(rowData);
|
||||
|
||||
|
|
@ -365,7 +352,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
return rowStyleClass;
|
||||
return [this.cx('row', { rowData }), rowStyleClass];
|
||||
},
|
||||
shouldRenderRowGroupFooter(value, rowData, i) {
|
||||
if (this.expandableRowGroups && !this.isRowGroupExpanded(rowData)) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tfoot v-if="hasFooter" class="p-datatable-tfoot" role="rowgroup" v-bind="{ ...ptm('tfoot'), ...getColumnGroupPTOptions('root') }">
|
||||
<tfoot v-if="hasFooter" :class="cx('tfoot')" role="rowgroup" v-bind="columnGroup ? { ...ptm('tfoot'), ...getColumnGroupPTOptions('root') } : ptm('tfoot')" data-pc-section="tfoot">
|
||||
<tr v-if="!columnGroup" role="row" v-bind="ptm('footerRow')">
|
||||
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
|
||||
<DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :pt="pt" />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<thead class="p-datatable-thead" role="rowgroup" v-bind="{ ...ptm('thead'), ...getColumnGroupPTOptions('root') }">
|
||||
<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">
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
</tr>
|
||||
</template>
|
||||
<template v-else>
|
||||
<tr v-for="(row, i) of getHeaderRows()" :key="i" role="row" v-bind="getRowPTOptions(row, 'root')">
|
||||
<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'"
|
||||
|
|
@ -269,14 +269,7 @@ export default {
|
|||
return column.props && column.props.pt ? column.props.pt : undefined; //@todo
|
||||
},
|
||||
getFilterColumnHeaderClass(column) {
|
||||
return [
|
||||
'p-filter-column',
|
||||
this.columnProp(column, 'filterHeaderClass'),
|
||||
this.columnProp(column, 'class'),
|
||||
{
|
||||
'p-frozen-column': this.columnProp(column, 'frozen')
|
||||
}
|
||||
];
|
||||
return [this.cx('headerCell', { column }), this.columnProp(column, 'filterHeaderClass'), this.columnProp(column, 'class')];
|
||||
},
|
||||
getFilterColumnHeaderStyle(column) {
|
||||
return [this.columnProp(column, 'filterHeaderStyle'), this.columnProp(column, 'style')];
|
||||
|
|
|
|||
Loading…
Reference in New Issue