inviton-powerduck 0.0.154 → 0.0.156

package/components/datatable/datatable.tsx

@@ -1,4 +1,4 @@
-import type { DateWrapper } from '../../common/date-wrapper';
+import type { Temporal } from '@js-temporal/polyfill';
 import type { IWebApiClient, WebClientApiMethod } from '../../common/IWebClient';
 import type { DaterangeChangedArgs } from '../input/daterange-picker';
 import type { ColFilterModalShowResponse } from './filter-modal';
@@ -10,12 +10,10 @@ import TsxComponent, { Component } from '../../app/vuetsx';
 import { DialogResult, DialogUtils } from '../../common/dialog-utils';
 import { DialogIcons } from '../../common/enums/dialog-icons';
 import { QueryStringUtils } from '../../common/query-string-utils';
-import { arraySort } from '../../common/utils/array-sort';
-import { capitalize } from '../../common/utils/capitalize-string';
 import CheckboxUtils from '../../common/utils/checkbox-utils';
 import DropdownUtils from '../../common/utils/dropdown-utils';
 import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
-import { latinize } from '../../common/utils/latinize-string';
+import TemporalUtils from '../../common/utils/temporal-utils';
 import { PortalUtils } from '../../common/utils/utils';
 import Button from '../button/button';
 import { ButtonLayout } from '../button/button-layout';
@@ -34,2462 +32,2468 @@ import ColFilterModal from './filter-modal';
 import loadingGif from './img/loading_16_16.gif';
 import ReorderProvider from './ts/reorder';
 import './css/datatable.css';
