---
title: "Custom Table Look — borde, dark, fila y columna"
slug: "custom-table-look"
category: "Ejemplos"
hosts: "ninox"
locale: "es"
reactExampleKind: "recipe"
reactExample: "recipe-table-look.tsx"
---

# 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:

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
styles: {
        borders: {
            columns: true
        }
    }
```

## Flush — sin líneas

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

```javascript
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.

```javascript
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.

```javascript
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

```javascript
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.

```javascript
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.