Examples
Sorting within a table

Widget bestellen
Sorting within a Table

In this guest post by Fox Concepts, Christoph shows you how to easily integrate sorting into the Custom Table. Determine for yourself which columns can be sorted and by what.
Application Code

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)