let dash := this;
let baseId := "SortableTable_";
let rowHeight := "40px";
let itemHeight := "30px";
let sortBy := Sortierung;
let sortDesc := Absteigend;
function sortableColumnHeader(columnTitle : text,fieldName : text) do
	"Adding a button to the header cell, that writes the actual sort request to helper fields";
	arcCustomLayout({
			uniqueId: baseId + "ColumnHeader_" + columnTitle,
			embedded: true,
			fullscreen: false,
			direction: "horizontal",
			gap: "1px",
			blocks: [{
					height: "auto",
					alignX: "left",
					value: columnTitle
				}, {
					width: "20px",
					height: "auto",
					alignX: "right",
					value: arcCustomButton({
							uniqueId: baseId + "HeaderButton_" + columnTitle,
							embedded: true,
							icon: GIPMaterialSymbolsV2({
									weight: 400,
									filling: 1,
									icon: "swap_vert",
									color: "#3381ff"
								}),
							iconPosition: "center",
							gap: "1px",
							showBadge: false,
							actions: [{
									recordId: dash.Nr,
									type: "update",
									field: "A",
									value: fieldName
								}, {
									recordId: dash.Nr,
									type: "update",
									field: "B",
									value: sortBy = fieldName and not sortDesc
								}]
						})
				}]
		})
end;
function getSortedList(fieldName : text) do
	"Get the sorted list according sort settings";
	let list := if fieldName != null then
			(select Kontakte) order by get(this, fieldName)
		else
			select Kontakte
		end;
	if sortDesc then
		for i in range(cnt(list), 0, -1) do
			item(list, i - 1)
		end
	else
		list
	end
end;
let list := getSortedList(dash.Sortierung);
let data := {
		uniqueListId: baseId,
		tableId: tableId(first(list)),
		height: "500px",
		header: {
			showHeader: true,
			height: rowHeight
		},
		maxHeight: "800px",
		borderColor: "black",
		minHeight: "500px",
		groupedBy: "",
		popupButtonTitle: "Open",
		scrollBar: {
			showScrollBar: true,
			width: "5px",
			height: "5px",
			backgroundColor: "",
			handle: {
				height: "5px",
				borderRadius: "",
				backgroundColor: ""
			}
		},
		table: list.[{
				recordId: Nr,
				rowHeight: "40px",
				columns: [{
						field: "Vorname",
						title: sortableColumnHeader("Vorname", "Vorname"),
						value: Vorname,
						width: "220px",
						actions: [{
								type: "popup",
								showPopupButton: false,
								recordId: Nr
							}]
					}, {
						field: "Nachname",
						title: sortableColumnHeader("Nachname", "Nachname"),
						value: Nachname,
						width: "220px",
						actions: [{
								type: "popup",
								showPopupButton: false,
								recordId: Nr
							}]
					}, {
						field: "Straße",
						title: sortableColumnHeader("Straße", "Straße"),
						value: 'Straße',
						width: "220px",
						actions: [{
								type: "popup",
								showPopupButton: false,
								recordId: Nr
							}]
					}, {
						field: "PLZ",
						title: sortableColumnHeader("PLZ", "PLZ"),
						value: PLZ,
						width: "220px",
						actions: [{
								type: "popup",
								showPopupButton: false,
								recordId: Nr
							}]
					}, {
						field: "Ort",
						title: sortableColumnHeader("Ort", "Ort"),
						value: Ort,
						width: "220px",
						actions: [{
								type: "popup",
								showPopupButton: false,
								recordId: Nr
							}]
					}, {
						field: "Telefon",
						title: "Telefon",
						value: Telefon,
						width: "220px",
						actions: [{
								type: "popup",
								showPopupButton: false,
								recordId: Nr
							}]
					}, {
						field: "E-Mail",
						title: "E-Mail",
						value: 'E-Mail',
						width: "",
						actions: [{
								type: "popup",
								showPopupButton: false,
								recordId: Nr
							}]
					}]
			}]
	};
arcCustomTable(data)