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

Add null operator for props

pull/496/head
Cagatay Civici 2020-09-24 11:30:11 +03:00
parent f114c0247f
commit 488c09b0ee
7 changed files with 91 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/datatable/BodyCell.vue
View File

@ -1,20 +1,20 @@
<template>
<td :style="column.props.bodyStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown">
<td :style="column.props?.bodyStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown">
<component :is="column.children.body" :data="rowData" :column="column" :index="index" v-if="column.children && column.children.body && !d_editing" />
<component :is="column.children.editor" :data="rowData" :column="column" :index="index" v-else-if="column.children && column.children.editor && d_editing" />
<template v-else-if="column.props.selectionMode">
<DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio" v-if="column.props.selectionMode === 'single'" />
<DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox" v-else-if="column.props.selectionMode ==='multiple'" />
<template v-else-if="column.props?.selectionMode">
<DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio" v-if="column.props?.selectionMode === 'single'" />
<DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox" v-else-if="column.props?.selectionMode ==='multiple'" />
</template>
<template v-else-if="column.props.rowReorder">
<i :class="['p-datatable-reorderablerow-handle', (column.props.rowReorderIcon || 'pi pi-bars')]"></i>
<template v-else-if="column.props?.rowReorder">
<i :class="['p-datatable-reorderablerow-handle', (column.props?.rowReorderIcon || 'pi pi-bars')]"></i>
</template>
<template v-else-if="column.props.expander">
<template v-else-if="column.props?.expander">
<button class="p-row-toggler p-link" @click="toggleRow" type="button" v-ripple>
<span :class="rowTogglerIcon"></span>
</button>
</template>
<template v-else-if="editMode === 'row' && column.props.rowEditor">
<template v-else-if="editMode === 'row' && column.props?.rowEditor">
<button class="p-row-editor-init p-link" v-if="!d_editing" @click="onRowEditInit" type="button" v-ripple>
<span class="p-row-editor-init-icon pi pi-fw pi-pencil"></span>
</button>
@ -90,7 +90,7 @@ export default {
},
methods: {
resolveFieldData() {
return ObjectUtils.resolveFieldData(this.rowData, this.column.props.field);
return ObjectUtils.resolveFieldData(this.rowData, this.column.props?.field);
},
toggleRow(event) {
this.$emit('row-toggle', {
@ -135,14 +135,14 @@ export default {
if (this.editMode === 'cell' && this.isEditable() && !this.d_editing) {
this.d_editing = true;
this.bindDocumentEditListener();
this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.column.props.field, index: this.index});
this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.column.props?.field, index: this.index});
}
},
completeEdit(event, type) {
let completeEvent = {
originalEvent: event,
data: this.rowData,
field: this.column.props.field,
field: this.column.props?.field,
index: this.index,
type: type,
defaultPrevented: false,
@ -166,7 +166,7 @@ export default {
case 27:
this.switchCellToViewMode();
this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.props.field, index: this.index});
this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.props?.field, index: this.index});
break;
case 9:
@ -255,19 +255,19 @@ export default {
return (DomHandler.find(this.$el, '.p-invalid').length === 0);
},
onRowEditInit(event) {
this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, field: this.column.props.field, index: this.index});
this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, field: this.column.props?.field, index: this.index});
},
onRowEditSave(event) {
this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, field: this.column.props.field, index: this.index});
this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, field: this.column.props?.field, index: this.index});
},
onRowEditCancel(event) {
this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.props.field, index: this.index});
this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.props?.field, index: this.index});
}
},
computed: {
containerClass() {
return [this.column.props.bodyClass, {
'p-selection-column': this.column.props.selectionMode != null,
return [this.column.props?.bodyClass, {
'p-selection-column': this.column.props?.selectionMode != null,
'p-editable-column': this.isEditable(),
'p-cell-editing': this.d_editing
}];

38
src/components/datatable/DataTable.vue
View File

@ -433,7 +433,7 @@ export default {
mounted() {
if (this.reorderableColumns) {
let columnOrder = [];
this.columns.forEach(col => columnOrder.push(col.props.columnKey||col.props.field));
this.columns.forEach(col => columnOrder.push(col.props?.columnKey||col.props?.field));
this.d_columnOrder = columnOrder;
console.log()
}
@ -468,9 +468,9 @@ export default {
const event = e.originalEvent;
const column = e.column;
if (column.props.sortable) {
if (column.props?.sortable) {
const targetNode = event.target;
const columnField = column.props.sortField || column.props.field;
const columnField = column.props?.sortField || column.props?.field;
if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title')
|| DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
@ -587,13 +587,13 @@ export default {
for(let j = 0; j < this.columns.length; j++) {
let col = this.columns[j];
let columnField = col.props.filterField || col.props.field;
let columnField = col.props?.filterField || col.props?.field;
//local
if (Object.prototype.hasOwnProperty.call(this.filters, columnField)) {
let filterValue = this.filters[columnField];
let dataFieldValue = ObjectUtils.resolveFieldData(data[i], columnField);
let filterConstraint = col.props.filterMatchMode === 'custom' ? col.props.filterFunction : FilterUtils[col.props.filterMatchMode||'startsWith'];
let filterConstraint = col.props?.filterMatchMode === 'custom' ? col.props?.filterFunction : FilterUtils[col.props?.filterMatchMode||'startsWith'];
if (!filterConstraint(dataFieldValue, filterValue, this.filterLocale)) {
localMatch = false;
}
@ -603,7 +603,7 @@ export default {
}
}
if (!col.props.excludeGlobalFilter && this.hasGlobalFilter && !globalMatch) {
if (!col.props?.excludeGlobalFilter && this.hasGlobalFilter && !globalMatch) {
globalMatch = FilterUtils.contains(ObjectUtils.resolveFieldData(data[i], columnField), this.filters['global'], this.filterLocale);
}
}
@ -937,8 +937,8 @@ export default {
//headers
for (let i = 0; i < this.columns.length; i++) {
let column = this.columns[i];
if (column.props.exportable !== false && column.props.field) {
csv += '"' + (column.props.header || column.props.field) + '"';
if (column.props?.exportable !== false && column.props?.field) {
csv += '"' + (column.props?.header || column.props?.field) + '"';
if (i < (this.columns.length - 1)) {
csv += this.csvSeparator;
@ -952,14 +952,14 @@ export default {
csv += '\n';
for (let i = 0; i < this.columns.length; i++) {
let column = this.columns[i];
if (column.props.exportable !== false && column.props.field) {
let cellData = ObjectUtils.resolveFieldData(record, column.props.field);
if (column.props?.exportable !== false && column.props?.field) {
let cellData = ObjectUtils.resolveFieldData(record, column.props?.field);
if (cellData != null) {
if (this.exportFunction) {
cellData = this.exportFunction({
data: cellData,
field: column.props.field
field: column.props?.field
});
}
else
@ -1132,7 +1132,7 @@ export default {
const event = e.originalEvent;
const column = e.column;
if (this.reorderableColumns && column.props.reorderableColumn !== false) {
if (this.reorderableColumns && column.props?.reorderableColumn !== false) {
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-column-resizer'))
event.currentTarget.draggable = false;
else
@ -1245,7 +1245,7 @@ export default {
if (columns && columns.length) {
for (let i = 0; i < columns.length; i++) {
let column = columns[i];
if (column.props.columnKey === key || column.props.field === key) {
if (column.props?.columnKey === key || column.props?.field === key) {
return column;
}
}
@ -1675,7 +1675,7 @@ export default {
let frozenColumns = [];
for(let col of this.columns) {
if(col.props.frozen) {
if(col.props?.frozen) {
frozenColumns = frozenColumns||[];
frozenColumns.push(col);
}
@ -1687,7 +1687,7 @@ export default {
let scrollableColumns = [];
for(let col of this.columns) {
if(!col.props.frozen) {
if(!col.props?.frozen) {
scrollableColumns = scrollableColumns||[];
scrollableColumns.push(col);
}
@ -1701,7 +1701,7 @@ export default {
headerColumnGroup() {
const children = this.$slots.default();
for (let child of children) {
if (child.type.name === 'columngroup' && child.props.type === 'header') {
if (child.type.name === 'columngroup' && child.props?.type === 'header') {
return child;
}
}
@ -1711,7 +1711,7 @@ export default {
frozenHeaderColumnGroup() {
const children = this.$slots.default();
for (let child of children) {
if (child.type.name === 'columngroup' && child.props.type === 'frozenheader') {
if (child.type.name === 'columngroup' && child.props?.type === 'frozenheader') {
return child;
}
}
@ -1721,7 +1721,7 @@ export default {
footerColumnGroup() {
const children = this.$slots.default();
for (let child of children) {
if (child.type.name === 'columngroup' && child.props.type === 'footer') {
if (child.type.name === 'columngroup' && child.props?.type === 'footer') {
return child;
}
}
@ -1731,7 +1731,7 @@ export default {
frozenFooterColumnGroup() {
const children = this.$slots.default();
for (let child of children) {
if (child.type.name === 'columngroup' && child.props.type === 'frozenfooter') {
if (child.type.name === 'columngroup' && child.props?.type === 'frozenfooter') {
return child;
}
}

10
src/components/datatable/ScrollableView.vue
View File

@ -5,7 +5,7 @@
<table class="p-datatable-scrollable-header-table">
<colgroup>
<template v-for="(col,i) of columns">
<col v-if="shouldRenderCol(col)" :key="col.props.columnKey||col.props.field||i" :style="col.props.headerStyle" />
<col v-if="shouldRenderCol(col)" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.headerStyle" />
</template>
</colgroup>
<slot name="header" :columns="columns" :columnGroup="headerColumnGroup"></slot>
@ -17,14 +17,14 @@
<table ref="scrollTable" :class="bodyTableClass" :style="bodyTableStyle">
<colgroup>
<template v-for="(col,i) of columns">
<col v-if="shouldRenderCol(col)" :key="col.props.columnKey||col.props.field||i" :style="col.props.bodyStyle || col.props.headerStyle" />
<col v-if="shouldRenderCol(col)" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.bodyStyle || col.props?.headerStyle" />
</template>
</colgroup>
<slot name="body" :columns="columns"></slot>
</table>
<table ref="loadingTable" :style="{top:'0', display: 'none'}" class="p-datatable-scrollable-body-table p-datatable-loading-virtual-table p-datatable-virtual-table" v-if="virtualScroll">
<colgroup>
<col v-for="(col,i) of columns" :key="col.props.columnKey||col.props.field||i" :style="col.props.bodyStyle || col.props.headerStyle" />
<col v-for="(col,i) of columns" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.bodyStyle || col.props?.headerStyle" />
</colgroup>
<DTTableLoadingBody :columns="columns" :rows="rows" />
</table>
@ -35,7 +35,7 @@
<table class="p-datatable-scrollable-footer-table">
<colgroup>
<template v-for="(col,i) of columns">
<col v-if="shouldRenderCol(col)" :key="col.props.columnKey||col.props.field||i" :style="col.props.footerStyle || col.props.headerStyle" />
<col v-if="shouldRenderCol(col)" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.footerStyle || col.props?.headerStyle" />
</template>
</colgroup>
<slot name="footer" :columns="columns" :columnGroup="footerColumnGroup"></slot>
@ -183,7 +183,7 @@ export default {
},
shouldRenderCol(column) {
if (this.rowGroupMode && this.rowGroupMode === 'subheader') {
return this.groupRowsBy !== column.props.field;
return this.groupRowsBy !== column.props?.field;
}
return true;

18
src/components/datatable/TableBody.vue
View File

@ -15,8 +15,8 @@
@click="onRowClick($event, rowData, index)" @contextmenu="onRowRightClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode || contextMenu ? '0' : null"
@mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)">
<template v-for="(col,i) of columns">
<DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :key="col.props.columnKey||col.props.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
:rowTogglerIcon="col.props.expander ? rowTogglerIcon(rowData): null"
<DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :key="col.props?.columnKey||col.props?.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
:rowTogglerIcon="col.props?.expander ? rowTogglerIcon(rowData): null"
:rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, index) : null"
:editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)"
@radio-change="onRadioChange($event)" @checkbox-change="onCheckboxChange($event)" @row-toggle="onRowToggle($event)"
@ -208,14 +208,14 @@ export default {
shouldRenderBodyCell(value, column, i) {
if (this.rowGroupMode) {
if (this.rowGroupMode === 'subheader') {
return this.groupRowsBy !== column.props.field;
return this.groupRowsBy !== column.props?.field;
}
else if (this.rowGroupMode === 'rowspan') {
if (this.isGrouped(column)) {
let prevRowData = value[i - 1];
if (prevRowData) {
let currentRowFieldData = ObjectUtils.resolveFieldData(value[i], column.props.field);
let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, column.props.field);
let currentRowFieldData = ObjectUtils.resolveFieldData(value[i], column.props?.field);
let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, column.props?.field);
return currentRowFieldData !== previousRowFieldData;
}
else {
@ -233,7 +233,7 @@ export default {
},
calculateRowGroupSize(value, column, index) {
if (this.isGrouped(column)) {
let currentRowFieldData = ObjectUtils.resolveFieldData(value[index], column.props.field);
let currentRowFieldData = ObjectUtils.resolveFieldData(value[index], column.props?.field);
let nextRowFieldData = currentRowFieldData;
let groupRowSpan = 0;
@ -241,7 +241,7 @@ export default {
groupRowSpan++;
let nextRowData = value[++index];
if (nextRowData) {
nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, column.props.field);
nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, column.props?.field);
}
else {
break;
@ -265,9 +265,9 @@ export default {
isGrouped(column) {
if (this.groupRowsBy) {
if (Array.isArray(this.groupRowsBy))
return this.groupRowsBy.indexOf(column.props.field) > -1;
return this.groupRowsBy.indexOf(column.props?.field) > -1;
else
return this.groupRowsBy === column.props.field;
return this.groupRowsBy === column.props?.field;
}
else {
return false;

14
src/components/datatable/TableFooter.vue
View File

@ -1,18 +1,18 @@
<template>
<tfoot class="p-datatable-tfoot" v-if="hasFooter">
<tr v-if="!columnGroup">
<td v-for="(col,i) of columns" :key="col.props.columnKey||col.props.field||i" :style="col.props.footerStyle" :class="col.props.footerClass"
:colspan="col.props.colspan" :rowspan="col.props.rowspan">
<td v-for="(col,i) of columns" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.footerStyle" :class="col.props?.footerClass"
:colspan="col.props?.colspan" :rowspan="col.props?.rowspan">
<component :is="col.children.footer" :column="col" v-if="col.children && col.children.footer"/>
{{col.props.footer}}
{{col.props?.footer}}
</td>
</tr>
<template v-else>
<tr v-for="(row,i) of columnGroup.children.default()" :key="i">
<td v-for="(col,i) of row.children.default()" :key="col.props.columnKey||col.props.field||i" :style="col.props.footerStyle" :class="col.props.footerClass"
:colspan="col.props.colspan" :rowspan="col.props.rowspan">
<td v-for="(col,i) of row.children.default()" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.footerStyle" :class="col.props?.footerClass"
:colspan="col.props?.colspan" :rowspan="col.props?.rowspan">
<component :is="col.children.footer" :column="col" v-if="col.children && col.children.footer"/>
{{col.props.footer}}
{{col.props?.footer}}
</td>
</tr>
</template>
@ -40,7 +40,7 @@ export default {
}
else {
for (let col of this.columns) {
if (col.props.footer || (col.children && col.children.footer)) {
if (col.props?.footer || (col.children && col.children.footer)) {
hasFooter = true;
break;
}

44
src/components/datatable/TableHeader.vue
View File

@ -3,41 +3,41 @@
<template v-if="!columnGroup">
<tr>
<template v-for="(col,i) of columns">
<th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.props.field)" :tabindex="col.props.sortable ? '0' : null" @keydown="onColumnKeyDown($event, col)"
:key="col.props.columnKey||col.props.field||i" :style="col.props.headerStyle" :class="getColumnHeaderClass(col)"
<th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.props?.field)" :tabindex="col.props?.sortable ? '0' : null" @keydown="onColumnKeyDown($event, col)"
:key="col.props?.columnKey||col.props?.field||i" :style="col.props?.headerStyle" :class="getColumnHeaderClass(col)"
@click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)"
@dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
:colspan="col.props.colspan" :rowspan="col.props.rowspan" :aria-sort="getAriaSort(col)">
:colspan="col.props?.colspan" :rowspan="col.props?.rowspan" :aria-sort="getAriaSort(col)">
<span class="p-column-resizer" @mousedown="onColumnResizeStart($event)" v-if="resizableColumns"></span>
<component :is="col.children.header" :column="col" v-if="col.children && col.children.header"/>
<span class="p-column-title" v-if="col.props.header">{{col.props.header}}</span>
<span v-if="col.props.sortable" :class="getSortableColumnIcon(col)"></span>
<span class="p-column-title" v-if="col.props?.header">{{col.props?.header}}</span>
<span v-if="col.props?.sortable" :class="getSortableColumnIcon(col)"></span>
<span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.props.selectionMode ==='multiple' && !hasColumnFilter()" />
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.props?.selectionMode ==='multiple' && !hasColumnFilter()" />
</th>
</template>
</tr>
<tr v-if="hasColumnFilter()">
<template v-for="(col,i) of columns">
<th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.props.field)" :key="col.props.columnKey||col.props.field||i"
:class="getFilterColumnHeaderClass(col)" :style="col.props.filterHeaderStyle">
<th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.props?.field)" :key="col.props?.columnKey||col.props?.field||i"
:class="getFilterColumnHeaderClass(col)" :style="col.props?.filterHeaderStyle">
<component :is="col.children.filter" :column="col" v-if="col.children && col.children.filter"/>
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.props.selectionMode ==='multiple'" />
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.props?.selectionMode ==='multiple'" />
</th>
</template>
</tr>
</template>
<template v-else>
<tr v-for="(row,i) of columnGroup.children.default()" :key="i">
<th v-for="(col,i) of row.children.default()" :key="col.props.columnKey||col.props.field||i" :style="col.props.headerStyle" :class="getColumnHeaderClass(col)" :tabindex="col.props.sortable ? '0' : null"
<th v-for="(col,i) of row.children.default()" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.headerStyle" :class="getColumnHeaderClass(col)" :tabindex="col.props?.sortable ? '0' : null"
@click="onColumnHeaderClick($event, col)" @keydown="onColumnKeyDown($event, col)" @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
:colspan="col.props.colspan" :rowspan="col.props.rowspan" :aria-sort="getAriaSort(col)">
:colspan="col.props?.colspan" :rowspan="col.props?.rowspan" :aria-sort="getAriaSort(col)">
<component :is="col.children.header" :column="col" v-if="col.children && col.children.header"/>
<span class="p-column-title" v-if="col.props.header">{{col.props.header}}</span>
<span v-if="col.props.sortable" :class="getSortableColumnIcon(col)"></span>
<span class="p-column-title" v-if="col.props?.header">{{col.props?.header}}</span>
<span v-if="col.props?.sortable" :class="getSortableColumnIcon(col)"></span>
<span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
<component :is="col.children.filter" :column="col" v-if="col.children && col.children.filter"/>
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.props.selectionMode ==='multiple'" />
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.props?.selectionMode ==='multiple'" />
</th>
</tr>
</template>
@ -97,27 +97,27 @@ export default {
},
methods: {
isMultiSorted(column) {
return column.props.sortable && this.getMultiSortMetaIndex(column) > -1
return column.props?.sortable && this.getMultiSortMetaIndex(column) > -1
},
isColumnSorted(column) {
return this.sortMode === 'single' ? (this.sortField && (this.sortField === column.props.field || this.sortField === column.props.sortField)) : this.isMultiSorted(column);
return this.sortMode === 'single' ? (this.sortField && (this.sortField === column.props?.field || this.sortField === column.props?.sortField)) : this.isMultiSorted(column);
},
getColumnHeaderClass(column) {
return [column.props.headerClass,
{'p-sortable-column': column.props.sortable},
return [column.props?.headerClass,
{'p-sortable-column': column.props?.sortable},
{'p-resizable-column': this.resizableColumns},
{'p-highlight': this.isColumnSorted(column)}
];
},
getFilterColumnHeaderClass(column) {
return ['p-filter-column', column.props.filterHeaderClass];
return ['p-filter-column', column.props?.filterHeaderClass];
},
getSortableColumnIcon(column) {
let sorted = false;
let sortOrder = null;
if (this.sortMode === 'single') {
sorted = this.sortField && (this.sortField === column.props.field || this.sortField === column.props.sortField);
sorted = this.sortField && (this.sortField === column.props?.field || this.sortField === column.props?.sortField);
sortOrder = sorted ? this.sortOrder: 0;
}
else if (this.sortMode === 'multiple') {
@ -141,7 +141,7 @@ export default {
for (let i = 0; i < this.multiSortMeta.length; i++) {
let meta = this.multiSortMeta[i];
if (meta.field === column.props.field || meta.field === column.props.sortField) {
if (meta.field === column.props?.field || meta.field === column.props?.sortField) {
index = i;
break;
}
@ -179,7 +179,7 @@ export default {
}
},
getAriaSort(column) {
if (column.props.sortable) {
if (column.props?.sortable) {
const sortIcon = this.getSortableColumnIcon(column);
if (sortIcon[1]['pi-sort-amount-down'])
return 'descending';

24
src/views/datatable/DataTableCrudDemo.vue
View File

@ -36,25 +36,25 @@
</template>
<Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
<Column field="code" header="Code" sortable></Column>
<Column field="name" header="Name" sortable></Column>
<Column field="code" header="Code" :sortable="true"></Column>
<Column field="name" header="Name" :sortable="true"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template>
</Column>
<Column field="price" header="Price" sortable>
<Column field="price" header="Price" :sortable="true">
<template #body="slotProps">
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
<Column field="category" header="Category" sortable></Column>
<Column field="rating" header="Reviews" sortable>
<Column field="category" header="Category" :sortable="true"></Column>
<Column field="rating" header="Reviews" :sortable="true">
<template #body="slotProps">
<Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" />
</template>
</Column>
<Column field="inventoryStatus" header="Status" sortable>
<Column field="inventoryStatus" header="Status" :sortable="true">
<template #body="slotProps">
<span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
</template>
@ -173,25 +173,25 @@
&lt;/template&gt;
&lt;Column selectionMode="multiple" headerStyle="width: 3rem"&gt;&lt;/Column&gt;
&lt;Column field="code" header="Code" sortable&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt;
&lt;Column field="code" header="Code" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column header="Image"&gt;
&lt;template #body="slotProps"&gt;
&lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="price" header="Price" sortable&gt;
&lt;Column field="price" header="Price" :sortable="true"&gt;
&lt;template #body="slotProps"&gt;
{{formatCurrency(slotProps.data.price)}}
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="category" header="Category" sortable&gt;&lt;/Column&gt;
&lt;Column field="rating" header="Reviews" sortable&gt;
&lt;Column field="category" header="Category" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="rating" header="Reviews" :sortable="true"&gt;
&lt;template #body="slotProps"&gt;
&lt;Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="inventoryStatus" header="Status" sortable&gt;
&lt;Column field="inventoryStatus" header="Status" :sortable="true"&gt;
&lt;template #body="slotProps"&gt;
&lt;span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
&lt;/template&gt;