/

Individuelles Zellen-Rendering: Badges & Avatare

Vertrauenswürdiges HTML - farbige Status-Badges, Avatar-Vorschaubilder - innerhalb einer Grid-Zelle mit Xcrud::html() rendern, plus einfacheres bedingtes Zellen-/Zeilen-Styling mit highlight().

Warum column_callback() allein nicht ausreicht

column_callback($field, $fn) lässt Sie den Wert einer Zelle durch den Rückgabewert Ihres Callbacks ersetzen. Standardmäßig wird dieser Rückgabewert als reiner Text behandelt und escaped, genau wie jeder andere Wert - ein einfacher String wie '<span>Active</span>' würde also als wörtliche spitze Klammern erscheinen, nicht als gestyltes Element.

Umschließen Sie den Rückgabewert des Callbacks mit dem statischen Helfer Xcrud::html($html, $text = null), wenn die Zelle tatsächlich Markup rendern soll:

public static function html(string $html, ?string $text = null): array
ParameterTypStandardBeschreibung
$htmlstringerforderlichDas vertrauenswürdige Markup, das in der Zelle gerendert wird (clientseitig über innerHTML)
$text?stringnullKlartext-Fallback; wenn ausgelassen, standardmäßig $html mit entfernten Tags

$text ist das, was überall dort als Wert der Spalte zurückgereicht wird, wo gestyltes HTML keinen Sinn ergibt - CSV-/XLSX-/PDF-Export sowie Grid-Suche/-Sortierung - da diese kein farbiges <span> darstellen können.

Beispiel: ein Status-Badge

Ein gängiges Muster: eine status-Spalte mit einem column_callback() farblich codieren, das über Xcrud::html() eine kleine Pille zurückgibt:

$xcrud->column_callback('status', function ($value, $row) {
    $colors = [
        'active'   => '#16a34a',
        'pending'  => '#d97706',
        'canceled' => '#dc2626',
    ];
    $color = $colors[$value] ?? '#6b7280';

    $html = '<span style="background:' . $color . ';color:#fff;'
          . 'padding:2px 10px;border-radius:999px;font-size:12px;">'
          . htmlspecialchars(ucfirst($value)) . '</span>';

    return Xcrud::html($html, ucfirst($value));
});

Die Grid-Zelle zeigt die farbige Pille; ein CSV-/XLSX-/PDF-Export derselben Spalte zeigt stattdessen das reine Wort ("Active", "Pending", "Canceled"), und Spaltensuche/-sortierung funktionieren weiterhin gegen genau diesen reinen Text.

Der gleiche Ansatz funktioniert für einen Avatar - geben Sie einen <img>-Tag zurück (oder ein <span> mit Initialen in einem Kreis), umschlossen von Xcrud::html(), mit einem reinen Namen oder Initialen als $text-Fallback.

highlight() und highlight_row() - einfacheres bedingtes Styling

Wenn eine Zelle oder Zeile lediglich basierend auf einem Vergleich die Farbe wechseln soll - ohne eigenes Markup - ist highlight()/highlight_row() einfacher als ein vollständiger Callback:

public function highlight(string $field, string $operator, string $value, string $class): self
public function highlight_row(string $field, string $operator, string $value, string $class): self
ParameterTypStandardBeschreibung
$fieldstringerforderlichSpalte, gegen die die Bedingung ausgewertet wird
$operatorstringerforderlichGleiches Vokabular wie bei where(): Symbole oder eq/neq/gt/gte/lt/lte/contains/starts/ends
$valuestringerforderlichWert, mit dem das Feld verglichen wird
$classstringerforderlichCSS-Klasse, die bei zutreffender Bedingung angewendet wird
$xcrud->highlight('amount', 'gt', '100000', 'xcrud-hl-warn');
$xcrud->highlight_row('status', 'eq', 'canceled', 'xcrud-hl-muted');

highlight() wendet die Klasse nur auf die zutreffende Zelle an; highlight_row() wendet sie auf die gesamte Zeile an. Mehrere Regeln können auf dieselbe Zelle/Zeile zutreffen - ihre Klassen stapeln sich, statt sich gegenseitig zu ersetzen.