Zum Hauptinhalt springen

Optionen

MultiTable Optionen​

rows Object[]​

Ein Array mit Zeilen, die angezeigt werden sollen.

rows?: Object[]

  • Default: null
rows: [{
        id: "1"
    },
    {
        id: "2"
    }
]

columns MultiTableColumns​

columns?: { column: MultiTableColumn }

Enthält die Spaltendefinition für die MultiTable.

  • Default: null
  • Optional

Weitere Konfigurationsmöglichkeit siehe MultiTableColumn.

columns: {
    article: "de:Artikel;en:Article",
    amount: {
        label: "de:Netto;en:net",
        type: "currency",
    },
    tax: {
        label: "de:Mwst.;en:tax",
        type: "currency"
    }
}
tipp

Wird keine Spaltendefinition angegeben, werden diese aus den Zeilen generiert.

select boolean​

(Optional) Aktiviert die Auswahlmöglichkeit.

select?: boolean

  • Default: true
  • Optional
select: false

multiSelect boolean​

(Optional) Aktiviert die Multiauswahl.

multiSelect?: boolean

  • Default: false
  • Optional
multiSelect: false

multiSelectBehavior string​

(Optional) Wie soll die Checkbox Alle markieren verhalten?

multiSelectBehavior?: "" | "filter" | "paged"

  • Default: ``
  • Mögliche Werte:

`` : Leer - Alle Zeilen werden markiert
filter : Es werden alle gefilterten Zeilen markiert
paged : Es wird nur die aktuelle Seite markiert

  • Optional
multiSelectBehavior: "filter"

selectAll boolean​

(Optional) Vorselektiert alle Zeilen.

selectAll?: boolean

  • Default: false
  • Optional
  • Ab Version: 20.6.1
selectAll: true
hinweis

Achtung, diese Option funktioniert nur, wenn select: true ist.

allowEdit boolean​

(Optional) Aktiviert den Editiermodus im Bearbeitungsmodus.

allowEdit?: boolean | (options: { rows: MultiTableRows, columns: MultiTableColumns }) => boolean

  • Default: false
  • Optional
allowEdit: false

Beispiel mit Callback:

allowEdit: function(options) {
    // options.rows
    // options.columns
    return options.rows.length > 0
}

allowDelete boolean​

(Optional) Löschen von Zeilen im Bearbeitungsmodus erlauben.

allowDelete?: boolean | (options: { rows: MultiTableRows, columns: MultiTableColumns }) => boolean

  • Default: true
  • Optional
allowDelete: false

Beispiel mit Callback:

allowDelete: function(options) {
    // options.rows
    // options.columns
    return options.rows.length > 0
}

allowInsert boolean​

(Optional) Einfügen von Zeilen im Bearbeitungsmodus erlauben.

allowInsert?: boolean | (options: { rows: MultiTableRows, columns: MultiTableColumns }) => boolean

  • Default: true
  • Optional
allowInsert: false

Beispiel mit Callback:

allowInsert: function(options) {
    // options.rows
    // options.columns
    return options.rows.length > 0
}

striped boolean​

(Optional) Tabelle im Zebra-Look.

striped?: boolean

  • Default: true
  • Optional
striped: true

border boolean​

(Optional) Tabelle umrahmen.

border?: boolean

  • Default: true
  • Optional
border: true

bordered boolean​

(Optional) Tabellenzellen umrahmen.

bordered?: boolean

  • Default: true
  • Optional
bordered: true

hover boolean​

(Optional) Zeile hervorheben wenn Maus darüber bewegt wird.

hover?: boolean

  • Default: true
  • Optional
hover: true

sticky boolean​

(Optional) Spaltenüberschrift und Option fixieren.

sticky?: boolean

  • Default: false
  • Optional
sticky: true

emptyMessage string​

(Optional) Meldung wenn keine Daten vorhanden.

emptyMessage?: string

  • Default: "Es wurden keine Treffer gefunden."

  • Optional

emptyMessage: "Es wurden keine Adressen hinterlegt"

pageSize number​

(Optional) Anzahl Einträge pro Seite.

pageSize?: number

  • Default: 10

  • Optional

pageSize: 30

pageSizes number[]​

(Optional) Auswahlmöglichkeiten der Anzahl Seiten.

