pui9-datatables 1.16.4

package/src/components/desktop/PuiSimpleDatatable.vue

@@ -0,0 +1,1498 @@
+<template>
+	<v-layout class="ml-1 mr-1">
+		<v-flex xs12 :id="getDivTableId">
+			<!-- The table -->
+			<div class="ml-3 mr-3">
+				<table :id="completeGridName" :ref="completeGridName" class="cell-border hover stripe nowrap full-width">
+					<thead :id="completeGridNameHeader" :ref="completeGridNameHeader"></thead>
+					<tbody :id="completeGridNameBody" :ref="completeGridNameBody"></tbody>
+				</table>
+			</div>
+		</v-flex>
+		<pui-datatable-column-menu
+			v-if="headerCreated"
+			:colHeader="$colHeader"
+			:modelName="modelName"
+			:grouped="grouped"
+			:fixed="fixed"
+		></pui-datatable-column-menu>
+		<pui-grid-row-actions
+			v-if="data === undefined && showGridRowActions"
+			:modelName="modelName"
+			:mouseOut="mouseOutOfTable"
+			:showViewButton="showGridRowActionsView"
+			:showEditButton="showGridRowActionsEdit"
+			:showDeleteButton="showGridRowActionsDelete"
+		></pui-grid-row-actions>
+		<pui-grid-action-footer
+			v-show="actionFooter"
+			:action="actionRunning"
+			:registries="selectedRows"
+			:modelName="modelName"
+		></pui-grid-action-footer>
+		<pui-select-detail-dialog
+			v-if="showDetailModalDialog"
+			:parentId="`${completeGridName}_detail`"
+			:componentLabel="detailComponentLabel"
+			:componentName="detailComponentName"
+			:componentPk="detailComponentPk"
+			:componentMethod="detailComponentMethod"
+			:modelName="detailModelName"
+		></pui-select-detail-dialog>
+	</v-layout>
+</template>
+
+<script>
+import $ from 'jquery';
+import dt from 'datatables.net'; // eslint-disable-line
+import 'datatables.net-dt/css/jquery.dataTables.css';
+import select from 'datatables.net-select'; // eslint-disable-line
+import 'datatables.net-select-dt/css/select.dataTables.css';
+import colreorder from 'datatables.net-colreorder'; // eslint-disable-line
+import 'datatables.net-colreorder-dt/css/colReorder.dataTables.css';
+import rowgroup from 'datatables.net-rowgroup'; // eslint-disable-line
+import 'datatables.net-rowgroup-dt/css/rowGroup.dataTables.css';
+import keytable from 'datatables.net-keytable'; // eslint-disable-line
+import 'datatables.net-keytable-dt/css/keyTable.dataTables.css';
+import fixedcolumns from 'datatables.net-fixedcolumns'; // eslint-disable-line
+import 'datatables.net-fixedcolumns-dt/css/fixedColumns.dataTables.css';
+import fixedheader from 'datatables.net-fixedheader'; // eslint-disable-line
+import 'datatables.net-fixedheader-dt/css/fixedHeader.dataTables.css';
+
+import plugins from './datatables.net-plugins/pagination/input.js'; // eslint-disable-line
+
+import PuiDatatableColumnMenu from './subdialogs/PuiDatatableColumnMenu';
+import PuiGridActionFooter from './footer/PuiGridActionFooter';
+import PuiGridRowActions from './row/PuiGridRowActions';
+
+import { debounce } from 'lodash';
+
+export default {
+	name: 'PuiSimpleDatatable',
+	components: {
+		PuiDatatableColumnMenu,
+		PuiGridActionFooter,
+		PuiGridRowActions
+	},
+	props: {
+		columns: {
+			type: Array,
+			required: true
+		},
+		modelName: {
+			type: String,
+			required: true
+		},
+		modelNameSuffix: {
+			type: String,
+			default: ''
+		},
+		info: {
+			type: Boolean,
+			default: true
+		},
+		lengthMenu: {
+			type: [Array],
+			default: () => [10, 20, 30, 50, 100]
+		},
+		parentModelName: {
+			type: String,
+			default: null
+		},
+		pageLength: {
+			type: Number
+		},
+		search: {
+			type: Boolean,
+			default: false
+		},
+		tableMaxHeight: {
+			type: Number,
+			default: 70
+		},
+		showPaginator: {
+			type: Boolean,
+			default: true
+		},
+		scrollX: {
+			type: Boolean,
+			default: true
+		},
+		scrollY: {
+			type: [Boolean, String],
+			default: true
+		},
+		scrollCollapse: {
+			type: Boolean,
+			default: false
+		},
+		data: {
+			type: Array
+		},
+		showActions: {
+			type: Boolean,
+			default: false
+		},
+		showRowActions: {
+			type: Boolean,
+			default: true
+		},
+		// external search is an array with 2 elements, searchText (String) and searchColumns (Array)
+		externalSearch: {
+			type: Array,
+			default: () => null
+		},
+		externalFilter: {
+			type: Object,
+			default: null
+		},
+		modelColumnDefs: {
+			type: Array
+		},
+		masterDetail: {
+			type: Boolean,
+			default: false
+		},
+		navigableDetail: {
+			type: Boolean,
+			default: true
+		},
+		isEditableRegistry: {
+			type: Function,
+			default: () => {
+				return true;
+			}
+		},
+		selectStyle: {
+			type: String,
+			default: 'single'
+		},
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
+		defaultActionRead: {
+			type: Boolean,
+			default: false
+		},
+		modalDialog: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			scrollingDown: false,
+			scrollingUp: false,
+			headerCreated: false,
+			table: null,
+			datatablesOrderApplied: [{ column: null, dir: null }],
+			order: [],
+			orderFixed: null,
+			fixed: false,
+			grouped: false,
+			model: {},
+			rows: 20,
+			top: 0,
+			page: 1,
+			loadedConfig: false,
+			searchText: null,
+			searchColumns: null,
+			gridCompleted: false,
+			completeGridName: '',
+			selectedRows: [],
+			disabledRows: [],
+			footerClassPrefix: 'bottom',
+			headerClassPrefix: 'dataTables_scrollHead',
+			actionFooter: false,
+			actionRunning: null,
+			pkColumns: [],
+			mouseOutOfTable: false,
+			rowsSelectedChecked: 0,
+			actionsView: true,
+			actionsEdit: true,
+			actionsDelete: true,
+			showGridRowActions: this.showRowActions && this.$store.state.grid.showRowActions,
+			showGridRowActionsView: false,
+			showGridRowActionsEdit: false,
+			showGridRowActionsDelete: false,
+			showDetailModalDialog: false,
+			debouncedAdjustTableColumns: null
+		};
+	},
+	computed: {
+		getDivTableId() {
+			return this.completeGridName + '_datatable_container';
+		},
+		completeGridNameHeader() {
+			return this.completeGridName + '_header';
+		},
+		completeGridNameBody() {
+			return this.completeGridName + '_body';
+		},
+		isCompleteDataTable() {
+			return !(this.data !== undefined && this.data.length !== undefined);
+		},
+		onPuiExpandMenu() {
+			return this.$store.state.menu.expandMenuForce;
+		},
+		onPuiSecondMenuShowed() {
+			return this.$store.state.menu.secondMenuShowedForce;
+		}
+	},
+	methods: {
+		handleScroll(event) {
+			this.mouseOutOfTable = true;
+			if (this.$colHeader == undefined) {
+				return;
+			}
+			const el = event.currentTarget;
+			if (el.scrollTop === 0) {
+				this.scrollingUp = false;
+				this.$colHeader[0] && this.$colHeader[0].classList.remove(`${this.headerClassPrefix}--scrolling`);
+			} else {
+				this.scrollingUp === false && this.$colHeader[0].classList.add(`${this.headerClassPrefix}--scrolling`);
+			}
+			if (el.clientHeight + el.scrollTop === el.scrollHeight) {
+				this.scrollingDown = false;
+				this.$footer && this.$footer[0].classList.remove(`${this.footerClassPrefix}--scrolling`);
+			} else {
+				this.scrollingDown === false && this.$footer && this.$footer[0].classList.add(`${this.footerClassPrefix}--scrolling`);
+			}
+		},
+		getPKColumnsModel() {
+			if (!this.model) {
+				return;
+			}
+			var pks = [];
+			for (let index = 0, length = this.model.columns.length; index < length; index++) {
+				const column = this.model.columns[index];
+				if (column.isPk) {
+					pks.push(column.name);
+				}
+			}
+			return pks;
+		},
+		createIndexRowData(data) {
+			var pk = [];
+			for (let index = 0, length = this.pkColumns.length; index < length; index++) {
+				const field = this.pkColumns[index];
+				var value = data[field];
+				pk.push(value);
+			}
+			return pk.join('|');
+		},
+		getTableAPI() {
+			return $(this.$el)
+				.find('#' + this.completeGridName)
+				.dataTable();
+		},
+		redrawTable() {
+			$(this.$el)
+				.find('#' + this.completeGridName)
+				.dataTable();
+		},
+		createDatatable(fromReloadGrid) {
+			this.rowsSelectedChecked = 0;
+			this.headerCreated = false;
+			var gridName = this.completeGridName;
+
+			this.gridCompleted = false;
+			// Grouping is just for client side, so we have to check if there is a previous grid state and use this value and if it does not exist
+			// use the one from the configuration. Same for column search option.
+			if (!this.gridConfiguration) {
+				this.gridConfiguration = this.$store.getters.getCurrentGridConfiguration(this.modelName);
+				if (!this.gridConfiguration) {
+					this.gridConfiguration = this.$store.getters.getDefaultGridConfiguration(this.modelName);
+				}
+				if (this.gridConfiguration) {
+					this.fixed = this.gridConfiguration.configuration.pinColumn;
+					this.grouped = this.gridConfiguration.configuration.grouped;
+					this.order = this.gridConfiguration.configuration.order;
+					this.columnSearch = this.gridConfiguration.configuration.columnSearch;
+					this.rows = this.gridConfiguration.configuration.rows || this.rows;
+					this.page = this.gridConfiguration.configuration.page || 1;
+				}
+			}
+			if (this.model) {
+				if (!fromReloadGrid) {
+					this.selectedRows = this.model.selectedRows || [];
+				}
+				this.$puiEvents.$emit(`onPui-selectItem-dataTable-${this.modelName}${this.modelNameSuffix}`, this.selectedRows);
+				this.model.selectedRows = [];
+			}
+
+			//add the actions
+
+			if (!this.showActions) {
+				const modelFuncs = this.model ? this.model.functionalities : {};
+				this.actionsView = this.$store.getters.hasFunctionality(modelFuncs.get);
+				this.actionsEdit = this.$store.getters.hasFunctionality(modelFuncs.update);
+				this.actionsDelete = this.$store.getters.hasFunctionality(modelFuncs.delete);
+			}
+
+			if (this.showGridRowActions) {
+				this.showGridRowActionsView = this.actionsView;
+				this.showGridRowActionsEdit = this.actionsEdit;
+				this.showGridRowActionsDelete = this.actionsDelete;
+			}
+
+			var actionsHtml = '';
+			if (this.actionsView) {
+				actionsHtml += "<button class='dt-button action-btn'><i class='material-icons row_view row__action'>visibility</i></button>";
+			}
+			if (this.actionsEdit) {
+				actionsHtml += "<button class='dt-button action-btn'><i class='material-icons row_edit row__action'>edit</i></button>";
+			}
+			if (this.actionsDelete) {
+				actionsHtml += "<button class='dt-button action-btn'><i class='material-icons row_delete row__action'>delete</i></button>";
+			}
+			this.showActions &&
+				this.tableColumns.push({
+					title: '',
+					name: 'actions',
+					data: null,
+					visible: true,
+					//orderable: false,
+					className: 'center all actions',
+					defaultContent: actionsHtml
+				});
+
+			// configure the buttons
+			var buttons = [];
+			var ajax;
+
+			if (this.isCompleteDataTable === true) {
+				const url = this.$store.getters.getBaseUrl + this.model.url.list;
+				// configure the ajax request and response
+				ajax = {
+					url: url,
+					type: 'POST',
+					contentType: 'application/json',
+					beforeSend: (request) => {
+						let headers = this.$store.getters.getHttpRequestHeaders;
+						for (let prop in headers) {
+							request.setRequestHeader(prop, headers[prop]);
+						}
+					},
+					data: (data) => {
+						this.fixPaginatorIfSorted(data);
+						let queryFields = [];
+						data.columns.forEach((col) => {
+							if (col.name !== 'selection' && col.search.value != null && col.search.value.length > 0) {
+								queryFields.push(col.name);
+							}
+						});
+
+						this.searchColumns &&
+							this.searchColumns.forEach((col) => {
+								if (col.checked === true) {
+									queryFields.push(col.name);
+								}
+							});
+
+						let lang = this.$store.getters.getUserLanguage;
+						if (!this.parentModelName) {
+							this.$store.commit('setRequestLang', null);
+						}
+						let langStore = this.$store.getters.getRequestLang;
+						if (langStore !== null) {
+							lang = langStore;
+						}
+
+						var newData = {
+							model: this.model.name,
+							page: this.page,
+							rows: data.length,
+							queryLang: lang,
+							queryText: this.searchText,
+							queryFields: queryFields,
+							queryFlexible: false,
+							filter: this.filter,
+							order: this.order
+						};
+						return JSON.stringify(newData);
+					},
+					error: (xhr) => {
+						if (xhr.status === 401) {
+							(xhr.responseJSON.internalCode === 202 ||
+								xhr.responseJSON.internalCode === 207 ||
+								xhr.responseJSON.internalCode === 209) &&
+								this.$store.dispatch('puiLoginSessionExpired');
+						} else {
+							this.processing = false;
+							this.$puiNotify.error(xhr.responseJSON.message);
+						}
+					},
+					dataSrc: (data) => {
+						data.recordsTotal = data.totalRecords;
+						data.recordsFiltered = data.totalRecords;
+						delete data.currentPage;
+						delete data.totalPages;
+						delete data.totalRecords;
+						return data.data;
+					}
+				};
+			}
+			// configure the options
+			//TODO hay que añadir la opción para que se cargue toda la información de una como en pui(loadonce: true) y haga ordenaciones, búsquedas y filtros
+			//sobre los datos ya cargados y no haga petición ajax cada vez https://stackoverflow.com/questions/31097028/datatables-draw-without-ajax-call
+			var options = {
+				stateLoadParams: (settings, data) => {
+					// If the grid shows the column search
+					this.columnSearch = data.columnSearch;
+				},
+				dom: '<"left"B><"right">frt<"bottom"<"left"li><"right"p>>', // 'Blfrtip',
+				serverSide: true,
+				select: {
+					style: this.selectStyle
+				},
+				fixedColumns: {
+					leftColumns: this.fixed ? 2 : 0
+				},
+				colReorder: {
+					fixedColumnsLeft: 1
+					//realtime: false
+				},
+				fixedHeader: {
+					header: true
+				},
+				autoWidth: false,
+				columnDefs: this.columnDefs,
+				orderFixed: this.orderFixed,
+				order: [],
+				stateSave: false,
+				destroy: true,
+				responsive: false,
+				search: false,
+				searchDelay: 500,
+				info: this.info,
+				searching: true,
+				ordering: true,
+				processing: true,
+				paging: this.showPaginator,
+				pagingType: 'input',
+				lengthChange: true,
+				pageLength: this.pageLength || this.rows,
+				lengthMenu: this.lengthMenu,
+				bLengthChange: !this.$store.getters.isMobile,
+				buttons: buttons,
+				scrollX: this.scrollX,
+				scrollY: this.tableHeight(), //277 es la suma de todo lo que hay por arriba y por debajo de la tabla, nunca cambia
+				scrollCollapse: this.scrollCollapse,
+				columns: this.tableColumns,
+				rowCallback: (row, data) => {
+					if (this.selectedRows.length === 0) {
+						return;
+					}
+					for (let i = this.rowsSelectedChecked; i < this.selectedRows.length; i++) {
+						if (this.getPk(data) === Object.keys(this.selectedRows[i])[0]) {
+							this.$puiEvents.$emit(`onPui-selectItem-dataTable-${this.modelName}${this.modelNameSuffix}`, this.selectedRows);
+							this.rowSelectedIndex = row._DT_RowIndex;
+							this.rowsSelectedChecked++;
+						}
+					}
+				},
+				language: {
+					sEmptyTable: this.$t('sEmptyTable'),
+					sInfo: this.$t('sInfo'),
+					sInfoEmpty: this.$t('sInfoEmpty'),
+					sInfoFiltered: this.$t('sInfoFiltered'),
+					sInfoPostFix: this.$t('sInfoPostFix'),
+					sInfoThousands: this.$t('sInfoThousands'),
+					sLengthMenu: this.$t('sLengthMenu'),
+					sLoadingRecords: this.$t('sLoadingRecords'),
+					sProcessing: this.$t('sProcessing'),
+					sSearch: this.$t('sSearch'),
+					sZeroRecords: this.$t('sZeroRecords'),
+					oPaginate: {
+						sFirst: '<i class="fal fa-arrow-to-left"></i>',
+						sLast: '<i class="fal fa-arrow-to-right"></i>',
+						sNext: '<i class="fal fa-arrow-right"></i>',
+						sPrevious: '<i class="fal fa-arrow-left"></i>'
+					},
+					oAria: {
+						sSortAscending: this.$t('sSortAscending'),
+						sSortDescending: this.$t('sSortDescending')
+					},
+					processing: '<i class="far fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>'
+				},
+				initComplete: () => {
+					this.gridCompleted = true;
+					this.headerCreated = false;
+					if (this.page !== 1) {
+						this.table.page(this.page - 1).draw(false);
+					}
+					if (this.selectedRows.length === 1 && this.rowsSelectedChecked !== 1) {
+						this.showSelectedRowInAnotherPageMessage();
+					}
+
+					// Enable the column search
+					if (this.columnSearch) {
+						this.enableColumnSearch(this.columnSearch);
+					}
+					if (this.isCompleteDataTable === true) {
+						$(this.$refs[this.completeGridNameHeader]).parent().attr('style', 'border-bottom: none !important');
+						const colHeader = $(this.$refs[this.completeGridNameHeader]).parent().parent().parent();
+						if (colHeader !== this.$colHeader) {
+							this.headerCreated = true;
+						}
+						this.$colHeader = colHeader;
+					}
+					// Adjust the height
+					this.adjustGridHeight();
+
+					// Resize the table when the parent container is resized
+					this.$puiEvents.$on('onPuiMultiPanelChanged', () => {
+						this.table.columns.adjust().draw();
+					});
+
+					// Refresh data when a row is deleted
+					this.$puiEvents.$on(`onPui-deleteRow-dataTable-${this.modelName}${this.modelNameSuffix}`, () => {
+						this.isCompleteDataTable && this.table.ajax.reload().draw();
+					});
+					if (!this.table) {
+						this.table = $(this.$el)
+							.find('#' + gridName)
+							.dataTable()
+							.api();
+					}
+					if (this.grouped === true) {
+						this.table.colReorder.disable();
+					} else {
+						this.table.colReorder.enable();
+					}
+					this.registerDatatableListeners();
+
+					if (this.selectedRows.length === 1 && this.rowsSelectedChecked === 1 && this.rowSelectedIndex !== undefined) {
+						let row = this.table.row(this.rowSelectedIndex);
+						row.select();
+						// refresh data in selectedRows from datatable
+						let rowObj = {};
+						rowObj[this.getPk(row.data())] = row.data();
+						this.selectedRows = [rowObj];
+						this.$puiEvents.$emit(`onPui-selectItem-dataTable-${this.modelName}${this.modelNameSuffix}`, this.selectedRows);
+					} else {
+						this.selectedRows = [];
+						this.$puiEvents.$emit(`onPui-clearSelection-dataTable-${this.modelName}${this.modelNameSuffix}`);
+					}
+
+					if (this.selectStyle === 'multi') {
+						this.addSelectAllCheckbox(this);
+					}
+				}
+			};
+			if (ajax) {
+				options.ajax = ajax;
+			} else {
+				options.serverSide = false;
+				options.data = this.data;
+			}
+
+			const model = this.$store.getters.getModelByName(this.modelName);
+			if (!ajax || this.$store.getters.hasFunctionality(model.functionalities.list)) {
+				this.table = $(this.$el)
+					.find('#' + gridName)
+					.DataTable(options);
+			} else {
+				this.table = $(this.$el).find('#' + gridName);
+			}
+
+			this.$store.commit('puiModelsSetGridInitialized', { model: this.modelName, initialized: true });
+
+			// Move pagination dataTables_info from left to right container
+			if (this.showPaginator === true) {
+				this.$footer = $(this.$refs[this.completeGridName]).parent().parent().parent().find(`.${this.footerClassPrefix}`);
+				$(`#${gridName}_info`).prependTo(`#${this.completeGridName}_wrapper .${this.footerClassPrefix} .right`);
+			} else {
+				$(`#${gridName}_info`).remove();
+			}
+
+			this.$puiEvents.$emit(
+				`onPui-created-dataTable-${this.modelName}${this.modelNameSuffix}`,
+				this.$store.state.menu.expanded || this.$store.state.menu.expandMenu
+			);
+		},
+		showSelectedRowInAnotherPageMessage() {
+			//TODO, IMPLEMENTAR, QUE APAREZCA MENSAJE DE FILA SELECCIONADA EN OTRA PÁGINA EN EL FOOTER (.bottom)
+		},
+		registerDatatableListeners() {
+			var self = this;
+
+			if (this.isCompleteDataTable === true) {
+				this.table.on('column-reorder', () => {
+					this.$puiEvents.$emit(`onPui-colReorder-dataTable-${this.modelName}${this.modelNameSuffix}`, this.table.colReorder.order());
+				});
+				this.table.on('mouseenter', 'tbody tr', (event) => {
+					const $row = $(event.currentTarget);
+					if ($row.hasClass('group')) {
+						return;
+					}
+					const hoverInfo = {
+						y: $row.position().top + 160 - this.table.scrollDiv[0].scrollTop - this.toolbarSingleRowNegativeHeight,
+						row: this.table.row($row)
+					};
+					this.mouseOutOfTable = false;
+					this.$puiEvents.$emit(`onPui-hoverRow-dataTable-${this.modelName}${this.modelNameSuffix}`, hoverInfo);
+				});
+				if (this.actionsView && this.navigableDetail) {
+					// row double click
+					this.table.on('dblclick', 'tr', function (e) {
+						if (self.dblclick) {
+							return;
+						}
+						self.dblclick = true;
+						if (e.currentTarget.className !== 'group') {
+							var row = self.table.row(this);
+							if (self.actionsEdit && !self.readOnly && !self.defaultActionRead && self.isEditableRegistry(row.data())) {
+								self.editRegistry(row, 'update');
+							} else {
+								self.editRegistry(row, 'read');
+							}
+						}
+						setTimeout(function () {
+							self.dblclick = false;
+						}, 200);
+					});
+				}
+				// event for column visibility change
+				this.table.on('column-visibility.dt', () => {
+					if (!this.gridCompleted) {
+						return;
+					}
+
+					if (this.columnSearch) {
+						this.rebuildColumnFilters();
+					}
+					this.grouped && this.table.draw(false);
+				});
+
+				this.table.on('length.dt', (e, settings, len) => {
+					if (this.grouped) {
+						this.groupedFlag = true;
+					}
+					this.$puiEvents.$emit(`onPui-changeRowNum-dataTable-${this.modelName}${this.modelNameSuffix}`, len);
+				});
+				this.table.on('draw.dt', () => {
+					this.grouped === true /* && this.groupedFlag === true */ && this.groupRows(1);
+					this.actionRunning && this.applyDisableRowsByAction();
+				});
+
+				this.table.on('page.dt', () => {
+					if (this.grouped) {
+						this.groupedFlag = true;
+					}
+					this.rowsSelectedChecked = 0;
+					this.page = this.table.page.info().start / this.table.page.info().length + 1;
+					this.$puiEvents.$emit(`onPui-pageChange-dataTable-${this.modelName}${this.modelNameSuffix}`, this.page);
+				});
+				this.table.on('click', 'tr', function (e) {
+					if (self.dblclick) {
+						return;
+					}
+
+					const row = self.table.row(this);
+					const rowData = row.data();
+					if (!rowData) {
+						e.stopPropagation();
+						e.preventDefault();
+						return;
+					}
+
+					const rowPk = self.getPk(rowData);
+					const selectedRowObj = {};
+
+					for (let i = 0; i < self.disabledRows.length; i++) {
+						if (rowPk === self.disabledRows[i]) {
+							$(this).removeClass('selected');
+							e.stopPropagation();
+							e.preventDefault();
+							return;
+						}
+					}
+
+					setTimeout(function () {
+						if (self.dblclick) {
+							return;
+						}
+						for (let i = 0; i < self.selectedRows.length; i++) {
+							const selectedRow = self.selectedRows[i];
+							if (rowPk === Object.keys(selectedRow)[0]) {
+								self.selectedRows.splice(i, 1);
+								self.$puiEvents.$emit(`onPui-selectItem-dataTable-${self.modelName}${self.modelNameSuffix}`, self.selectedRows);
+								$(this).removeClass('selected');
+								e.stopPropagation();
+								e.preventDefault();
+								return;
+							} else if (self.table.select.style() === 'single') {
+								self.selectedRows.splice(i, 1);
+							}
+						}
+						selectedRowObj[rowPk] = rowData;
+						self.selectedRows.push(selectedRowObj);
+						self.$puiEvents.$emit(`onPui-selectItem-dataTable-${self.modelName}${self.modelNameSuffix}`, self.selectedRows);
+						$(this).addClass('selected');
+					}, 50);
+				});
+				this.table.on('click', 'tr.group', function (e) {
+					var target = $(e.target);
+
+					if (target.is('td')) {
+						target = target.parent();
+					}
+					if (target.is('tr')) {
+						let nextTr = target;
+						for (var i = 0; i < target.parent().children().length; i++) {
+							nextTr = nextTr.closest('tr').next('tr');
+							if (nextTr.hasClass('group')) {
+								break;
+							} else {
+								nextTr.toggle();
+							}
+						}
+					}
+				});
+				$(this.$refs[this.completeGridName]).on('mouseleave', () => {
+					this.mouseOutOfTable = true;
+				});
+			} else {
+				this.table.on('click', 'i.row_view', function (e) {
+					e.preventDefault();
+					if (self.actionsView) {
+						var tr = $(this).closest('tr');
+						var row = self.table.row(tr);
+						self.editRegistry(row, 'read');
+					}
+				});
+				// event for edit row
+				this.table.on('click', 'i.row_edit', function (e) {
+					e.preventDefault();
+					if (self.actionsEdit) {
+						var tr = $(this).closest('tr');
+						var row = self.table.row(tr);
+						self.editRegistry(row, 'update');
+					}
+				});
+
+				// event for delete row
+				this.table.on('click', 'i.row_delete', function (e) {
+					e.preventDefault();
+					if (self.actionsDelete) {
+						var tr = $(this).closest('tr');
+						var row = self.table.row(tr);
+						self.deleteRegistry(row);
+					}
+				});
+			}
+			this.table.scrollDiv = $(this.table.table().container()).find('.dataTables_scrollBody');
+			this.table.scrollDiv.on('scroll', (e) => {
+				this.handleScroll(e);
+			});
+		},
+		handleWheelRowActions(e) {
+			this.table.scrollDiv.scrollTop(this.table.scrollDiv.scrollTop() - e.wheelDeltaY);
+		},
+		createRegistry() {
+			this.goToElement(null, 'create');
+		},
+		editRegistry(row, readOrUpdate) {
+			this.selectedRows = [];
+			this.disabledRows = [];
+			const rowData = row.data();
+			if (!rowData) {
+				return;
+			}
+			const rowObj = {};
+			if (this.isCompleteDataTable === false) {
+				this.$puiEvents.$emit(`onPui-${readOrUpdate}Row-dataTable-${this.modelName}${this.modelNameSuffix}`, rowData);
+				return;
+			}
+			rowObj[this.getPk(row.data())] = rowData;
+			this.selectedRows.push(rowObj);
+			this.model.selectedRows = [rowObj];
+			this.goToElement(rowData, readOrUpdate);
+		},
+		removeSorting() {
+			this.table({
+				ordering: false
+			});
+		},
+		deleteRegistry(row) {
+			const data = row.data();
+			var params = {};
+			var modelName = this.model.name;
+			for (var index in this.model.columns) {
+				let column = this.model.columns[index];
+				if (column.isPk) {
+					params[column.name] = data[column.name];
+				}
+			}
+			if (Object.keys(params).length === 0) {
+				params = data;
+			}
+			if (this.isCompleteDataTable === false) {
+				//const rowIndex = this.table.row(row).index();
+				//this.data.splice(rowIndex, 1);
+				row.remove().draw();
+			}
+			this.$puiRequests.deleteRequest(
+				`/${modelName}/delete`,
+				null,
+				(response) => {
+					this.$puiEvents.$emit(`onPui-deleteRow-dataTable-${modelName}`, response.data);
+					this.$puiNotify.success(this.$puiI18n.t('pui9.delete.success'));
+				},
+				(error) => {
+					this.$store.dispatch('puiRequestShowServerError', { error });
+				},
+				params
+			);
+		},
+		goToElement(row, method) {
+			if (!this.modalDialog) {
+				if (this.masterDetail && this.model.searcher) {
+					this.model.searcher.goToElement = true;
+				}
+				var query = {};
+				var componentName = this.model.name;
+				var url = componentName + '/' + method + '/' + this.getPk(row, true) + '/';
+
+				if (this.parentModelName) {
+					this.$puiEvents.$emit(`onPuiGotoTableDetail-${this.parentModelName}`);
+				}
+				const params = {
+					router: this.$router,
+					url: url,
+					params: null,
+					query: query
+				};
+				this.$store.dispatch('puiRouterGoToUrl', params);
+			} else {
+				this.detailComponentMethod = method;
+				this.detailComponentPk = row !== null ? this.getPk(row, true) : 'new';
+				this.showDetailModalDialog = true;
+			}
+		},
+		getParametersForMultipanel(row, mode) {
+			let params = {};
+			if (row != null) {
+				for (var index in this.model.columns) {
+					let column = this.model.columns[index];
+					if (column.isPk) {
+						params[column.name] = row[column.name];
+					}
+				}
+			}
+			params['_mode'] = mode;
+			return params;
+		},
+		getPk(row) {
+			let pk = {};
+			if (row != null) {
+				for (var index in this.model.columns) {
+					let column = this.model.columns[index];
+					if (column.isPk) {
+						pk[column.name] = row[column.name];
+					}
+				}
+			}
+			var pkStr = JSON.stringify(pk);
+			var pk64 = this.$puiUtils.utf8ToB64(pkStr);
+			return pk64;
+		},
+		ungroupRows() {
+			this.table.rowGroup().dataSrc(this.table.data('column'));
+			const rows = this.table.rows({ page: 'current' }).nodes();
+			let last = null;
+			this.table
+				.column(1, { page: 'current' })
+				.data()
+				.each((group, i) => {
+					if (last !== group) {
+						/* const rowCount = this.table
+								.column(currentOrder)
+								.data()
+								.filter(x => {
+									return x == group;
+								}).length; */
+						$(rows).eq(i).prev().remove();
+						last = group;
+					}
+				});
+		},
+		groupRows(columnIndex) {
+			this.table.rowGroup().dataSrc(this.table.data('column'));
+			const rows = this.table.rows({ page: 'current' }).nodes();
+			let last = null;
+			//const colPosition = typeof this.table.column(1, { page: 'current' }).data()[0] === 'object' ? 0 : 1;
+			const renderFunctionForColumn =
+				this.table.context[0].aoColumns[columnIndex].mRender ||
+				function (data) {
+					return data;
+				};
+			this.table
+				.column(1, { page: 'current' })
+				.data()
+				.each((group, i) => {
+					if (last !== group) {
+						/* const rowCount = this.table
+								.column(currentOrder)
+								.data()
+								.filter(x => {
+									return x == group;
+								}).length; */
+						if ($(rows).eq(i).prev().hasClass('group') === false) {
+							$(rows)
+								.eq(i)
+								.before(
+									$(
+										'<tr class="group"><td class="group-bar no-side-borders" colspan="' +
+											columnIndex +
+											'"><i aria-hidden="true" class="v-icon fa fa fa fa-sm fa-caret-down theme--light"></i></td><td class="group-summary no-side-borders pointer">' +
+											renderFunctionForColumn(group) +
+											/* rowCount + */
+											'</td></tr>'
+									).on('click', function (e) {
+										if (!e.target.cellIndex) {
+											return;
+										}
+										const theExpandIcon = $(e.currentTarget).find('.v-icon')[0];
+										const classes = theExpandIcon.classList;
+										if (classes.contains('fa-caret-down') === true) {
+											theExpandIcon.classList.remove('fa-caret-down');
+											theExpandIcon.classList.add('fa-caret-right');
+										} else {
+											theExpandIcon.classList.remove('fa-caret-right');
+											theExpandIcon.classList.add('fa-caret-down');
+										}
+									})
+								)
+								.prev()
+								.prev()
+								.addClass('group-last-row');
+						}
+						last = group;
+					}
+				});
+		},
+		getColumnName(index) {
+			if (!this.table) {
+				return;
+			}
+			const columns = this.table.context[0].aoColumns;
+			return columns[index].data;
+		},
+		getColumnIndex(name) {
+			if (!this.table) {
+				return;
+			}
+			const column = this.table.context[0].aoColumns.filter((column) => {
+				return column.name === name;
+			});
+			if (column.length === 1) {
+				return column[0].idx;
+			}
+			console.warn('error al obtener el nombre de una columna, esta columna no existe');
+			return 0;
+		},
+		unregisterDatatableListeners() {
+			if (this.table !== undefined) {
+				this.table.off('column-reorder');
+				this.table.off('mouseenter', 'tbody tr');
+				this.table.off('click', 'tr');
+				this.table.off('column-visibility.dt');
+				this.table.off('length.dt');
+				this.table.off('draw.dt');
+				this.table.off('length.dt');
+				this.table.off('click', 'tr.group');
+				this.table.scrollDiv?.off('scroll');
+				$(this.$refs[this.completeGridName]).off('mouseleave');
+			}
+		},
+		setGroupColumn(columnIndex) {
+			this.grouped = columnIndex !== -1;
+			this.orderFixed = null;
+			if (this.grouped === true) {
+				this.table.colReorder.disable();
+				const currentColumnsOrder = this.table.colReorder.order();
+				let columnIndexOrder = columnIndex;
+				for (let i = 0; i < currentColumnsOrder.length; i++) {
+					if (currentColumnsOrder[i] === columnIndex) {
+						columnIndexOrder = i;
+						break;
+					}
+				}
+				const sortingRule = { column: this.getColumnName(columnIndex), direction: 'asc' };
+				const currentOrder = this.table.order()[0];
+				const order = [];
+				order.push([1, 'asc']);
+				if (currentOrder !== undefined && currentOrder[0] !== 1) {
+					order.push(currentOrder);
+				}
+				this.groupedFlag = true;
+				this.table.colReorder.move(columnIndexOrder, 1);
+				this.$puiEvents.$emit(`onPui-colReorder-dataTable-${this.modelName}${this.modelNameSuffix}`, this.table.colReorder.order());
+				this.applyOrder(order, true);
+				this.orderFixed = [[1, 'asc']];
+				this.$puiEvents.$emit(`onPui-apply-sorting-dataTable-${this.modelName}${this.modelNameSuffix}`, [sortingRule]);
+				this.$puiEvents.$emit(`onPui-groupColumn-dataTable-${this.modelName}${this.modelNameSuffix}`, columnIndex - 1);
+				this.selectedRows = [];
+				this.$puiEvents.$emit(`onPui-selectItem-dataTable-${this.modelName}${this.modelNameSuffix}`, this.selectedRows);
+			} else {
+				this.table.colReorder.enable();
+				this.$puiEvents.$emit(`onPui-groupColumn-dataTable-${this.modelName}${this.modelNameSuffix}`, -1);
+				this.ungroupRows();
+			}
+		},
+		reloadGrid(config, columnDefs) {
+			if (columnDefs !== undefined) {
+				this.columnDefs = columnDefs;
+			}
+			this.gridConfiguration = {};
+			this.tableColumns = (config && config.columns) || this.tableColumns;
+			this.tableColumns[0].name !== 'selection' && this.addSelectCheckColumn();
+			this.grouped = config && config.grouped ? true : false;
+			this.fixed = this.fixedFlag === true ? true : config && config.pinColumn;
+			this.rows = (config && config.rows) || this.rows;
+			this.order = (config && config.order) || this.order;
+			this.unregisterDatatableListeners();
+
+			// Rebuild the datatable with new configuration
+			this.createDatatable(true);
+			this.fixedFlag = false;
+		},
+		adjustGridHeight() {
+			let gridName = this.completeGridName;
+
+			if (this.masterDetail) {
+				$('#' + gridName + '_datatable_container .dataTables_scrollBody').css('height', 'auto');
+			}
+		},
+		pinColumnToLeft(columnIndex) {
+			this.fixed = columnIndex !== -1;
+			this.fixedFlag = this.fixed;
+			let columnDefs = this.modelColumnDefs;
+			if (this.fixed === false) {
+				this.$puiEvents.$emit(`onPui-fixedColumn-dataTable-${this.modelName}${this.modelNameSuffix}`, [-1]);
+			} else {
+				columnDefs = [];
+				var prevFunction = (data) => {
+					return data;
+				};
+
+				if (this.modelColumnDefs && this.modelColumnDefs.length > 0) {
+					columnDefs = this.modelColumnDefs.map((columnDef) => {
+						columnDef.targets.forEach((targetCol, index) => {
+							if (targetCol === columnIndex) {
+								columnDef.targets[index] = 1;
+								prevFunction = columnDef.render;
+							} else if (targetCol < columnIndex) {
+								columnDef.targets[index] = targetCol + 1;
+							}
+						});
+						return columnDef;
+					});
+				}
+				//Esto es para que la columan fijada (si tiene textos largos), se puede poner a un ancho limitado. HAy que hacerla un wrap con un div
+				//https://datatables.net/forums/discussion/37124/columndefs-width-not-working-for-me
+				const renderFunc = (data) => {
+					const nData = prevFunction(data);
+					return `<div style="width: 200px" class="pui-completeDatatable__table--column-fixed">${nData}</div>`;
+				};
+				const isTableOverflowed = this.table.scrollDiv[0].clientWidth < this.table.scrollDiv[0].scrollWidth;
+				isTableOverflowed && columnDefs.push({ targets: 1, render: renderFunc });
+				const column = this.tableColumns[columnIndex];
+				this.tableColumns.splice(columnIndex, 1);
+				this.tableColumns.splice(0, 1);
+				this.tableColumns.unshift(column);
+				this.$puiEvents.$emit(`onPui-fixedColumn-dataTable-${this.modelName}${this.modelNameSuffix}`, [columnIndex - 1, this.tableColumns]);
+			}
+			//tenemos que recargar la tabla obligatariomente porque hemos de cambiar las columnDefs (renderFunc para que se pueda reducir el width)
+			//esto hace que tengamos que reconfigurar los targets de todos los columnsDefs 20 lineas arriba
+			this.reloadGrid({ columns: this.tableColumns, order: this.order }, columnDefs);
+		},
+		orderInGroupedColumn(columnIndex, orderDir) {
+			// si la columna de ordenacion es la misma que la de agrupación, solo cogemos la dirección de la ordenación
+			if (columnIndex !== 1) {
+				const order = [this.orderFixed[0], [columnIndex, orderDir]];
+				this.applyOrder(order, false);
+			} else {
+				this.orderFixed = [[1, orderDir]];
+				this.applyOrder(this.orderFixed, false);
+			}
+			this.$puiEvents.$emit(`onPui-apply-sorting-dataTable-${this.modelName}`, this.order);
+		},
+		//The order just as the datatable understands
+		applyOrder(order, draw) {
+			this.order = [];
+			order.forEach((orderEl) => {
+				this.order.push({ column: this.getColumnName(orderEl[0]), direction: orderEl[1] });
+			});
+			if (draw === true) {
+				draw && this.table.draw();
+			} else {
+				this.table.order(order);
+				this.table.ajax.reload();
+				// reset datatable selected rows
+				this.selectedRows = [];
+			}
+			this.$puiEvents.$emit(`onPui-selectItem-dataTable-${this.modelName}${this.modelNameSuffix}`, this.selectedRows);
+		},
+		//The order as a sorting rules that pui server understands //not used so far, only if a component needs to order from outside
+		applySort(sortingRules, draw) {
+			this.eventToolbar = true;
+			const order = [];
+			sortingRules.forEach((sortingRule) => {
+				const columnIndex = this.getColumnIndex(sortingRule.column);
+				order.push([columnIndex, sortingRule.direction]);
+			});
+			this.order = sortingRules;
+			this.table && this.table.order(order);
+			draw && this.table && this.table.draw(false);
+			if (draw === false) {
+				// reset datatable selected rows
+				this.selectedRows = [];
+			}
+			this.$puiEvents.$emit(`onPui-selectItem-dataTable-${this.modelName}${this.modelNameSuffix}`, this.selectedRows);
+		},
+		applyFilter(filteringObject) {
+			this.page = 1;
+			this.$puiEvents.$emit(`onPui-pageChange-dataTable-${this.modelName}${this.modelNameSuffix}`, this.page);
+			this.eventToolbar = true;
+			this.filteringEnabled = true;
+			this.filter = filteringObject;
+			this.table && this.table.draw();
+		},
+		applySearch(searchText, searchColumns) {
+			this.page = 1;
+			this.$puiEvents.$emit(`onPui-pageChange-dataTable-${this.modelName}${this.modelNameSuffix}`, this.page);
+			this.eventToolbar = true;
+			this.searchText = searchText;
+			this.searchColumns = searchColumns;
+			this.table && this.table.draw();
+			this.selectedRows = [];
+			this.$puiEvents.$emit(`onPui-clearSelection-dataTable-${this.modelName}${this.modelNameSuffix}`);
+		},
+		addSelectCheckColumn() {
+			if (this.isCompleteDataTable === true) {
+				// select check
+				var zeroField = {
+					title: '',
+					name: 'selection',
+					data: null,
+					visible: true,
+					orderable: false,
+					className: 'datatable-cell-selection',
+					defaultContent:
+						'<i aria-hidden="true" class="v-icon far fa-square"></i><i aria-hidden="true" class="v-icon fas fa-check-square"></i>'
+				};
+				this.tableColumns.unshift(zeroField);
+			}
+		},
+		applyDisableRowsByAction() {
+			this.table.select.style('multi');
+			this.disabledRows = [];
+			// guardamos en una variable el valor de rows(...).data() porque el checkAvailability necesita que le pasemos un objeto (por ejemplo, usuario), y con el .nodes() no se le enviaba el objeto
+			var rows = this.table.rows({ page: 'current' }).data();
+			this.table
+				.rows({ page: 'current' })
+				.nodes()
+				.each((row, i) => {
+					var enable = this.actionRunning.checkAvailability.call(this, rows[i]);
+					if (!enable) {
+						const pk = this.getPk(rows[i]);
+						this.disabledRows.push(pk);
+						this.selectedRows = this.selectedRows.filter((selectedRow) => selectedRow[pk] === undefined);
+						this.table.rows(i).deselect();
+						$(row).addClass('row__action-disabled');
+					}
+				});
+
+			this.addSelectAllCheckbox(this, rows);
+		},
+		addSelectAllCheckbox(self, rows) {
+			let $selectAll = $(self.table.column(0).header());
+			$selectAll.removeClass('datatable-cell-selection').addClass('datatable-cell-selectAll');
+			$selectAll.empty().append('<i aria-hidden="true" class="v-icon far fa-square"></i>');
+			let selectedAllRows = false;
+
+			$selectAll.on('click', function () {
+				if (selectedAllRows) {
+					$selectAll.empty().append('<i aria-hidden="true" class="v-icon far fa-square"></i>');
+
+					self.selectedRows = [];
+					self.table.rows({ page: 'current' }).every((index) => {
+						var enable = rows ? self.actionRunning.checkAvailability.call(self, rows[index]) : true;
+						if (enable) {
+							self.table.row(index).deselect();
+						}
+					});
+					self.$puiEvents.$emit(`onPui-selectItem-dataTable-${self.modelName}${self.modelNameSuffix}`, self.selectedRows);
+				} else {
+					$selectAll.empty().append('<i aria-hidden="true" class="v-icon fas fa-check-square"></i>');
+
+					self.selectedRows = [];
+					self.table.rows({ page: 'current' }).every((index) => {
+						var enable = rows ? self.actionRunning.checkAvailability.call(self, rows[index]) : true;
+						if (enable) {
+							let row = self.table.row(index);
+							row.select();
+							let rowObj = {};
+							rowObj[self.getPk(row.data())] = row.data();
+							self.selectedRows.push(rowObj);
+						}
+					});
+					self.$puiEvents.$emit(`onPui-selectItem-dataTable-${self.modelName}${self.modelNameSuffix}`, self.selectedRows);
+				}
+				selectedAllRows = !selectedAllRows;
+			});
+		},
+		removeSelectAllCheckbox() {
+			let $selectAll = $(this.table.column(0).header());
+			$selectAll.removeClass('datatable-cell-selectAll').addClass('datatable-cell-selection');
+			$selectAll.empty();
+			$selectAll.off('click');
+		},
+		applyEnableRowsEndAction() {
+			this.table.select.style(this.selectStyle);
+			this.selectedRows = [];
+			this.disabledRows = [];
+			this.table.rows().deselect();
+			this.table
+				.rows({ page: 'current' })
+				.nodes()
+				.each((row) => {
+					$(row).removeClass('row__action-disabled');
+				});
+
+			this.removeSelectAllCheckbox();
+		},
+		subscribeToActionsEvents() {
+			this.$puiEvents.$on(`onPui-action-before-running-${this.modelName}${this.modelNameSuffix}`, (obj) => {
+				this.actionRunning = obj.action;
+				if (this.actionRunning.selectionType === 'multiple') {
+					this.actionFooter = true;
+					this.applyDisableRowsByAction();
+				} else if (this.selectedRows.length > 0 || this.actionRunning.selectionType === 'general') {
+					// Run action
+					this.actionFooter = false;
+					const selectedRows = this.selectedRows.map((row) => {
+						return Object.values(row)[0];
+					});
+					if (this.actionRunning.selectionType === 'single') {
+						this.model.selectedRows = this.selectedRows;
+					}
+					this.actionRunning.runAction.call(this, this.actionRunning, this.model, selectedRows);
+				}
+			});
+			this.$puiEvents.$on(`onPui-action-running-${this.modelName}${this.modelNameSuffix}`, () => {
+				this.actionFooter = false;
+			});
+			this.$puiEvents.$on(`onPui-action-running-ended-${this.modelName}${this.modelNameSuffix}`, () => {
+				this.endAction();
+			});
+			this.$puiEvents.$on(`onPui-action-running-cancelled-${this.modelName}${this.modelNameSuffix}`, () => {
+				this.endAction();
+			});
+			this.$puiEvents.$on('onPui-form-changedModelLanguage', () => {
+				this.unregisterDatatableListeners();
+				this.createDatatable();
+			});
+		},
+		onMenuExpandColapse() {
+			this.$nextTick(() => {
+				//FIXME
+				//Se usa timeout porque sino solo funciona si se pone un debugger o un punto dentro del nextTick, fuera de eso, no funciona
+				setTimeout(() => {
+					this.adjustTableColumns();
+				}, 150);
+			});
+		},
+		adjustTableColumns() {
+			this.table.columns.adjust();
+		},
+		endAction() {
+			if (this.actionRunning && this.actionRunning.selectionType === 'multiple') {
+				this.applyEnableRowsEndAction();
+			}
+			this.actionFooter = false;
+			this.actionRunning = null;
+			this.selectedRows = [];
+			this.disabledRows = [];
+			this.$puiEvents.$emit(`onPui-clearSelection-dataTable-${this.modelName}${this.modelNameSuffix}`);
+			this.reloadGrid();
+		},
+		recalculateScrollY() {
+			const tableContainerId = '#' + this.completeGridName + '_datatable_container';
+			const newTableHeight = this.tableHeight();
+			$(tableContainerId + ' .dataTables_scroll').height(newTableHeight);
+			$(tableContainerId + ' .dataTables_scrollBody').height(newTableHeight);
+		},
+		adjustTableHeight() {
+			if (!this.masterDetail) {
+				//reduce table container
+				const tableContainerId = '#' + this.completeGridName + '_datatable_container';
+				const b = $(tableContainerId + ` .${this.footerClassPrefix}`).css('bottom');
+				const bb = parseInt(b.replace('px', ''));
+				const bbottom = isNaN(bb) ? 0 : bb;
+				if (this.actionFooter) {
+					const h = $(tableContainerId + ' .dataTables_scroll').height();
+					const h2 = $(tableContainerId + ' .dataTables_scrollBody').height();
+					$(tableContainerId + ' .dataTables_scroll').height(h - 55);
+					$(tableContainerId + ' .dataTables_scrollBody').height(h2 - 55);
+					$(tableContainerId + ` .${this.footerClassPrefix}`).css('bottom', `${bbottom + 55}px`);
+				} else {
+					this.recalculateScrollY();
+					$(tableContainerId + ` .${this.footerClassPrefix}`).css('bottom', '');
+				}
+			}
+		},
+		tableHeight() {
+			if (typeof this.scrollY === 'string') {
+				return this.scrollY;
+			}
+			if (this.$parent.$options._componentTag === 'pui-datatable') {
+				let newTableHeight = window.innerHeight;
+				if (this.$store.state.global.appContainerHeader) {
+					newTableHeight = newTableHeight - 64;
+				}
+				if (this.actionFooter === true) {
+					return `${newTableHeight - 280}px`;
+				} else if (this.masterDetail === true) {
+					return `${newTableHeight - 320}px`;
+				} else if (this.$store.getters.isMobile) {
+					return `${newTableHeight - 350}px`;
+				}
+				return `${newTableHeight - 252}px`;
+			}
+			return true;
+		},
+		fixPaginatorIfSorted(data) {
+			if (1 < data.draw && JSON.stringify(this.datatablesOrderApplied)?.localeCompare(JSON.stringify(this.order)) !== 0) {
+				// Reset page if orderChange and is not firstDraw
+				this.page = 1;
+			}
+			this.datatablesOrderApplied = this.order;
+		}
+	},
+	watch: {
+		actionFooter() {
+			this.adjustTableHeight();
+		},
+		onPuiExpandMenu() {
+			this.onMenuExpandColapse(this.$store.state.menu.expandMenu);
+		},
+		onPuiSecondMenuShowed() {
+			this.onMenuExpandColapse(this.$store.state.menu.secondMenuShowed);
+		}
+	},
+	created() {
+		this.dateFormat = this.$store.getters.dateFormat;
+		this.timeFormat = this.$store.getters.timeFormat;
+		this.toolbarSingleRowNegativeHeight = 0;
+		if (this.masterDetail === true) {
+			this.toolbarSingleRowNegativeHeight = 65;
+		}
+		if (this.externalSearch) {
+			this.searchText = this.externalSearch[0];
+			this.searchColumns = this.externalSearch[1];
+		}
+		if (this.externalFilter) {
+			this.filter = this.externalFilter;
+		}
+		this.tableColumns = [];
+		this.columnDefs = this.modelColumnDefs;
+		this.columns &&
+			this.columns.forEach((column) => {
+				this.tableColumns.push(column);
+			});
+		this.addSelectCheckColumn();
+		this.model = this.$store.getters.getModelByName(this.modelName);
+		this.pkColumns = this.getPKColumnsModel();
+		if (this.modelNameSuffix) {
+			this.$store.commit('addGridInstance', { model: this.modelName });
+		}
+		this.completeGridName = this.modelName + '_' + this.$store.getters.getGridNumberOfInstances(this.modelName);
+		if (this.masterDetail && this.model.searcher) {
+			this.model.searcher.goToElement = false;
+		}
+		this.subscribeToActionsEvents();
+	},
+	mounted() {
+		this.createDatatable();
+		//onMenuEspandColapse ajustará las columnas según esté el menú en el momento justo después de montar la tabla
+		this.onMenuExpandColapse();
+
+		if (this.modalDialog) {
+			this.detailComponentLabel = this.$t(`form.${this.modelName}`);
+			this.detailComponentName = `${this.modelName}form`;
+			this.$puiEvents.$on(`pui-modalDialog-${this.detailComponentName}_${this.completeGridName}_detail_popup-hide`, () => {
+				this.showDetailModalDialog = false;
+			});
+		}
+		this.debouncedAdjustTableColumns = debounce(this.adjustTableColumns, 300);
+		window.addEventListener('resize', this.debouncedAdjustTableColumns);
+		window.addEventListener('resize', this.recalculateScrollY);
+	},
+	beforeDestroy() {
+		window.removeEventListener('resize', this.debouncedAdjustTableColumns);
+		window.removeEventListener('resize', this.recalculateScrollY);
+		this.table.destroy(true);
+		if (this.masterDetail && !this.model.searcher.goToElement) {
+			this.model.searcher = undefined; // reset searcher for detail model
+		}
+	},
+	destroyed() {
+		this.$puiEvents.$off(`onPui-action-before-running-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-action-running-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-action-running-ended-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-action-running-cancelled-${this.modelName}${this.modelNameSuffix}`);
+
+		this.$puiEvents.$off('onPuiMultiPanelChanged');
+		this.$puiEvents.$off(`onPui-deleteRow-dataTable-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off('onPui-form-changedModelLanguage');
+
+		if (this.modalDialog) {
+			this.$puiEvents.$off(`pui-modalDialog-${this.detailComponentName}_${this.completeGridName}_detail_popup-hide`);
+		}
+	}
+};
+</script>
+
+<style lang="postcss" scoped>
+.full-width {
+	width: 100% !important;
+}
+</style>
+<style>
+.row__action {
+	font-size: 16px !important;
+}
+.selectionField {
+	width: 14px !important;
+}
+.row__action-disabled {
+	background-color: var(--N-25) !important;
+}
+.row__action-disabled .datatable-cell-selection .v-icon {
+	display: none;
+}
+td.actions {
+	text-align: center;
+}
+th.actions {
+	background-image: none !important;
+}
+.action-btn {
+	margin-left: 8px;
+	margin-right: 8px;
+	margin-top: 2px;
+	margin-bottom: 2px;
+}
+.action-btn i {
+	color: var(--N-400) !important;
+}
+.action-btn i:hover {
+	color: var(--primarycolor) !important;
+}
+</style>