Themes

Theme: Naked

1.0.1

Theme "Naked"

Gestalte deine Tabelle individuell: Das Theme "Naked" im Widget Custom Table

Das Theme Naked bietet dir die Möglichkeit, deine Tabelle in einem völlig neuen Design zu präsentieren. Mit diesem Theme kannst du auf klassische Elemente wie Rahmenlinien, Header oder Footer verzichten und so ein minimalistisches Erscheinungsbild schaffen. Perfekt für alle, die ihre Daten auf das Wesentliche reduziert und stilvoll präsentieren möchten.

Was macht das Theme "Naked" besonders?

Die Funktionalität bleibt trotz des minimalistischen Designs vollständig erhalten – Hover-Aktionen oder Click-Actions beispielsweise funktionieren wie gewohnt. Zusätzlich kannst du Zwischenabstände (gap) individuell anpassen, sowohl zwischen den einzelnen Zeilen (rows) als auch den Spalten (columns). Das verleiht deiner Tabelle nicht nur Struktur, sondern sorgt auch für ein aufgeräumtes und modernes Layout.

So wendest du das Theme an

Um das Theme "Naked" in deiner Custom Table zu nutzen, fügst du folgenden Anwendungscode hinter dem Paramter theme ein:

Anwendungscode

arcCustomThemeNaked({
				uniqueId: "Beispiel Termine " + Nr,
				rowSettings: {
					gap: "10px"
				},
				columnSettings: {
					gap: "40px"
				}
			}),

Beispiel

Im folgenden Beispiel siehst du den Anwendungscode des oben dargestellten Bildes. Dieser umfasst eine Custom Table, die Termine von Mitarbeitern darstellt. Hier sind sowohl Header als auch Footer ausgeblendet. Durch das Theme sind keinerlei Rahmenlinien in der Tabelle zu sehen und die einzelnen Zeilen sind durch ein gap von 10px getrennt.

let current := this;
let list := (select Termine from 0 to 30);
let data := {
		uniqueListId: "Aufgaben Demo 1",
		tableId: tableId(first(list)),
		height: "620px",
		width: "100px",
		groupedBy: "",
		header: {
			showHeader: false
		},
		theme: arcCustomThemeNaked({
				uniqueId: "Termine Demo 1",
				rowSettings: {
					gap: "10px"
				},
				columnSettings: {
					gap: "10px"
				}
			}),
		embedded: false,
		table: list.[{
				recordId: Nr,
				rowColor: "#ededed",
				rowHeight: "auto",
				rowPaddingY: "10px",
				groupRowColor: "",
				columns: [{
						field: "Kategorie Icon",
						title: "",
						width: "35px",
						color: "",
						backgroundColor: "",
						align: "left",
						paddingX: "",
						paddingY: "",
						value: arcCustomIcon({
								iconSet: "phosphor",
								name: "circle-fill",
								iconSize: "25px",
								color: record('Kategorie Aufgabe',number(Kategorie)).Farbe
							}),
						actions: [{
								type: "popup",
								showPopupButton: false,
								recordId: Nr
							}]
					}, {
						field: "Feldname für Feld-ID",
						title: "",
						color: "",
						backgroundColor: "",
						width: "",
						align: "left",
						paddingX: "",
						paddingY: "",
						value: arcCustomLayout({
								comment: "---------------------------------- LAYOUT TITEL UND KATEGORIE ----------------------------------",
								uniqueId: "Titel und Kategorie " + Nr,
								embedded: true,
								direction: "vertical",
								alignX: "left",
								alignY: "center",
								width: "100%",
								height: "",
								gap: "2px",
								scrollSettings: {
									scrollY: false,
									scrollX: false
								},
								blocks: [{
										width: "",
										height: "auto",
										lineHeight: "",
										alignX: "left",
										color: "",
										styles: "",
										value: arcCustomText({
												uniqueId: "Bezeichnung " + Nr,
												fontSize: "13px",
												fontWeight: "600",
												fontColor: "",
												value: Auftrag.last(Aufgaben.Aufgabe)
											})
									}, {
										width: "",
										height: "auto",
										lineHeight: "",
										alignX: "left",
										color: "",
										value: arcCustomText({
												uniqueId: "Bezeichnung " + Nr,
												fontSize: "13px",
												fontWeight: "",
												fontColor: "#9aa3af",
												value: text(Kategorie)
											})
									}]
							}),
						actions: [{
								type: "popup",
								showPopupButton: false,
								recordId: Nr
							}]
					}, {
						field: "",
						title: "",
						width: "",
						color: "",
						backgroundColor: "",
						align: "left",
						paddingX: "",
						paddingY: "",
						value: arcCustomLayout({
								comment: "---------------------------------- LAYOUT UHRZEIT & DATUM ----------------------------------",
								uniqueId: "Datum und Uhrzeit " + Nr,
								embedded: true,
								fullscreen: false,
								ninoxVersion: "",
								page: true,
								fullscreenMode: "",
								showAdminTools: true,
								hideHeaderIcons: true,
								direction: "horizontal",
								alignX: "left",
								alignY: "center",
								width: "",
								height: "",
								gap: "10px",
								backgroundColor: "",
								paddingY: "",
								paddingX: "",
								styles: "",
								scrollSettings: {
									scrollY: false,
									scrollX: false
								},
								blocks: [{
										width: "auto",
										height: "auto",
										lineHeight: "",
										alignX: "left",
										color: "",
										styles: "",
										value: arcCustomIcon({
												iconSet: "phosphor",
												name: "clock",
												iconSize: "25px",
												color: "#9aa3af"
											})
									}, {
										width: "fraction",
										height: "auto",
										lineHeight: "",
										alignX: "left",
										color: "",
										value: arcCustomText({
												uniqueId: "Bezeichnung " + Nr,
												fontSize: "13px",
												fontWeight: "600",
												fontColor: "#9aa3af",
												value: 'Datum von' + ", " + Von + " - " + Bis
											})
									}]
							}),
						actions: [{
								type: "popup",
								showPopupButton: false,
								recordId: Nr
							}]
					}, {
						field: "Mitarbeiter",
						title: "",
						width: "",
						color: "",
						backgroundColor: "",
						align: "left",
						paddingX: "",
						paddingY: "",
						value: Mitarbeiter.'Bild-und_Name',
						actions: [{
								type: "popup",
								showPopupButton: false,
								recordId: Nr
							}]
					}]
			}],
		footer: {
			showFooter: false
		}
	};
arcCustomTable(data)