--- title: "Custom Table con Mini Widgets" slug: "custom-table-mit-mini-widgets" category: "Ejemplos" hosts: "ninox" locale: "es" reactExampleKind: "recipe" reactExample: "recipe-orders.tsx" --- # Custom Table con Mini Widgets # Más claridad en las tablas: Mini Widgets directamente en la Custom Table ![](https://framerusercontent.com/images/Gipfc03JpgpGTPrqL4RJ0ONktE.png) En este artículo os mostramos un ejemplo práctico y complejo de una **Custom Table** que hace vuestra **gestión de tareas en Ninox** mucho más clara e interactiva. La tabla agrupa las tareas por pedidos y combina funciones potentes con una presentación moderna. Gracias a los **Mini Widgets** integrados —entre ellos [Checkbox](/documentation/check-box), [Input](/documentation/input), [Progress Bar](/documentation/progress-bar), [Button](/documentation/buttons), [Select](/documentation/select), [Icon](/documentation/custom-icon) y [Pagination](/documentation/pagination)— podéis manejar la tabla directamente, sin salir de la vista. Ideal para quienes quieren combinar eficiencia y usabilidad en sus flujos de trabajo. ## Gestión de tareas simplificada Con nuestra Custom Table gestionáis las tareas de forma tan simple y eficiente como nunca. Gracias a la agrupación por pedidos mantenéis siempre la visión de conjunto, y esto es solo el principio. ## ✅ Marcar tareas como hechas, fácilmente Con el [Checkbox](/documentation/check-box) integrado marcáis las tareas completadas directamente en la tabla. Un feedback visual os muestra al instante lo que ya está hecho. ## 📝 Editar descripciones directamente En la columna «Descripción» encontráis [campos de entrada](/documentation/input) multilínea. Con ellos podéis editar las tareas directamente, sin clics adicionales ni tener que abrir cada registro. ## 📅 Ajustar fechas rápidamente Con el campo de fecha integrado actualizáis los vencimientos en un momento. Solo hay que elegir la nueva fecha y listo. ## 📊 El progreso, siempre a la vista La [ProgressBar](/documentation/progress-bar) integrada muestra de un vistazo hasta dónde habéis llegado con las tareas, con visualización en color y siempre actualizada. ## ➕ Añadir subtareas directamente Con el [Button](/documentation/buttons) creáis nuevas subtareas en un popup de Ninox. Así las tareas se pueden refinar y estructurar con flexibilidad. ## 🔄 Cambiar el estado fácilmente Un menú [desplegable](/documentation/select) permite cambiar directamente el estado de la tarea, de forma rápida, intuitiva y sin desvíos. ## 🗑️ Ordenar, fácil Un clic en el [icono de eliminar](/user/account/icons) quita las tareas sobrantes directamente de la tabla. Rápido, eficiente y sin pasos extra. ## 🎨 Vista en color La función dinámica groupRowColor colorea automáticamente las filas según el progreso, para una claridad y visión de conjunto máximas. ### ⚙️ Seguid usando vuestras automatizaciones Los widgets no interfieren en vuestra estructura de datos: podéis seguir usando todas las automatizaciones habituales en Ninox. Por ejemplo: establecer automáticamente la fecha en `today()` al completar una tarea, todo controlable mediante «Trigger tras cambio». ## Conclusión Con esta **Custom Table** llevas la gestión de tareas a un nuevo nivel. Mini Widgets interactivos como Checkbox, Input, Progress Bar, Button, Select, Icon y Pagination convierten vuestra tabla en un elemento de interfaz potente. 🚀 **Eficiencia y claridad, directamente en Ninox.** ## Código de la aplicación del ejemplo ```javascript let current := this; let list := (flteredList_Aufgaben[cnt(Auftrag.Aufgaben) > 5] order by cnt(Auftrag.Aufgaben)); //Ihr könnt euch Listen in extra Formel-Feldern vorfiltern, damit der Code nicht so lang wird let maxEntries := 'Einträge pro Seite'; // Hilfsfeld Zahl let currentPage := 'Aktuelle Seite'; // Hilfsfeld Zahl let paginatedList := unique(record(Aufgaben,0))[!= 0]; for listItem in slice(list.Nr, maxEntries * (currentPage - 1), maxEntries * currentPage) do paginatedList := unique(paginatedList, record(Aufgaben,listItem)) end; let data := { uniqueListId: "Aufgaben Demo 1", tableId: tableId(first(list)), height: "600px", width: "100px", groupedBy: "Aufgabe", groupsCollapsed: false, embedded: false, table: paginatedList.[{ recordId: Nr, rowColor: "", rowHeight: "auto", rowPaddingY: "10px", groupRowColor: let currentRecord := Nr; if cnt(list[Checkliste.Nr = currentRecord.Checkliste.Nr and Erledigt = true]) = cnt(list[Checkliste.Nr = currentRecord.Checkliste.Nr]) then "#dcf2de" else "#eee" end, columns: [{ field: "Erledigt", title: arcCheckBox({ value: if cnt(list[Erledigt = true]) != cnt(list) then false else if cnt(list[Erledigt = null]) = cnt(list) then null else if cnt(list[Erledigt = true]) = cnt(list) then true end end end }), value: arcCheckBox({ value: Erledigt }), width: "40px", align: "center", fixed: "left", actions: [{ recordId: Nr, type: "update", field: "G", value: if Erledigt = true then null else true end, headerAction: true }], groupValue: arcCustomIcon({ name: "caret-circle-double-down-fill" }) }, { field: "Aufgabe", title: "Aufgabe", width: "", value: replace(Aufgabe, ">", "❯"), actions: [{ recordId: Nr, type: "popup", showPopupButton: true }], groupValue: html("**" + Auftrag.Titel + "**"), groupByValue: Auftrag.Nr }, { field: "'Erledigt am'", title: "Beschreibung", value: arcCustomInput({ uniqueId: "Mein-Textarea-" + Nr, recordId: Nr, fieldId: "B", title: Beschreibung, value: Beschreibung, type: "textarea", embedded: true, disabled: false, width: "", height: "auto", minHeight: "40px", fontColor: "", fontSize: "", fontWeight: "", backgroundColor: "", borderWidth: "", borderColor: "", borderRadius: "", placeholderSettings: { value: "Beschreibe die Aufgabe..." }, focusAction: { width: "", showFocusOutline: "", outlineWidth: "", outlineColor: "" }, alignX: "left", paddingX: "" }), align: "left", width: "280px" }, { field: "'Erledigt am'", title: "Erledigt am", value: arcCustomInput({ uniqueId: "Mein-Input-" + Nr, recordId: Nr, fieldId: "A1", value: Startdatum, type: "date", embedded: true, disabled: false, width: "", height: "", fontColor: "", fontSize: "", fontWeight: "", backgroundColor: "#fff6d8", borderWidth: "", borderColor: "", borderRadius: "", placeholderSettings: { value: "Datum eintragen", fontColor: "#e9595c", backgroundColor: "#fff7f7" }, focusAction: { width: "", showFocusOutline: "", outlineWidth: "", outlineColor: "" }, alignX: "left", paddingX: "" }), align: "left", width: "180px" }, { field: "Aufgaben", title: "Aufgaben", value: arcCustomProgressBar({ uniqueId: "", width: "", fontSize: "", fontColor: "", backgroundColor: "", progressColor: "", valueTotal: cnt(Unteraufgaben), valueProgress: cnt(Unteraufgaben[Erledigt = true]), valueText: cnt(Unteraufgaben[Erledigt = true]) + "/" + cnt(Unteraufgaben) }), align: "left", width: "150px", groupValue: arcCustomProgressBar({ uniqueId: "Erledigte Aufgaben", title: "", width: "", fontSize: "", fontColor: "", backgroundColor: "#fff", progressColor: "", valueTotal: cnt(Auftrag.Aufgaben), valueProgress: cnt(Auftrag.Aufgaben[Erledigt = true]), valueText: cnt(Auftrag.Aufgaben[Erledigt = true]) + "/" + cnt(Auftrag.Aufgaben) }) }, { field: "", title: "", value: arcCustomButton({ uniqueId: "Unteraufgabe erstellen" + Nr, title: "Unteraufgabe", width: "100%", icon: arcCustomIcon({ name: "plus-bold", color: "#0062AA" }), fontSize: "", fontColor: "#0062AA", iconColor: "#0062AA", backgroundColor: "#0062AA33", borderColor: "#0062AA", borderRadius: "50px", showBadge: false, badgeTitle: cnt(Unteraufgaben), badgeColor: "", badgeBackground: "", badgeBorderColor: "", badgePosition: "", hoverActions: { fontColor: "#ffffff", iconColor: "#ffffff", backgroundColor: "#0062AA", borderColor: "#0062AA", animation: "0.5s" }, actions: [{ type: "create", tableId: "B", popup: true, changeFieldValues: [{ fieldId: "S", value: number(Nr) }] }] }), align: "left", width: "180px" }, { field: "Status", title: "Status", value: arcCustomSelect({ uniqueId: "Status" + Nr, currentValue: text(Status), recordId: Nr, field: "Q", width: "100%", height: "30px", fontSize: "10px", placeholder: "Status wählen", emptyValue: "Zurücksetzen", items: let id := Nr; (select Status_Aufgabe).[{ title: Bezeichnung, active: number(id.Status) = number(Nr), value: number(Nr) }] }), align: "right", width: "150px" }, { field: "delete", title: arcCustomIcon({ name: "trash" }), width: "40px", align: "center", value: arcCustomIcon({ name: "trash" }), actions: [{ recordId: Nr, type: "delete" }] }] }], footer: { showFooter: true, showActionButton: false, actionButtonTitle: "Neue Aufgabe hinzufügen", leftSideContent: arcCustomButton({ uniqueId: "Button popUp" + Nr, title: "Neue Checkliste hinzufügen", width: "", icon: arcCustomIcon({ name: "plus-bold", color: "#0062AA" }), fontSize: "", fontColor: "#0062AA", iconColor: "#0062AA", backgroundColor: "#0062AA33", borderColor: "#0062AA", borderRadius: "50px", showBadge: false, badgeTitle: "", badgeColor: "", badgeBackground: "", badgeBorderColor: "", badgePosition: "", hoverActions: { fontColor: "#ffffff", iconColor: "#ffffff", backgroundColor: "#0062AA", borderColor: "#0062AA", animation: "0.8s" }, actions: [{ type: "create", tableId: "C", popup: true, changeFieldValues: [{ fieldId: "", value: "" }, { fieldId: "", value: "" }] }] }), rightSideContent: arcCustomPagination({ uniqueId: Nr, editable: true, recordId: current.Nr, fieldId: "P", direction: "horizontal", title: current.'Aktuelle Seite', value: current.'Aktuelle Seite', total: ceil(cnt(list) / maxEntries), totalPrefix: " von " }) } }; arcCustomTable(data) ```