Developer Kit · Examples

Custom Table Look — borde, dark, fila y columna

Custom Table Look — borde, dark, fila y columna

Nueva estética por defecto de la Custom Table: borde redondeado, líneas de fila, sin líneas verticales de celda. Todo a través del mismo apartado styles, en la tabla, la fila y la columna. Sin props extra para las áreas de fila.

Sustituye Termine por tu tabla. Los campos son nombres de demo.

Cuerpo común para todas las variantes:

let current := this;
let list := select Termine;
let rows := list.[{
        recordId: Nr,
        columns: [{
                field: "status",
                title: "Status",
                value: Status,
                width: "100px",
                recordId: Nr
            }, {
                field: "termin",
                title: "Termin",
                value: format(Datum, "DD.MM.YYYY"),
                width: "120px",
                recordId: Nr
            }, {
                field: "patient",
                title: "Patient",
                value: Patient,
                width: "fraction",
                recordId: Nr
            }, {
                field: "geburtsdatum",
                title: "Geburtsdatum",
                value: format(Geburtsdatum, "DD.MM.YYYY"),
                width: "140px",
                recordId: Nr
            }]
    }];

Estilo neutro por defecto

No configures nada extra. Cabecera de 36px, radio de 12px, líneas de fila activadas, líneas de columna desactivadas.

let data := {
        uniqueListId: "termine-look-" + Nr,
        tableId: tableId("Termine"),
        height: "400px",
        embedded: false,
        header: {
            showHeader: true,
            columns: [{
                    title: "Status",
                    width: "100px"
                }, {
                    title: "Termin",
                    width: "120px"
                }, {
                    title: "Patient",
                    width: "fraction"
                }, {
                    title: "Geburtsdatum",
                    width: "140px"
                }]
        },
        table: rows,
        emptyTable: {
            title: "Keine Termine"
        }
    };
arcCustomTable(data)

Dentro de una card, sin borde exterior

La tabla se coloca en un layout. El borde viene de la card, no de la tabla.

styles: {
        borders: {
            outer: false
        }
    }

Cuadrícula clásica

Añade líneas verticales cuando las columnas se deban leer como una hoja de cálculo.

styles: {
        borders: {
            columns: true
        }
    }

Flush — sin líneas

A ras, sin borde y sin cuadrícula. Va bien en dashboards densos.

styles: {
        borders: {
            outer: false,
            columns: false,
            rows: false
        }
    }

Dark

Una superficie para la tabla (styles.backgroundColor), la cabecera a través de header.backgroundColor. La misma jerarquía que en el modo claro por defecto, solo con otros colores.

let data := {
        uniqueListId: "termine-dark-" + Nr,
        tableId: tableId("Termine"),
        height: "400px",
        embedded: false,
        styles: {
            backgroundColor: "#2a2822",
            fontColor: "#f5f0e6",
            borderRadius: "12px",
            borderColor: "#3f3c34",
            borders: {
                outer: true,
                columns: false,
                rows: {
                    color: "#3a372f"
                }
            }
        },
        rowHoverAction: {
            hoverActive: true,
            backgroundColor: "#35322a",
            fontColor: "#f5f0e6"
        },
        header: {
            showHeader: true,
            backgroundColor: "#1c1b16",
            fontColor: "#f5f0e6",
            columns: [{
                    title: "Status",
                    width: "100px"
                }, {
                    title: "Termin",
                    width: "120px"
                }, {
                    title: "Patient",
                    width: "fraction"
                }, {
                    title: "Geburtsdatum",
                    width: "140px"
                }]
        },
        table: rows,
        emptyTable: {
            title: "Keine Termine"
        }
    };
arcCustomTable(data)

Dark — sin borde exterior

Como Dark, pero a ras en una card oscura.

styles: {
        backgroundColor: "#2a2822",
        fontColor: "#f5f0e6",
        borderColor: "#3f3c34",
        borders: {
            outer: false,
            columns: false,
            rows: {
                color: "#3a372f"
            }
        }
    },
header: {
        backgroundColor: "#1c1b16",
        fontColor: "#f5f0e6"
    }

Dark — con líneas de columna

styles: {
        backgroundColor: "#2a2822",
        fontColor: "#f5f0e6",
        borderColor: "#3f3c34",
        borders: {
            outer: true,
            columns: true,
            rows: {
                color: "#3a372f"
            }
        }
    },
header: {
        backgroundColor: "#1c1b16",
        fontColor: "#f5f0e6"
    }

Una fila y una columna

El mismo apartado styles un nivel más abajo. La columna gana frente a la fila, la fila frente a la tabla.

table: list.[{
        recordId: Nr,
        styles: if Status = "Neu" then {
                backgroundColor: "#f4f4f5"
            } end,
        columns: [{
                field: "status",
                title: "Status",
                value: Status,
                width: "100px",
                recordId: Nr
            }, {
                field: "termin",
                title: "Termin",
                value: format(Datum, "DD.MM.YYYY"),
                width: "120px",
                recordId: Nr
            }, {
                field: "patient",
                title: "Patient",
                value: Patient,
                width: "fraction",
                recordId: Nr,
                styles: if Status = "Neu" then {
                        backgroundColor: "#e4e4e7",
                        fontWeight: "600"
                    } end
            }, {
                field: "geburtsdatum",
                title: "Geburtsdatum",
                value: format(Geburtsdatum, "DD.MM.YYYY"),
                width: "140px",
                recordId: Nr
            }]
    }]

rowColor se mantiene como alias antiguo. En lo nuevo, usa siempre styles.backgroundColor en el nivel correspondiente.