---
title: "Vista de dashboard con Grid"
slug: "dashboardansicht-mit-grid"
category: "Ejemplos"
hosts: "ninox"
locale: "es"
reactExampleKind: "recipe"
reactExample: "recipe-dashboard.tsx"
---

# Vista de dashboard con Grid

# Dashboards repensados: layout Grid en Ninox

Con el widget `arcCustomGrid` puedes diseñar dashboards y páginas de resumen personalizados en un layout [Grid](/documentation/custom-grid) flexible.

Combina cualquier widget, texto o bloque de [Layout](/documentation/custom-layout) y posiciónalos con precisión de píxel, tanto para el cockpit interno como para vistas de cliente externas.

El siguiente ejemplo muestra una configuración de dashboard sencilla con tres columnas y varias [Cards](/documentation/cards), textos e [Icons](/documentation/custom-icon):

<iframe src="https://www.youtube.com/embed/Ea8r5bi_oJM?iv_load_policy=3&rel=0&modestbranding=1&playsinline=1&autoplay=1&mute=1&loop=1&playlist=Ea8r5bi_oJM" data-thumbnail="Medium Quality" frameborder="0" allow="presentation; fullscreen; accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>## Código de aplicación del ejemplo


```javascript
let current := this;
arcCustomLayout({
        uniqueId: Nr,
        embedded: false,
        fullscreen: true,
        direction: "horizontal",
        alignX: "center",
        alignY: "center",
        width: "",
        height: "700px",
        gap: "50px",
        backgroundColor: "#000000",
        paddingY: "30px",
        paddingX: "30px",
        blocks: [{
                width: "",
                height: "100%",
                lineHeight: "",
                alignX: "left",
                color: "",
                styles: "    overflow-y: scroll;",
                value: arcCustomGrid({
                        uniqueId: "",
                        width: "100%",
                        height: "100%",
                        columns: "auto-fit",
                        columnWidth: "250px",
                        gap: "10px",
                        paddingY: "20px",
                        paddingX: "20px",
                        styles: "/*grid-template-columns: repeat(auto-fit, 1fr);*/",
                        blocks: [{
                                blockId: "",
                                width: "",
                                height: "100%",
                                alignX: "center",
                                alignY: "center",
                                paddingY: "",
                                paddingX: "",
                                backgroundColor: "",
                                lineHeight: "",
                                styles: "overflow-y: scroll;",
                                value: arcCustomGrid({
                                        uniqueId: "Dashboard Grid",
                                        styles: "",
                                        width: "100%",
                                        height: "100%",
                                        columns: "auto-fill",
                                        columnWidth: "200px",
                                        gap: "10px",
                                        paddingY: "",
                                        paddingX: "",
                                        blocks: [{
                                                blockId: "--------- GRID BLOCK 1 ----------",
                                                alignX: "center",
                                                alignY: "right",
                                                height: "100%",
                                                width: "100%",
                                                clickAction: {
                                                    type: "fullscreen",
                                                    recordId: current.Nr
                                                },
                                                value: arcCustomCard({
                                                        uniqueId: "Card 1",
                                                        backgroundColor: "#fff",
                                                        width: "100%",
                                                        height: "100%",
                                                        borderRadius: "10px",
                                                        icon: arcCustomIcon({
                                                                name: "clipboard-text",
                                                                containerSize: "50px",
                                                                borderSize: "1px",
                                                                borderColor: "",
                                                                iconSize: "25px",
                                                                borderRadius: "50px",
                                                                color: "#FF7403",
                                                                backgroundColor: "#FEEFC4"
                                                            }),
                                                        title: "Aufgaben",
                                                        value: "Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text"
                                                    })
                                            }, {
                                                blockId: "--------- GRID BLOCK 2 ----------",
                                                alignX: "center",
                                                alignY: "right",
                                                height: "100%",
                                                width: "100%",
                                                value: arcCustomCard({
                                                        uniqueId: "Card 2",
                                                        backgroundColor: "#fff",
                                                        width: "100%",
                                                        height: "100%",
                                                        borderRadius: "10px",
                                                        icon: arcCustomIcon({
                                                                name: "users",
                                                                containerSize: "50px",
                                                                borderSize: "1px",
                                                                borderColor: "",
                                                                iconSize: "25px",
                                                                borderRadius: "50px",
                                                                color: "#C637E4",
                                                                backgroundColor: "#FAE6FF"
                                                            }),
                                                        title: "Mitarbeiter",
                                                        value: "Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text"
                                                    })
                                            }, {
                                                blockId: "--------- GRID BLOCK 3 ----------",
                                                alignX: "center",
                                                alignY: "right",
                                                height: "100%",
                                                width: "100%",
                                                value: arcCustomCard({
                                                        uniqueId: "Card 3",
                                                        backgroundColor: "#fff",
                                                        width: "100%",
                                                        height: "100%",
                                                        borderRadius: "10px",
                                                        icon: arcCustomIcon({
                                                                name: "folder",
                                                                containerSize: "50px",
                                                                borderSize: "1px",
                                                                borderColor: "",
                                                                iconSize: "25px",
                                                                borderRadius: "50px",
                                                                color: "#42B000",
                                                                backgroundColor: "#DEFCCB"
                                                            }),
                                                        title: "Buchhaltung",
                                                        value: "Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text"
                                                    })
                                            }, {
                                                blockId: "--------- GRID BLOCK 4 ----------",
                                                alignX: "center",
                                                alignY: "right",
                                                height: "100%",
                                                width: "100%",
                                                value: arcCustomCard({
                                                        uniqueId: "Card 4",
                                                        backgroundColor: "#fff",
                                                        width: "100%",
                                                        height: "100%",
                                                        borderRadius: "10px",
                                                        icon: arcCustomIcon({
                                                                name: "clock",
                                                                containerSize: "50px",
                                                                borderSize: "1px",
                                                                borderColor: "",
                                                                iconSize: "25px",
                                                                borderRadius: "50px",
                                                                color: "#944810",
                                                                backgroundColor: "#ECD8C8"
                                                            }),
                                                        title: "Zeiterfassung",
                                                        value: "Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text"
                                                    })
                                            }, {
                                                blockId: "--------- GRID BLOCK 5 ----------",
                                                alignX: "center",
                                                alignY: "right",
                                                height: "100%",
                                                width: "100%",
                                                value: arcCustomCard({
                                                        uniqueId: "Card 5",
                                                        backgroundColor: "#fff",
                                                        width: "100%",
                                                        height: "100%",
                                                        borderRadius: "10px",
                                                        icon: arcCustomIcon({
                                                                name: "buildings",
                                                                containerSize: "50px",
                                                                borderSize: "1px",
                                                                borderColor: "",
                                                                iconSize: "25px",
                                                                borderRadius: "50px",
                                                                color: "#E80102",
                                                                backgroundColor: "#FFEDEC"
                                                            }),
                                                        title: "Kunden",
                                                        value: "Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text"
                                                    })
                                            }, {
                                                blockId: "--------- GRID BLOCK 6 ----------",
                                                alignX: "center",
                                                alignY: "right",
                                                height: "100%",
                                                width: "100%",
                                                value: arcCustomCard({
                                                        uniqueId: "Card 6",
                                                        backgroundColor: "#fff",
                                                        width: "100%",
                                                        height: "100%",
                                                        borderRadius: "10px",
                                                        icon: arcCustomIcon({
                                                                name: "file",
                                                                containerSize: "50px",
                                                                borderSize: "1px",
                                                                borderColor: "",
                                                                iconSize: "25px",
                                                                borderRadius: "50px",
                                                                color: "#028BFF",
                                                                backgroundColor: "#E1F1FF"
                                                            }),
                                                        title: "Dokumente",
                                                        value: "Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text"
                                                    })
                                            }]
                                    })
                            }, {
                                blockId: "",
                                width: "",
                                height: "100%",
                                alignX: "center",
                                alignY: "center",
                                paddingY: "",
                                paddingX: "",
                                backgroundColor: "",
                                lineHeight: "",
                                styles: "",
                                value: arcCustomCard({
                                        uniqueId: "Card 6",
                                        backgroundColor: "#fff",
                                        width: "100%",
                                        height: "100%",
                                        borderRadius: "10px",
                                        icon: arcCustomIcon({
                                                name: "kanban",
                                                containerSize: "50px",
                                                borderSize: "1px",
                                                borderColor: "",
                                                iconSize: "25px",
                                                borderRadius: "50px",
                                                color: "#028BFF",
                                                backgroundColor: "#E1F1FF"
                                            }),
                                        title: "Projekte",
                                        value: "I'm baby pitchfork williamsburg twee asymmetrical direct trade, fam blue bottle kombucha slow-carb franzen. Poke gochujang pop-up meditation. Waistcoat vinyl vice small batch photo booth migas iPhone pug kale chips jean shorts poutine. Intelligentsia dreamcatcher plaid, prism fashion axe kale chips typewriter marxism wayfarers enamel pin readymade chia. Pok pok mixtape everyday carry cupping, poke slow-carb skateboard."
                                    })
                            }]
                    })
            }]
    })
```