pageSizes?: number[]

  • Default: [10, 25, 50, 100]

  • Optional

pageSizes: [10, 15, 20]

sortBy string​

(Optional) Vordefinierte Sortierspalte.

sortBy?: string

  • Default: ""
  • Optional
sortBy: "dateFrom"

sortAscending boolean​

(Optional) Sortierung aufsteigend?

sortAscending?: boolean

  • Default: true
  • Optional
sortAscending: false

filter​

(Optional) Vordefinierter Filter.

  • Default: ""
  • Optional

Filter als Suchbegriff​

Wird ein string übergeben, so wird dieser in der Sucheingabe angezeigt und danach gefiltert. Der User hat nun die Möglichkeit den Filter anzupassen.

filter?: string;
filter: "12345" // z.B. Rechnungsnummer

Vordefinierter Filter (Callback)​

Wird ein Callback als function oder string (globale Funktion) übergeben, so werden die Zeilen automatisch vor der Anzeige gefiltert. Der User hat weiterhin die Möglichkeit über die gefilterten Zeilen zu suchen.

filter?: (options:
    {
        row: MultiTableRow, 
        index: number,
        rows: MultiTableRows, 
        columns: MultiTableColumns,
        filter: (input: string): boolean
    }) => boolean;
Wichtig

Der Callback muss ein boolean zurückgeben!

Der options Parameter beinhaltet folgende Properties:

{
    // Die aktuelle Zeile
    row: MultiTableRow, 
    // Der aktuelle Zeilenindex
    index: number,
    // Alle Zeilen
    rows: MultiTableRows, 
    // Spalteninformationen
    columns: MultiTableColumns,
    // Hilfsfunktion zum Durchsuchen der aktuellen Zeile
    filter: (input: string): boolean
}

Einfaches Beispiel:

filter: function(options) {
    // Wenn someFlag in der aktuellen Zeile den Wert sichtbar hat, dann anzeigen.
    return options.row.someFlag == "sichtbar";
}
Verwenden der filter Funktion​

Der options Parameter bietet eine Hilfsfunktion, mit der die aktuelle Zeile durchsucht werden kann (Enthält Suche). Die Funktion benötigt hier als Parameter den Suchbegriff. Als Rückgabewert erhält man true , wenn der Suchbegriff gefunden wurde, false , wenn nicht.

Wichtig

Spalten vom Typ currency oder number werden formatiert geprüft (über documents.sdk.utils.formatNumber ). Möchte man beispielsweise nach 10000.95 suchen, muss nach "10.000,95" gesucht werden, bzw. der Wert vorher über documents.sdk.utils.formatNumber konvertiert werden.

filter: function(options) {
    return options.filter("some filter");
}

oder als string und Implementierung myGlobalFancyFilterFunction

filter: "myGlobalFancyFilterFunction";
function myGlobalFancyFilterFunction(options) {
    return options.filter("some filter");
}

showOptions boolean​

(Optional) Kopfzeile mit Filter und Seitenauswahl anzeigen?

showOptions?: boolean

  • Default: true
  • Optional
showOptions: false

showHeader boolean​

(Optional) Spaltenüberschrift anzeigen?

showHeader?: boolean

  • Default: true
  • Optional
showHeader: false

showFooter boolean​

(Optional) Fusszeileninformationen anzeigen (Seitenanzahl, Auswahl)?

showFooter?: boolean

  • Default: true
  • Optional
showFooter: false

showPagination boolean​

(Optional) Seitennavigation aktivieren?

showPagination?: boolean

  • Default: true
  • Optional
showPagination: false

removeButtonFocusable boolean​

(Optional) Soll der Löschen-Button über die Tab-Navigation erreichbar sein? Nützlich für Anwender die überwiegend mit der Tastatur arbeiten. Die Zeile kann somit über die Leertaste gelöscht werden.

removeButtonFocusable?: boolean

  • Default: false
  • Optional
removeButtonFocusable: false
tipp

Über das Tastenkürzel Shift+Entf kann auch eine Zeile gelöscht werden!

insertMode string​

(Optional) Wie soll sich die Eingabemaske bei Eingaben verhalten?

insertMode?: "auto" | "manual"

  • Default: "auto"
  • Mögliche Werte:

