---
title: "Ordenación dentro de una tabla"
slug: "sortierung-innerhalb-einer-table"
category: "Ejemplos"
hosts: "ninox"
locale: "es"
reactExampleKind: "recipe"
reactExample: "recipe-sort.tsx"
---

# Ordenación dentro de una tabla

# Ordenación dentro de una tabla

<iframe src="https://www.youtube.com/embed/t6vpRoe8i8A?iv_load_policy=3&rel=0&modestbranding=1&playsinline=1&autoplay=1&mute=1&loop=1&playlist=t6vpRoe8i8A" data-thumbnail="Medium Quality" frameborder="0" allow="presentation; fullscreen; accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>En este artículo invitado de Fox Concepts, Christoph te muestra cómo integrar fácilmente una ordenación en la Custom Table. Decide tú mismo en qué columnas y por qué se puede ordenar.

## Código de aplicación


```javascript
let dash := this;
let baseId := "SortableTable_";
let rowHeight := "40px";
let itemHeight := "30px";
let sortBy := Sortierung;
let sortDesc := Absteigend;
function sortableColumnHeader(columnTitle : text,fieldName : text) do
    "Adding a button to the header cell, that writes the actual sort request to helper fields";
    arcCustomLayout({
            uniqueId: baseId + "ColumnHeader_" + columnTitle,
            embedded: true,
            fullscreen: false,
            direction: "horizontal",
            gap: "1px",
            blocks: [{
                    height: "auto",
                    alignX: "left",
                    value: columnTitle
                }, {
                    width: "20px",
                    height: "auto",
                    alignX: "right",
                    value: arcCustomButton({
                            uniqueId: baseId + "HeaderButton_" + columnTitle,
                            embedded: true,
                            icon: GIPMaterialSymbolsV2({
                                    weight: 400,
                                    filling: 1,
                                    icon: "swap_vert",
                                    color: "#3381ff"
                                }),
                            iconPosition: "center",
                            gap: "1px",
                            showBadge: false,
                            actions: [{
                                    recordId: dash.Nr,
                                    type: "update",
                                    field: "A",
                                    value: fieldName
                                }, {
                                    recordId: dash.Nr,
                                    type: "update",
                                    field: "B",
                                    value: sortBy = fieldName and not sortDesc
                                }]
                        })
                }]
        })
end;
function getSortedList(fieldName : text) do
    "Get the sorted list according sort settings";
    let list := if fieldName != null then
            (select Kontakte) order by get(this, fieldName)
        else
            select Kontakte
        end;
    if sortDesc then
        for i in range(cnt(list), 0, -1) do
            item(list, i - 1)
        end
    else
        list
    end
end;
let list := getSortedList(dash.Sortierung);
let data := {
        uniqueListId: baseId,
        tableId: tableId(first(list)),
        height: "500px",
        header: {
            showHeader: true,
            height: rowHeight
        },
        maxHeight: "800px",
        borderColor: "black",
        minHeight: "500px",
        groupedBy: "",
        popupButtonTitle: "Open",
        scrollBar: {
            showScrollBar: true,
            width: "5px",
            height: "5px",
            backgroundColor: "",
            handle: {
                height: "5px",
                borderRadius: "",
                backgroundColor: ""
            }
        },
        table: list.[{
                recordId: Nr,
                rowHeight: "40px",
                columns: [{
                        field: "Vorname",
                        title: sortableColumnHeader("Vorname", "Vorname"),
                        value: Vorname,
                        width: "220px",
                        actions: [{
                                type: "popup",
                                showPopupButton: false,
                                recordId: Nr
                            }]
                    }, {
                        field: "Nachname",
                        title: sortableColumnHeader("Nachname", "Nachname"),
                        value: Nachname,
                        width: "220px",
                        actions: [{
                                type: "popup",
                                showPopupButton: false,
                                recordId: Nr
                            }]
                    }, {
                        field: "Straße",
                        title: sortableColumnHeader("Straße", "Straße"),
                        value: 'Straße',
                        width: "220px",
                        actions: [{
                                type: "popup",
                                showPopupButton: false,
                                recordId: Nr
                            }]
                    }, {
                        field: "PLZ",
                        title: sortableColumnHeader("PLZ", "PLZ"),
                        value: PLZ,
                        width: "220px",
                        actions: [{
                                type: "popup",
                                showPopupButton: false,
                                recordId: Nr
                            }]
                    }, {
                        field: "Ort",
                        title: sortableColumnHeader("Ort", "Ort"),
                        value: Ort,
                        width: "220px",
                        actions: [{
                                type: "popup",
                                showPopupButton: false,
                                recordId: Nr
                            }]
                    }, {
                        field: "Telefon",
                        title: "Telefon",
                        value: Telefon,
                        width: "220px",
                        actions: [{
                                type: "popup",
                                showPopupButton: false,
                                recordId: Nr
                            }]
                    }, {
                        field: "E-Mail",
                        title: "E-Mail",
                        value: 'E-Mail',
                        width: "",
                        actions: [{
                                type: "popup",
                                showPopupButton: false,
                                recordId: Nr
                            }]
                    }]
            }]
    };
arcCustomTable(data)
```