08ee1f20f5
Die DataTable kann jetzt je Spalte mehrere Filter-Werte pro Zeile (filterValues/Tokens) und eine eigene Option-Darstellung (filterOptionLabel). Die Kategorie-Spalte liefert als Tokens jede Ebene kumuliert (Klamotten, Klamotten -> kurze Hosen); so erscheint die Oberkategorie als eigener, anklickbarer Eintrag und selektiert alle Unterkategorien. Ober-Ebenen werden in Zelle und Dropdown kleiner/gedaempft dargestellt (CategoryPathLabel), das Blatt normal. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
24 lines
844 B
JavaScript
24 lines
844 B
JavaScript
/**
|
||
* Kategorie-Pfad mit subtil dargestellten Oberkategorien und normalem Blatt,
|
||
* z.B. „Klamotten →" klein/gedämpft und „kurze Hosen" normal. Wird in der
|
||
* Tabellenzelle und im Filter-Dropdown verwendet.
|
||
*/
|
||
export default function CategoryPathLabel({ parts, fallback = "–" }) {
|
||
if (!parts || parts.length === 0) return <span className="muted">{fallback}</span>;
|
||
const ancestors = parts.slice(0, -1);
|
||
const leaf = parts[parts.length - 1];
|
||
return (
|
||
<span className="cat-path">
|
||
{ancestors.length > 0 && (
|
||
<span className="cat-ancestors">{ancestors.join(" → ")} → </span>
|
||
)}
|
||
<span className="cat-leaf">{leaf}</span>
|
||
</span>
|
||
);
|
||
}
|
||
|
||
/** Aus einem Token-/Pfad-String die Teile gewinnen (Trenner " → "). */
|
||
export function pathParts(value) {
|
||
return String(value ?? "").split(" → ");
|
||
}
|