auto : Eine neue Zeile wird sofort hinzugefügt, sobald eine Eingabe getätigt worden ist (Standard).
manual : Eingabezeile muss mittels dem Einfügebutton hinzugefügt werden

  • Optional
insertMode: "manual"

showEmptyTable boolean​

(Optional) Soll die Tabelle angezeigt werden, auch wenn keine Daten vorhanden sind?

Standardmäßig wird eine Meldung angezeigt (siehe Option emptyMessage)

showEmptyTable?: boolean

  • Default: false
  • Optional
showEmptyTable: false

rowStyle string​

(Optional) Formatierungsoption für Zeilen

rowStyle?: string | (options: { row: MultiTableRow, rows: MultiTableRows, columns: MultiTableColumns }) => string

  • Default: ""
  • Optional
rowStyle: "color: #f00"

Erweitertes Styling

rowStyle: function(options) {
    var backgroundColor = options.row.amount > 1000 ? "#f00" : "#000"
    return "background-color: " + backgroundColor
}

html Object​

(Optional) Benutzerdefiniertes HTML.

html?: {
    header?: string | (options: { rows: MultiTableRows, columns: MultiTableColumns }) => string;
    footer?: string | (options: { rows: MultiTableRows, columns: MultiTableColumns }) => string;
}
  • Default: ""
  • Optional
html: {
    header: (options) => "<div>Anzahl Zeilen: " + options.rows.length + "</div>"
}

html.header string​

(Optional) Benutzerdefiniertes HTML oberhalb der MultiTable.

header: string

  • Default: ""
  • Optional
html: {
    header: (options) => "<div>Anzahl Zeilen: " + options.rows.length + "</div>"
}

html.footer string​

(Optional) Benutzerdefiniertes HTML unterhalb der MultiTable.

footer: string

  • Default: ""
  • Optional
html: {
    footer: (options) => options.rows.length > 0 ? "<div>Nur sichtbar wenn Zeilen vorhanden</div>" : ""
}

beforeDelete Function | null​

(Optional) Callback bevor die Zeilen gelöscht werden.

beforeDelete?: (options: {
    selectedRows: MultiTableRows;
    rows: MultiTableRows;
    columns: MultiTableColumns;
    removeSelectedRows: () => void;
}) => boolean | void
  • Default: null
  • Optional
  • Ab Version: 20.6.1

beforeDelete Synchrone Rückmeldung (ohne Rückmeldung)​

beforeDelete: function (options) {
    // Maximal eine Zeile darf gelöscht werden    
    return options.selectedRows.length == 1;
},

beforeDelete Synchrone Rückmeldung über window.confirm​

beforeDelete: function (options) {
    var message =
        options.selectedRows.length === options.rows.length
            ? "Möchten Sie alle Zeilen löschen?"
            : "Möchten Sie die " + options.selectedRows.length + " Zeile(n) löschen?";
    return window.confirm(message);
},

beforeDelete Asynchrone Lösung (z.B. über documents Bestätigungsdialog)​

In documents werden vom Benutzer bestätigte Dialoge mittels Callbacks (onOk) getriggert. Hierzu kann die Funktion options.deleteSelectedRows einfach als Parameter 'durchgeschleift' werden.

beforeDelete: function (options) {
    var message =
        options.selectedRows.length === options.rows.length
            ? "Möchten Sie alle Zeilen löschen?"
            : "Möchten Sie die " + options.selectedRows.length + " Zeile(n) löschen?";

    documentsContext.openConfirmationDialog("Löschen bestätigen", message, options.deleteSelectedRows);
},
vorsicht

Der Callback options.deleteSelectedRows kann nicht mehr aufgerufen werden, wenn bereits ein Rückgabewert übergeben wurde.

reorderable boolean (nur React-MultiTable)​

(Optional) Aktiviert die Möglichkeit, Spalten per Drag & Drop umzusortieren. Ist dieser Wert false, können keine Spalten umsortiert werden, unabhängig von der spaltenspezifischen reorderable-Option.

reorderable?: boolean | (options: { rows: MultiTableRows, columns: MultiTableColumns, table: MultiTableClientOptions }) => boolean

  • Default: false
  • Optional
reorderable: true

Beispiel mit Callback:

