diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 66375e3f8..ff648b7cb 100644
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -24,51 +24,17 @@
-
-
-
-
-
-
-
-
-
-
- |
-
-
- |
-
-
-
-
-
- |
-
- |
-
-
+
@@ -95,9 +61,9 @@ import ObjectUtils from '../utils/ObjectUtils';
import FilterUtils from '../utils/FilterUtils';
import DomHandler from '../utils/DomHandler';
import Paginator from '../paginator/Paginator';
-import BodyCell from './BodyCell.vue';
//import ScrollableView from './ScrollableView.vue';
import TableHeader from './TableHeader.vue';
+import TableBody from './TableBody.vue';
import TableFooter from './TableFooter.vue';
export default {
@@ -545,7 +511,11 @@ export default {
return filteredValue;
},
- onRowClick(event, rowData, rowIndex) {
+ onRowClick(e) {
+ const event = e.originalEvent;
+ const rowData = e.data;
+ const rowIndex = e.index;
+
if (this.selectionMode) {
let target = event.target;
let targetNode = target.nodeName;
@@ -629,7 +599,11 @@ export default {
onRowTouchEnd() {
this.rowTouched = true;
},
- onRowKeyDown(event, rowData, rowIndex) {
+ onRowKeyDown(e) {
+ const event = e.originalEvent;
+ const rowData = e.data;
+ const rowIndex = e.index;
+
if (this.selectionMode) {
const row = event.target;
@@ -801,44 +775,6 @@ export default {
equals(data1, data2) {
return this.compareSelectionBy === 'equals' ? (data1 === data2) : ObjectUtils.equals(data1, data2, this.dataKey);
},
- isRowExpanded(rowData) {
- if (rowData && this.expandedRows) {
- if (this.dataKey)
- return this.d_expandedRowKeys ? this.d_expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
- else
- return this.findIndex(rowData, this.expandedRows) > -1;
- }
-
- return false;
- },
- isRowGroupExpanded(rowData) {
- if (this.expandableRowGroups && this.expandedRowGroups) {
- let groupFieldValue = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
- return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
- }
- return false;
- },
- getRowKey(rowData, index) {
- return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey): index;
- },
- getRowClass(rowData) {
- let rowStyleClass = ['p-datatable-row'];
- if (this.selection) {
- rowStyleClass.push({
- 'p-highlight': this.isSelected(rowData)
- });
- }
-
- if (this.rowClass) {
- let rowClassValue = this.rowClass(rowData);
-
- if (rowClassValue) {
- rowStyleClass.push(rowClassValue);
- }
- }
-
- return rowStyleClass;
- },
selectRange(event) {
let rangeStart, rangeEnd;
@@ -1152,12 +1088,17 @@ export default {
else
event.currentTarget.draggable = false;
},
- onRowDragStart(event, index) {
+ onRowDragStart(e) {
+ const event = e.originalEvent;
+ const index = e.rowIndex;
this.rowDragging = true;
this.draggedRowIndex = index;
event.dataTransfer.setData('text', 'b'); // For firefox
},
- onRowDragOver(event, index) {
+ onRowDragOver(e) {
+ const event = e.originalEvent;
+ const index = e.rowIndex;
+
if (this.rowDragging && this.draggedRowIndex !== index) {
let rowElement = event.currentTarget;
let rowY = DomHandler.getOffset(rowElement).top + DomHandler.getWindowScrollTop();
@@ -1250,8 +1191,10 @@ export default {
this.$emit('row-expand', event);
}
},
- toggleRowGroup(event, data) {
- let groupFieldValue = ObjectUtils.resolveFieldData(data, this.groupRowsBy);
+ toggleRowGroup(e) {
+ const event = e.originalEvent;
+ const data = e.data;
+ const groupFieldValue = ObjectUtils.resolveFieldData(data, this.groupRowsBy);
let _expandedRowGroups = this.expandedRowGroups ? [...this.expandedRowGroups] : [];
if (this.isRowGroupExpanded(data)) {
@@ -1265,101 +1208,6 @@ export default {
this.$emit('rowgroup-expand', {originalEvent: event, data: groupFieldValue});
}
},
- rowTogglerIcon(rowData) {
- const icon = this.isRowExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
- return ['p-row-toggler-icon pi pi-fw p-clickable', icon];
- },
- rowGroupTogglerIcon(rowData) {
- const icon = this.isRowGroupExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
- return ['p-row-toggler-icon pi pi-fw p-clickable', icon];
- },
- shouldRenderRowGroupHeader(value, rowData, i) {
- let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
- let prevRowData = value[i - 1];
- if (prevRowData) {
- let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
- return currentRowFieldData !== previousRowFieldData;
- }
- else {
- return true;
- }
- },
- shouldRenderRowGroupFooter(value, rowData, i) {
- if (this.expandableRowGroups && !this.isRowGroupExpanded(rowData)) {
- return false;
- }
- else {
- let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
- let nextRowData = value[i + 1];
- if (nextRowData) {
- let nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy);
- return currentRowFieldData !== nextRowFieldData;
- }
- else {
- return true;
- }
- }
- },
- shouldRenderBodyCell(value, column, i) {
- if (this.rowGroupMode) {
- if (this.rowGroupMode === 'subheader') {
- return this.groupRowsBy !== column.field;
- }
- else if (this.rowGroupMode === 'rowspan') {
- if (this.isGrouped(column)) {
- let prevRowData = value[i - 1];
- if (prevRowData) {
- let currentRowFieldData = ObjectUtils.resolveFieldData(value[i], column.field);
- let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, column.field);
- return currentRowFieldData !== previousRowFieldData;
- }
- else {
- return true;
- }
- }
- else {
- return true;
- }
- }
- }
- else {
- return true;
- }
- },
- isGrouped(column) {
- if (this.groupRowsBy) {
- if (Array.isArray(this.groupRowsBy))
- return this.groupRowsBy.indexOf(column.field) > -1;
- else
- return this.groupRowsBy === column.field;
- }
- else {
- return false;
- }
- },
- calculateRowGroupSize(value, column, index) {
- if (this.isGrouped(column)) {
- let currentRowFieldData = ObjectUtils.resolveFieldData(value[index], column.field);
- let nextRowFieldData = currentRowFieldData;
- let groupRowSpan = 0;
-
- while (currentRowFieldData === nextRowFieldData) {
- groupRowSpan++;
- let nextRowData = value[++index];
- if (nextRowData) {
- nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, column.field);
- }
- else {
- break;
- }
- }
-
- return groupRowSpan === 1 ? null : groupRowSpan;
- }
- else {
- return null;
- }
- },
isStateful() {
return this.stateKey != null;
},
@@ -1527,16 +1375,6 @@ export default {
onCellEditCancel(event) {
this.$emit('cell-edit-cancel', event);
},
- isRowEditing(rowData) {
- if (rowData && this.editingRows) {
- if (this.dataKey)
- return this.d_editingRowKeys ? this.d_editingRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
- else
- return this.findIndex(rowData, this.editingRows) > -1;
- }
-
- return false;
- },
onRowEditInit(event) {
let _editingRows = this.editingRows ? [...this.editingRows] : [];
_editingRows.push(event.data);
@@ -1639,8 +1477,8 @@ export default {
},
dataToRender() {
const data = this.processedData;
-
- if (this.paginator) {
+
+ if (data && this.paginator) {
const first = this.lazy ? 0 : this.d_first;
return data.slice(first, first + this.d_rows);
}
@@ -1686,10 +1524,10 @@ export default {
},
components: {
'DTPaginator': Paginator,
- 'DTBodyCell': BodyCell,
//'DTScrollableView': ScrollableView,
'DTTableHeader': TableHeader,
- 'DTTableFooter': TableFooter
+ 'DTTableBody': TableBody,
+ 'DTTableFooter': TableFooter,
}
}
diff --git a/src/components/datatable/TableBody.vue b/src/components/datatable/TableBody.vue
new file mode 100644
index 000000000..5a8e35312
--- /dev/null
+++ b/src/components/datatable/TableBody.vue
@@ -0,0 +1,353 @@
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+
+ |
+
+
+
+
+
+ |
+
+ |
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/datatable/TableFooter.vue b/src/components/datatable/TableFooter.vue
index 45f95696b..1c2832027 100644
--- a/src/components/datatable/TableFooter.vue
+++ b/src/components/datatable/TableFooter.vue
@@ -50,7 +50,7 @@ export default {
}
return hasFooter;
- },
+ }
},
components: {
'DTColumnSlot': ColumnSlot