Themes

Theme: Naked

1.0.1

Order widget

Theme "Naked"

Customize your table: The "Naked" theme in the Custom Table widget

The Naked theme offers you the possibility to present your table in a completely new design. With this theme, you can do without classic elements like borders, headers, or footers, thereby creating a minimalist appearance. Perfect for anyone who wants to present their data reduced to the essentials and in a stylish way.

What makes the "Naked" theme special?

The functionality remains fully intact despite the minimalist design – hover actions or click actions, for example, work as usual. Additionally, you can individually adjust the gaps between the rows and columns. This not only gives your table structure but also ensures a tidy and modern layout.

How to apply the theme

To use the "Naked" theme in your Custom Table, you insert the following application code after the parameter theme:

Important: The uniqueId of the theme must be the same as the uniqueListId of the table in which the theme is used!

Application code

arcCustomThemeNaked({
				uniqueId: "Aufgaben Demo 1" + Nr,
				rowSettings: {
					gap: "10px",
                    borderRadius: ""
				},
				columnSettings: {
					gap: "40px"
				}
			}),

Example

In the following example, you can see the application code of the image shown above. This includes a Custom Table that displays appointments of employees. Both the header and footer are hidden. Due to the theme, there are no borders visible in the table, and the individual rows are separated by a gap of 10px.

let current := this;
let list := (select Termine from 0 to 30);
let data := {
		uniqueListId: "Aufgaben Demo 1" + Nr,
		tableId: tableId(first(list)),
		height: "620px",
		width: "100px",
		groupedBy: "",
		header: {
			showHeader: false
		},
		theme: arcCustomThemeNaked({
				uniqueId: "Aufgaben Demo 1" + Nr,
				rowSettings: {
					gap: "10px"
				},
				columnSettings: {
					gap: "10px"
				},
                borderRadius: ""
			}),
		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)