reorderable: (options) => options.rows.length > 0

resizable boolean (nur React-MultiTable)​

(Optional) Aktiviert die Möglichkeit, Spaltenbreiten per Drag & Drop zu verändern. Ist dieser Wert false, können keine Spaltenbreiten verändert werden, unabhängig von der spaltenspezifischen resizable-Option.

resizable?: boolean | (options: { rows: MultiTableRows, columns: MultiTableColumns, table: MultiTableClientOptions }) => boolean

  • Default: false
  • Optional
resizable: true

Beispiel mit Callback:

resizable: (options) => options.rows.length > 0

onReorder Function | null (nur React-MultiTable)​

(Optional) Callback Funktion, die nach einer Änderung der Spaltenreihenfolge aufgerufen wird. Kann genutzt werden, um die neue Reihenfolge am Nutzer zu persistieren.

onReorder?: (externalInterface: MultiTableExternalInterface, newOrder: Array<string>) => void
  • Default: null
  • Optional
onReorder: (externalInterface, newOrder) => {
    // Neue Reihenfolge speichern, ggf. weiterleiten
}

onResize Function | null (nur React-MultiTable)​

(Optional) Callback Funktion, die nach einer Änderung der Spaltenbreite aufgerufen wird. Kann genutzt werden, um die neue Breite am Nutzer zu persistieren.

onResize?: (externalInterface: MultiTableExternalInterface, columnName: string, newWidth: number) => void
  • Default: null
  • Optional
onResize: (externalInterface, columnName, newWidth) => {
    // Neue Breite speichern, ggf. weiterleiten
}

height string | number​

Definiert die maximale Höhe des Gadgets. Überschreitet das Gadget die Höhe, so wird ein Scrollbalken dargestellt.

height?: string | number
  • Default: null
  • Optional

Beispiel:

height: "200px"
height: 200 // -> "200px"

virtualization boolean (React only)​

Ermöglicht das performante Anzeigen eines Tables mit vielen Zeilen (>200)

virtualization?: boolean
  • Default: false
  • Optional
vorsicht

Das Virtualisierungs-Feature befindet sich noch in der Alpha und ist nicht bereit für den produktiven Einsatz.

fullscreen boolean (React only)​

Ermöglicht das Öffnen des MultiTable im Vollbildmodus.

fullscreen?: boolean
  • Default: false
  • Optional

multiInsert boolean (React only)​

Ermöglicht das Einfügen mehrerer Zeilen im Bearbeitungsmodus.

multiInsert?: boolean
  • Default: false
  • Optional

multiInsertColumns string[] (React only)​

Definiert, welche Spalten im Multi-Einfügen-Dialog zur Auswahl stehen. Wird die Option nicht gesetzt, werden alle bearbeitbaren Spalten angezeigt.

multiInsertColumns?: string[]
  • Default: undefined (alle bearbeitbaren Spalten)
  • Optional
multiInsertColumns: ["amount", "description"]

copyPaste boolean (React only)​

Ermöglicht Kopieren des MultiTable als Excel-Tabelle und Einfügen von Zeilen aus der Zwischenablage im Bearbeitungsmodus.

copyPaste?: boolean
  • Default: false
  • Optional

copyOnlyAllowed boolean (React only)​

Steuert, ob beim Kopieren des Templates nur Spalten berücksichtigt werden, die auch einfügbar sind (allowInsert !== false). Ist die Option false, werden alle sichtbaren Spalten kopiert.

copyOnlyAllowed?: boolean
  • Default: true
  • Optional
// Alle Spalten kopieren, auch solche mit allowInsert: false
copyOnlyAllowed: false

additionalParams Object (React only)​

Zusätzliche Parameter, die an den MultiTable übergeben werden können und in Callbacks zur Verfügung stehen.

additionalParams?: Record<string, unknown>
  • Default: undefined
  • Optional

rowFilter RowFilterCallbackHandler | null (React only)​

Ein Callback, mit dem Zeilen vor der Anzeige gefiltert werden können.

rowFilter?: (options: {
    row: MultiTableRow;
    rows: MultiTableRows;
    columns: MultiTableColumns;
    table: MultiTableClientOptions;
    index: number;
}) => boolean
  • Default: undefined
  • Optional