+import { sortBy } from '../../common/extensions/array-extensions';
+import { capitalize, latinize } from '../../common/extensions/string-extensions';
 
 interface DataTableArgs {
-	id: string;
-	apiClient: IWebApiClient;
-	apiMethod: WebClientApiMethod;
-	allowMassOperations?: boolean;
-	allowExport?: boolean;
-	autoFetch?: boolean;
-	apiArgs?: any;
-	exportConfig?: DataTableExportConfig;
-	paginations?: number[];
-	paginationLength?: number;
-	autoFilter?: boolean;
-	fullSizeTable?: boolean;
-	insetTop?: boolean;
-	fullSizeHasButtonBelow?: boolean;
-	filterMode?: DataTableFilterMode;
-	checkboxesVisible?: boolean;
-	checkboxButtonsVisible?: boolean;
-	topVisible?: boolean;
-	bottomVisible?: boolean;
-	cssClass?: string;
-	columns: TableColumn[];
-	buttons?: TableButton[];
-	rowIndexMode?: RowIndexMode;
-	fulltextPlaceholder?: string;
-	skin?: DataTableSkin;
-	preserveOrderBy?: boolean;
-	preserveFilter?: boolean;
-	sortableRows?: boolean;
-	customAjaxCall?: (args: DataTablePostBackData) => Promise<DataTableLoadedRowset>;
-	parseLoadedRowset?: (serverResp: any) => DataTableLoadedRowset;
-	rowClicked?: (row: any) => void;
-	rowCssClass?: (row: any) => string;
-	rowCheckstateChanged?: (row: any, checked: boolean, selectedRows: any[]) => void;
-	mobileBehavior?: DataTableMobileBehavior;
-	mobileModeCustomRender?: (h, columns: TableColumn[], rows: any) => void;
-	sortComplete?: (args: DataTableOnSortedArgs) => void;
-	mobileModeRowIcon?: string;
-	mobileModeShouldAutoCollapse?: boolean;
-	massOperationOptions?: typeof DropdownButtonItem.prototype[];
-	handleInitialFilter?: boolean;
-	timezoneGmtOffset?: number;
-	timezoneDstOffset?: number;
-	timeFilterShiftTimezone?: boolean;
-	hidePagination?: boolean;
+    id: string;
+    apiClient: IWebApiClient;
+    apiMethod: WebClientApiMethod;
+    allowMassOperations?: boolean;
+    allowExport?: boolean;
+    autoFetch?: boolean;
+    apiArgs?: any;
+    exportConfig?: DataTableExportConfig;
+    paginations?: number[];
+    paginationLength?: number;
+    autoFilter?: boolean;
+    fullSizeTable?: boolean;
+    insetTop?: boolean;
+    fullSizeHasButtonBelow?: boolean;
+    filterMode?: DataTableFilterMode;
+    checkboxesVisible?: boolean;
+    checkboxButtonsVisible?: boolean;
+    topVisible?: boolean;
+    bottomVisible?: boolean;
+    cssClass?: string;
+    columns: TableColumn[];
+    buttons?: TableButton[];
+    rowIndexMode?: RowIndexMode;
+    fulltextPlaceholder?: string;
+    skin?: DataTableSkin;
+    preserveOrderBy?: boolean;
+    preserveFilter?: boolean;
+    sortableRows?: boolean;
+    customAjaxCall?: (args: DataTablePostBackData) => Promise<DataTableLoadedRowset>;
+    parseLoadedRowset?: (serverResp: any) => DataTableLoadedRowset;
+    rowClicked?: (row: any) => void;
+    rowCssClass?: (row: any) => string;
+    rowCheckstateChanged?: (row: any, checked: boolean, selectedRows: any[]) => void;
+    mobileBehavior?: DataTableMobileBehavior;
+    mobileModeCustomRender?: (h, columns: TableColumn[], rows: any) => void;
+    sortComplete?: (args: DataTableOnSortedArgs) => void;
+    mobileModeRowIcon?: string;
+    mobileModeShouldAutoCollapse?: boolean;
+    massOperationOptions?: typeof DropdownButtonItem.prototype[];
+    handleInitialFilter?: boolean;
+    timezoneGmtOffset?: number;
+    timezoneDstOffset?: number;
+    timeFilterShiftTimezone?: boolean;
+    hidePagination?: boolean;
 }
 
 export interface DataTableExportConfig {
-	attrName: string;
-	limitName?: string;
-	pageName?: string;
+    attrName: string;
+    limitName?: string;
+    pageName?: string;
 }
 
 export interface DataTablePostBackData {
-	ShowHidden: boolean;
-	PaginationPosition: number;
-	PaginationLength: number;
-	SessionId: number;
-	Filter: DataTableFilterDefinition;
-	Sort: DataTableSortDefinition;
+    ShowHidden: boolean;
+    PaginationPosition: number;
+    PaginationLength: number;
+    SessionId: number;
+    Filter: DataTableFilterDefinition;
+    Sort: DataTableSortDefinition;
 }
 
 interface DataTableFilterDefinition {
-	FullText: string;
-	FilterItems: DataTablePostBackFilterItem[];
+    FullText: string;
+    FilterItems: DataTablePostBackFilterItem[];
 }
 
 export interface DataTableOnSortedArgs {
-	oldIndex: number;
-	newIndex: number;
+    oldIndex: number;
+    newIndex: number;
 }
 
 export interface DataTablePostBackFilterItem {
-	PropertyName: string;
-	ContainsValue?: string;
-	EqualsValue?: string;
-	FilterType: DataTableFilterItemType;
-	NumFrom?: number;
-	NumTo?: number;
-	DateFrom?: DateWrapper;
-	DateTo?: DateWrapper;
-	ValueArr?: string[];
-	ValueArrStrategy?: MultiSelectExclusivity;
+    PropertyName: string;
+    ContainsValue?: string;
+    EqualsValue?: string;
+    FilterType: DataTableFilterItemType;
+    NumFrom?: number;
+    NumTo?: number;
+    DateFrom?: Temporal.PlainDateTime;
+    DateTo?: Temporal.PlainDateTime;
+    ValueArr?: string[];
+    ValueArrStrategy?: MultiSelectExclusivity;
 }
 
 interface DataTableSortDefinition {
-	PropertyName: string;
-	Direction: DataTableSortDirection;
+    PropertyName: string;
+    Direction: DataTableSortDirection;
 }
 
 export enum DataTableFilterMode {
-	Serverside = 0,
-	Clientside = 1,
+    Serverside = 0,
+    Clientside = 1,
 }
 
 export enum DataTableFilterItemType {
-	None = 0,
-	Text = 1,
-	Dropdown = 2,
-	DateRange = 3,
-	NumericRange = 4,
+    None = 0,
+    Text = 1,
+    Dropdown = 2,
+    DateRange = 3,
+    NumericRange = 4,
 }
 
 export enum DataTableSkin {
-	Default = 'default',
-	Compact = 'compact',
+    Default = 'default',
+    Compact = 'compact',
 }
 
 export enum DataTableMobileBehavior {
-	MobileLayout = 'mobile',
-	Compact = 'compact',
-	VerticalTransform = 'vertical', // Do not use, shitty
+    MobileLayout = 'mobile',
+    Compact = 'compact',
+    VerticalTransform = 'vertical', // Do not use, shitty
 }
 
 export enum RowIndexMode {
-	Identifier = 0,
-	Index = 1,
+    Identifier = 0,
+    Index = 1,
 }
 
 export interface DataTableLoadedRowset {
-	totalCount: number;
-	totalFilteredCount: number;
-	rows: any[];
+    totalCount: number;
+    totalFilteredCount: number;
+    rows: any[];
 }
 
 interface StoredState {
-	sortOrder: string[];
-	filter: DataTablePostBackFilterItem[];
-	hiddenColumns: string[];
-	visibleColumns: string[];
-	paginationLength: number;
-	orderBy: SortDefinition;
-	skin: DataTableSkin;
-	mobileBehavior: DataTableMobileBehavior;
+    sortOrder: string[];
+    filter: DataTablePostBackFilterItem[];
+    hiddenColumns: string[];
+    visibleColumns: string[];
+    paginationLength: number;
+    orderBy: SortDefinition;
+    skin: DataTableSkin;
+    mobileBehavior: DataTableMobileBehavior;
 }
 
 class RowIdentifier {
-	name: string = null;
-	surname: string = null;
-	dtColumns: TableColumn[] = null;
-
-	constructor(name: string, surname: string) {
-		this.name = name;
-		this.surname = surname;
-	}
-
-	get fullName(): string {
-		return (`${this.name || ''} ${this.surname || ''}`).trim();
-	}
+    name: string = null;
+    surname: string = null;
+    dtColumns: TableColumn[] = null;
+
+    constructor(name: string, surname: string) {
+        this.name = name;
+        this.surname = surname;
+    }
+
+    get fullName(): string {
+        return (`${this.name || ''} ${this.surname || ''}`).trim();
+    }
 }
 
 export enum DataTableSortDirection {
-	Ascending = 0,
-	Descending = 1,
+    Ascending = 0,
+    Descending = 1,
 }
 
 interface SortDefinition {
-	columnId: string;
-	direction: DataTableSortDirection;
+    columnId: string;
+    direction: DataTableSortDirection;
 }
 
 const enum DataTableBreakpoint {
-	Desktop = 'desktop',
-	Mobile = 'mobile',
+    Desktop = 'desktop',
+    Mobile = 'mobile',
 }
 
 class StorageHelper {
-	private static getStorageKey(id: string) {
-		return `bldt-${window.location.pathname.split('/').join('_')}${id}`;
-	}
-
-	static getStoredState(id: string): StoredState {
-		const retVal = localStorage.getItem(StorageHelper.getStorageKey(id));
-		if (retVal != null) {
-			try {
-				return JSON.parse(retVal);
-			} catch (e) { }
-		}
-
-		return {} as any;
-	}
-
-	static saveStoredState(id: string, state: StoredState): void {
-		localStorage.setItem(StorageHelper.getStorageKey(id), JSON.stringify(state));
-	}
-
-	static storeSortOrder(id: string, sortOrder: string[]) {
-		const state = StorageHelper.getStoredState(id);
-		if (sortOrder != null) {
-			state.sortOrder = sortOrder;
-		} else if (state.sortOrder != null) {
-			delete state.sortOrder;
-		}
-
-		StorageHelper.saveStoredState(id, state);
-	}
-
-	static storeOrderBy(id: string, orderBy: SortDefinition) {
-		const state = StorageHelper.getStoredState(id);
-		if (orderBy != null) {
-			state.orderBy = orderBy;
-		} else if (state.orderBy != null) {
-			delete state.orderBy;
-		}
-
-		StorageHelper.saveStoredState(id, state);
-	}
-
-	static storeColVis(id: string, columns: TableColumn[]) {
-		const state = StorageHelper.getStoredState(id);
-		state.hiddenColumns = columns.filter(p => p.visible == false).map(p => p.id);
-		state.visibleColumns = columns.filter(p => (p as any)._enforceVisible == true).map(p => p.id);
-		StorageHelper.saveStoredState(id, state);
-	}
-
-	static storePaginationLength(id: string, paginationLength: number) {
-		const state = StorageHelper.getStoredState(id);
-		state.paginationLength = paginationLength;
-		StorageHelper.saveStoredState(id, state);
-	}
-
-	static storeSkin(id: string, skin: DataTableSkin) {
-		const state = StorageHelper.getStoredState(id);
-		state.skin = skin;
-		StorageHelper.saveStoredState(id, state);
-	}
-
-	static storeMobileBehavior(id: string, mobileBehavior: DataTableMobileBehavior) {
-		const state = StorageHelper.getStoredState(id);
-		state.mobileBehavior = mobileBehavior;
-		StorageHelper.saveStoredState(id, state);
-	}
-
-	static storeFilter(id: string, filter: DataTablePostBackFilterItem) {
-		const state = StorageHelper.getStoredState(id);
-		if (filter != null) {
-			if (state.filter == null || state.filter.length == 0) {
-				state.filter = [filter];
-			} else {
-				if (state.filter.some(p => p.PropertyName.includes(filter.PropertyName))) {
-					state.filter = state.filter.filter(p => p.PropertyName != filter.PropertyName);
-				}
-
-				state.filter.push(filter);
-			}
-		} else if (state.filter != null) {
-			delete state.filter;
-		}
-
-		StorageHelper.saveStoredState(id, state);
-	}
+    private static getStorageKey(id: string) {
+        return `bldt-${window.location.pathname.split('/').join('_')}${id}`;
+    }
+
+    static getStoredState(id: string): StoredState {
+        const retVal = localStorage.getItem(StorageHelper.getStorageKey(id));
+        if (retVal != null) {
+            try {
+                return JSON.parse(retVal);
+            } catch (e) { }
+        }
+
+        return {} as any;
+    }
+
+    static saveStoredState(id: string, state: StoredState): void {
+        localStorage.setItem(StorageHelper.getStorageKey(id), JSON.stringify(state));
+    }
+
+    static storeSortOrder(id: string, sortOrder: string[]) {
+        const state = StorageHelper.getStoredState(id);
+        if (sortOrder != null) {
+            state.sortOrder = sortOrder;
+        } else if (state.sortOrder != null) {
+            delete state.sortOrder;
+        }
+
+        StorageHelper.saveStoredState(id, state);
+    }
+
+    static storeOrderBy(id: string, orderBy: SortDefinition) {
+        const state = StorageHelper.getStoredState(id);
+        if (orderBy != null) {
+            state.orderBy = orderBy;
+        } else if (state.orderBy != null) {
+            delete state.orderBy;
+        }
+
+        StorageHelper.saveStoredState(id, state);
+    }
+
+    static storeColVis(id: string, columns: TableColumn[]) {
+        const state = StorageHelper.getStoredState(id);
+        state.hiddenColumns = columns.filter(p => p.visible == false).map(p => p.id);
+        state.visibleColumns = columns.filter(p => (p as any)._enforceVisible == true).map(p => p.id);
+        StorageHelper.saveStoredState(id, state);
+    }
+
+    static storePaginationLength(id: string, paginationLength: number) {
+        const state = StorageHelper.getStoredState(id);
+        state.paginationLength = paginationLength;
+        StorageHelper.saveStoredState(id, state);
+    }
+
+    static storeSkin(id: string, skin: DataTableSkin) {
+        const state = StorageHelper.getStoredState(id);
+        state.skin = skin;
+        StorageHelper.saveStoredState(id, state);
+    }
+
+    static storeMobileBehavior(id: string, mobileBehavior: DataTableMobileBehavior) {
+        const state = StorageHelper.getStoredState(id);
+        state.mobileBehavior = mobileBehavior;
+        StorageHelper.saveStoredState(id, state);
+    }
+
+    static storeFilter(id: string, filter: DataTablePostBackFilterItem) {
+        const state = StorageHelper.getStoredState(id);
+        if (filter != null) {
+            if (state.filter == null || state.filter.length == 0) {
+                state.filter = [filter];
+            } else {
+                if (state.filter.some(p => p.PropertyName.includes(filter.PropertyName))) {
+                    state.filter = state.filter.filter(p => p.PropertyName != filter.PropertyName);
+                }
+
+                state.filter.push(filter);
+            }
+        } else if (state.filter != null) {
+            delete state.filter;
+        }
+
+        StorageHelper.saveStoredState(id, state);
+    }
 }
 
 export interface TableColumn {
-	id: string;
-	caption: string;
-	cssClass?: string;
-	visible?: boolean;
-	sortable?: boolean;
-	searchable?: boolean;
-	filterType?: DataTableFilterItemType;
-	filterItems?: DataTableFilterItemCollection;
-	filterAllowExclusivity?: boolean;
-	customFilterValue?: (row) => string;
-	mobileOrder?: number;
-	mobileRender?: (h, row) => void;
-	mobileCaption?: boolean;
-	mobileVisible?: boolean;
-	mobileShouldRenderRow?: (row) => boolean;
-	exportInclude?: boolean;
-	exportValue?: (row) => any;
-	customValue?: (row) => string;
-	customRender?: (h, row) => void;
-	clientsideFilter?: (row: any, filterDefinition: DataTablePostBackFilterItem) => boolean;
+    id: string;
+    caption: string;
+    cssClass?: string;
+    visible?: boolean;
+    sortable?: boolean;
+    searchable?: boolean;
+    filterType?: DataTableFilterItemType;
+    filterItems?: DataTableFilterItemCollection;
+    filterAllowExclusivity?: boolean;
+    customFilterValue?: (row) => string;
+    mobileOrder?: number;
+    mobileRender?: (h, row) => void;
+    mobileCaption?: boolean;
+    mobileVisible?: boolean;
+    mobileShouldRenderRow?: (row) => boolean;
+    exportInclude?: boolean;
+    exportValue?: (row) => any;
+    customValue?: (row) => string;
+    customRender?: (h, row) => void;
+    clientsideFilter?: (row: any, filterDefinition: DataTablePostBackFilterItem) => boolean;
 }
 
 export interface TableButton {
-	title: string;
-	icon: string;
-	clicked: () => void;
-	childItems?: TableButtonChildItem[];
-	customRender?: (h, row) => void;
+    title: string;
+    icon: string;
+    clicked: () => void;
+    childItems?: TableButtonChildItem[];
+    customRender?: (h, row) => void;
 }
 
 export interface TableButtonChildItem extends TableButton {
-	isSelectable?: boolean;
-	isSelected?: boolean;
+    isSelectable?: boolean;
+    isSelected?: boolean;
 }
 
 export interface DataTableFilterItem {
-	id: string;
-	text: string;
+    id: string;
+    text: string;
 }
 
 export class DataTableFilterItemCollection extends Array<DataTableFilterItem> {
-	allowExclusiveSearch: boolean = false;
-
-	constructor(allowExclusive: boolean, items: DataTableFilterItem[]) {
-		super();
-		this.allowExclusiveSearch = allowExclusive;
-		(items || []).forEach((item) => {
-			this.push(item);
-		});
-	}
+    allowExclusiveSearch: boolean = false;
+
+    constructor(allowExclusive: boolean, items: DataTableFilterItem[]) {
+        super();
+        this.allowExclusiveSearch = allowExclusive;
+        (items || []).forEach((item) => {
+            this.push(item);
+        });
+    }
 }
 
 export class DataTableConfig {
-	static filterMarking = true;
+    static filterMarking = true;
 }
 
 @Component
 class TableButtonComponent extends TsxComponent<TableButton> implements TableButton {
-	@Prop() title!: string;
-	@Prop() icon!: string;
-	@Prop() cssClass!: string;
-	@Prop() clicked: () => void;
-	@Prop() customRender: (h, row) => void;
-	@Prop() childItems!: TableButtonChildItem[];
-	randomUUID: string = `ddl-${PortalUtils.randomString(10)}`;
-
-	render(h) {
-		if (isNullOrEmpty(this.childItems)) {
-			return (
-				<button class={`dt-button${this.cssClass != null ? ` ${this.cssClass}` : ''}`} title={this.title} onClick={this.clicked}>
-					<span>
-						<i class={this.icon}></i>
-					</span>
-				</button>
-			);
-		} else {
-			return (
-				<span class="nav-item dt-button dropdown">
-					<span class="dropdown-toggle" id={this.randomUUID} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-						<i class={this.icon}></i>
-					</span>
-					<div class="dropdown-menu dropdown-menu-right" aria-labelledby={this.randomUUID}>
-						{this.childItems.map(childItem => (
-							<a class={`dropdown-item${childItem.isSelectable == true ? ' dropdown-selectable-section' : ''}`} href="javascript:" onClick={() => childItem.clicked()}>
-								<span>{childItem.title}</span>
-								{childItem.isSelected && <i class="fas fa-check"></i>}
-							</a>
-						))}
-					</div>
-				</span>
-			);
-		}
-	}
+    @Prop() title!: string;
+    @Prop() icon!: string;
+    @Prop() cssClass!: string;
+    @Prop() clicked: () => void;
+    @Prop() customRender: (h, row) => void;
+    @Prop() childItems!: TableButtonChildItem[];
+    randomUUID: string = `ddl-${PortalUtils.randomString(10)}`;
+
+    render(h) {
+        if (isNullOrEmpty(this.childItems)) {
+            return (
+                <button class={`dt-button${this.cssClass != null ? ` ${this.cssClass}` : ''}`} title={this.title} onClick={this.clicked}>
+                    <span>
+                        <i class={this.icon}></i>
+                    </span>
+                </button>
+            );
+        } else {
+            return (
+                <span class="nav-item dt-button dropdown">
+                    <span class="dropdown-toggle" id={this.randomUUID} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <i class={this.icon}></i>
+                    </span>
+                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby={this.randomUUID}>
+                        {this.childItems.map(childItem => (
+                            <a class={`dropdown-item${childItem.isSelectable == true ? ' dropdown-selectable-section' : ''}`} href="javascript:" onClick={() => childItem.clicked()}>
+                                <span>{childItem.title}</span>
+                                {childItem.isSelected && <i class="fas fa-check"></i>}
+                            </a>
+                        ))}
+                    </div>
+                </span>
+            );
+        }
+    }
 }
 
 @Component
 class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTableArgs {
-	@Prop() id!: string;
-	@Prop() apiClient!: IWebApiClient;
-	@Prop() apiMethod!: WebClientApiMethod;
-	@Prop() allowMassOperations!: boolean;
-	@Prop() allowExport!: boolean;
-	@Prop() apiArgs!: any;
-	@Prop() exportConfig?: DataTableExportConfig;
-	@Prop() paginations?: number[];
-	@Prop() paginationLengthProp!: number;
-	@Prop() cssClass!: string;
-	@Prop() autoFilter!: boolean;
-	@Prop() insetTop!: boolean;
-	@Prop() topVisible!: boolean;
-	@Prop() bottomVisible!: boolean;
-	@Prop() skin!: DataTableSkin;
-	@Prop() preserveOrderBy!: boolean;
-	@Prop() preserveFilter!: boolean;
-	@Prop() sortableRows!: boolean;
-	@Prop() filterMode!: DataTableFilterMode;
-	@Prop() fullSizeTable!: boolean;
-	@Prop() fullSizeHasButtonBelow!: boolean;
-	@Prop() mobileBehavior!: DataTableMobileBehavior;
-	@Prop() mobileModeCustomRender!: (h, columns: TableColumn[], rows: any) => void;
-	@Prop() mobileModeRowIcon!: string;
-	@Prop() mobileModeShouldAutoCollapse!: boolean;
-	@Prop() handleInitialFilter!: boolean;
-	@Prop() massOperationOptions!: typeof DropdownButtonItem.prototype[];
-	@Prop() checkboxesVisible!: boolean;
-	@Prop() checkboxesTitle!: string;
-	@Prop() checkboxButtonsVisible!: boolean;
-	@Prop() rowIndexMode!: RowIndexMode;
-	@Prop() fulltextPlaceholder!: string;
-	@Prop() timezoneGmtOffset!: number;
-	@Prop() timezoneDstOffset!: number;
-	@Prop() timeFilterShiftTimezone!: boolean;
-	@Prop() columns!: TableColumn[];
-	@Prop() buttons!: TableButton[];
-	@Prop() rowClicked: (row: any) => void;
-	@Prop() rowCssClass: (row: any) => string;
-	@Prop() rowCheckstateChanged: (row: any, checked: boolean, selectedRows: any[]) => void;
-	@Prop() parseLoadedRowset?: (serverResp: any) => DataTableLoadedRowset;
-	@Prop() customAjaxCall?: (args: DataTablePostBackData) => Promise<DataTableLoadedRowset>;
-	@Prop() sortComplete?: (args: DataTableOnSortedArgs) => void;
-	@Prop() autoFetch!: boolean;
-	@Prop() hidePagination!: boolean;
-	paginationLength: number = this.paginationLengthProp ?? 50;
-	paginationPosition: number = 1;
-	isLoading: boolean = false;
-	initialized: boolean = false;
-	initDataLoaded: boolean = false;
-	currentMobileBehavior: DataTableMobileBehavior = null;
-	currentSkin: DataTableSkin = null;
-	currentAdvancedFilterState: any = {};
-	fullTextQuery: string;
-
-	rows: any[] = [];
-	loadedRows: any[];
-	tableFilterTimeout: any = null;
-	filterArr: DataTablePostBackFilterItem[] = [];
-	sessionId: number = null;
-	totalCount: number = 0;
-	totalFilteredCount: number = 0;
-	colSortOrder: string[] = null;
-	enforceHeaderRedraw: boolean = false;
-	enforceBodyRedraw: boolean = false;
-	checkboxesShown: boolean = false;
-	sortDefinition: SortDefinition = null;
-	activeBreakPoint: DataTableBreakpoint = null;
-	markInstance: any = null;
-
-	mounted(): void {
-		this.checkboxesShown = this.checkboxesVisible == true;
-		this.currentSkin = this.skin;
-		this.currentMobileBehavior = this.mobileBehavior;
-		this.performColumnRefresh();
-		this.handleWindowResized();
-		window.addEventListener(
-			'resize',
-			this.handleWindowResized,
-			true,
-		);
-
-		if (DataTableConfig.filterMarking) {
-			this.markInstance = new Mark(this.$el);
-		}
-
-		if (this.handleInitialFilter) {
-			this.parseInitialFilter();
-		}
-
-		if (this.fullSizeTable) {
-			const htmlElem = $('html');
-			htmlElem.addClass('has-dt-fullsize');
-
-			if (PortalUtils.treatAsMobileDevice()) {
-				htmlElem.addClass('has-dt-fullsize-mobile');
-			}
-
-			if (PortalUtils.isIOS()) {
-				htmlElem.addClass('has-dt-fullsize-ios');
-			}
-		}
-
-		if (this.sortableRows == true) {
-			this.initRowSortable();
-		}
-
-		if (this.preserveFilter == true) {
-			this.initRowFilters();
-		}
-
-		if (this.autoFetch != false) {
-			setTimeout(async () => {
-				this.loadInitialData();
-			}, 300);
-		} else {
-			this.initialized = true;
-		}
-	}
-
-	updated(): void {
-		if (this.autoFetch != false) {
-			this.loadInitialData();
-		} else {
-			this.initialized = true;
-		}
-	}
-
-	beforeUnmount(): void {
-		if (this.fullSizeTable) {
-			this.removeFullsizeModeLayoutCssClass();
-
-			$('html').removeClass('has-dt-fullsize').removeClass('has-dt-fullsize-mobile').removeClass('has-dt-fullsize-ios');
-		}
-
-		window.removeEventListener(
-			'resize',
-			this.handleWindowResized,
-			true,
-		);
-	}
-
-	loadInitialData(): void {
-		if (this.apiArgs == null) {
-			return;
-		}
-
-		if (!this.initialized && !this.initDataLoaded) {
-			this.initDataLoaded = true;
-			const self = this;
-			this.reloadDataPromise().then(() => {
-				setTimeout(() => {
-					this.initialized = true;
-				}, 1);
-			});
-		}
-	}
-
-	parseInitialFilter(): void {
-		const self = this;
-		const filterBy = QueryStringUtils.getString('filterBy');
-		const orderBy = QueryStringUtils.getString('orderBy');
-		const getColumn = function (id: string) {
-			let column = self.columns.filter(p => p.id == id)[0];
-			if (column == null && id.toLowerCase() == 'name') {
-				column = self.columns.filter(p => (p as any).customField != null && (p as any).customField.MappingType == 1)[0];
-			}
-
-			if (column == null && id.toLowerCase() == 'surname') {
-				column = self.columns.filter(p => (p as any).customField != null && (p as any).customField.MappingType == 2)[0];
-			}
-
-			return column;
-		};
-
-		const getParamArr = function (val: string): Array<Array<string>> {
-			let arrOfArr: Array<Array<string>>;
-			try {
-				arrOfArr = JSON.parse(val);
-			} catch (e) { }
-
-			if (arrOfArr == null) {
-				return null;
-			}
-
-			if (arrOfArr.length && arrOfArr.splice) {
-				if (PortalUtils.isString(arrOfArr[0])) {
-					arrOfArr = [arrOfArr as any];
-				}
-
-				return arrOfArr;
-			}
-
-			return null;
-		};
-
-		if (!isNullOrEmpty(filterBy)) {
-			const arrOfArr = getParamArr(filterBy);
-
-			if (!isNullOrEmpty(arrOfArr)) {
-				arrOfArr.forEach((pair) => {
-					const column = getColumn(pair[0]);
-					if (column != null) {
-						if (column.filterType == null || column.filterType == DataTableFilterItemType.Text) {
-							this.addFilterItem(column, {
-								PropertyName: column.id,
-								ContainsValue: pair[1],
-								FilterType: DataTableFilterItemType.Text,
-							});
-						} else if (column.filterType == DataTableFilterItemType.Dropdown) {
-							this.addFilterItem(column, {
-								PropertyName: column.id,
-								ValueArr: [pair[1]],
-								ValueArrStrategy: MultiSelectExclusivity.Exclusive,
-								FilterType: DataTableFilterItemType.Dropdown,
-							});
-						}
-					}
-				});
-			}
-		}
-
-		if (!isNullOrEmpty(orderBy)) {
-			const arrOfArr = getParamArr(orderBy);
-
-			if (!isNullOrEmpty(arrOfArr)) {
-				arrOfArr.forEach((pair) => {
-					const column = getColumn(pair[0]);
-					if (column != null) {
-						this.sortDefinition = {
-							columnId: column.id,
-							direction: pair[1] == 'desc' ? DataTableSortDirection.Descending : DataTableSortDirection.Ascending,
-						};
-					}
-				});
-			}
-		}
-	}
-
-	async ensureMassPaginationConsent(): Promise<DialogResult> {
-		const selectedCount = this.getSelectedRows().length;
-		const paginationLength = this.getPaginationLength();
-		if (paginationLength < 0) {
-			return DialogResult.Confirm;
-		}
-
-		if (this.totalCount < paginationLength) {
-			return DialogResult.Confirm;
-		}
-
-		if (selectedCount < paginationLength - 7) {
-			return DialogResult.Confirm;
-		}
-
-		const continueLabel = `${PowerduckState.getResourceValue('continue')}&nbsp;&nbsp;<i class="icon icon-arrow-right-circle"></i>`;
-		const messageHtml = PowerduckState.getResourceValue('dtMassOperationWarningText').replace('{0}', selectedCount.toString()).replace('{1}', this.totalCount.toString());
-		const dialogResult = await DialogUtils.showConfirmDialog(
-			PowerduckState.getResourceValue('warning'),
-			messageHtml,
-			continueLabel,
-			PowerduckState.getResourceValue('cancel'),
-			DialogIcons.Warning,
-		);
-		return dialogResult;
-	}
-
-	performColumnRefresh(): void {
-		const savedState = StorageHelper.getStoredState(this.id);
-		this.colSortOrder = savedState.sortOrder;
-		this.handleColumnsVisibility(savedState, this.columns);
-		this.paginationLength = savedState.paginationLength;
-
-		if (savedState.skin != null) {
-			this.currentSkin = savedState.skin;
-		}
-
-		if (savedState.mobileBehavior != null) {
-			this.currentMobileBehavior = savedState.mobileBehavior;
-		}
-
-		if (savedState.orderBy != null) {
-			this.sortDefinition = savedState.orderBy;
-		}
-
-		if (savedState.filter != null) {
-			this.filterArr = savedState.filter;
-		}
-	}
-
-	initRowSortable(): void {
-		const args = {
-			animation: 150,
-			handle: '.dt-col-index',
-			onEnd: (evt) => {
-				this.sortComplete(evt);
-			},
-		} as any;
-
-		this.$nextTick(() => {
-			this.$nextTick(() => {
-				new Sortable(this.$el.querySelector('tbody'), args);
-			});
-		});
-	}
-
-	reorderColumns(sortOrder: string[], columns: TableColumn[]): void {
-		if (sortOrder != null && sortOrder.length >= columns.length) {
-			const sorted = [];
-			let allFound = true;
-
-			if (sortOrder.length == columns.length) {
-				sortOrder.forEach((propName) => {
-					const ci = columns.filter(p => p.id == propName)[0];
-					if (ci != null) {
-						sorted.push(ci);
-					} else {
-						allFound = false;
-					}
-				});
-			}
-
-			if (!allFound) {
-				StorageHelper.storeSortOrder(this.id, null);
-				sortOrder = null;
-			} else {
-				columns.splice(0, columns.length);
-				sorted.forEach((sortedCol) => {
-					columns.push(sortedCol);
-				});
-			}
-		}
-	}
-
-	initRowFilters(): void {
-		const savedState = StorageHelper.getStoredState(this.id);
-
-		if (savedState.filter == null) {
-			return;
-		}
-
-		for (const filterItem of savedState.filter) {
-			if (filterItem.FilterType == DataTableFilterItemType.None) {
-				continue;
-			} else if (filterItem.FilterType == DataTableFilterItemType.Dropdown) {
-				this.currentAdvancedFilterState[filterItem.PropertyName] = filterItem.ValueArr;
-			} else if (filterItem.FilterType == DataTableFilterItemType.DateRange) {
-				this.currentAdvancedFilterState[filterItem.PropertyName] = {
-					startTime: filterItem.DateFrom,
-					endTime: filterItem.DateTo,
-				};
-			} else if (filterItem.FilterType == DataTableFilterItemType.NumericRange) {
-
-			} else if (filterItem.FilterType == DataTableFilterItemType.Text) {
-				this.currentAdvancedFilterState[filterItem.PropertyName] = filterItem.ContainsValue;
-			}
-		}
-	}
-
-	handleWindowResized(): void {
-		const width = window.innerWidth;
-		const breakpointMode = width > 767 ? DataTableBreakpoint.Desktop : DataTableBreakpoint.Mobile;
-
-		if (breakpointMode != this.activeBreakPoint) {
-			this.activeBreakPoint = breakpointMode;
-			this.handleMobileBreakpointChanged();
-		}
-	}
-
-	handleMobileBreakpointChanged() {
-		if (this.fullSizeTable && PortalUtils.treatAsMobileDevice()) {
-			this.removeFullsizeModeLayoutCssClass();
-			$('html').addClass(`dt-fullsize-beh-${this.getMobileBehavior()}`);
-			$('html').addClass(`dt-fullsize-skin-${this.getSkin()}`);
-		}
-	}
-
-	removeFullsizeModeLayoutCssClass() {
-		if (this.fullSizeTable && PortalUtils.treatAsMobileDevice()) {
-			$('html')
-				.removeClass(`dt-fullsize-beh-${DataTableMobileBehavior.Compact}`)
-				.removeClass(`dt-fullsize-beh-${DataTableMobileBehavior.MobileLayout}`)
-				.removeClass(`dt-fullsize-beh-${DataTableMobileBehavior.VerticalTransform}`)
-				.removeClass(`dt-fullsize-skin-${DataTableSkin.Default}`)
-				.removeClass(`dt-fullsize-skin-${DataTableSkin.Compact}`);
-		}
-	}
-
-	handleColumnsVisibility(savedState: StoredState, columns: TableColumn[]): void {
-		if (savedState.hiddenColumns != null) {
-			savedState.hiddenColumns.forEach((hc) => {
-				const colItem = columns.filter(p => p.id == hc)[0];
-				if (colItem != null) {
-					colItem.visible = false;
-
-					if ((colItem as any)._enforceVisible != null) {
-						delete (colItem as any)._enforceVisible;
-					}
-				}
-			});
-		}
-
-		if (savedState.visibleColumns != null) {
-			savedState.visibleColumns.forEach((vc) => {
-				const colItem = columns.filter(p => p.id == vc)[0];
-				if (colItem != null) {
-					colItem.visible = true;
-					(colItem as any)._enforceVisible = true;
-				}
-			});
-		}
-	}
-
-	getPaginationLength(): number {
-		return this.paginationLength || 50;
-	}
-
-	getTableColumnHeaderCssClass(column: TableColumn, index: number): string {
-		return `dt-header-${column.id.split(':').join('_').toLowerCase()} dt-header-i${index} ${column.cssClass || ''}${column.sortable == false ? ' dt-header-notsortable' : ''}`;
-	}
-
-	getTableColumnHeaderFilterCssClass(column: TableColumn, index: number): string {
-		return `header-filter-cell dt-filter-${column.id.split(':').join('_').toLowerCase()} dt-filter-i${index} dt-filtertype-${this.getFilterTypeName(column.filterType)}`;
-	}
-
-	getTableItemCssClass(column: TableColumn, index: number): string {
-		return `dt-col-${column.id.split(':').join('_').toLowerCase()} dt-col-i${index} ${column.cssClass || ''}`;
-	}
-
-	getFilterTypeName(filterType: DataTableFilterItemType): string {
-		switch (filterType) {
-			case DataTableFilterItemType.None:
-				return 'none';
-
-			case null:
-			case undefined:
-			case DataTableFilterItemType.Text:
-				return 'text';
-
-			case DataTableFilterItemType.Dropdown:
-				return 'dropdown';
-
-			case DataTableFilterItemType.DateRange:
-				return 'daterange';
-
-			case DataTableFilterItemType.NumericRange:
-				return 'numericrange';
-
-			default:
-		}
-	}
-
-	getRowIdProp(row: any): string {
-		if (row?.Id != null) {
-			return 'Id';
-		}
-
-		return 'id';
-	}
-
-	getRowId(row: any): number {
-		return row[this.getRowIdProp(row)];
-	}
-
-	getSelectedRows(): any[] {
-		const self = this;
-		const selectedRows = [];
-
-		if (isNullOrEmpty(self.rows)) {
-			return [];
-		}
-
-		const rowIdProp = this.getRowIdProp(self.rows[0]);
-
-		$('.dt-selection-checkbox input:checked').each(function (this: any) {
-			const rowId = Number($(this).closest('.dt-selection-checkbox').attr('data-id'));
-			const existingRow = selectedRows.filter(p => p[rowIdProp] == rowId)[0];
-
-			if (existingRow == null) {
-				const selectedRow = self.rows.filter(p => p[rowIdProp] == rowId)[0];
-				if (selectedRow != null) {
-					selectedRows.push(selectedRow);
-				}
-			}
-		});
-
-		return selectedRows;
-	}
-
-	unmarkSelection(cb: () => void): void {
-		if (DataTableConfig.filterMarking) {
-			this.markInstance.unmark({
-				done: () => {
-					this.enforceBodyRedraw = true;
-					this.$nextTick(() => {
-						this.enforceBodyRedraw = false;
-						this.$nextTick(() => {
-							cb();
-						});
-					});
-				},
-			});
-		} else {
-			cb();
-		}
-	}
-
-	markSelection (): void {
-		const mySelf = this;
-		const escapeRegExp = function (string) {
-			return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
-		};
-
-		const getValueArr = function (filterItem: DataTablePostBackFilterItem): string[] {
-			if (!isNullOrEmpty(filterItem.EqualsValue)) {
-				return [filterItem.EqualsValue];
-			} else if (!isNullOrEmpty(filterItem.ContainsValue)) {
-				return [filterItem.ContainsValue];
-			} else if (!isNullOrEmpty(filterItem.ValueArr)) {
-				return [];
-				// return filterItem.ValueArr;
-			}
-		};
-
-		let regexBuilder = '';
-		const markArr = [];
-		if (this.filterArr != null) {
-			this.filterArr.forEach((filterItem) => {
-				if (regexBuilder.length > 0) {
-					regexBuilder += '|';
-				}
-
-				const columnId = filterItem.PropertyName?.toLowerCase();
-				const tds = Array.from($(mySelf.$el).find(`td.dt-col-${columnId}`));
-				if (tds == null || tds.length == 0) {
-					return;
-				}
-
-				(getValueArr(filterItem) || []).forEach((filterValue) => {
-					markArr.push({
-						value: escapeRegExp(filterValue),
-						elements: tds,
-					});
-				});
-			});
-		}
-
-		if (!isNullOrEmpty(this.fullTextQuery)) {
-			const value = escapeRegExp(this.fullTextQuery);
-			const tds = Array.from($(mySelf.$el).find(`td`));
-			regexBuilder += value;
-
-			markArr.push({
-				value,
-				elements: tds,
-			});
-		}
-
-		if (DataTableConfig.filterMarking) {
-			this.unmarkSelection(() => {
-				for (const item of markArr) {
-					this.markInstance.mark(item.value, {
-						filter: (node) => {
-							const parentTd = $(node).closest('td')[0];
-							if (!parentTd) {
-								return false;
-							}
-
-							const matchesColumn = item.elements?.some(el => parentTd?.isEqualNode(el));
-							const matchesText = parentTd?.textContent?.toLowerCase().includes(item.value.toLowerCase());
-							return matchesColumn && matchesText;
-						}
-					});
-				}
-			});
-		}
-	}
-
-	addFilterItem(dtColumn: TableColumn, newFilter: DataTablePostBackFilterItem): void {
-		const existingItem = this.filterArr.filter(p => p.PropertyName == dtColumn.id)[0];
-		const hasValue
-			= !isNullOrEmpty(newFilter.ContainsValue)
-			|| !isNullOrEmpty(newFilter.EqualsValue)
-			|| !isNullOrEmpty(newFilter.ValueArr)
-			|| newFilter.DateFrom != null
-			|| newFilter.DateTo != null
-			|| newFilter.NumFrom != null
-			|| newFilter.NumTo != null;
-
-		if (existingItem == null && hasValue) {
-			this.filterArr.push(newFilter);
-			return;
-		}
-
-		this.filterArr.splice(this.filterArr.indexOf(existingItem), 1);
-		if (existingItem != null && hasValue) {
-			this.filterArr.push(newFilter);
-		}
-	}
-
-	filterDataHaveChanged(dtColumn: TableColumn, filterItem: DataTablePostBackFilterItem): boolean {
-		const currentData: DataTablePostBackFilterItem = this.filterArr.filter(p => p.PropertyName == dtColumn.id)[0] || ({} as any);
-		return JSON.stringify(currentData) != JSON.stringify(filterItem);
-	}
-
-	handleClientsideFilter(markResults?: boolean): boolean {
-		if (this.filterMode == DataTableFilterMode.Clientside) {
-			this.unmarkSelection(() => {
-				this.performClientsideFilter();
-
-				if (markResults) {
-					this.markSelection();
-				}
-			});
-
-			return true;
-		}
-
-		return false;
-	}
-
-	performFullTextSearch(e): void {
-		if (this.tableFilterTimeout != null) {
-			clearTimeout(this.tableFilterTimeout);
-		}
-
-		this.fullTextQuery = e.target.value;
-
-		e = e || window.event;
-		let charCode: number = -1;
-		if (e.which) {
-			charCode = e.which;
-		} else if (e.keyCode) {
-			charCode = e.keyCode;
-		}
-
-		if (charCode == 13) {
-			if (this.handleClientsideFilter(true)) {
-				return;
-			}
-
-			this.reloadData();
-		} else {
-			this.tableFilterTimeout = setTimeout(() => {
-				if (this.handleClientsideFilter(true)) {
-					return;
-				}
-
-				this.reloadData();
-			}, 750);
-		}
-	}
-
-	performInputFilter(dtColumn: TableColumn, e): void {
-		if (this.tableFilterTimeout != null) {
-			clearTimeout(this.tableFilterTimeout);
-		}
-
-		this.currentAdvancedFilterState[dtColumn.id] = e;
-
-		const filterItem = {
-			PropertyName: dtColumn.id,
-			ContainsValue: (e || ''),
-			FilterType: DataTableFilterItemType.Text,
-		};
-
-		this.addFilterItem(dtColumn, filterItem);
-
-		if (this.preserveFilter == true) {
-			if (isNullOrEmpty(filterItem.ContainsValue)) {
-				StorageHelper.storeFilter(this.id, null);
-			} else {
-				StorageHelper.storeFilter(this.id, filterItem);
-			}
-		}
-
-		if (this.handleClientsideFilter(true)) {
-			return;
-		}
-
-		e = (e) || window.event;
-		let charCode: number = -1;
-		if (e.which) {
-			charCode = e.which;
-		} else if (e.keyCode) {
-			charCode = e.keyCode;
-		}
-
-		if (charCode == 13) {
-			this.reloadData();
-		} else {
-			this.tableFilterTimeout = setTimeout(() => {
-				this.reloadData();
-			}, 750);
-		}
-	}
-
-	performSelectionFilter(
-		dtColumn: TableColumn,
-		data: DataTableFilterItem[],
-		exclusivity: MultiSelectExclusivity,
-	): void {
-		this.currentAdvancedFilterState[dtColumn.id] = data;
-
-		const filterValue: DataTablePostBackFilterItem = {
-			PropertyName: dtColumn.id,
-			ValueArr: (data || []).map(p => p.id),
-			ValueArrStrategy: exclusivity == MultiSelectExclusivity.Exclusive ? MultiSelectExclusivity.Exclusive : MultiSelectExclusivity.Inclusive,
-			FilterType: DataTableFilterItemType.Dropdown,
-		};
-
-		if (!this.filterDataHaveChanged(dtColumn, filterValue)) {
-			return;
-		}
-
-		if (data == null || data.length == 0) {
-			this.addFilterItem(dtColumn, {} as any);
-		} else {
-			this.addFilterItem(dtColumn, filterValue);
-		}
-
-		if (this.preserveFilter == true) {
-			if (data == null || data.length == 0) {
-				StorageHelper.storeFilter(this.id, null);
-			} else {
-				StorageHelper.storeFilter(this.id, filterValue);
-			}
-		}
-
-		if (this.handleClientsideFilter(false)) {
-			return;
-		}
-
-		// Immediate reload if changed, delay handled by the Dropdown component
-		this.reloadData();
-	}
-
-	performDateRangeFilter(dtColumn: TableColumn, data: DaterangeChangedArgs): void {
-		this.currentAdvancedFilterState[dtColumn.id] = data;
-
-		let startDate = data?.startTime;
-		let endDate = data?.endTime;
-		if (data == null || data.startTime == null || data.endTime == null) {
-			this.addFilterItem(dtColumn, {} as any);
-		}
-
-		if (data != null && this.timeFilterShiftTimezone) {
-			let dstOffset = this.timezoneDstOffset;
-			let gmtOffset = this.timezoneGmtOffset;
-
-			if (dstOffset == null && this.rows != null) {
-				dstOffset = (this.rows.filter(p => p.TimezoneDstOffset != null && p.TimezoneDstOffset != 0)[0] || {}).TimezoneDstOffset;
-				if (dstOffset == null) {
-					dstOffset = 0;
-				}
-			}
-
-			if (gmtOffset == null && this.rows != null) {
-				gmtOffset = (this.rows.filter(p => p.TimezoneGmtOffset != null && p.TimezoneGmtOffset != 0)[0] || {}).TimezoneGmtOffset;
-				if (gmtOffset == null) {
-					gmtOffset = 0;
-				}
-			}
-
-			startDate = TimezoneHelper.getUTCFromLocalDate(
-				startDate,
-				dstOffset,
-				gmtOffset,
-			);
-			endDate = TimezoneHelper.getUTCFromLocalDate(
-				endDate,
-				dstOffset,
-				gmtOffset,
-			);
-		}
-
-		const filterValue: DataTablePostBackFilterItem = {
-			PropertyName: dtColumn.id,
-			DateFrom: startDate,
-			DateTo: endDate,
-			FilterType: DataTableFilterItemType.DateRange,
-		};
-
-		if (!this.filterDataHaveChanged(dtColumn, filterValue)) {
-			return;
-		}
-
-		if (data == null || data.startTime == null || data.endTime == null) {
-			this.addFilterItem(dtColumn, {} as any);
-		} else {
-			this.addFilterItem(dtColumn, filterValue);
-		}
-
-		if (this.preserveFilter == true) {
-			if (data == null || data.startTime == null || data.endTime == null) {
-				StorageHelper.storeFilter(this.id, null);
-			} else {
-				StorageHelper.storeFilter(this.id, filterValue);
-			}
-		}
-
-		if (this.handleClientsideFilter(false)) {
-			return;
-		}
-
-		// Immediate reload if changed, delay handled by the Dropdown component
-		this.reloadData();
-	}
-
-	performClientsideFilter(): void {
-		this.rows = this.getClientsideFilteredAndSortedRows(this.loadedRows);
-	}
-
-	getClientsideFilteredAndSortedRows(rowArr: any[]): any[] {
-		let newRowArr = [...rowArr];
-		for (const filterData of this.filterArr) {
-			const column = this.columns.find(p => p.id == filterData.PropertyName);
-			const filterDef = column?.clientsideFilter;
-
-			if (filterDef != null) {
-				if (!isNullOrEmpty(filterData.ContainsValue)) {
-					filterData.ContainsValue = this.normalizeStringForSearch(filterData.ContainsValue);
-				}
-
-				newRowArr = newRowArr.filter((p) => {
-					return filterDef(p, filterData);
-				});
-
-				continue;
-			}
-
-			if (filterData.FilterType == DataTableFilterItemType.Text && !isNullOrEmpty(filterData.ContainsValue)) {
-				const containsVal = this.normalizeStringForSearch(filterData.ContainsValue);
-				newRowArr = newRowArr.filter((p) => {
-					let val: any;
-					if (column?.customFilterValue != null) {
-						val = column.customFilterValue(p);
-					} else if (column?.customValue != null) {
-						val = column.customValue(p);
-					} else {
-						val = p[filterData.PropertyName];
-					}
-
-					if (val == null) {
-						return false;
-					}
-
-					if (typeof val === 'string' || val instanceof String) {
-						return this.normalizeStringForSearch(val as any).includes(containsVal);
-					}
-
-					return this.normalizeStringForSearch((p[filterData.PropertyName] || '').toString()).includes(containsVal);
-				});
-			} else if (filterData.FilterType == DataTableFilterItemType.Dropdown && !isNullOrEmpty(filterData.ValueArr)) {
-				newRowArr = newRowArr.filter((p) => {
-					let propVal: any;
-					if (column?.customFilterValue != null) {
-						propVal = column.customFilterValue(p);
-					} else if (column?.customValue != null) {
-						propVal = column.customValue(p);
-					} else {
-						propVal = p[filterData.PropertyName];
-					}
-
-					if (propVal == null) {
-						return false;
-					}
-
-					if (filterData.ValueArr.length == 1) {
-						return propVal == filterData.ValueArr[0];
-					} else if (filterData.ValueArrStrategy == MultiSelectExclusivity.Inclusive) {
-						return filterData.ValueArr.includes(propVal);
-					}
-
-					return true;
-				});
-			} else if (filterData.FilterType == DataTableFilterItemType.DateRange) {
-				const fromMs = filterData.DateFrom.getTime();
-				const toMs = filterData.DateTo.getTime();
-
-				newRowArr = newRowArr.filter((p) => {
-					let propVal: any;
-					if (column?.customFilterValue != null) {
-						propVal = column.customFilterValue(p);
-					} else if (column?.customValue != null) {
-						propVal = column.customValue(p);
-					} else {
-						propVal = p[filterData.PropertyName];
-					}
-
-					if (propVal == null) {
-						return false;
-					}
-
-					try {
-						const timeMs = propVal.getTime();
-						return fromMs <= timeMs && toMs >= timeMs;
-					} catch (error) {
-						return false;
-					}
-				});
-			} else if (filterData.FilterType == DataTableFilterItemType.NumericRange) {
-				newRowArr = newRowArr.filter((p) => {
-					let propVal: any;
-					if (column?.customFilterValue != null) {
-						propVal = column.customFilterValue(p);
-					} else if (column?.customValue != null) {
-						propVal = column.customValue(p);
-					} else {
-						propVal = p[filterData.PropertyName];
-					}
-
-					if (propVal == null) {
-						return false;
-					}
-
-					return filterData.NumFrom <= propVal && filterData.NumTo >= propVal;
-				});
-			}
-		}
-
-		if (!isNullOrEmpty(this.fullTextQuery)) {
-			const fulltextArr: any[] = [];
-			const normalizedQuery = this.normalizeStringForSearch(this.fullTextQuery);
-
-			for (const row of newRowArr) {
-				for (const propName in row) {
-					const column = this.columns.find(p => p.id == propName);
-					let propVal: any;
-
-					if (column?.customFilterValue != null) {
-						propVal = column.customFilterValue(row);
-					} else if (column?.customValue != null) {
-						propVal = column.customValue(row);
-					} else {
-						propVal = row[propName];
-					}
-
-					if (propVal != null) {
-						if (this.normalizeStringForSearch(propVal.toString()).includes(normalizedQuery)) {
-							fulltextArr.push(row);
-							break;
-						}
-					}
-				}
-			}
-
-			newRowArr = fulltextArr;
-		}
-
-		if (this.sortDefinition != null) {
-			const colId = this.sortDefinition.columnId;
-			type SORT_TYPE_OPTS = 'string' | 'date' | 'unknown';
-			let sortType: SORT_TYPE_OPTS = 'unknown';
-
-			for (const row of newRowArr) {
-				const item = row[colId];
-				if (item == null) {
-					continue;
-				}
-
-				if (typeof item === 'string' || item instanceof String) {
-					sortType = 'string';
-				} else if (item.getTime != null && item.getSeconds != null) {
-					sortType = 'date';
-				} else {
-					sortType = 'unknown';
-				}
-
-				break;
-			}
-
-			if (sortType == 'string') {
-				const collator = new Intl.Collator(PowerduckState.getCurrentLanguage(), {
-					numeric: true,
-					sensitivity: 'base',
-				});
-				newRowArr = newRowArr.sort((a, b) => collator.compare(a[colId], b[colId]));
-			} else if (sortType == 'date') {
-				newRowArr = newRowArr.sort((a, b) => {
-					return (b[colId]?.getTime() || 0) - (a[colId]?.getTime() || 0);
-				});
-			} else {
-				try {
-					newRowArr = arraySort(newRowArr, this.sortDefinition.columnId);
-				} catch (error) { }
-			}
-
-			if (this.sortDefinition.direction == DataTableSortDirection.Descending) {
-				newRowArr = newRowArr.reverse();
-			}
-		}
-
-		return newRowArr;
-	}
-
-	normalizeStringForSearch(str: string): string {
-		return latinize(str.toLowerCase()).trim();
-	}
-
-	reloadData(): void {
-		this.reloadDataPromise().then((data) => {
-			this.handleClientsideFilter(false);
-		}).catch((err) => {
-
-		});
-	}
-
-	reloadDataPromise(paginationPosition?: number, paginationLength?: number): Promise<any> {
-		const mySelf = this;
-		this.isLoading = true;
-
-		return new Promise((resolve, reject) => {
-			let loadPromise: Promise<any>;
-			if (mySelf.customAjaxCall == null) {
-				loadPromise = mySelf.apiClient[mySelf.apiMethod](mySelf.getAjaxArgs(paginationPosition, paginationLength));
-			} else {
-				loadPromise = mySelf.customAjaxCall(mySelf.getAjaxArgs(paginationPosition, paginationLength));
-			}
-
-			loadPromise.then((data: any) => {
-				mySelf.unmarkSelection(() => {
-					mySelf.enforceBodyRedraw = true;
-					mySelf.$nextTick(() => {
-						mySelf.enforceBodyRedraw = false;
-						mySelf.isLoading = false;
-
-						if (mySelf.parseLoadedRowset != null) {
-							const rowset = mySelf.parseLoadedRowset(data);
-							mySelf.totalCount = rowset.totalCount;
-							mySelf.totalFilteredCount = rowset.totalFilteredCount;
-							mySelf.rows = rowset.rows;
-						} else {
-							mySelf.totalCount = data.totalCount ?? data.TotalCount;
-							mySelf.totalFilteredCount = data.totalFilteredCount ?? data.TotalFilteredCount;
-							mySelf.rows = data.rows ?? data.Rows ?? data.data;
-						}
-
-						mySelf.loadedRows = mySelf.rows;
-						mySelf.$forceUpdate();
-						mySelf.$nextTick(() => mySelf.markSelection());
-						resolve(data);
-					});
-				});
-			})
-				.catch((err) => {
-					mySelf.isLoading = false;
-					NotificationProvider.showErrorMessage(PowerduckState.getResourceValue('errorFetchingData'));
-					reject(err);
-				});
-		});
-	}
-
-	getAjaxArgs(paginationPosition?: number, paginationLength?: number): DataTablePostBackData {
-		if (this.sessionId == null) {
-			this.sessionId = Math.floor(Math.random() * 2147483647) + 2147483647 * -1;
-		}
-
-		const dataArgs = {} as any as DataTablePostBackData;
-		if (this.apiArgs != null) {
-			for (const key in this.apiArgs) {
-				const kv = this.apiArgs[key];
-				if (kv && {}.toString.call(kv) === '[object Function]') {
-					dataArgs[key] = kv.call(this);
-				} else {
-					dataArgs[key] = kv;
-				}
-			}
-		}
-
-		dataArgs.SessionId = this.sessionId;
-		dataArgs.PaginationPosition = paginationPosition || this.paginationPosition;
-		dataArgs.PaginationLength = paginationLength || this.getPaginationLength();
-		dataArgs.Filter = {
-			FullText: this.fullTextQuery,
-			FilterItems: this.filterArr,
-		};
-
-		if (this.sortDefinition != null) {
-			dataArgs.Sort = {
-				PropertyName: this.sortDefinition.columnId,
-				Direction: this.sortDefinition.direction,
-			};
-		}
-
-		if (dataArgs.PaginationLength == -1) {
-			dataArgs.PaginationPosition = 1;
-		}
-
-		return dataArgs;
-	}
-
-	isMobileModeRenderType(): boolean {
-		return this.activeBreakPoint == 'mobile' && this.getMobileBehavior() == DataTableMobileBehavior.MobileLayout;
-	}
-
-	forceHeaderRedraw(): void {
-		this.enforceHeaderRedraw = true;
-		this.$nextTick(() => (this.enforceHeaderRedraw = false));
-	}
-
-	forceBodyRedraw(): void {
-		this.enforceBodyRedraw = true;
-		this.$nextTick(() => (this.enforceBodyRedraw = false));
-	}
-
-	updateRows(rowArr: any[]): void {
-		this.rows = rowArr;
-		this.loadedRows = rowArr;
-		this.forceBodyRedraw();
-	}
-
-	getTotalCount(): number {
-		return this.totalCount;
-	}
-
-	setSkin(skin: DataTableSkin): void {
-		StorageHelper.storeSkin(this.id, skin);
-		this.currentSkin = skin;
-		this.handleMobileBreakpointChanged();
-	}
-
-	setMobileBehavior(mobileBehavior: DataTableMobileBehavior): void {
-		StorageHelper.storeMobileBehavior(this.id, mobileBehavior);
-		this.currentMobileBehavior = mobileBehavior;
-		this.handleMobileBreakpointChanged();
-	}
-
-	handleColumnsReordered(sortOrder: string[]): void {
-		sortOrder = sortOrder.filter(p => p != '_sysIndexCol');
-		StorageHelper.storeSortOrder(this.id, sortOrder);
-		this.colSortOrder = sortOrder;
-		this.reorderColumns(sortOrder, this.getVisibleColumns());
-		this.forceHeaderRedraw();
-	}
-
-	async handleColumnHeaderClicked(dtColumn: TableColumn) {
-		if (dtColumn.sortable == false) {
-			return;
-		}
-
-		const oldDef = this.sortDefinition;
-		let newDirection = DataTableSortDirection.Ascending;
-		if (this.sortDefinition != null && this.sortDefinition.columnId == dtColumn.id && this.sortDefinition.direction == DataTableSortDirection.Ascending) {
-			newDirection = DataTableSortDirection.Descending;
-		}
-
-		this.sortDefinition = {
-			columnId: dtColumn.id,
-			direction: newDirection,
-		};
-
-		if (this.preserveOrderBy == true) {
-			StorageHelper.storeOrderBy(this.id, this.sortDefinition);
-		}
-
-		if (this.handleClientsideFilter(false)) {
-			return;
-		}
-
-		try {
-			await this.reloadDataPromise();
-		} catch (e) {
-			this.sortDefinition = oldDef;
-		}
-	}
-
-	handleColumnVisibilityChanged(columns: TableColumn[]): void {
-		StorageHelper.storeColVis(this.id, columns);
-		this.forceHeaderRedraw();
-	}
-
-	handleColumnModalFilterChanged(e: ColFilterModalShowResponse): void {
-		if (e.changed) {
-			this.filterArr = e.filterArr;
-			this.reloadData();
-		}
-	}
-
-	handleMobileRowClicked(e: any, row: any) {
-		if (this.checkboxesShown) {
-			let target = $(e.target);
-			if (!target.hasClass('dt-mobile-row-inner')) {
-				target = target.closest('.dt-mobile-row-inner');
-			}
-
-			const input = target.find('.dt-selection-checkbox input')[0] as HTMLInputElement;
-			input.checked = !input.checked;
-		}
-
-		if (this.rowClicked) {
-			this.rowClicked(row);
-		}
-	}
-
-	handleRowCheckboxChanged(row: any, checked: boolean) {
-		if (this.rowCheckstateChanged != null) {
-			this.rowCheckstateChanged(
-				row,
-				checked,
-				this.getSelectedRows(),
-			);
-		}
-	}
-
-	getLastPaginationIndex(): number {
-		let retVal = this.totalFilteredCount / this.getPaginationLength();
-		if (retVal % this.getPaginationLength() != 0) {
-			retVal = Math.floor(retVal) + 1;
-		}
-
-		if (retVal == 0) {
-			retVal = 1;
-		}
-
-		return retVal;
-	}
-
-	async handlePaginationPositionChanged(newValue: number): Promise<any> {
-		if (this.paginationPosition == newValue || newValue < 1 || newValue > this.getLastPaginationIndex()) {
-			return;
-		}
-
-		await this.reloadDataPromise(newValue);
-		this.paginationPosition = newValue;
-	}
-
-	async handlePaginationLengthChanged(newValue: number) {
-		if (this.getPaginationLength() == newValue) {
-			return;
-		}
-
-		await this.reloadDataPromise(null, newValue);
-		StorageHelper.storePaginationLength(this.id, newValue);
-		this.paginationLength = newValue;
-	}
-
-	handleCheckAllChanged(checked: boolean): void {
-		$('.dt-col-indexcheckbox').each(function (this: HTMLElement) {
-			$(this).find('input').prop('checked', checked);
-		});
-
-		this.handleRowCheckboxChanged(null, null);
-	}
-
-	getNameAndSurnameIndex(name: string, surname: string): string {
-		let retVal: string;
-		if ((name != null && name.length > 0) || (surname != null && surname.length > 0)) {
-			name = name || '';
-			surname = surname || '';
-
-			if (name.length > 0) {
-				if (surname.length > 0) {
-					retVal = name.substring(0, 1).toUpperCase() + surname.substring(0, 1).toUpperCase();
-				} else {
-					retVal = name;
-				}
-			} else {
-				retVal = surname;
-			}
-		}
-
-		return retVal;
-	}
-
-	getRowIdentifier(
-		columns: TableColumn[],
-		row: any,
-		includeColumns: boolean,
-	): RowIdentifier {
-		let namingData: RowIdentifier;
-		if (row.CustomFields != null) {
-			const nameCf = (row.CustomFields.filter(p => p.MappingType == 1)[0] || {}) as any;
-			const surnameCf = (row.CustomFields.filter(p => p.MappingType == 2)[0] || {}) as any;
-			namingData = new RowIdentifier(nameCf.Value, surnameCf.Value);
-
-			if (includeColumns && namingData.fullName.length > 1) {
-				namingData.dtColumns = [];
-
-				const nameCol = columns.filter(p => p.id.includes(`cf:map:${1}`) || p.id.includes(`cf:id:${nameCf.Id}`))[0];
-				if (nameCol != null) {
-					namingData.dtColumns.push(nameCol);
-				}
-
-				const surnameCol = columns.filter(p => p.id.includes(`cf:map:${2}`) || p.id.includes(`cf:id:${surnameCf.Id}`))[0];
-				if (surnameCol != null) {
-					namingData.dtColumns.push(surnameCol);
-				}
-			}
-		}
-
-		if (namingData == null || (namingData.fullName.length < 2 && row.Name != null)) {
-			namingData = new RowIdentifier(row.Name, row.Surname);
-
-			if (includeColumns) {
-				namingData.dtColumns = [];
-
-				const nameCol = columns.filter(p => p.id == 'Name')[0];
-				if (nameCol != null) {
-					namingData.dtColumns.push(nameCol);
-				}
-
-				const surnameCol = columns.filter(p => p.id == 'Surname')[0];
-				if (surnameCol != null) {
-					namingData;
-				}
-			}
-		}
-
-		if (namingData == null || (namingData.fullName.length < 2 && row.Email != null)) {
-			if (row.Email != null) {
-				namingData = new RowIdentifier(row.Email, '');
-
-				if (includeColumns) {
-					const emailCol = columns.filter(p => p.id == 'Email')[0];
-					if (emailCol != null) {
-						namingData.dtColumns = [emailCol];
-					}
-				}
-			}
-		}
-
-		if (namingData == null || (namingData.fullName.length < 2 && row.TicketName != null)) {
-			if (row.TicketName != null) {
-				namingData = new RowIdentifier(row.TicketName, '');
-
-				if (includeColumns) {
-					const emailCol = columns.filter(p => p.id == 'TicketName')[0];
-					if (emailCol != null) {
-						namingData.dtColumns = [emailCol];
-					}
-				}
-			}
-		}
-
-		return namingData;
-	}
-
-	getHeaderColumnIndex(
-		columns: TableColumn[],
-		row,
-		i,
-	): string {
-		if (this.rowIndexMode == RowIndexMode.Index) {
-			return i + 1;
-		} else {
-			var indexText: string;
-			const rowIdentifier = this.getRowIdentifier(
-				columns,
-				row,
-				false,
-			);
-			if (rowIdentifier != null) {
-				indexText = this.getNameAndSurnameIndex(rowIdentifier.name, rowIdentifier.surname);
-			}
-
-			var indexText: string;
-			if (row.CustomFields != null) {
-				const nameCf = row.CustomFields.filter(p => p.MappingType == 1)[0];
-				const surnameCf = row.CustomFields.filter(p => p.MappingType == 2)[0];
-				indexText = this.getNameAndSurnameIndex(nameCf != null ? nameCf.Value : '', surnameCf != null ? surnameCf.Value : '');
-			}
-
-			if (indexText != null && indexText.length > 1) {
-				if (indexText.length > 2) {
-					const splitArr = indexText.split(' ');
-					if (splitArr.length > 1) {
-						indexText = (splitArr[0].substring(0, 1) + splitArr[1].substring(0, 1)).toUpperCase();
-					} else {
-						indexText = indexText.substring(0, 2).toUpperCase();
-					}
-				}
-			} else {
-				indexText = (i + 1).toString();
-			}
-
-			return indexText;
-		}
-	}
-
-	showColVis(): void {
-		(this.$refs.colVisModal as typeof ColVisModal.prototype).show();
-	}
-
-	showFilterModal(): void {
-		(this.$refs.colFilterModal as typeof ColFilterModal.prototype).show({
-			filterArr: this.filterArr,
-		});
-	}
-
-	exportExcel(): void {
-		(this.$refs.tableExportModal as typeof TableExportModal.prototype).show({
-			apiClient: this.apiClient,
-			apiMethod: this.apiMethod,
-			apiArgs: this.getAjaxArgs(),
-			columns: this.columns,
-			rows: this.rows,
-			exportConfig: this.exportConfig,
-			paginationOffset: this.paginationPosition - 1,
-			paginationLength: this.getPaginationLength(),
-			totalFilteredCount: this.totalFilteredCount,
-		});
-	}
-
-	toggleCheckboxes(visible?: boolean): void {
-		if (visible == null) {
-			visible = !this.checkboxesShown;
-		}
-
-		this.checkboxesShown = visible;
-	}
-
-	getSkin(): DataTableSkin {
-		return this.currentSkin || DataTableSkin.Default;
-	}
-
-	getMobileBehavior(): DataTableMobileBehavior {
-		return this.currentMobileBehavior || DataTableMobileBehavior.MobileLayout;
-	}
-
-	getVisibleColumns(): TableColumn[] {
-		const state = StorageHelper.getStoredState(this.id);
-		const colArr = this.columns.filter(p => p.visible != false);
-		this.reorderColumns(this.colSortOrder, colArr);
-		this.handleColumnsVisibility(state, colArr);
-		return colArr;
-
-		// return this.columns.filter(p => p.visible != false);
-	}
-
-	isDesiredCustomFieldColumn(
-		dtCol: TableColumn,
-		row: any,
-		mappingType: any,
-	): boolean {
-		const nameCf = row.CustomFields.filter(p => p.MappingType == mappingType)[0];
-		if (nameCf != null && ((dtCol.id.includes(`id:${nameCf.Id}`)) || (dtCol.id.includes(`map:${nameCf.MappingType}`)))) {
-			return true;
-		}
-
-		return false;
-	}
-
-	getChangeEventDelay() {
-		if (this.filterMode == DataTableFilterMode.Clientside) {
-			return 0;
-		} else {
-			return 650;
-		}
-	}
-
-	getTableColumnOrder(dtCol: TableColumn, row: any): number {
-		if (dtCol.mobileOrder != null) {
-			return dtCol.mobileOrder;
-		}
-
-		if (dtCol.id.includes('cf:') && row.CustomFields != null) {
-			if (this.isDesiredCustomFieldColumn(
-				dtCol,
-				row,
-				1,
-			)) {
-				return -10100;
-			}
-
-			if (this.isDesiredCustomFieldColumn(
-				dtCol,
-				row,
-				1,
-			)) {
-				return -10000;
-			}
-		}
-
-		if (dtCol.id == 'Name') {
-			return -9000;
-		}
-
-		if (dtCol.id == 'TicketName') {
-			return -8900;
-		}
-
-		return null;
-	}
-
-	getTableColumnOrderStyle(dtCol: TableColumn, row: any): string {
-		const retVal = this.getTableColumnOrder(dtCol, row);
-		if (retVal != null) {
-			return `order:${retVal}`;
-		}
-
-		return null;
-	}
-
-	getMassOperationItems(): typeof DropdownButtonItem.prototype[] {
-		return this.massOperationOptions || [];
-	}
-
-	shouldRenderMobileRowColumn(row, dtColumn: TableColumn): boolean {
-		if (dtColumn.customRender == null) {
-			if (dtColumn.customValue != null) {
-				return dtColumn.customValue(row) != null;
-			}
-
-			return row[dtColumn.id] != null;
-		}
-
-		if (dtColumn.mobileShouldRenderRow) {
-			return dtColumn.mobileShouldRenderRow(row);
-		}
-
-		return true;
-	}
-
-	clearSelection() {
-		$(this.$el).find('.dt-col-index').find('input').prop('checked', false);
-	}
-
-	getFilterValue(dtColumn: TableColumn): any {
-		if (this.filterArr == null) {
-			return null;
-		}
-
-		const filterItem = this.filterArr.filter(p => p.PropertyName == dtColumn.id)[0];
-		if (filterItem == null) {
-			return null;
-		}
-
-		if (filterItem.FilterType == DataTableFilterItemType.Text) {
-			return filterItem.ContainsValue;
-		} else if (filterItem.FilterType == DataTableFilterItemType.Dropdown) {
-			return filterItem.ValueArr;
-		} else if (filterItem.FilterType == DataTableFilterItemType.DateRange) {
-			return {
-				startTime: filterItem.DateFrom,
-				endTime: filterItem.DateTo,
-			};
-		} else if (filterItem.FilterType == DataTableFilterItemType.NumericRange) {
-
-		} else {
-			return null;
-		}
-	}
-
-	render(h) {
-		const columns = this.getVisibleColumns();
-		let paginationStart = (this.paginationPosition - 1) * this.getPaginationLength() + 1;
-		let paginationEnd = Math.min(paginationStart + this.getPaginationLength(), this.totalFilteredCount) - 1;
-		const settingsUUID = `ddl-${PortalUtils.randomString(10)}`;
-		const isMobile = PortalUtils.treatAsMobileDevice();
-		const hasMobLayout = this.getMobileBehavior() == DataTableMobileBehavior.MobileLayout;
-		const hasTableSkin = this.getSkin() == DataTableSkin.Default;
-
-		if (this.paginationPosition == this.getLastPaginationIndex()) {
-			paginationEnd += 1;
-		}
-
-		if (this.totalFilteredCount == 0) {
-			paginationStart = 0;
-			paginationEnd = 0;
-		}
-
-		if (this.getPaginationLength() == -1) {
-			paginationEnd = this.totalFilteredCount;
-		}
-
-		return (
-			<div
-				class={
-					`dt-root dt-mobile-mobile dt-device-${PortalUtils.treatAsMobileDevice() ? 'mobile' : 'desktop'
-					}${PortalUtils.isIOS() ? ' dt-ios' : ''
-					} dt-skin-${this.getSkin()
-					} dt-mobbehavior-${this.getMobileBehavior()
-					}${this.checkboxesShown ? ' dt-checkboxes-visible' : ''
-					} dt-breakpoint-${this.activeBreakPoint
-					}${this.fullSizeHasButtonBelow ? ' dt-fs-buttonsbelow' : ''
-					}${this.insetTop ? ' dt-inset-top' : ''
-					}${this.fullSizeTable == true ? ' dt-fullsize-table' : ''
-					} ${this.cssClass || ''}`
-				}
-			>
-				{this.topVisible != false && (
-					<div class="dt-top">
-						<div class="dt-top-buttonsrow">
-							<div class="dt-buttons">
-								<TableButtonComponent title={PowerduckState.getResourceValue('colVisLabel')} icon="fa fa-eye-slash" clicked={() => this.showColVis()} />
-
-								{this.buttons
-									&& this.buttons.map(btn => (
-										<TableButtonComponent title={btn.title} icon={btn.icon} childItems={btn.childItems} customRender={btn.customRender} clicked={() => btn.clicked()} />
-									))}
-
-								{this.allowExport != false && <TableButtonComponent title="Excel export" icon="far fa-file-excel" clicked={() => this.exportExcel()} />}
-
-								{this.allowMassOperations != false && <TableButtonComponent title={this.checkboxesTitle || ''} icon="far fa-check-square" clicked={() => this.toggleCheckboxes()} />}
-
-								{this.activeBreakPoint == DataTableBreakpoint.Mobile && this.getMobileBehavior() == DataTableMobileBehavior.MobileLayout && (
-									<TableButtonComponent title="Filter" icon="fas fa-filter" clicked={() => this.showFilterModal()} />
-								)}
-
-								<span class="nav-item dt-button dropdown">
-									<span class="dropdown-toggle" id={settingsUUID} data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-										<i class="fas fa-desktop"></i>
-									</span>
-									<div class="dropdown-menu dropdown-menu-right" aria-labelledby={settingsUUID}>
-										{isMobile && (
-											<a class="dropdown-item dropdown-selectable-section" href="javascript:" onClick={() => this.setMobileBehavior(DataTableMobileBehavior.MobileLayout)}>
-												<span>{PowerduckState.getResourceValue('dtLayoutMobile')}</span>
-												{hasMobLayout && <i class="fas fa-check"></i>}
-											</a>
-										)}
-
-										{!isMobile && (
-											<a class="dropdown-item dropdown-selectable-section" href="javascript:" onClick={() => this.setSkin(DataTableSkin.Default)}>
-												<span>{PowerduckState.getResourceValue('dtLayoutTable')}</span>
-												{hasTableSkin && <i class="fas fa-check"></i>}
-											</a>
-										)}
-
-										<a
-											class="dropdown-item dropdown-selectable-section"
-											href="javascript:"
-											onClick={() => (isMobile ? this.setMobileBehavior(DataTableMobileBehavior.Compact) : this.setSkin(DataTableSkin.Compact))}
-										>
-											<span>{isMobile ? PowerduckState.getResourceValue('dtLayoutTable') : PowerduckState.getResourceValue('dtLayoutCompact')}</span>
-											{((isMobile && !hasMobLayout) || (!isMobile && !hasTableSkin)) && <i class="fas fa-check"></i>}
-										</a>
-									</div>
-								</span>
-							</div>
-						</div>
-						{this.hidePagination != true
-							&& (
-								<div class="dt-top-paginationrow">
-									{(!this.checkboxesShown || this.checkboxButtonsVisible == false) && (
-										<div class="dt-pagination-length">
-											<select onChange={e => this.handlePaginationLengthChanged(Number(e.target.value))}>
-												{(this.paginations || [
-													10,
-													25,
-													50,
-													100,
-													250,
-													500,
-													1000,
-													-1,
-												]).map(item => (
-													<option value={item} selected={this.getPaginationLength() == item}>
-														{item != -1 ? item.toString() : PowerduckState.getResourceValue('all')}
-													</option>
-												))}
-											</select>
-
-											<span>{PowerduckState.getResourceValue('recordsDtLabel')}</span>
-										</div>
-									)}
-
-									{this.checkboxesShown && this.checkboxButtonsVisible != false && (
-										<div class="dt-pagination-length dt-massop-btn-wrap">
-											<DropdownButton text="Hromadne operacie" layout={ButtonLayout.Secondary}>
-												{this.getMassOperationItems().map(mi =>
-													(mi as any).isSeparator != true ? <DropdownButtonItem icon={mi.icon} text={mi.text} clicked={mi.clicked} /> : <div class="dropdown-divider" />)}
-
-												<DropdownButtonItem icon="icon icon-close" text={PowerduckState.getResourceValue('cancel')} clicked={() => this.toggleCheckboxes(false)} />
-											</DropdownButton>
-											<Button text={PowerduckState.getResourceValue('cancel')} layout={ButtonLayout.Default} clicked={() => this.toggleCheckboxes(false)} cssClass="dt-massop-cancelbtn" />
-										</div>
-									)}
-
-									<div class="dt-fulltext-search">
-										<input type="search" placeholder={`${capitalize(PowerduckState.getResourceValue('search'))}...`} onKeyup={e => this.performFullTextSearch(e)} />
-									</div>
-								</div>
-							)}
-					</div>
-				)}
-
-				{this.renderTableByMode(h, columns)}
-
-				{this.bottomVisible != false && (
-					<div class="dt-bottom">
-						<div class="dt-summary-wrap">
-							{PowerduckState.getResourceValue('dtCountText').replace('{0}', paginationStart.toString()).replace('{1}', paginationEnd.toString()).replace('{2}', this.totalFilteredCount.toString())}
-							{this.totalFilteredCount != this.totalCount && (
-								<span class="dt-summary-totalcount">
-									&nbsp;
-									{PowerduckState.getResourceValue('dtCountFilteredOutOf').replace('{0}', this.totalCount.toString())}
-								</span>
-							)}
-						</div>
-
-						<div class="dt-pagination">{this.renderPagination(h)}</div>
-					</div>
-				)}
-
-				<ColVisModal ref="colVisModal" columns={this.columns} changed={e => this.handleColumnVisibilityChanged(e)} />
-				<ColFilterModal ref="colFilterModal" columns={this.columns} changed={e => this.handleColumnModalFilterChanged(e)} />
-				<TableExportModal ref="tableExportModal" />
-			</div>
-		);
-	}
-
-	protected renderTableByMode(h, columns: TableColumn[]) {
-		if (this.activeBreakPoint == DataTableBreakpoint.Mobile) {
-			if (this.getMobileBehavior() == DataTableMobileBehavior.MobileLayout) {
-				return this.renderMobileMode(h, columns);
-			} else if (this.getMobileBehavior() == DataTableMobileBehavior.VerticalTransform) {
-				return this.renderVerticallyTransformedTable(h, columns);
-			}
-		}
-
-		return this.renderStandardTable(h, columns);
-	}
-
-	protected renderStandardTable(h, columns: TableColumn[]) {
-		return (
-			<div class="dt-table dt-table-mode">
-				<table>
-					<LoadingIndicator visible={!this.initialized} />
-
-					{this.enforceHeaderRedraw == false && (
-						<thead>
-							<tr class="dt-header">
-								<th data-col-id="_sysIndexCol" class="dt-header-index">
-									{!this.isLoading && (
-										<span>
-											<span class="dt-header-indexlabel" style={this.checkboxesShown ? 'display:none' : ''}>
-												#
-											</span>
-											<span class="dt-header-indexcheckbox" style={this.checkboxesShown ? '' : 'display:none'}>
-												<CheckBox
-													skin={CheckBoxSkin.Material}
-													label={null}
-													wrap={false}
-													value={false}
-													changed={(e) => {
-														this.handleCheckAllChanged(e);
-													}}
-												/>
-											</span>
-										</span>
-									)}
-
-									{this.isLoading && <img src={loadingGif} />}
-								</th>
-
-								{this.renderHeaderRow(h, columns)}
-							</tr>
-
-							{this.autoFilter != false && (
-								<tr class="dt-header-filter">
-									<th class="dt-filter-index"></th>
-
-									{columns.map((dtColumn, i) => (
-										<th class={this.getTableColumnHeaderFilterCssClass(dtColumn, i)}>{this.renderHeaderFilter(h, dtColumn)}</th>
-									))}
-								</tr>
-							)}
-						</thead>
-					)}
-					<tbody>
-						{this.rowClicked == null
-							&& this.enforceBodyRedraw == false
-							&& (this.rows || []).map((row, i) => (
-								<tr class={`dt-item${this.rowCssClass == null ? '' : ` ${this.rowCssClass(row)}`}`}>
-									<td class={`dt-col-index${this.sortableRows == true ? ' dt-has-sortable-rows' : ''}`}>
-										<span class="dt-col-indexlabel" style={this.checkboxesShown ? 'display:none' : ''}>
-											{this.getHeaderColumnIndex(
-												columns,
-												row,
-												i,
-											)}
-										</span>
-										<span class="dt-col-indexcheckbox dt-selection-checkbox" data-id={this.getRowId(row)} style={this.checkboxesShown ? '' : 'display:none'}>
-											<CheckBox skin={CheckBoxSkin.Material} label={null} value={false} wrap={false} changed={e => this.handleRowCheckboxChanged(row, e)} />
-										</span>
-
-										{this.sortableRows == true && <i class="fas fa-sort dt-sort-handle" />}
-									</td>
-
-									{columns.map((dtColumn, j) => (
-										<td class={this.getTableItemCssClass(dtColumn, j)}>{dtColumn.customRender == null ? (dtColumn.customValue == null ? row[dtColumn.id] : dtColumn.customValue(row)) : dtColumn.customRender(h, row)}</td>
-									))}
-								</tr>
-							))}
-
-						{this.rowClicked != null
-							&& this.enforceBodyRedraw == false
-							&& (this.rows || []).map((row, i) => (
-								<tr
-									class={`dt-item${this.rowCssClass == null ? '' : ` ${this.rowCssClass(row)}`}`}
-									onClick={() => {
-										this.rowClicked(row);
-									}}
-								>
-									<td class={`dt-col-index${this.sortableRows == true ? ' dt-has-sortable-rows' : ''}`}>
-										<span class="dt-col-indexlabel" style={this.checkboxesShown ? 'display:none' : ''}>
-											{this.getHeaderColumnIndex(
-												columns,
-												row,
-												i,
-											)}
-										</span>
-										<span class="dt-col-indexcheckbox dt-selection-checkbox" data-id={this.getRowId(row)} style={this.checkboxesShown ? '' : 'display:none'}>
-											<CheckBox skin={CheckBoxSkin.Material} label={null} value={false} wrap={false} changed={e => this.handleRowCheckboxChanged(row, e)} />
-										</span>
-
-										{this.sortableRows == true && <i class="fas fa-sort dt-sort-handle" />}
-									</td>
-
-									{columns.map((dtColumn, j) => (
-										<td class={this.getTableItemCssClass(dtColumn, j)}>{dtColumn.customRender == null ? (dtColumn.customValue == null ? row[dtColumn.id] : dtColumn.customValue(row)) : dtColumn.customRender(h, row)}</td>
-									))}
-								</tr>
-							))}
-
-						{this.totalFilteredCount == 0 && (
-							<tr>
-								<td class="dt-no-results" colspan="99999">
-									<div class="dt-no-results-inner">
-										<div>{PowerduckState.getResourceValue('noResultsFound')}</div>
-									</div>
-								</td>
-							</tr>
-						)}
-					</tbody>
-				</table>
-			</div>
-		);
-	}
-
-	protected renderHeaderRow(h, columns: TableColumn[]) {
-		return columns.map((dtColumn, i) => (
-			<th
-				data-col-id={dtColumn.id}
-				onMousedown={e =>
-					ReorderProvider.handleMouseDown(
-						e,
-						(sortOrder) => {
-							this.handleColumnsReordered(sortOrder);
-						},
-						() => {
-							this.handleColumnHeaderClicked(dtColumn);
-						},
-					)}
-				onTouchstart={e =>
-					ReorderProvider.handleMouseDown(
-						e,
-						(sortOrder) => {
-							this.handleColumnsReordered(sortOrder);
-						},
-						() => {
-							this.handleColumnHeaderClicked(dtColumn);
-						},
-					)}
-				class={this.getTableColumnHeaderCssClass(dtColumn, i)}
-			>
-				{dtColumn.caption}
-				{this.sortDefinition && this.sortDefinition.columnId == dtColumn.id && (
-					<span class="dt-sort">
-						<i class={`fas ${this.sortDefinition.direction == DataTableSortDirection.Ascending ? 'fa-sort-up' : 'fa-sort-down'} float-right`} aria-hidden="true"></i>
-					</span>
-				)}
-			</th>
-		));
-	}
-
-	protected renderHeaderFilter(h, dtColumn: TableColumn) {
-		const filterType = dtColumn.filterType;
-		const filterValue = this.getFilterValue(dtColumn);
-		const closeIcon = !isNullOrEmpty(filterValue) ? 'icon icon-close' : null;
-		const appendIconClicked = () => {
-			if (this.currentAdvancedFilterState[dtColumn.id] != null) {
-				this.currentAdvancedFilterState[dtColumn.id] = null;
-			}
-
-			if (this.filterArr != null) {
-				this.filterArr = this.filterArr.filter(p => p.PropertyName != dtColumn.id);
-			}
-
-			if (filterType == DataTableFilterItemType.Text || filterType == null) {
-				this.performInputFilter(dtColumn, null);
-			} else if (filterType == DataTableFilterItemType.DateRange) {
-				this.performDateRangeFilter(dtColumn, null);
-			} else if (filterType == DataTableFilterItemType.Dropdown) {
-				this.performSelectionFilter(
-					dtColumn,
-					[],
-					null,
-				);
-			} else if (filterType == DataTableFilterItemType.NumericRange) {
-
-			}
-		};
-
-		if (filterType == DataTableFilterItemType.None) {
-			return '';
-		} else if (filterType == DataTableFilterItemType.Text || filterType == null) {
-			return (<TextBox updateMode="input" cssClass="dt-filter-input" wrap={false} label={null} placeholder={`${capitalize(PowerduckState.getResourceValue('search'))}...`} value={this.currentAdvancedFilterState[dtColumn.id]} changed={(e) => { this.performInputFilter(dtColumn, e); }} appendIcon={closeIcon} appendIconClicked={appendIconClicked} />);
-		} else if (filterType == DataTableFilterItemType.Dropdown) {
-			return (
-				<div class="dt-filter-dropdown">
-					<DropdownList
-						label={null}
-						containerCssClass="dt-filter-dropdown-container"
-						options={dtColumn.filterItems}
-						wrap={false}
-						disableSearch={!dtColumn.searchable}
-						dropdownAutoWidth={true}
-						multiselect={true}
-						multiselectMode={MultiselectMode.Checkboxes}
-						mobileShortMode={true}
-						allowExclusiveSearch={dtColumn.filterAllowExclusivity}
-						changedEventDelay={this.getChangeEventDelay()}
-						selected={this.currentAdvancedFilterState[dtColumn.id]}
-						changed={(changeArr, exclusivity) => {
-							this.performSelectionFilter(
-								dtColumn,
-								changeArr,
-								exclusivity,
-							);
-						}}
-						appendIcon={closeIcon}
-						appendIconClicked={appendIconClicked}
-					/>
-				</div>
-			);
-		} else if (filterType == DataTableFilterItemType.DateRange) {
-			return (<DaterangePicker label={null} cssClass="dt-filter-input" wrap={false} placeholder={`${capitalize(PowerduckState.getResourceValue('search'))}...`} value={this.currentAdvancedFilterState[dtColumn.id]} changed={(e) => { this.performDateRangeFilter(dtColumn, e); }} appendIcon={closeIcon} appendIconClicked={appendIconClicked} />);
-		}
-	}
-
-	protected renderVerticallyTransformedTable(h, columns: TableColumn[]) {
-		return (this.rows || []).map((row, i) => (
-			<div class="dt-vert-row">
-				{columns.map((dtColumn, j) => (
-					<div class="dt-vert-item" style={this.getTableColumnOrderStyle(dtColumn, row)}>
-						<div class="dt-vert-caption">{dtColumn.caption}</div>
-						<div class="dt-vert-value">{dtColumn.customRender == null ? (dtColumn.customValue == null ? row[dtColumn.id] : dtColumn.customValue(row)) : dtColumn.customRender(h, row)}</div>
-					</div>
-				))}
-			</div>
-		));
-	}
-
-	protected renderMobileMode(h, columns: TableColumn[]) {
-		if (this.mobileModeCustomRender != null) {
-			return this.mobileModeCustomRender(
-				h,
-				columns,
-				this.rows,
-			);
-		}
-
-		return (
-			<div class="dt-mobile-rows">
-				{(this.isLoading || this.enforceBodyRedraw || this.enforceHeaderRedraw) && (
-					<div style="min-height:150px;">
-						<LoadingIndicator visible={true} />
-					</div>
-				)}
-
-				{this.enforceHeaderRedraw == false
-					&& this.enforceBodyRedraw == false
-					&& (this.rows || []).map((row, i) => (
-						<div class={`dt-mobile-row${this.rowCssClass == null ? '' : ` ${this.rowCssClass(row)}`}`}>
-							{this.renderMobileModeRow(
-								h,
-								columns,
-								row,
-								i,
-							)}
-						</div>
-					))}
-			</div>
-		);
-	}
-
-	protected renderMobileModeRow(
-		h,
-		columns: TableColumn[],
-		row: any,
-		i: number,
-	) {
-		const identifier = this.getRowIdentifier(
-			columns,
-			row,
-			true,
-		);
-		let colArr = this.getVisibleColumns().filter(p => p.mobileVisible != false);
-		const cssClass = `dt-mobile-row-inner${this.checkboxesShown ? ' dt-mobile-chbvisible' : ''}`;
-
-		// Exclude identifier columns if they are already picked by the engine
-		if (identifier != null && identifier.dtColumns != null && identifier.dtColumns.length > 0) {
-			colArr = colArr.filter(p => !identifier.dtColumns.map(c => c.id).includes(p.id));
-		}
-
-		return (
-			<div
-				class={cssClass}
-				onClick={(e) => {
-					this.handleMobileRowClicked(e, row);
-				}}
-			>
-				{this.checkboxesShown && (
-					<div class="dt-mobile-checkbox dt-selection-checkbox" data-id={this.getRowId(row)}>
-						<CheckBox skin={CheckBoxSkin.Material} label={null} wrap={false} value={null} changed={e => this.handleRowCheckboxChanged(row, e)} />
-					</div>
-				)}
-
-				{identifier && <div class="dt-mobile-identifier">{identifier.fullName}</div>}
-
-				{colArr.map((dtColumn, j) => (
-					<div class={`dt-mobile-item dt-mobile-${dtColumn.id.replaceAll(':', '_').toLowerCase()}`} style={this.getTableColumnOrderStyle(dtColumn, row)}>
-						{dtColumn.mobileRender == null && this.shouldRenderMobileRowColumn(row, dtColumn) && (
-							<div class="dt-mobile-item-inner">
-								{dtColumn.mobileCaption != false && <div class="dt-mobile-caption">{dtColumn.caption}</div>}
-
-								<div class="dt-mobile-value">{dtColumn.customRender == null ? (dtColumn.customValue == null ? row[dtColumn.id] : dtColumn.customValue(row)) : dtColumn.customRender(h, row)}</div>
-							</div>
-						)}
-						{dtColumn.mobileRender && dtColumn.mobileRender(h, row)}
-					</div>
-				))}
-
-				<i class={`${this.mobileModeRowIcon || 'icon icon-arrow-right'} dt-mobile-row-icon`}></i>
-			</div>
-		);
-	}
-
-	protected renderPagination(h) {
-		let paginationLength = 5;
-		let firstIndex = Math.max(this.paginationPosition - 2, 1);
-		let paginationEnd = firstIndex + paginationLength - 1;
-		let indexArr = [];
-
-		if (this.getPaginationLength() > -1) {
-			if (paginationEnd > this.getLastPaginationIndex()) {
-				paginationEnd = this.getLastPaginationIndex();
-				firstIndex = paginationEnd - paginationLength + 1;
-			}
-
-			if (firstIndex < 1) {
-				firstIndex = 1;
-				paginationLength = paginationEnd - firstIndex + 1;
-			}
-
-			for (let i = firstIndex, len = paginationLength; i <= paginationEnd; i++) {
-				indexArr.push(i);
-			}
-		} else {
-			indexArr = [1];
-			this.paginationPosition = 1;
-		}
-
-		return (
-			<ul class="pagination">
-				<li class="page-item">
-					<a class="page-link" href="javascript:" aria-label="Previous" onClick={e => this.handlePaginationPositionChanged(this.paginationPosition - 1)}>
-						<span aria-hidden="true">
-							<i class="fa fa-angle-double-left" aria-hidden="true"></i>
-						</span>
-					</a>
-				</li>
-
-				{indexArr.map(pagIndex => (
-					<li class={`page-item${pagIndex == this.paginationPosition ? ' active' : ''}`} onClick={e => this.handlePaginationPositionChanged(pagIndex)}>
-						<a class="page-link" href="javascript:">
-							{pagIndex}
-						</a>
-					</li>
-				))}
-
-				<li class="page-item">
-					<a class="page-link" href="javascript:" aria-label="Next" onClick={e => this.handlePaginationPositionChanged(this.paginationPosition + 1)}>
-						<span aria-hidden="true">
-							<i class="fa fa-angle-double-right" aria-hidden="true"></i>
-						</span>
-					</a>
-				</li>
-			</ul>
-		);
-	}
-
-	protected renderColumnValue(
-		h,
-		dtColumn: TableColumn,
-		row,
-	) {
-		if (dtColumn.customRender == null) {
-			return (dtColumn.customValue == null ? row[dtColumn.id] : dtColumn.customValue(row));
-		} else {
-			return dtColumn.customRender(h, row);
-		}
-	}
+    @Prop() id!: string;
+    @Prop() apiClient!: IWebApiClient;
+    @Prop() apiMethod!: WebClientApiMethod;
+    @Prop() allowMassOperations!: boolean;
+    @Prop() allowExport!: boolean;
+    @Prop() apiArgs!: any;
+    @Prop() exportConfig?: DataTableExportConfig;
+    @Prop() paginations?: number[];
+    @Prop() paginationLengthProp!: number;
+    @Prop() cssClass!: string;
+    @Prop() autoFilter!: boolean;
+    @Prop() insetTop!: boolean;
+    @Prop() topVisible!: boolean;
+    @Prop() bottomVisible!: boolean;
+    @Prop() skin!: DataTableSkin;
+    @Prop() preserveOrderBy!: boolean;
+    @Prop() preserveFilter!: boolean;
+    @Prop() sortableRows!: boolean;
+    @Prop() filterMode!: DataTableFilterMode;
+    @Prop() fullSizeTable!: boolean;
+    @Prop() fullSizeHasButtonBelow!: boolean;
+    @Prop() mobileBehavior!: DataTableMobileBehavior;
+    @Prop() mobileModeCustomRender!: (h, columns: TableColumn[], rows: any) => void;
+    @Prop() mobileModeRowIcon!: string;
+    @Prop() mobileModeShouldAutoCollapse!: boolean;
+    @Prop() handleInitialFilter!: boolean;
+    @Prop() massOperationOptions!: typeof DropdownButtonItem.prototype[];
+    @Prop() checkboxesVisible!: boolean;
+    @Prop() checkboxesTitle!: string;
+    @Prop() checkboxButtonsVisible!: boolean;
+    @Prop() rowIndexMode!: RowIndexMode;
+    @Prop() fulltextPlaceholder!: string;
+    @Prop() timezoneGmtOffset!: number;
+    @Prop() timezoneDstOffset!: number;
+    @Prop() timeFilterShiftTimezone!: boolean;
+    @Prop() columns!: TableColumn[];
+    @Prop() buttons!: TableButton[];
+    @Prop() rowClicked: (row: any) => void;
+    @Prop() rowCssClass: (row: any) => string;
+    @Prop() rowCheckstateChanged: (row: any, checked: boolean, selectedRows: any[]) => void;
+    @Prop() parseLoadedRowset?: (serverResp: any) => DataTableLoadedRowset;
+    @Prop() customAjaxCall?: (args: DataTablePostBackData) => Promise<DataTableLoadedRowset>;
+    @Prop() sortComplete?: (args: DataTableOnSortedArgs) => void;
+    @Prop() autoFetch!: boolean;
+    @Prop() hidePagination!: boolean;
+    paginationLength: number = this.paginationLengthProp ?? 50;
+    paginationPosition: number = 1;
+    isLoading: boolean = false;
+    initialized: boolean = false;
+    initDataLoaded: boolean = false;
+    currentMobileBehavior: DataTableMobileBehavior = null;
+    currentSkin: DataTableSkin = null;
+    currentAdvancedFilterState: any = {};
+    fullTextQuery: string;
+
+    rows: any[] = [];
+    loadedRows: any[];
+    tableFilterTimeout: any = null;
+    filterArr: DataTablePostBackFilterItem[] = [];
+    sessionId: number = null;
+    totalCount: number = 0;
+    totalFilteredCount: number = 0;
+    colSortOrder: string[] = null;
+    enforceHeaderRedraw: boolean = false;
+    enforceBodyRedraw: boolean = false;
+    checkboxesShown: boolean = false;
+    sortDefinition: SortDefinition = null;
+    activeBreakPoint: DataTableBreakpoint = null;
+    markInstance: any = null;
+
+    mounted(): void {
+        this.checkboxesShown = this.checkboxesVisible == true;
+        this.currentSkin = this.skin;
+        this.currentMobileBehavior = this.mobileBehavior;
+        this.performColumnRefresh();
+        this.handleWindowResized();
+        window.addEventListener(
+            'resize',
+            this.handleWindowResized,
+            true,
+        );
+
+        if (DataTableConfig.filterMarking) {
+            this.markInstance = new Mark(this.$el);
+        }
+
+        if (this.handleInitialFilter) {
+            this.parseInitialFilter();
+        }
+
+        if (this.fullSizeTable) {
+            const htmlElem = $('html');
+            htmlElem.addClass('has-dt-fullsize');
+
+            if (PortalUtils.treatAsMobileDevice()) {
+                htmlElem.addClass('has-dt-fullsize-mobile');
+            }
+
+            if (PortalUtils.isIOS()) {
+                htmlElem.addClass('has-dt-fullsize-ios');
+            }
+        }
+
+        if (this.sortableRows == true) {
+            this.initRowSortable();
+        }
+
+        if (this.preserveFilter == true) {
+            this.initRowFilters();
+        }
+
+        if (this.autoFetch != false) {
+            setTimeout(async () => {
+                this.loadInitialData();
+            }, 300);
+        } else {
+            this.initialized = true;
+        }
+    }
+
+    updated(): void {
+        if (this.autoFetch != false) {
+            this.loadInitialData();
+        } else {
+            this.initialized = true;
+        }
+    }
+
+    beforeUnmount(): void {
+        if (this.fullSizeTable) {
+            this.removeFullsizeModeLayoutCssClass();
+
+            $('html').removeClass('has-dt-fullsize').removeClass('has-dt-fullsize-mobile').removeClass('has-dt-fullsize-ios');
+        }
+
+        window.removeEventListener(
+            'resize',
+            this.handleWindowResized,
+            true,
+        );
+    }
+
+    loadInitialData(): void {
+        if (this.apiArgs == null) {
+            return;
+        }
+
+        if (!this.initialized && !this.initDataLoaded) {
+            this.initDataLoaded = true;
+            const self = this;
+            this.reloadDataPromise().then(() => {
+                setTimeout(() => {
+                    this.initialized = true;
+                }, 1);
+            });
+        }
+    }
+
+    parseInitialFilter(): void {
+        const self = this;
+        const filterBy = QueryStringUtils.getString('filterBy');
+        const orderBy = QueryStringUtils.getString('orderBy');
+        const getColumn = function (id: string) {
+            let column = self.columns.filter(p => p.id == id)[0];
+            if (column == null && id.toLowerCase() == 'name') {
+                column = self.columns.filter(p => (p as any).customField != null && (p as any).customField.MappingType == 1)[0];
+            }
+
+            if (column == null && id.toLowerCase() == 'surname') {
+                column = self.columns.filter(p => (p as any).customField != null && (p as any).customField.MappingType == 2)[0];
+            }
+
+            return column;
+        };
+
+        const getParamArr = function (val: string): Array<Array<string>> {
+            let arrOfArr: Array<Array<string>>;
+            try {
+                arrOfArr = JSON.parse(val);
+            } catch (e) { }
+
+            if (arrOfArr == null) {
+                return null;
+            }
+
+            if (arrOfArr.length && arrOfArr.splice) {
+                if (PortalUtils.isString(arrOfArr[0])) {
+                    arrOfArr = [arrOfArr as any];
+                }
+
+                return arrOfArr;
+            }
+
+            return null;
+        };
+
+        if (!isNullOrEmpty(filterBy)) {
+            const arrOfArr = getParamArr(filterBy);
+
+            if (!isNullOrEmpty(arrOfArr)) {
+                arrOfArr.forEach((pair) => {
+                    const column = getColumn(pair[0]);
+                    if (column != null) {
+                        if (column.filterType == null || column.filterType == DataTableFilterItemType.Text) {
+                            this.addFilterItem(column, {
+                                PropertyName: column.id,
+                                ContainsValue: pair[1],
+                                FilterType: DataTableFilterItemType.Text,
+                            });
+                        } else if (column.filterType == DataTableFilterItemType.Dropdown) {
+                            this.addFilterItem(column, {
+                                PropertyName: column.id,
+                                ValueArr: [pair[1]],
+                                ValueArrStrategy: MultiSelectExclusivity.Exclusive,
+                                FilterType: DataTableFilterItemType.Dropdown,
+                            });
+                        }
+                    }
+                });
+            }
+        }
+
+        if (!isNullOrEmpty(orderBy)) {
+            const arrOfArr = getParamArr(orderBy);
+
+            if (!isNullOrEmpty(arrOfArr)) {
+                arrOfArr.forEach((pair) => {
+                    const column = getColumn(pair[0]);
+                    if (column != null) {
+                        this.sortDefinition = {
+                            columnId: column.id,
+                            direction: pair[1] == 'desc' ? DataTableSortDirection.Descending : DataTableSortDirection.Ascending,
+                        };
+                    }
+                });
+            }
+        }
+    }
+
+    async ensureMassPaginationConsent(): Promise<DialogResult> {
+        const selectedCount = this.getSelectedRows().length;
+        const paginationLength = this.getPaginationLength();
+        if (paginationLength < 0) {
+            return DialogResult.Confirm;
+        }
+
+        if (this.totalCount < paginationLength) {
+            return DialogResult.Confirm;
+        }
+
+        if (selectedCount < paginationLength - 7) {
+            return DialogResult.Confirm;
+        }
+
+        const continueLabel = `${PowerduckState.getResourceValue('continue')}&nbsp;&nbsp;<i class="icon icon-arrow-right-circle"></i>`;
+        const messageHtml = PowerduckState.getResourceValue('dtMassOperationWarningText').replace('{0}', selectedCount.toString()).replace('{1}', this.totalCount.toString());
+        const dialogResult = await DialogUtils.showConfirmDialog(
+            PowerduckState.getResourceValue('warning'),
+            messageHtml,
+            continueLabel,
+            PowerduckState.getResourceValue('cancel'),
+            DialogIcons.Warning,
+        );
+        return dialogResult;
+    }
+
+    performColumnRefresh(): void {
+        const savedState = StorageHelper.getStoredState(this.id);
+        this.colSortOrder = savedState.sortOrder;
+        this.handleColumnsVisibility(savedState, this.columns);
+        this.paginationLength = savedState.paginationLength;
+
+        if (savedState.skin != null) {
+            this.currentSkin = savedState.skin;
+        }
+
+        if (savedState.mobileBehavior != null) {
+            this.currentMobileBehavior = savedState.mobileBehavior;
+        }
+
+        if (savedState.orderBy != null) {
+            this.sortDefinition = savedState.orderBy;
+        }
+
+        if (savedState.filter != null) {
+            this.filterArr = savedState.filter;
+        }
+    }
+
+    initRowSortable(): void {
+        const args = {
+            animation: 150,
+            handle: '.dt-col-index',
+            onEnd: (evt) => {
+                this.sortComplete(evt);
+            },
+        } as any;
+
+        this.$nextTick(() => {
+            this.$nextTick(() => {
+                new Sortable(this.$el.querySelector('tbody'), args);
+            });
+        });
+    }
+
+    reorderColumns(sortOrder: string[], columns: TableColumn[]): void {
+        if (sortOrder != null && sortOrder.length >= columns.length) {
+            const sorted = [];
+            let allFound = true;
+
+            if (sortOrder.length == columns.length) {
+                sortOrder.forEach((propName) => {
+                    const ci = columns.filter(p => p.id == propName)[0];
+                    if (ci != null) {
+                        sorted.push(ci);
+                    } else {
+                        allFound = false;
+                    }
+                });
+            }
+
+            if (!allFound) {
+                StorageHelper.storeSortOrder(this.id, null);
+                sortOrder = null;
+            } else {
+                columns.splice(0, columns.length);
+                sorted.forEach((sortedCol) => {
+                    columns.push(sortedCol);
+                });
+            }
+        }
+    }
+
+    initRowFilters(): void {
+        const savedState = StorageHelper.getStoredState(this.id);
+
+        if (savedState.filter == null) {
+            return;
+        }
+
+        for (const filterItem of savedState.filter) {
+            if (filterItem.FilterType == DataTableFilterItemType.None) {
+                continue;
+            } else if (filterItem.FilterType == DataTableFilterItemType.Dropdown) {
+                this.currentAdvancedFilterState[filterItem.PropertyName] = filterItem.ValueArr;
+            } else if (filterItem.FilterType == DataTableFilterItemType.DateRange) {
+                this.currentAdvancedFilterState[filterItem.PropertyName] = {
+                    startTime: filterItem.DateFrom,
+                    endTime: filterItem.DateTo,
+                };
+            } else if (filterItem.FilterType == DataTableFilterItemType.NumericRange) {
+
+            } else if (filterItem.FilterType == DataTableFilterItemType.Text) {
+                this.currentAdvancedFilterState[filterItem.PropertyName] = filterItem.ContainsValue;
+            }
+        }
+    }
+
+    handleWindowResized(): void {
+        const width = window.innerWidth;
+        const breakpointMode = width > 767 ? DataTableBreakpoint.Desktop : DataTableBreakpoint.Mobile;
+
+        if (breakpointMode != this.activeBreakPoint) {
+            this.activeBreakPoint = breakpointMode;
+            this.handleMobileBreakpointChanged();
+        }
+    }
+
+    handleMobileBreakpointChanged() {
+        if (this.fullSizeTable && PortalUtils.treatAsMobileDevice()) {
+            this.removeFullsizeModeLayoutCssClass();
+            $('html').addClass(`dt-fullsize-beh-${this.getMobileBehavior()}`);
+            $('html').addClass(`dt-fullsize-skin-${this.getSkin()}`);
+        }
+    }
+
+    removeFullsizeModeLayoutCssClass() {
+        if (this.fullSizeTable && PortalUtils.treatAsMobileDevice()) {
+            $('html')
+                .removeClass(`dt-fullsize-beh-${DataTableMobileBehavior.Compact}`)
+                .removeClass(`dt-fullsize-beh-${DataTableMobileBehavior.MobileLayout}`)
+                .removeClass(`dt-fullsize-beh-${DataTableMobileBehavior.VerticalTransform}`)
+                .removeClass(`dt-fullsize-skin-${DataTableSkin.Default}`)
+                .removeClass(`dt-fullsize-skin-${DataTableSkin.Compact}`);
+        }
+    }
+
+    handleColumnsVisibility(savedState: StoredState, columns: TableColumn[]): void {
+        if (savedState.hiddenColumns != null) {
+            savedState.hiddenColumns.forEach((hc) => {
+                const colItem = columns.filter(p => p.id == hc)[0];
+                if (colItem != null) {
+                    colItem.visible = false;
+
+                    if ((colItem as any)._enforceVisible != null) {
+                        delete (colItem as any)._enforceVisible;
+                    }
+                }
+            });
+        }
+
+        if (savedState.visibleColumns != null) {
+            savedState.visibleColumns.forEach((vc) => {
+                const colItem = columns.filter(p => p.id == vc)[0];
+                if (colItem != null) {
+                    colItem.visible = true;
+                    (colItem as any)._enforceVisible = true;
+                }
+            });
+        }
+    }
+
+    getPaginationLength(): number {
+        return this.paginationLength || 50;
+    }
+
+    getTableColumnHeaderCssClass(column: TableColumn, index: number): string {
+        return `dt-header-${column.id.split(':').join('_').toLowerCase()} dt-header-i${index} ${column.cssClass || ''}${column.sortable == false ? ' dt-header-notsortable' : ''}`;
+    }
+
+    getTableColumnHeaderFilterCssClass(column: TableColumn, index: number): string {
+        return `header-filter-cell dt-filter-${column.id.split(':').join('_').toLowerCase()} dt-filter-i${index} dt-filtertype-${this.getFilterTypeName(column.filterType)}`;
+    }
+
+    getTableItemCssClass(column: TableColumn, index: number): string {
+        return `dt-col-${column.id.split(':').join('_').toLowerCase()} dt-col-i${index} ${column.cssClass || ''}`;
+    }
+
+    getFilterTypeName(filterType: DataTableFilterItemType): string {
+        switch (filterType) {
+            case DataTableFilterItemType.None:
+                return 'none';
+
+            case null:
+            case undefined:
+            case DataTableFilterItemType.Text:
+                return 'text';
+
+            case DataTableFilterItemType.Dropdown:
+                return 'dropdown';
+
+            case DataTableFilterItemType.DateRange:
+                return 'daterange';
+
+            case DataTableFilterItemType.NumericRange:
+                return 'numericrange';
+
+            default:
+        }
+    }
+
+    getRowIdProp(row: any): string {
+        if (row?.Id != null) {
+            return 'Id';
+        }
+
+        return 'id';
+    }
+
+    getRowId(row: any): number {
+        return row[this.getRowIdProp(row)];
+    }
+
+    getSelectedRows(): any[] {
+        const self = this;
+        const selectedRows = [];
+
+        if (isNullOrEmpty(self.rows)) {
+            return [];
+        }
+
+        const rowIdProp = this.getRowIdProp(self.rows[0]);
+
+        $('.dt-selection-checkbox input:checked').each(function (this: any) {
+            const rowId = Number($(this).closest('.dt-selection-checkbox').attr('data-id'));
+            const existingRow = selectedRows.filter(p => p[rowIdProp] == rowId)[0];
+
+            if (existingRow == null) {
+                const selectedRow = self.rows.filter(p => p[rowIdProp] == rowId)[0];
+                if (selectedRow != null) {
+                    selectedRows.push(selectedRow);
+                }
+            }
+        });
+
+        return selectedRows;
+    }
+
+    unmarkSelection(cb: () => void): void {
+        if (DataTableConfig.filterMarking) {
+            this.markInstance.unmark({
+                done: () => {
+                    this.enforceBodyRedraw = true;
+                    this.$nextTick(() => {
+                        this.enforceBodyRedraw = false;
+                        this.$nextTick(() => {
+                            cb();
+                        });
+                    });
+                },
+            });
+        } else {
+            cb();
+        }
+    }
+
+    markSelection(): void {
+        const mySelf = this;
+        const escapeRegExp = function (string) {
+            return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+        };
+
+        const getValueArr = function (filterItem: DataTablePostBackFilterItem): string[] {
+            if (!isNullOrEmpty(filterItem.EqualsValue)) {
+                return [filterItem.EqualsValue];
+            } else if (!isNullOrEmpty(filterItem.ContainsValue)) {
+                return [filterItem.ContainsValue];
+            } else if (!isNullOrEmpty(filterItem.ValueArr)) {
+                return [];
+                // return filterItem.ValueArr;
+            }
+        };
+
+        let regexBuilder = '';
+        const markArr = [];
+        if (this.filterArr != null) {
+            this.filterArr.forEach((filterItem) => {
+                if (regexBuilder.length > 0) {
+                    regexBuilder += '|';
+                }
+
+                const columnId = filterItem.PropertyName?.toLowerCase();
+                const tds = Array.from($(mySelf.$el).find(`td.dt-col-${columnId}`));
+                if (tds == null || tds.length == 0) {
+                    return;
+                }
+
+                (getValueArr(filterItem) || []).forEach((filterValue) => {
+                    markArr.push({
+                        value: escapeRegExp(filterValue),
+                        elements: tds,
+                    });
+                });
+            });
+        }
+
+        if (!isNullOrEmpty(this.fullTextQuery)) {
+            const value = escapeRegExp(this.fullTextQuery);
+            const tds = Array.from($(mySelf.$el).find(`td`));
+            regexBuilder += value;
+
+            markArr.push({
+                value,
+                elements: tds,
+            });
+        }
+
+        if (DataTableConfig.filterMarking) {
+            this.unmarkSelection(() => {
+                for (const item of markArr) {
+                    this.markInstance.mark(item.value, {
+                        filter: (node) => {
+                            const parentTd = $(node).closest('td')[0];
+                            if (!parentTd) {
+                                return false;
+                            }
+
+                            const matchesColumn = item.elements?.some(el => parentTd?.isEqualNode(el));
+                            const matchesText = parentTd?.textContent?.toLowerCase().includes(item.value.toLowerCase());
+                            return matchesColumn && matchesText;
+                        },
+                    });
+                }
+            });
+        }
+    }
+
+    addFilterItem(dtColumn: TableColumn, newFilter: DataTablePostBackFilterItem): void {
+        const existingItem = this.filterArr.filter(p => p.PropertyName == dtColumn.id)[0];
+        const hasValue
+            = !isNullOrEmpty(newFilter.ContainsValue)
+            || !isNullOrEmpty(newFilter.EqualsValue)
+            || !isNullOrEmpty(newFilter.ValueArr)
+            || newFilter.DateFrom != null
+            || newFilter.DateTo != null
+            || newFilter.NumFrom != null
+            || newFilter.NumTo != null;
+
+        if (existingItem == null && hasValue) {
+            this.filterArr.push(newFilter);
+            return;
+        }
+
+        this.filterArr.splice(this.filterArr.indexOf(existingItem), 1);
+        if (existingItem != null && hasValue) {
+            this.filterArr.push(newFilter);
+        }
+    }
+
+    filterDataHaveChanged(dtColumn: TableColumn, filterItem: DataTablePostBackFilterItem): boolean {
+        const currentData: DataTablePostBackFilterItem = this.filterArr.filter(p => p.PropertyName == dtColumn.id)[0] || ({} as any);
+        return JSON.stringify(currentData) != JSON.stringify(filterItem);
+    }
+
+    handleClientsideFilter(markResults?: boolean): boolean {
+        if (this.filterMode == DataTableFilterMode.Clientside) {
+            this.unmarkSelection(() => {
+                this.performClientsideFilter();
+
+                if (markResults) {
+                    this.markSelection();
+                }
+            });
+
+            return true;
+        }
+
+        return false;
+    }
+
+    performFullTextSearch(e): void {
+        if (this.tableFilterTimeout != null) {
+            clearTimeout(this.tableFilterTimeout);
+        }
+
+        this.fullTextQuery = e.target.value;
+
+        e = e || window.event;
+        let charCode: number = -1;
+        if (e.which) {
+            charCode = e.which;
+        } else if (e.keyCode) {
+            charCode = e.keyCode;
+        }
+
+        if (charCode == 13) {
+            if (this.handleClientsideFilter(true)) {
+                return;
+            }
+
+            this.reloadData();
+        } else {
+            this.tableFilterTimeout = setTimeout(() => {
+                if (this.handleClientsideFilter(true)) {
+                    return;
+                }
+
+                this.reloadData();
+            }, 750);
+        }
+    }
+
+    performInputFilter(dtColumn: TableColumn, e): void {
+        if (this.tableFilterTimeout != null) {
+            clearTimeout(this.tableFilterTimeout);
+        }
+
+        this.currentAdvancedFilterState[dtColumn.id] = e;
+
+        const filterItem = {
+            PropertyName: dtColumn.id,
+            ContainsValue: (e || ''),
+            FilterType: DataTableFilterItemType.Text,
+        };
+
+        this.addFilterItem(dtColumn, filterItem);
+
+        if (this.preserveFilter == true) {
+            if (isNullOrEmpty(filterItem.ContainsValue)) {
+                StorageHelper.storeFilter(this.id, null);
+            } else {
+                StorageHelper.storeFilter(this.id, filterItem);
+            }
+        }
+
+        if (this.handleClientsideFilter(true)) {
+            return;
+        }
+
+        e = (e) || window.event;
+        let charCode: number = -1;
+        if (e.which) {
+            charCode = e.which;
+        } else if (e.keyCode) {
+            charCode = e.keyCode;
+        }
+
+        if (charCode == 13) {
+            this.reloadData();
+        } else {
+            this.tableFilterTimeout = setTimeout(() => {
+                this.reloadData();
+            }, 750);
+        }
+    }
+
+    performSelectionFilter(
+        dtColumn: TableColumn,
+        data: DataTableFilterItem[],
+        exclusivity: MultiSelectExclusivity,
+    ): void {
+        this.currentAdvancedFilterState[dtColumn.id] = data;
+
+        const filterValue: DataTablePostBackFilterItem = {
+            PropertyName: dtColumn.id,
+            ValueArr: (data || []).map(p => p.id),
+            ValueArrStrategy: exclusivity == MultiSelectExclusivity.Exclusive ? MultiSelectExclusivity.Exclusive : MultiSelectExclusivity.Inclusive,
+            FilterType: DataTableFilterItemType.Dropdown,
+        };
+
+        if (!this.filterDataHaveChanged(dtColumn, filterValue)) {
+            return;
+        }
+
+        if (data == null || data.length == 0) {
+            this.addFilterItem(dtColumn, {} as any);
+        } else {
+            this.addFilterItem(dtColumn, filterValue);
+        }
+
+        if (this.preserveFilter == true) {
+            if (data == null || data.length == 0) {
+                StorageHelper.storeFilter(this.id, null);
+            } else {
+                StorageHelper.storeFilter(this.id, filterValue);
+            }
+        }
+
+        if (this.handleClientsideFilter(false)) {
+            return;
+        }
+
+        // Immediate reload if changed, delay handled by the Dropdown component
+        this.reloadData();
+    }
+
+    performDateRangeFilter(dtColumn: TableColumn, data: DaterangeChangedArgs): void {
+        this.currentAdvancedFilterState[dtColumn.id] = data;
+
+        let startDate = data?.startTime;
+        let endDate = data?.endTime;
+        if (data == null || data.startTime == null || data.endTime == null) {
+            this.addFilterItem(dtColumn, {} as any);
+        }
+
+        if (data != null && this.timeFilterShiftTimezone) {
+            let dstOffset = this.timezoneDstOffset;
+            let gmtOffset = this.timezoneGmtOffset;
+
+            if (dstOffset == null && this.rows != null) {
+                dstOffset = (this.rows.filter(p => p.TimezoneDstOffset != null && p.TimezoneDstOffset != 0)[0] || {}).TimezoneDstOffset;
+                if (dstOffset == null) {
+                    dstOffset = 0;
+                }
+            }
+
+            if (gmtOffset == null && this.rows != null) {
+                gmtOffset = (this.rows.filter(p => p.TimezoneGmtOffset != null && p.TimezoneGmtOffset != 0)[0] || {}).TimezoneGmtOffset;
+                if (gmtOffset == null) {
+                    gmtOffset = 0;
+                }
+            }
+
+            startDate = TimezoneHelper.getUTCFromLocalDate(
+                startDate,
+                dstOffset,
+                gmtOffset,
+            );
+            endDate = TimezoneHelper.getUTCFromLocalDate(
+                endDate,
+                dstOffset,
+                gmtOffset,
+            );
+        }
+
+        const filterValue: DataTablePostBackFilterItem = {
+            PropertyName: dtColumn.id,
+            DateFrom: startDate,
+            DateTo: endDate,
+            FilterType: DataTableFilterItemType.DateRange,
+        };
+
+        if (!this.filterDataHaveChanged(dtColumn, filterValue)) {
+            return;
+        }
+
+        if (data == null || data.startTime == null || data.endTime == null) {
+            this.addFilterItem(dtColumn, {} as any);
+        } else {
+            this.addFilterItem(dtColumn, filterValue);
+        }
+
+        if (this.preserveFilter == true) {
+            if (data == null || data.startTime == null || data.endTime == null) {
+                StorageHelper.storeFilter(this.id, null);
+            } else {
+                StorageHelper.storeFilter(this.id, filterValue);
+            }
+        }
+
+        if (this.handleClientsideFilter(false)) {
+            return;
+        }
+
+        // Immediate reload if changed, delay handled by the Dropdown component
+        this.reloadData();
+    }
+
+    performClientsideFilter(): void {
+        this.rows = this.getClientsideFilteredAndSortedRows(this.loadedRows);
+    }
+
+    getClientsideFilteredAndSortedRows(rowArr: any[]): any[] {
+        let newRowArr = [...rowArr];
+        for (const filterData of this.filterArr) {
+            const column = this.columns.find(p => p.id == filterData.PropertyName);
+            const filterDef = column?.clientsideFilter;
+
+            if (filterDef != null) {
+                if (!isNullOrEmpty(filterData.ContainsValue)) {
+                    filterData.ContainsValue = this.normalizeStringForSearch(filterData.ContainsValue);
+                }
+
+                newRowArr = newRowArr.filter((p) => {
+                    return filterDef(p, filterData);
+                });
+
+                continue;
+            }
+
+            if (filterData.FilterType == DataTableFilterItemType.Text && !isNullOrEmpty(filterData.ContainsValue)) {
+                const containsVal = this.normalizeStringForSearch(filterData.ContainsValue);
+                newRowArr = newRowArr.filter((p) => {
+                    let val: any;
+                    if (column?.customFilterValue != null) {
+                        val = column.customFilterValue(p);
+                    } else if (column?.customValue != null) {
+                        val = column.customValue(p);
+                    } else {
+                        val = p[filterData.PropertyName];
+                    }
+
+                    if (val == null) {
+                        return false;
+                    }
+
+                    if (typeof val === 'string' || val instanceof String) {
+                        return this.normalizeStringForSearch(val as any).includes(containsVal);
+                    }
+
+                    return this.normalizeStringForSearch((p[filterData.PropertyName] || '').toString()).includes(containsVal);
+                });
+            } else if (filterData.FilterType == DataTableFilterItemType.Dropdown && !isNullOrEmpty(filterData.ValueArr)) {
+                newRowArr = newRowArr.filter((p) => {
+                    let propVal: any;
+                    if (column?.customFilterValue != null) {
+                        propVal = column.customFilterValue(p);
+                    } else if (column?.customValue != null) {
+                        propVal = column.customValue(p);
+                    } else {
+                        propVal = p[filterData.PropertyName];
+                    }
+
+                    if (propVal == null) {
+                        return false;
+                    }
+
+                    if (filterData.ValueArr.length == 1) {
+                        return propVal == filterData.ValueArr[0];
+                    } else if (filterData.ValueArrStrategy == MultiSelectExclusivity.Inclusive) {
+                        return filterData.ValueArr.includes(propVal);
+                    }
+
+                    return true;
+                });
+            } else if (filterData.FilterType == DataTableFilterItemType.DateRange) {
+                const fromMs = filterData.DateFrom?.toZonedDateTime('UTC')?.epochMilliseconds;
+                const toMs = filterData.DateTo?.toZonedDateTime('UTC')?.epochMilliseconds;
+
+                newRowArr = newRowArr.filter((p) => {
+                    let propVal: any;
+                    if (column?.customFilterValue != null) {
+                        propVal = column.customFilterValue(p);
+                    } else if (column?.customValue != null) {
+                        propVal = column.customValue(p);
+                    } else {
+                        propVal = p[filterData.PropertyName];
+                    }
+
+                    if (propVal == null) {
+                        return false;
+                    }
+
+                    try {
+                        if (typeof propVal == 'string') {
+                            propVal = TemporalUtils.fromString(propVal);
+                        }
+
+                        const timeMs = (propVal as Temporal.PlainDateTime)?.toZonedDateTime('UTC')?.epochMilliseconds;
+                        return fromMs <= timeMs && toMs >= timeMs;
+                    } catch (error) {
+                        return false;
+                    }
+                });
+            } else if (filterData.FilterType == DataTableFilterItemType.NumericRange) {
+                newRowArr = newRowArr.filter((p) => {
+                    let propVal: any;
+                    if (column?.customFilterValue != null) {
+                        propVal = column.customFilterValue(p);
+                    } else if (column?.customValue != null) {
+                        propVal = column.customValue(p);
+                    } else {
+                        propVal = p[filterData.PropertyName];
+                    }
+
+                    if (propVal == null) {
+                        return false;
+                    }
+
+                    return filterData.NumFrom <= propVal && filterData.NumTo >= propVal;
+                });
+            }
+        }
+
+        if (!isNullOrEmpty(this.fullTextQuery)) {
+            const fulltextArr: any[] = [];
+            const normalizedQuery = this.normalizeStringForSearch(this.fullTextQuery);
+
+            for (const row of newRowArr) {
+                for (const propName in row) {
+                    const column = this.columns.find(p => p.id == propName);
+                    let propVal: any;
+
+                    if (column?.customFilterValue != null) {
+                        propVal = column.customFilterValue(row);
+                    } else if (column?.customValue != null) {
+                        propVal = column.customValue(row);
+                    } else {
+                        propVal = row[propName];
+                    }
+
+                    if (propVal != null) {
+                        if (this.normalizeStringForSearch(propVal.toString()).includes(normalizedQuery)) {
+                            fulltextArr.push(row);
+                            break;
+                        }
+                    }
+                }
+            }
+
+            newRowArr = fulltextArr;
+        }
+
+        if (this.sortDefinition != null) {
+            const colId = this.sortDefinition.columnId;
+            type SORT_TYPE_OPTS = 'string' | 'date' | 'unknown';
+            let sortType: SORT_TYPE_OPTS = 'unknown';
+
+            for (const row of newRowArr) {
+                const item = row[colId];
+                if (item == null) {
+                    continue;
+                }
+
+                if (typeof item === 'string' || item instanceof String) {
+                    sortType = 'string';
+                } else if (item.getTime != null && item.getSeconds != null) {
+                    sortType = 'date';
+                } else {
+                    sortType = 'unknown';
+                }
+
+                break;
+            }
+
+            if (sortType == 'string') {
+                const collator = new Intl.Collator(PowerduckState.getCurrentLanguage(), {
+                    numeric: true,
+                    sensitivity: 'base',
+                });
+                newRowArr = newRowArr.sort((a, b) => collator.compare(a[colId], b[colId]));
+            } else if (sortType == 'date') {
+                newRowArr = newRowArr.sort((a, b) => {
+                    return (b[colId]?.getTime() || 0) - (a[colId]?.getTime() || 0);
+                });
+            } else {
+                try {
+                    newRowArr = newRowArr[sortBy](this.sortDefinition.columnId);
+                } catch (error) { }
+            }
+
+            if (this.sortDefinition.direction == DataTableSortDirection.Descending) {
+                newRowArr = newRowArr.reverse();
+            }
+        }
+
+        return newRowArr;
+    }
+
+    normalizeStringForSearch(str: string): string {
+        return str.toLowerCase()[latinize]().trim();
+    }
+
+    reloadData(): void {
+        this.reloadDataPromise().then((data) => {
+            this.handleClientsideFilter(false);
+        }).catch((err) => {
+
+        });
+    }
+
+    reloadDataPromise(paginationPosition?: number, paginationLength?: number): Promise<any> {
+        const mySelf = this;
+        this.isLoading = true;
+
+        return new Promise((resolve, reject) => {
+            let loadPromise: Promise<any>;
+            if (mySelf.customAjaxCall == null) {
+                loadPromise = mySelf.apiClient[mySelf.apiMethod](mySelf.getAjaxArgs(paginationPosition, paginationLength));
+            } else {
+                loadPromise = mySelf.customAjaxCall(mySelf.getAjaxArgs(paginationPosition, paginationLength));
+            }
+
+            loadPromise.then((data: any) => {
+                mySelf.unmarkSelection(() => {
+                    mySelf.enforceBodyRedraw = true;
+                    mySelf.$nextTick(() => {
+                        mySelf.enforceBodyRedraw = false;
+                        mySelf.isLoading = false;
+
+                        if (mySelf.parseLoadedRowset != null) {
+                            const rowset = mySelf.parseLoadedRowset(data);
+                            mySelf.totalCount = rowset.totalCount;
+                            mySelf.totalFilteredCount = rowset.totalFilteredCount;
+                            mySelf.rows = rowset.rows;
+                        } else {
+                            mySelf.totalCount = data.totalCount ?? data.TotalCount;
+                            mySelf.totalFilteredCount = data.totalFilteredCount ?? data.TotalFilteredCount;
+                            mySelf.rows = data.rows ?? data.Rows ?? data.data;
+                        }
+
+                        mySelf.loadedRows = mySelf.rows;
+                        mySelf.$forceUpdate();
+                        mySelf.$nextTick(() => mySelf.markSelection());
+                        resolve(data);
+                    });
+                });
+            })
+                .catch((err) => {
+                    mySelf.isLoading = false;
+                    NotificationProvider.showErrorMessage(PowerduckState.getResourceValue('errorFetchingData'));
+                    reject(err);
+                });
+        });
+    }
+
+    getAjaxArgs(paginationPosition?: number, paginationLength?: number): DataTablePostBackData {
+        if (this.sessionId == null) {
+            this.sessionId = Math.floor(Math.random() * 2147483647) + 2147483647 * -1;
+        }
+
+        const dataArgs = {} as any as DataTablePostBackData;
+        if (this.apiArgs != null) {
+            for (const key in this.apiArgs) {
+                const kv = this.apiArgs[key];
+                if (kv && {}.toString.call(kv) === '[object Function]') {
+                    dataArgs[key] = kv.call(this);
+                } else {
+                    dataArgs[key] = kv;
+                }
+            }
+        }
+
+        dataArgs.SessionId = this.sessionId;
+        dataArgs.PaginationPosition = paginationPosition || this.paginationPosition;
+        dataArgs.PaginationLength = paginationLength || this.getPaginationLength();
+        dataArgs.Filter = {
+            FullText: this.fullTextQuery,
+            FilterItems: this.filterArr,
+        };
+
+        if (this.sortDefinition != null) {
+            dataArgs.Sort = {
+                PropertyName: this.sortDefinition.columnId,
+                Direction: this.sortDefinition.direction,
+            };
+        }
+
+        if (dataArgs.PaginationLength == -1) {
+            dataArgs.PaginationPosition = 1;
+        }
+
+        return dataArgs;
+    }
+
+    isMobileModeRenderType(): boolean {
+        return this.activeBreakPoint == 'mobile' && this.getMobileBehavior() == DataTableMobileBehavior.MobileLayout;
+    }
+
+    forceHeaderRedraw(): void {
+        this.enforceHeaderRedraw = true;
+        this.$nextTick(() => (this.enforceHeaderRedraw = false));
+    }
+
+    forceBodyRedraw(): void {
+        this.enforceBodyRedraw = true;
+        this.$nextTick(() => (this.enforceBodyRedraw = false));
+    }
+
+    updateRows(rowArr: any[]): void {
+        this.rows = rowArr;
+        this.loadedRows = rowArr;
+        this.forceBodyRedraw();
+    }
+
+    getTotalCount(): number {
+        return this.totalCount;
+    }
+
+    setSkin(skin: DataTableSkin): void {
+        StorageHelper.storeSkin(this.id, skin);
+        this.currentSkin = skin;
+        this.handleMobileBreakpointChanged();
+    }
+
+    setMobileBehavior(mobileBehavior: DataTableMobileBehavior): void {
+        StorageHelper.storeMobileBehavior(this.id, mobileBehavior);
+        this.currentMobileBehavior = mobileBehavior;
+        this.handleMobileBreakpointChanged();
+    }
+
+    handleColumnsReordered(sortOrder: string[]): void {
+        sortOrder = sortOrder.filter(p => p != '_sysIndexCol');
+        StorageHelper.storeSortOrder(this.id, sortOrder);
+        this.colSortOrder = sortOrder;
+        this.reorderColumns(sortOrder, this.getVisibleColumns());
+        this.forceHeaderRedraw();
+    }
+
+    async handleColumnHeaderClicked(dtColumn: TableColumn) {
+        if (dtColumn.sortable == false) {
+            return;
+        }
+
+        const oldDef = this.sortDefinition;
+        let newDirection = DataTableSortDirection.Ascending;
+        if (this.sortDefinition != null && this.sortDefinition.columnId == dtColumn.id && this.sortDefinition.direction == DataTableSortDirection.Ascending) {
+            newDirection = DataTableSortDirection.Descending;
+        }
+
+        this.sortDefinition = {
+            columnId: dtColumn.id,
+            direction: newDirection,
+        };
+
+        if (this.preserveOrderBy == true) {
+            StorageHelper.storeOrderBy(this.id, this.sortDefinition);
+        }
+
+        if (this.handleClientsideFilter(false)) {
+            return;
+        }
+
+        try {
+            await this.reloadDataPromise();
+        } catch (e) {
+            this.sortDefinition = oldDef;
+        }
+    }
+
+    handleColumnVisibilityChanged(columns: TableColumn[]): void {
+        StorageHelper.storeColVis(this.id, columns);
+        this.forceHeaderRedraw();
+    }
+
+    handleColumnModalFilterChanged(e: ColFilterModalShowResponse): void {
+        if (e.changed) {
+            this.filterArr = e.filterArr;
+            this.reloadData();
+        }
+    }
+
+    handleMobileRowClicked(e: any, row: any) {
+        if (this.checkboxesShown) {
+            let target = $(e.target);
+            if (!target.hasClass('dt-mobile-row-inner')) {
+                target = target.closest('.dt-mobile-row-inner');
+            }
+
+            const input = target.find('.dt-selection-checkbox input')[0] as HTMLInputElement;
+            input.checked = !input.checked;
+        }
+
+        if (this.rowClicked) {
+            this.rowClicked(row);
+        }
+    }
+
+    handleRowCheckboxChanged(row: any, checked: boolean) {
+        if (this.rowCheckstateChanged != null) {
+            this.rowCheckstateChanged(
+                row,
+                checked,
+                this.getSelectedRows(),
+            );
+        }
+    }
+
+    getLastPaginationIndex(): number {
+        let retVal = this.totalFilteredCount / this.getPaginationLength();
+        if (retVal % this.getPaginationLength() != 0) {
+            retVal = Math.floor(retVal) + 1;
+        }
+
+        if (retVal == 0) {
+            retVal = 1;
+        }
+
+        return retVal;
+    }
+
+    async handlePaginationPositionChanged(newValue: number): Promise<any> {
+        if (this.paginationPosition == newValue || newValue < 1 || newValue > this.getLastPaginationIndex()) {
+            return;
+        }
+
+        await this.reloadDataPromise(newValue);
+        this.paginationPosition = newValue;
+    }
+
+    async handlePaginationLengthChanged(newValue: number) {
+        if (this.getPaginationLength() == newValue) {
+            return;
+        }
+
+        await this.reloadDataPromise(null, newValue);
+        StorageHelper.storePaginationLength(this.id, newValue);
+        this.paginationLength = newValue;
+    }
+
+    handleCheckAllChanged(checked: boolean): void {
+        $('.dt-col-indexcheckbox').each(function (this: HTMLElement) {
+            $(this).find('input').prop('checked', checked);
+        });
+
+        this.handleRowCheckboxChanged(null, null);
+    }
+
+    getNameAndSurnameIndex(name: string, surname: string): string {
+        let retVal: string;
+        if ((name != null && name.length > 0) || (surname != null && surname.length > 0)) {
+            name = name || '';
+            surname = surname || '';
+
+            if (name.length > 0) {
+                if (surname.length > 0) {
+                    retVal = name.substring(0, 1).toUpperCase() + surname.substring(0, 1).toUpperCase();
+                } else {
+                    retVal = name;
+                }
+            } else {
+                retVal = surname;
+            }
+        }
+
+        return retVal;
+    }
+
+    getRowIdentifier(
+        columns: TableColumn[],
+        row: any,
+        includeColumns: boolean,
+    ): RowIdentifier {
+        let namingData: RowIdentifier;
+        if (row.CustomFields != null) {
+            const nameCf = (row.CustomFields.filter(p => p.MappingType == 1)[0] || {}) as any;
+            const surnameCf = (row.CustomFields.filter(p => p.MappingType == 2)[0] || {}) as any;
+            namingData = new RowIdentifier(nameCf.Value, surnameCf.Value);
+
+            if (includeColumns && namingData.fullName.length > 1) {
+                namingData.dtColumns = [];
+
+                const nameCol = columns.filter(p => p.id.includes(`cf:map:${1}`) || p.id.includes(`cf:id:${nameCf.Id}`))[0];
+                if (nameCol != null) {
+                    namingData.dtColumns.push(nameCol);
+                }
+
+                const surnameCol = columns.filter(p => p.id.includes(`cf:map:${2}`) || p.id.includes(`cf:id:${surnameCf.Id}`))[0];
+                if (surnameCol != null) {
+                    namingData.dtColumns.push(surnameCol);
+                }
+            }
+        }
+
+        if (namingData == null || (namingData.fullName.length < 2 && row.Name != null)) {
+            namingData = new RowIdentifier(row.Name, row.Surname);
+
+            if (includeColumns) {
+                namingData.dtColumns = [];
+
+                const nameCol = columns.filter(p => p.id == 'Name')[0];
+                if (nameCol != null) {
+                    namingData.dtColumns.push(nameCol);
+                }
+
+                const surnameCol = columns.filter(p => p.id == 'Surname')[0];
+                if (surnameCol != null) {
+                    namingData;
+                }
+            }
+        }
+
+        if (namingData == null || (namingData.fullName.length < 2 && row.Email != null)) {
+            if (row.Email != null) {
+                namingData = new RowIdentifier(row.Email, '');
+
+                if (includeColumns) {
+                    const emailCol = columns.filter(p => p.id == 'Email')[0];
+                    if (emailCol != null) {
+                        namingData.dtColumns = [emailCol];
+                    }
+                }
+            }
+        }
+
+        if (namingData == null || (namingData.fullName.length < 2 && row.TicketName != null)) {
+            if (row.TicketName != null) {
+                namingData = new RowIdentifier(row.TicketName, '');
+
+                if (includeColumns) {
+                    const emailCol = columns.filter(p => p.id == 'TicketName')[0];
+                    if (emailCol != null) {
+                        namingData.dtColumns = [emailCol];
+                    }
+                }
+            }
+        }
+
+        return namingData;
+    }
+
+    getHeaderColumnIndex(
+        columns: TableColumn[],
+        row,
+        i,
+    ): string {
+        if (this.rowIndexMode == RowIndexMode.Index) {
+            return i + 1;
+        } else {
+            var indexText: string;
+            const rowIdentifier = this.getRowIdentifier(
+                columns,
+                row,
+                false,
+            );
+            if (rowIdentifier != null) {
+                indexText = this.getNameAndSurnameIndex(rowIdentifier.name, rowIdentifier.surname);
+            }
+
+            var indexText: string;
+            if (row.CustomFields != null) {
+                const nameCf = row.CustomFields.filter(p => p.MappingType == 1)[0];
+                const surnameCf = row.CustomFields.filter(p => p.MappingType == 2)[0];
+                indexText = this.getNameAndSurnameIndex(nameCf != null ? nameCf.Value : '', surnameCf != null ? surnameCf.Value : '');
+            }
+
+            if (indexText != null && indexText.length > 1) {
+                if (indexText.length > 2) {
+                    const splitArr = indexText.split(' ');
+                    if (splitArr.length > 1) {
+                        indexText = (splitArr[0].substring(0, 1) + splitArr[1].substring(0, 1)).toUpperCase();
+                    } else {
+                        indexText = indexText.substring(0, 2).toUpperCase();
+                    }
+                }
+            } else {
+                indexText = (i + 1).toString();
+            }
+
+            return indexText;
+        }
+    }
+
+    showColVis(): void {
+        (this.$refs.colVisModal as typeof ColVisModal.prototype).show();
+    }
+
+    showFilterModal(): void {
+        (this.$refs.colFilterModal as typeof ColFilterModal.prototype).show({
+            filterArr: this.filterArr,
+        });
+    }
+
+    exportExcel(): void {
+        (this.$refs.tableExportModal as typeof TableExportModal.prototype).show({
+            apiClient: this.apiClient,
+            apiMethod: this.apiMethod,
+            apiArgs: this.getAjaxArgs(),
+            columns: this.columns,
+            rows: this.rows,
+            exportConfig: this.exportConfig,
+            paginationOffset: this.paginationPosition - 1,
+            paginationLength: this.getPaginationLength(),
+            totalFilteredCount: this.totalFilteredCount,
+        });
+    }
+
+    toggleCheckboxes(visible?: boolean): void {
+        if (visible == null) {
+            visible = !this.checkboxesShown;
+        }
+
+        this.checkboxesShown = visible;
+    }
+
+    getSkin(): DataTableSkin {
+        return this.currentSkin || DataTableSkin.Default;
+    }
+
+    getMobileBehavior(): DataTableMobileBehavior {
+        return this.currentMobileBehavior || DataTableMobileBehavior.MobileLayout;
+    }
+
+    getVisibleColumns(): TableColumn[] {
+        const state = StorageHelper.getStoredState(this.id);
+        const colArr = this.columns.filter(p => p.visible != false);
+        this.reorderColumns(this.colSortOrder, colArr);
+        this.handleColumnsVisibility(state, colArr);
+        return colArr;
+
+        // return this.columns.filter(p => p.visible != false);
+    }
+
+    isDesiredCustomFieldColumn(
+        dtCol: TableColumn,
+        row: any,
+        mappingType: any,
+    ): boolean {
+        const nameCf = row.CustomFields.filter(p => p.MappingType == mappingType)[0];
+        if (nameCf != null && ((dtCol.id.includes(`id:${nameCf.Id}`)) || (dtCol.id.includes(`map:${nameCf.MappingType}`)))) {
+            return true;
+        }
+
+        return false;
+    }
+
+    getChangeEventDelay() {
+        if (this.filterMode == DataTableFilterMode.Clientside) {
+            return 0;
+        } else {
+            return 650;
+        }
+    }
+
+    getTableColumnOrder(dtCol: TableColumn, row: any): number {
+        if (dtCol.mobileOrder != null) {
+            return dtCol.mobileOrder;
+        }
+
+        if (dtCol.id.includes('cf:') && row.CustomFields != null) {
+            if (this.isDesiredCustomFieldColumn(
+                dtCol,
+                row,
+                1,
+            )) {
+                return -10100;
+            }
+
+            if (this.isDesiredCustomFieldColumn(
+                dtCol,
+                row,
+                1,
+            )) {
+                return -10000;
+            }
+        }
+
+        if (dtCol.id == 'Name') {
+            return -9000;
+        }
+
+        if (dtCol.id == 'TicketName') {
+            return -8900;
+        }
+
+        return null;
+    }
+
+    getTableColumnOrderStyle(dtCol: TableColumn, row: any): string {
+        const retVal = this.getTableColumnOrder(dtCol, row);
+        if (retVal != null) {
+            return `order:${retVal}`;
+        }
+
+        return null;
+    }
+
+    getMassOperationItems(): typeof DropdownButtonItem.prototype[] {
+        return this.massOperationOptions || [];
+    }
+
+    shouldRenderMobileRowColumn(row, dtColumn: TableColumn): boolean {
+        if (dtColumn.customRender == null) {
+            if (dtColumn.customValue != null) {
+                return dtColumn.customValue(row) != null;
+            }
+
+            return row[dtColumn.id] != null;
+        }
+
+        if (dtColumn.mobileShouldRenderRow) {
+            return dtColumn.mobileShouldRenderRow(row);
+        }
+
+        return true;
+    }
+
+    clearSelection() {
+        $(this.$el).find('.dt-col-index').find('input').prop('checked', false);
+    }
+
+    getFilterValue(dtColumn: TableColumn): any {
+        if (this.filterArr == null) {
+            return null;
+        }
+
+        const filterItem = this.filterArr.filter(p => p.PropertyName == dtColumn.id)[0];
+        if (filterItem == null) {
+            return null;
+        }
+
+        if (filterItem.FilterType == DataTableFilterItemType.Text) {
+            return filterItem.ContainsValue;
+        } else if (filterItem.FilterType == DataTableFilterItemType.Dropdown) {
+            return filterItem.ValueArr;
+        } else if (filterItem.FilterType == DataTableFilterItemType.DateRange) {
+            return {
+                startTime: filterItem.DateFrom,
+                endTime: filterItem.DateTo,
+            };
+        } else if (filterItem.FilterType == DataTableFilterItemType.NumericRange) {
+
+        } else {
+            return null;
+        }
+    }
+
+    render(h) {
+        const columns = this.getVisibleColumns();
+        let paginationStart = (this.paginationPosition - 1) * this.getPaginationLength() + 1;
+        let paginationEnd = Math.min(paginationStart + this.getPaginationLength(), this.totalFilteredCount) - 1;
+        const settingsUUID = `ddl-${PortalUtils.randomString(10)}`;
+        const isMobile = PortalUtils.treatAsMobileDevice();
+        const hasMobLayout = this.getMobileBehavior() == DataTableMobileBehavior.MobileLayout;
+        const hasTableSkin = this.getSkin() == DataTableSkin.Default;
+
+        if (this.paginationPosition == this.getLastPaginationIndex()) {
+            paginationEnd += 1;
+        }
+
+        if (this.totalFilteredCount == 0) {
+            paginationStart = 0;
+            paginationEnd = 0;
+        }
+
+        if (this.getPaginationLength() == -1) {
+            paginationEnd = this.totalFilteredCount;
+        }
+
+        return (
+            <div
+                class={
+                    `dt-root dt-mobile-mobile dt-device-${PortalUtils.treatAsMobileDevice() ? 'mobile' : 'desktop'
+                    }${PortalUtils.isIOS() ? ' dt-ios' : ''
+                    } dt-skin-${this.getSkin()
+                    } dt-mobbehavior-${this.getMobileBehavior()
+                    }${this.checkboxesShown ? ' dt-checkboxes-visible' : ''
+                    } dt-breakpoint-${this.activeBreakPoint
+                    }${this.fullSizeHasButtonBelow ? ' dt-fs-buttonsbelow' : ''
+                    }${this.insetTop ? ' dt-inset-top' : ''
+                    }${this.fullSizeTable == true ? ' dt-fullsize-table' : ''
+                    } ${this.cssClass || ''}`
+                }
+            >
+                {this.topVisible != false && (
+                    <div class="dt-top">
+                        <div class="dt-top-buttonsrow">
+                            <div class="dt-buttons">
+                                <TableButtonComponent title={PowerduckState.getResourceValue('colVisLabel')} icon="fa fa-eye-slash" clicked={() => this.showColVis()} />
+
+                                {this.buttons
+                                    && this.buttons.map(btn => (
+                                        <TableButtonComponent title={btn.title} icon={btn.icon} childItems={btn.childItems} customRender={btn.customRender} clicked={() => btn.clicked()} />
+                                    ))}
+
+                                {this.allowExport != false && <TableButtonComponent title="Excel export" icon="far fa-file-excel" clicked={() => this.exportExcel()} />}
+
+                                {this.allowMassOperations != false && <TableButtonComponent title={this.checkboxesTitle || ''} icon="far fa-check-square" clicked={() => this.toggleCheckboxes()} />}
+
+                                {this.activeBreakPoint == DataTableBreakpoint.Mobile && this.getMobileBehavior() == DataTableMobileBehavior.MobileLayout && (
+                                    <TableButtonComponent title="Filter" icon="fas fa-filter" clicked={() => this.showFilterModal()} />
+                                )}
+
+                                <span class="nav-item dt-button dropdown">
+                                    <span class="dropdown-toggle" id={settingsUUID} data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                        <i class="fas fa-desktop"></i>
+                                    </span>
+                                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby={settingsUUID}>
+                                        {isMobile && (
+                                            <a class="dropdown-item dropdown-selectable-section" href="javascript:" onClick={() => this.setMobileBehavior(DataTableMobileBehavior.MobileLayout)}>
+                                                <span>{PowerduckState.getResourceValue('dtLayoutMobile')}</span>
+                                                {hasMobLayout && <i class="fas fa-check"></i>}
+                                            </a>
+                                        )}
+
+                                        {!isMobile && (
+                                            <a class="dropdown-item dropdown-selectable-section" href="javascript:" onClick={() => this.setSkin(DataTableSkin.Default)}>
+                                                <span>{PowerduckState.getResourceValue('dtLayoutTable')}</span>
+                                                {hasTableSkin && <i class="fas fa-check"></i>}
+                                            </a>
+                                        )}
+
+                                        <a
+                                            class="dropdown-item dropdown-selectable-section"
+                                            href="javascript:"
+                                            onClick={() => (isMobile ? this.setMobileBehavior(DataTableMobileBehavior.Compact) : this.setSkin(DataTableSkin.Compact))}
+                                        >
+                                            <span>{isMobile ? PowerduckState.getResourceValue('dtLayoutTable') : PowerduckState.getResourceValue('dtLayoutCompact')}</span>
+                                            {((isMobile && !hasMobLayout) || (!isMobile && !hasTableSkin)) && <i class="fas fa-check"></i>}
+                                        </a>
+                                    </div>
+                                </span>
+                            </div>
+                        </div>
+                        {this.hidePagination != true
+                            && (
+                                <div class="dt-top-paginationrow">
+                                    {(!this.checkboxesShown || this.checkboxButtonsVisible == false) && (
+                                        <div class="dt-pagination-length">
+                                            <select onChange={e => this.handlePaginationLengthChanged(Number(e.target.value))}>
+                                                {(this.paginations || [
+                                                    10,
+                                                    25,
+                                                    50,
+                                                    100,
+                                                    250,
+                                                    500,
+                                                    1000,
+                                                    -1,
+                                                ]).map(item => (
+                                                    <option value={item} selected={this.getPaginationLength() == item}>
+                                                        {item != -1 ? item.toString() : PowerduckState.getResourceValue('all')}
+                                                    </option>
+                                                ))}
+                                            </select>
+
+                                            <span>{PowerduckState.getResourceValue('recordsDtLabel')}</span>
+                                        </div>
+                                    )}
+
+                                    {this.checkboxesShown && this.checkboxButtonsVisible != false && (
+                                        <div class="dt-pagination-length dt-massop-btn-wrap">
+                                            <DropdownButton text="Hromadne operacie" layout={ButtonLayout.Secondary}>
+                                                {this.getMassOperationItems().map(mi =>
+                                                    (mi as any).isSeparator != true ? <DropdownButtonItem icon={mi.icon} text={mi.text} clicked={mi.clicked} /> : <div class="dropdown-divider" />)}
+
+                                                <DropdownButtonItem icon="icon icon-close" text={PowerduckState.getResourceValue('cancel')} clicked={() => this.toggleCheckboxes(false)} />
+                                            </DropdownButton>
+                                            <Button text={PowerduckState.getResourceValue('cancel')} layout={ButtonLayout.Default} clicked={() => this.toggleCheckboxes(false)} cssClass="dt-massop-cancelbtn" />
+                                        </div>
+                                    )}
+
+                                    <div class="dt-fulltext-search">
+                                        <input type="search" placeholder={`${PowerduckState.getResourceValue('search')[capitalize]()}...`} onKeyup={e => this.performFullTextSearch(e)} />
+                                    </div>
+                                </div>
+                            )}
+                    </div>
+                )}
+
+                {this.renderTableByMode(h, columns)}
+
+                {this.bottomVisible != false && (
+                    <div class="dt-bottom">
+                        <div class="dt-summary-wrap">
+                            {PowerduckState.getResourceValue('dtCountText').replace('{0}', paginationStart.toString()).replace('{1}', paginationEnd.toString()).replace('{2}', this.totalFilteredCount.toString())}
+                            {this.totalFilteredCount != this.totalCount && (
+                                <span class="dt-summary-totalcount">
+                                    &nbsp;
+                                    {PowerduckState.getResourceValue('dtCountFilteredOutOf').replace('{0}', this.totalCount.toString())}
+                                </span>
+                            )}
+                        </div>
+
+                        <div class="dt-pagination">{this.renderPagination(h)}</div>
+                    </div>
+                )}
+
+                <ColVisModal ref="colVisModal" columns={this.columns} changed={e => this.handleColumnVisibilityChanged(e)} />
+                <ColFilterModal ref="colFilterModal" columns={this.columns} changed={e => this.handleColumnModalFilterChanged(e)} />
+                <TableExportModal ref="tableExportModal" />
+            </div>
+        );
+    }
+
+    protected renderTableByMode(h, columns: TableColumn[]) {
+        if (this.activeBreakPoint == DataTableBreakpoint.Mobile) {
+            if (this.getMobileBehavior() == DataTableMobileBehavior.MobileLayout) {
+                return this.renderMobileMode(h, columns);
+            } else if (this.getMobileBehavior() == DataTableMobileBehavior.VerticalTransform) {
+                return this.renderVerticallyTransformedTable(h, columns);
+            }
+        }
+
+        return this.renderStandardTable(h, columns);
+    }
+
+    protected renderStandardTable(h, columns: TableColumn[]) {
+        return (
+            <div class="dt-table dt-table-mode">
+                <table>
+                    <LoadingIndicator visible={!this.initialized} />
+
+                    {this.enforceHeaderRedraw == false && (
+                        <thead>
+                            <tr class="dt-header">
+                                <th data-col-id="_sysIndexCol" class="dt-header-index">
+                                    {!this.isLoading && (
+                                        <span>
+                                            <span class="dt-header-indexlabel" style={this.checkboxesShown ? 'display:none' : ''}>
+                                                #
+                                            </span>
+                                            <span class="dt-header-indexcheckbox" style={this.checkboxesShown ? '' : 'display:none'}>
+                                                <CheckBox
+                                                    skin={CheckBoxSkin.Material}
+                                                    label={null}
+                                                    wrap={false}
+                                                    value={false}
+                                                    changed={(e) => {
+                                                        this.handleCheckAllChanged(e);
+                                                    }}
+                                                />
+                                            </span>
+                                        </span>
+                                    )}
+
+                                    {this.isLoading && <img src={loadingGif} />}
+                                </th>
+
+                                {this.renderHeaderRow(h, columns)}
+                            </tr>
+
+                            {this.autoFilter != false && (
+                                <tr class="dt-header-filter">
+                                    <th class="dt-filter-index"></th>
+
+                                    {columns.map((dtColumn, i) => (
+                                        <th class={this.getTableColumnHeaderFilterCssClass(dtColumn, i)}>{this.renderHeaderFilter(h, dtColumn)}</th>
+                                    ))}
+                                </tr>
+                            )}
+                        </thead>
+                    )}
+                    <tbody>
+                        {this.rowClicked == null
+                            && this.enforceBodyRedraw == false
+                            && (this.rows || []).map((row, i) => (
+                                <tr class={`dt-item${this.rowCssClass == null ? '' : ` ${this.rowCssClass(row)}`}`}>
+                                    <td class={`dt-col-index${this.sortableRows == true ? ' dt-has-sortable-rows' : ''}`}>
+                                        <span class="dt-col-indexlabel" style={this.checkboxesShown ? 'display:none' : ''}>
+                                            {this.getHeaderColumnIndex(
+                                                columns,
+                                                row,
+                                                i,
+                                            )}
+                                        </span>
+                                        <span class="dt-col-indexcheckbox dt-selection-checkbox" data-id={this.getRowId(row)} style={this.checkboxesShown ? '' : 'display:none'}>
+                                            <CheckBox skin={CheckBoxSkin.Material} label={null} value={false} wrap={false} changed={e => this.handleRowCheckboxChanged(row, e)} />
+                                        </span>
+
+                                        {this.sortableRows == true && <i class="fas fa-sort dt-sort-handle" />}
+                                    </td>
+
+                                    {columns.map((dtColumn, j) => (
+                                        <td class={this.getTableItemCssClass(dtColumn, j)}>{dtColumn.customRender == null ? (dtColumn.customValue == null ? row[dtColumn.id] : dtColumn.customValue(row)) : dtColumn.customRender(h, row)}</td>
+                                    ))}
+                                </tr>
+                            ))}
+
+                        {this.rowClicked != null
+                            && this.enforceBodyRedraw == false
+                            && (this.rows || []).map((row, i) => (
+                                <tr
+                                    class={`dt-item${this.rowCssClass == null ? '' : ` ${this.rowCssClass(row)}`}`}
+                                    onClick={() => {
+                                        this.rowClicked(row);
+                                    }}
+                                >
+                                    <td class={`dt-col-index${this.sortableRows == true ? ' dt-has-sortable-rows' : ''}`}>
+                                        <span class="dt-col-indexlabel" style={this.checkboxesShown ? 'display:none' : ''}>
+                                            {this.getHeaderColumnIndex(
+                                                columns,
+                                                row,
+                                                i,
+                                            )}
+                                        </span>
+                                        <span class="dt-col-indexcheckbox dt-selection-checkbox" data-id={this.getRowId(row)} style={this.checkboxesShown ? '' : 'display:none'}>
+                                            <CheckBox skin={CheckBoxSkin.Material} label={null} value={false} wrap={false} changed={e => this.handleRowCheckboxChanged(row, e)} />
+                                        </span>
+
+                                        {this.sortableRows == true && <i class="fas fa-sort dt-sort-handle" />}
+                                    </td>
+
+                                    {columns.map((dtColumn, j) => (
+                                        <td class={this.getTableItemCssClass(dtColumn, j)}>{dtColumn.customRender == null ? (dtColumn.customValue == null ? row[dtColumn.id] : dtColumn.customValue(row)) : dtColumn.customRender(h, row)}</td>
+                                    ))}
+                                </tr>
+                            ))}
+
+                        {this.totalFilteredCount == 0 && (
+                            <tr>
+                                <td class="dt-no-results" colspan="99999">
+                                    <div class="dt-no-results-inner">
+                                        <div>{PowerduckState.getResourceValue('noResultsFound')}</div>
+                                    </div>
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+        );
+    }
+
+    protected renderHeaderRow(h, columns: TableColumn[]) {
+        return columns.map((dtColumn, i) => (
+            <th
+                data-col-id={dtColumn.id}
+                onMousedown={e =>
+                    ReorderProvider.handleMouseDown(
+                        e,
+                        (sortOrder) => {
+                            this.handleColumnsReordered(sortOrder);
+                        },
+                        () => {
+                            this.handleColumnHeaderClicked(dtColumn);
+                        },
+                    )}
+                onTouchstart={e =>
+                    ReorderProvider.handleMouseDown(
+                        e,
+                        (sortOrder) => {
+                            this.handleColumnsReordered(sortOrder);
+                        },
+                        () => {
+                            this.handleColumnHeaderClicked(dtColumn);
+                        },
+                    )}
+                class={this.getTableColumnHeaderCssClass(dtColumn, i)}
+            >
+                {dtColumn.caption}
+                {this.sortDefinition && this.sortDefinition.columnId == dtColumn.id && (
+                    <span class="dt-sort">
+                        <i class={`fas ${this.sortDefinition.direction == DataTableSortDirection.Ascending ? 'fa-sort-up' : 'fa-sort-down'} float-right`} aria-hidden="true"></i>
+                    </span>
+                )}
+            </th>
+        ));
+    }
+
+    protected renderHeaderFilter(h, dtColumn: TableColumn) {
+        const filterType = dtColumn.filterType;
+        const filterValue = this.getFilterValue(dtColumn);
+        const closeIcon = !isNullOrEmpty(filterValue) ? 'icon icon-close' : null;
+        const appendIconClicked = () => {
+            if (this.currentAdvancedFilterState[dtColumn.id] != null) {
+                this.currentAdvancedFilterState[dtColumn.id] = null;
+            }
+
+            if (this.filterArr != null) {
+                this.filterArr = this.filterArr.filter(p => p.PropertyName != dtColumn.id);
+            }
+
+            if (filterType == DataTableFilterItemType.Text || filterType == null) {
+                this.performInputFilter(dtColumn, null);
+            } else if (filterType == DataTableFilterItemType.DateRange) {
+                this.performDateRangeFilter(dtColumn, null);
+            } else if (filterType == DataTableFilterItemType.Dropdown) {
+                this.performSelectionFilter(
+                    dtColumn,
+                    [],
+                    null,
+                );
+            } else if (filterType == DataTableFilterItemType.NumericRange) {
+
+            }
+        };
+
+        if (filterType == DataTableFilterItemType.None) {
+            return '';
+        } else if (filterType == DataTableFilterItemType.Text || filterType == null) {
+            return (<TextBox updateMode="input" cssClass="dt-filter-input" wrap={false} label={null} placeholder={`${PowerduckState.getResourceValue('search')[capitalize]()}...`} value={this.currentAdvancedFilterState[dtColumn.id]} changed={(e) => { this.performInputFilter(dtColumn, e); }} appendIcon={closeIcon} appendIconClicked={appendIconClicked} />);
+        } else if (filterType == DataTableFilterItemType.Dropdown) {
+            return (
+                <div class="dt-filter-dropdown">
+                    <DropdownList
+                        label={null}
+                        containerCssClass="dt-filter-dropdown-container"
+                        options={dtColumn.filterItems}
+                        wrap={false}
+                        disableSearch={!dtColumn.searchable}
+                        dropdownAutoWidth={true}
+                        multiselect={true}
+                        multiselectMode={MultiselectMode.Checkboxes}
+                        mobileShortMode={true}
+                        allowExclusiveSearch={dtColumn.filterAllowExclusivity}
+                        changedEventDelay={this.getChangeEventDelay()}
+                        selected={this.currentAdvancedFilterState[dtColumn.id]}
+                        changed={(changeArr, exclusivity) => {
+                            this.performSelectionFilter(
+                                dtColumn,
+                                changeArr,
+                                exclusivity,
+                            );
+                        }}
+                        appendIcon={closeIcon}
+                        appendIconClicked={appendIconClicked}
+                    />
+                </div>
+            );
+        } else if (filterType == DataTableFilterItemType.DateRange) {
+            return (<DaterangePicker label={null} cssClass="dt-filter-input" wrap={false} placeholder={`${PowerduckState.getResourceValue('search')[capitalize]()}...`} value={this.currentAdvancedFilterState[dtColumn.id]} changed={(e) => { this.performDateRangeFilter(dtColumn, e); }} appendIcon={closeIcon} appendIconClicked={appendIconClicked} />);
+        }
+    }
+
+    protected renderVerticallyTransformedTable(h, columns: TableColumn[]) {
+        return (this.rows || []).map((row, i) => (
+            <div class="dt-vert-row">
+                {columns.map((dtColumn, j) => (
+                    <div class="dt-vert-item" style={this.getTableColumnOrderStyle(dtColumn, row)}>
+                        <div class="dt-vert-caption">{dtColumn.caption}</div>
+                        <div class="dt-vert-value">{dtColumn.customRender == null ? (dtColumn.customValue == null ? row[dtColumn.id] : dtColumn.customValue(row)) : dtColumn.customRender(h, row)}</div>
+                    </div>
+                ))}
+            </div>
+        ));
+    }
+
+    protected renderMobileMode(h, columns: TableColumn[]) {
+        if (this.mobileModeCustomRender != null) {
+            return this.mobileModeCustomRender(
+                h,
+                columns,
+                this.rows,
+            );
+        }
+
+        return (
+            <div class="dt-mobile-rows">
+                {(this.isLoading || this.enforceBodyRedraw || this.enforceHeaderRedraw) && (
+                    <div style="min-height:150px;">
+                        <LoadingIndicator visible={true} />
+                    </div>
+                )}
+
+                {this.enforceHeaderRedraw == false
+                    && this.enforceBodyRedraw == false
+                    && (this.rows || []).map((row, i) => (
+                        <div class={`dt-mobile-row${this.rowCssClass == null ? '' : ` ${this.rowCssClass(row)}`}`}>
+                            {this.renderMobileModeRow(
+                                h,
+                                columns,
+                                row,
+                                i,
+                            )}
+                        </div>
+                    ))}
+            </div>
+        );
+    }
+
+    protected renderMobileModeRow(
+        h,
+        columns: TableColumn[],
+        row: any,
+        i: number,
+    ) {
+        const identifier = this.getRowIdentifier(
+            columns,
+            row,
+            true,
+        );
+        let colArr = this.getVisibleColumns().filter(p => p.mobileVisible != false);
+        const cssClass = `dt-mobile-row-inner${this.checkboxesShown ? ' dt-mobile-chbvisible' : ''}`;
+
+        // Exclude identifier columns if they are already picked by the engine
+        if (identifier != null && identifier.dtColumns != null && identifier.dtColumns.length > 0) {
+            colArr = colArr.filter(p => !identifier.dtColumns.map(c => c.id).includes(p.id));
+        }
+
+        return (
+            <div
+                class={cssClass}
+                onClick={(e) => {
+                    this.handleMobileRowClicked(e, row);
+                }}
+            >
+                {this.checkboxesShown && (
+                    <div class="dt-mobile-checkbox dt-selection-checkbox" data-id={this.getRowId(row)}>
+                        <CheckBox skin={CheckBoxSkin.Material} label={null} wrap={false} value={null} changed={e => this.handleRowCheckboxChanged(row, e)} />
+                    </div>
+                )}
+
+                {identifier && <div class="dt-mobile-identifier">{identifier.fullName}</div>}
+
+                {colArr.map((dtColumn, j) => (
+                    <div class={`dt-mobile-item dt-mobile-${dtColumn.id.replaceAll(':', '_').toLowerCase()}`} style={this.getTableColumnOrderStyle(dtColumn, row)}>
+                        {dtColumn.mobileRender == null && this.shouldRenderMobileRowColumn(row, dtColumn) && (
+                            <div class="dt-mobile-item-inner">
+                                {dtColumn.mobileCaption != false && <div class="dt-mobile-caption">{dtColumn.caption}</div>}
+
+                                <div class="dt-mobile-value">{dtColumn.customRender == null ? (dtColumn.customValue == null ? row[dtColumn.id] : dtColumn.customValue(row)) : dtColumn.customRender(h, row)}</div>
+                            </div>
+                        )}
+                        {dtColumn.mobileRender && dtColumn.mobileRender(h, row)}
+                    </div>
+                ))}
+
+                <i class={`${this.mobileModeRowIcon || 'icon icon-arrow-right'} dt-mobile-row-icon`}></i>
+            </div>
+        );
+    }
+
+    protected renderPagination(h) {
+        let paginationLength = 5;
+        let firstIndex = Math.max(this.paginationPosition - 2, 1);
+        let paginationEnd = firstIndex + paginationLength - 1;
+        let indexArr = [];
+
+        if (this.getPaginationLength() > -1) {
+            if (paginationEnd > this.getLastPaginationIndex()) {
+                paginationEnd = this.getLastPaginationIndex();
+                firstIndex = paginationEnd - paginationLength + 1;
+            }
+
+            if (firstIndex < 1) {
+                firstIndex = 1;
+                paginationLength = paginationEnd - firstIndex + 1;
+            }
+
+            for (let i = firstIndex, len = paginationLength; i <= paginationEnd; i++) {
+                indexArr.push(i);
+            }
+        } else {
+            indexArr = [1];
+            this.paginationPosition = 1;
+        }
+
+        return (
+            <ul class="pagination">
+                <li class="page-item">
+                    <a class="page-link" href="javascript:" aria-label="Previous" onClick={e => this.handlePaginationPositionChanged(this.paginationPosition - 1)}>
+                        <span aria-hidden="true">
+                            <i class="fa fa-angle-double-left" aria-hidden="true"></i>
+                        </span>
+                    </a>
+                </li>
+
+                {indexArr.map(pagIndex => (
+                    <li class={`page-item${pagIndex == this.paginationPosition ? ' active' : ''}`} onClick={e => this.handlePaginationPositionChanged(pagIndex)}>
+                        <a class="page-link" href="javascript:">
+                            {pagIndex}
+                        </a>
+                    </li>
+                ))}
+
+                <li class="page-item">
+                    <a class="page-link" href="javascript:" aria-label="Next" onClick={e => this.handlePaginationPositionChanged(this.paginationPosition + 1)}>
+                        <span aria-hidden="true">
+                            <i class="fa fa-angle-double-right" aria-hidden="true"></i>
+                        </span>
+                    </a>
+                </li>
+            </ul>
+        );
+    }
+
+    protected renderColumnValue(
+        h,
+        dtColumn: TableColumn,
+        row,
+    ) {
+        if (dtColumn.customRender == null) {
+            return (dtColumn.customValue == null ? row[dtColumn.id] : dtColumn.customValue(row));
+        } else {
+            return dtColumn.customRender(h, row);
+        }
+    }
 }
 
 (function () {
-	CheckboxUtils.bindTableShiftClick();
-	DropdownUtils.bindDropdownOverflowHack(
-		'.dt-root.dt-breakpoint-desktop tbody .dropdown',
-		'dataTableDropdown',
-		'dt-dropdown-button-cloned',
-		false,
-	);
+    CheckboxUtils.bindTableShiftClick();
+    DropdownUtils.bindDropdownOverflowHack(
+        '.dt-root.dt-breakpoint-desktop tbody .dropdown',
+        'dataTableDropdown',
+        'dt-dropdown-button-cloned',
+        false,
+    );
 })();
 
 const DataTable = toNative(DataTableComponent);